第八-九周-总结(day38-54)
HTML
一、html结构
h5默认的文档声明
html根标签
头标签
页面编码格式
所有的现代浏览器:谷歌/火狐/IE8+以上的/欧鹏浏览器/洋葱浏览器/
windows自带的edge 浏览器识别的编码:utf-8
窗口标题 指定的页面的窗口标题
内容标签等
二、文本标签
1、标题标签： h1-h6:从大到小。 文本
2、
：水平线标签，效果为分割线，分割前后两端内容
3、段落标签： 内容
。内容前后两端内容自动换行
4、换行标签
5、字体滚动标签: marquee。属性如下：
（1） behavior=“xx” 滚动方式。slide:滚动到某一边停止。scroll:穿梭滚动。alternate:来回滚动
（2）scrollamount="xx" 滚动速度。正整数值，值越大,速度越快
（3）direction="xx" 方向。默认值 left ：从右到左、right:从左到右、down:上到下、up:下到上
6、bgcolor="xx" 设置背景色
7、 文本内容
文本内容进行首行缩进
8、上标标签：XX
9、下标标签：XX
10、特殊转义字符：
©--- "©" 版权所有
&re----"®" 注册商标
代表一个空格
代表两个空格
> 代表>
< 代表<
< br/> 原文输出
,不输出换行
11、原样输出标签： XX
按照文本内容原样输出
12、设置字体加粗标签：
XX---对字体加粗，没有语义的强调
XX---有语义的强调
13、斜体标签：
XX：斜体，没有语义的强调
XX：斜体，没有语义的强调
14、字体标签：文本。属性如下：
1）color="XX"：字体颜色
2）size="XX" 字体大小
3）center: 居中
字体标签
三、列表标签
1、无序列表
- 内容
无序列表type属性：
type="disc" ：小黑圆圈
type="circle":空心原点
type="square":小正方形
2、有序列表
- 内容
有序列表type属性：
type="1":数字顺序排列
type="A"：字母顺序排列
3、列表分类
---定义列表
- 列表项的分类
- 具体列表内容1
- 具体列表内容2
- 具体列表内容3
四、超链接标签
超链接a标签
第一种用法:跳转到指定的另一个链接地址url(统一资源定位符)
属性1)url:
访问的外部资源地址
协议://域名:端口号/具体访问页面地址
跳转到百度的注册页面 端口号:如果是80端口,可以省略不写
访问当前项目下的01_html常用基础标签.html页面,url地址不带协议
属性2)target:打开资源文件的方式
_blank:新建窗口打开
_self:当前窗口直接打开(默认值)
第二种用法:
锚连接:在同一个页面或者不同页面上进行"书签"的一种标记
同一个面下：
1)创建跳转标记---相当于打一个"书签"
2)创建跳转链接---跳转到"书签上"
跳转指定位置
不同页面跳转指定的锚点(标记)
1)创建跳转标记---在另一个页面的某个位置打标记--相当于打一个"书签"
2)创建跳转链接---跳转到"书签上"
跳转指定位置
五、图像标签
一、图片
---一般存放在img文件中，使用相对路径
属性： ![]()
1、width = "10px" / height= "10px" ---照片宽度、高度。 width = "100%" ---铺满
2、title="文本" ---鼠标悬停在图片上时提示的文本文字
3、alt="文本" ---图片加载失败时提示的文字
4、align="xx" ---图片在浏览器中对其方式
（1）align="left" ---左对齐，默认
（2）align="center" ---居中
（3）align="left" ---右对齐
链接式图像：使用超链接将图像标签包起来,点击图像跳转到指定页面上
二、背景图片
---一般存放在img文件中，使用相对路径
注意事项:超链接标签的href属性以及图像标签的src属性="url地址"都会进行加载(加载url地址,如果是服务器地址,就需要向服务器再次发送请求)
六、表格标签
格式：
文本 ---表格上标题
姓名
年龄
张三
19
1、table：列表标签
table属性：
（1）:表格边框线粗细
（2）：表格在浏览器中对齐的位置，或者在行标签指定align:每一行单元格都居中
left ---浏览器上方左对齐，默认
center ---浏览器上方居中对齐
right ---浏览器上方右对齐
（3）：表格边框线和单元格间的空隙
（4）：控制单元格的内容和边框之间的间距
（5）：表格的背景颜色
（6）：表格宽度、高度
2、文本 ：表格上方的标题
3、tr：行标签。 ---行内容居中
4、th：行中的第一行表头内容，自动加粗居中
5、td：行中单元格具体内容
td属性：
（1）内容 ：5行进行合并
（2）内容 5列进行合并
6、子标签 caption:给表格设置标题元素
七、表单标签
用户录入"用户信息",通过"表单"将用户的数据提交给服务器,服务器去接收数据
录入的时候,表单中表单元素必须指定name属性,给后端进行标记用户输入实际内容
1、表单标签form格式
2、form属性
（1）action：
八、iframe画中画
url:连接点页面或者资源文件的统一资源定位符号
九、value属性和placeholder属性的区别
value:
在html表单元素中(文本输入框/密码输入框/复习框/单项按钮/下拉菜单....),这些元素的默认值;
结合js事件(获取焦点事件,输入的时候,就将这个默认值删除)
placeholder：
表单元素的新增属性, 字体灰色,当键入内容之后,就自动删除(效果)
十、get方式和post方式提交区别
（1)是否提交在地址栏上
get方式将数据提交到地址栏上的, action提交的地址url?key1=value1&key2=value2....(浏览器默认get提交)
post提交方式,不会将数据提交到地址栏上,在浏览器(F12--进入调试器)--->"网络"里面的负载 可以看到表单提交的数据 (post提交针对中文会出现乱码)
（2)是否适合私密数据提交
get提交方式,相对post来说不安全,地址栏是可以直接看到明文的敏感数据
post提交方式,相对get来说安全,地址栏不会直接看到具体内容;针对隐私数据,post提交的数据也需要加密
get/post提交的数据(密码等等)----加密的! md5加密(信息摘要算法) "123456" + 加盐 "qianfeng" 保证不会被破解
3)提交数据大小是否有限制
get提交方式,在地址栏上提交数据,提交数据大小有限制
post提交方式,是在浏览器中 网络中的请求头后面的负载里面可以直接不断去提交数据,没有大小限制
CSS
一、css概念
CSS:层叠样式表 Cascading Style Sheet。通过CSS给页面添加修饰效果
二、给标签添加样式使用方式
1、行内样式
超链接
style="样式属性名称1：样式值1；样式属性名称2：样式值2；..."
每一个html标签都有属性style（样式），一次只能控制一个标签。适用于在局部位置设置某个标签样式
2、内联样式（css内部方式）
XXX
超链接
弊端：html标签和css代码混合使用，不利于后期项目维护
3、外联方式(CSS外部样式)
（1）
xxx
（2）
1）在css文件夹中新建一个.calss文件
2）使用 css选择器{
样式属性名称1:值1;
样式属性名称2:值2;
...
}
3)在当前页面导入css文件
rel="stylesheet" ---固定格式，必须写,"关联样式库中样式"
4、在当前html页面中导入css样式， 在head标题体中
（1）
（2）
三、CSS选择器
优先级： id选择器 > class类选择器 > 标签名称选择器
1、标签名称选择器
标签名称{
样式名称1：值1 ;
样式名称2：值2 ;
}
2、class（类）选择器
.class属性值{
样式名称1：值1 ;
样式名称2：值2 ;
}
3、id选择器
#id属性值{
样式名称1：值1 ;
样式名称2：值2 ;
}
在标签中指定id属性="id值"(不能以数字开头,字母开头)
id属性值在同一个html页面中,必须是 "唯一的"
4、子元素选择器
选择器1 选择器2{
样式名称1：值1 ;
样式名称2：值2 ;
}
选择器2选中的标签是选择器1选中标签的子标签
5、并集选择器
选择器1,选择器2,选择器3....{
样式名称1：值1 ;
样式名称2：值2 ;
}
6、伪类选择器
1、标签的四种状态：
(1)、 link：鼠标没有访问标签的状态
(2)、 hover：鼠标经过这个标签的状态
(3)、 active：鼠标点击且没有松开的状态
(4)、 visited：鼠标已经点击访问过的状态
visited升到放在link之后才能循环使用
伪类名称对大小写不敏感
2、伪类选择器格式
选择器名称(标签名称/class/id):状态名称{
样式名称:值;
...
...
}
背景的简写属性:
background:background-color background-image background-repeat backgound-position;
示范 background: darkgray url(img/index_right.jpg) no-repeat top center;
必须严格按照顺序
2、CSS背景属性
1、background-color：背景颜色
2、background-image: url(图片文件地址)
3、background-repeat：背景图片是否重复，如何重复
（1）background-repeat，默认，图片尺寸达不到当前屏幕分辨率，x轴/y轴都重复
（2）background-repeat-x：x轴重复
（3）background-repeat-y：y轴重复
（4）background-no-repeat:不重复
4、background-attachment:背景附着: 设置fixed 固定,图片不会随着页面滚动而滚动
5、background-position:设置背景图像的起始位置,默认左上对齐
top left
center center
bottom right
background: red url(xxx) no-repeat top center
五、CSS文本样式
1、文本颜色：color
2、文本对齐方式:text-align
（1）tetx-align：left---左对齐，默认
（2）text-align：center---居中
（3）text-align：right---右对齐
3、文本装饰:text-decoration
text-decoration：onoe---删除链接的下划线
text-decoration：underline---设置下划线
text-decoration：voerline---上划线
text-decoration：line-through---中划线
4、文本字符间距
（1）letter-spacing：10px
（2）word-spacing：20px 两个字组成一个词
5、大小写转换：text-transform
text-transform：uppercase ---转换成大写字母
text-transform：lowercase ---转换成小写字母
6、文本缩进 textt-indent：10px ---指定文本第一行缩进
7、行高 text-height：20px
六、CSS字体样式
1、字体格式 font-family=“黑体”
2、字体类型 font-style
（1）font-style：normal 默认字体类型
（2）font-style：italic 斜体
（3）font-style：oblique 斜体
3、字体粗细 font-weight：10px bold：等价于700
4、字体大小 font-size：20px
font的简写
font：字体类型 字体粗细 字体大小 字体格式 ---按顺序
font：italic bold 20px “仿宋”
七、CSS边框样式
1、边框颜色
（1）border-top-color：上边框颜色
（2）border-bottom-color：底边框颜色
（3）border-left-color：左边框颜色
（4）border-right-color：右边框颜色
2、边框宽度
（1）border-top-width：上边框宽度
（2）border-bottom-width：底边框宽度
（3）border-left-width：左边框宽度
（4）border-right-width：右边框宽度
3、边框样式
（1）border-top-style：上边框样式
（2）border-bottom-style：底边框样式
（3）border-left-style：左边框样式
（4）border-right-style：右边框样式
边框样式值：solid（单实线）、double（双实线）、dashed（虚线）、dotted（点）
border的简写属性
border：边框宽度 边框样式（必须有） 边框颜色 ---按顺序
border：10px solid red
八、CCS列表样式
一、无序列表
1、列表标记类型
（1）list-style-type：none ---去掉列表项前面的标记
（2）list-style-type：square ---小黑正方形
（3）list-style-type：circle ---空心圆点
（4）list-style-type：disc ---小黑圆圈，默认
2、将图片指定为列表标记项 list-style-image
list-style-image；url（图片地址）
3、display-inline 设置到同一行上
li {
display: inline;
}
浮动列表项
创建水平导航栏的另一种方法是浮动 元素，并为导航链接规定布局：
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
4、border-collapse 属性设置是否将表格边框折叠为单一边框： collapse:合并
九、浮动
浮动和清除
CSS float 属性规定元素如何浮动
CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动
float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。
float 属性可以设置以下值之一：
left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值
clear 属性可设置以下值之一：
none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
inherit - 元素继承其父级的 clear 值
十、CSS定位
定位属性:position 也可以进行部分内容的布局
position:绝对定位 absolute:根据当前元素的父元素进行移动的
相对定位 relative:根据之前元素的位置进行移动的方式
固定定位 :fixed:永远在页面中指定位置,不会随着滚动而滚动
top:整个元素向下移动
left:整个元素向右移动
盒子模型
概念：
（1）将任何标签都看成盒子,整个页面布局大体方向先使用div将内容包裹起来,形成 "层级" ,一个页面分成了很多块。给div加入id/class等选择器,通过css样式属性精准控制
（2块级元素:
div 占一行标签
h1-h6 占一行内容
（3行级元素:
（4）将html页面中任何标签 看成一个"盒子"
容量:width/height
厚度: 边框 border
内边距:padding 盒子的内边距: 边框和内容之间的距离(上右下左)
外边距:margin 盒子和盒子之间的距离:通过外边距让整个盒子进行移动!
---导入外部css样式
框架标签
概念：
框架标签:frame,一个frame包含一个html页面
如果整个页面结构并非一个html组成,而是两个或者两个以上的html页面组成,需要使用框架集frameset
一、框架
frame:框架标签。
src="链接到html页面地址"
name="给框架标签起名称"
frameset框架集。不能和body共存
二、菜单页面-menu
三、中间主页面-main
四、头部页面-header
font、boostrap框架引入
一、使用方式
1)将font图标库的css文件夹和font文件夹放在前端项目下
2)将boostrap前端框架这里面所有css文件夹的内容以及font文件夹的放在当前项目下
3)首先页面中导入boostrap全局样式boostraom. min.css（压缩版）
4)在head标题体中导入第三方提供的 font-awesome.min.css图标样式
二、样例
（1）
导入css样式
（2）
学生信息表
姓名
操作
高圆圆
boostrap提供按钮样式
class="btn btn-primary" 深蓝色(首选项效果)
class="btn btn-danger" 危险图标
boostrap
jsp中导入boostrap样式
//导入bootstrap的css样式
//导入js库,需用用到boostrap框架js插件,在导入boostrap.min.js之前,先导入Jquery
boostrap格栅
1)布局容器
class="container":容器:是固定宽度并且支持响应式布局
class="container-fluid":容器:是支持width,100%(占整个视口宽度)
2)行 class="row"
3)行定义列 column class="col-设备编号-所占的列数量"
设备编号:
xs :超小桐木 手机 <768px
sm :小屏幕 平板>=768px
md :中等屏幕 桌面显示器 (≥992px
lg :大屏幕 大桌面显示器 (≥1200px)
class ="table-bordere" 设置边框
boostrap表格样式
class="table"基本表格样式
class="table-striped" 斑马条纹样式
class="table-bordere" 为单元格增加边框
class="table-hover " 鼠标悬浮在上面有样式效果
class="table-condensed" 紧缩表格
class="table-responsive" 响应式表格,视口尺寸小于768像素开始出现水平滚动条,大于768px水平滚动条消失
给tr行上加入的的样式
class="active": 鼠标悬停在行或单元格上时所设置的颜色
class="success"成功标识的颜色
class="danger"成功标识的颜色
商品编号
商品名称
1
小米p10
2
小米p10
boostrap表单样式
class="form-horizontal" 设置表单水平排列表单
laber元素和input组件在一行上
class="form-group" 包含laber和input或者select下拉菜单
class ="form-control" :将input元素或者select或者textarea设置为100%宽度
boostrap按钮样式
class="btn btn-default" 默认样式按钮
class = "btn-group"按钮组,将所有的按钮放在 同一行上
boostrap导航条
nav:导航组件:水平导航条
class="navbar navbar-default":导航条样式
boostrap分页
URL和URI
url:统一资源定位符 是URI的子集
http://localhost:8080/day38_HTML_CSS/01_html%E5%B8%B8%E7%94%A8%E5%9F%BA%E7%A1%80%E6%A0%87%E7%AD%BE.html
URI:定位符: 前面没有带协议
/day38_HTML_CSS/01_html%E5%B8%B8%E7%94%A8%E5%9F%BA%E7%A1%80%E6%A0%87%E7%AD%BE.html
URI的范围大于url
URI--->/web项目名称/资源文件名称
/day38_HTML_CSS/---->web项目的上下文路径(Application Context)
web项目一般都需要带上 "上下文路径名称",防止前端请求会出现404:一般页面地址找不到
JavaScript
JavaScript的变量定义及类型划分
javascript(js):属于弱类型语言 (语法不严谨)
1)定义变量使用var定义 ,可以重复定义变量
2)var可以定义任何类型,而且可以省略
js类型划分:
基本类型 引用类型
(整数/小数)number 数值类型 提升为 内置对象:Number:数值对象
(双引号括起来的/单引号括起来的)String 提升为 内置对象:String:字符串对象
boolean类型 提升为 内置对象:Boolean
object类型 创建对象 提升为 内置对象Object:所有js对象的模板
undefined 未定义类型 (没有意义)
js内置的常用函数:
给浏览器输出内容
document.write(输出内容) ;
console.log(输出内容):在浏览器-f12---控制台里面的日志信息
查看变量的数据类型
typeof(变量名)
js经常测试:是否能够获取数据通过弹框的方式
window.alert(对话提示框)
JavaScript运算符及流程控制
与java不同点：
1、switch(表达式){ //switch中case语句,在js可以跟变量,而java中只能是常量
case 变量/常量:
语句1;
break;
case 变量名2/常量名2:
语句2;
break ;
....
default:
语句n;
break ;
}
2、for-in语句: 遍历数组或者性
for(var 变量名 in 数组对象名称或者对象名称){
使用这个变量名即可;
}
for(var i in strArray){
document.write(strArray[i]+" ") ;
}
3、 var a = 3 ;
var b = 4 ;
//不取整
document.write("(a/b):" + (a/b)) ;
4、
//定义字符串数组
创建数组格式
arrayObj = new Array() ; 不给数组长度
arrayObj = new Array([size]) 给定长度
arrayObj = new Array([element0[, element1[, ...[, elementN]]]])
简写
arrayObj = [element0[, element1[, ...[, elementN]]]] ;
var strArray = ["JavaEE","MySql","Redis","JavaScript","Jdbc"] ;
与java相同点
算术运算符 ：+,-,*,/,%
赋值运算符: =,+=,-=.....
逻辑运算符
&,|,^,逻辑非!
&&:连接的表达式左边为false,右边不执行
||:连接表达式左边为true,右边不执行
比较运算符<=,>=,==,<,>....
三元(三目运算符)
(条件表达式)?执行成立的结果:执行不成立的结果;
流程语句
顺序结构语句
选择结构:
if()
if()...else{}...
if()...else if()... else{}
循环结构语句
for(var 变量名= 值;条件表达式;步长语句){
循环体语句
}
var 变量名 = 值;
while(条件表达式){
循环体语句;
步长语句;
}
do{
循环体语句;
步长语句;
}while(条件表达式) ;
for-in语句: 遍历数组或者性
for(var 变量名 in 数组对象名称或者对象名称){
使用这个变量名即可;
}
Person对象---name属性和age属性
var 数组名称= new Array([元素1,元素2....]) ;
等价于
var 数组清除 = [元素1,元素2....] ; 静态初始化
JavaScript比较运算符(不同点)
a==b
a===b
=== 和 == 的区别
===:比较两个引用,==比较两个值
比较两个值的时候不考虑数据类型
JavaScript函数
js定义函数的格式固定的写法:
function 函数名称(形参名称1,形参名称2...){
//方法体内容
1.可以直接return 结果; 带有返回值;
2.可以直接输出document.write(xxx)
}
调用函数
var 结果 = 函数名称(实际参数列表) ; 有返回值的直接接收,使用它
定义函数注意事项:
1)定义函数的时候,形式参数不能携带var,直接参数名称即可
2)js弱类型语言,没有函数重载的概念,后面定义的函数将前面的函数覆盖
3)当实际参数个数小于形式参数个数,结果就是NaN(没值),但是依然会调用
4)实际参数个数大于形式参数个数,结果将前面的实际参数进行赋值计算
5)函数里面数组---arguments,将实际的值绑定给形式参数
JavaScript常见弹窗函数
window均可以省略
window.alert("信息") 只有一个确定的弹窗
window.confirm("你好");
他的返回值是boolean，当点击“确定”时，返回true，无论点击“取消”还是右上角的那个“X“关闭，都返回false
prompt弹窗
window.prompt("你爱学习吗？","爱");
第一个参数是提示信息，第二个参数是用户输入的默认值。
当你点击确定的时候，返回用户输入的内容。当你点击取消或者关闭的时候，返回null
JavaScript事件
事件编程的三要素
1、事件源--特定的html标签 如：button按钮具备点击事件
2、事件监听器--编写一个函数
3、绑定事件监听器到事件源上
通过标签一些特定的属性将上面的函数进行绑定
一、和点击相关的事件
1、单击 onclick
方式1:
function click(){
alert（“触发单击事件”）；
}
方式2:
dom操作，获取id=“btn”的input标签对象
var inputObject = document.getElementById（“btn”）；
使用对象名.onclick属性
inpuitObj.οnclick=function（）{
alert（“触发单击事件”）；
}
2、双击ondblclick
;
定义触发函数
function.mydbllclick(){
alert（“触发双击事件”）；
}
二、和焦点相关事件
3、获取焦点 onfocus（输入数据）
用户名：
4、失去焦点onblur（输入数据完毕，到输入框外面）
用户名:
//定义函数
function myBlur（）{
//获取文本输入框的内容
var username = document.getElementById("username") ;
var span = document.getElementById("spanTip") ;
if（username！= “张三”）{
//匹配失败，给span标签设置标签文本innerHTML属性
span.innerHTML = “不符合格式”.fontcolor（“red”）；
}else{
//匹配成功
span.innerHTML="√".fontcolor("green") ;
}
}
普通纯文本 innerText :不能渲染html标签，原样输入内容
标签文本 innerHTML:可用渲染html标签
三、选项卡发生变化事件onchange
onchange：下拉菜单，选择的时候。元素就会改变 onchange
籍贯：
//定义函数，html元素改变，就会触发onchange指定的函数
function myChange（）{
//通过id=“province” 获得select标签对象
var pro = document.getElementById("province") ;
//获取选择的内容的value属性
var province = pro.value ;
//获取当前id=“city”的select的标签对象
var city = document.getElementById("city") ;
//每一次选项卡变化之前,清空掉上一次内容
city.innerHTML=“”;
if("陕西省"==province){
//创建城市数组--陕西省城市
var cityArr = ["西安市","咸阳市","宝鸡市","渭南市"] ;
//遍历
for(var i = 0 ; i < arr.length ; i ++){
//设置city所在的select标签对象的option标签--- 作为select的innerHTML
city.innerHTML+= "" ;
}
}
//创建城市数组--山西省城市
if("山西省"==province){
//js创建数组
var arr = ["太原市","运城市","大同市","晋中市"] ;
//遍历
for(var i = 0 ; i < arr.length ; i ++){
//arr[i]每一个城市
//设置city所在的select标签对象的option标签--- 作为select的innerHTML
city.innerHTML += "" ;
}
}
四、鼠标相关事件
6、鼠标经过onmouseover / 移出 onmoueout
经过这个区域,打开一个页面
var myTaskId ;
//定义函数新建窗口打开02_函数的应用.html
function opennewUrl(){
window.open("02_函数的应用.html","_blank") ;
}
//定义函数每隔5秒执行一次函数opennewUrl（）
function openInterVal(){
myTaskId = window.setInterval("opennewUrl()",5000) ;
}
//定义函数取消定时任务
function clearMyTask(){
//window对象---clearInteval(任务id) ; 取消定时任务
window.clearInterval(myTaskId) ;
}
//鼠标经过，打开链接
function myMouseOver(){
top.location.href="01_js事件变成三要素.html" ;
}
//鼠标移出，每隔3秒打开一个页面
function myMouseOut(){
myTaskId = window.setInterval("opennewUrl()",3000) ;
}
js完成 页面跳转(打开url)
1)window.open("url","打开资源文件方式")
window.open("02_函数的应用.html","_blank") ;
2)window.location.href="重新载入url地址" 新的窗口
top.location.href 在当前页面中直接将当前页码覆盖,打开一个新的页面
top.location.href="01_js事件变成三要素.html" ;
五、页面载入事件onload
浏览器将body内容加载完毕就会触发 onload事件
function myInit(){
alert("载入事件触发了")
}
JavaScript自定义对象
打开窗口
1.新页面弹出一个窗口
top.location.href="01_js事件变成三要素.html" ;
2.当前页面打开一个窗口
window.location.href="01_js事件变成三要素.html" ;
确认提示框 window.confirm("str"),返回一个boolean型的值
function deleUser(uid){
var flag = window.confirm("是否要删除");
if(flag){
window.location.href="${pageContext.request.contextPath}/delUser?uid="+uid ;
}
}
var–let–const的区别
let和const是ES6新增的声明变量的关键词，之前声明变量的关键词是var。
let:
1.var定义的变量，可以预解析提前调用的结果是undefined，let定义的变量不能预解析，提前调用的结果是 报错。
2.var定义的变量，变量名称可以重复，效果是重复赋值，let定义的变量不能重复，否则执行报错。
3.var定义的变量作用域是全局/局部作用域。let定义的变量如果在{}中只能在{}中调用。
4.在循环语句中var定义的循环变量和使用let定义的循环变量。执行原理和执行效果不同。
const:
1.var定义的变量，可以预解析提前调用的结果是undefined，const定义的变量不能预解析，提前调用的结果是 报错。
2.var定义的变量，变量名称可以重复，效果是重复赋值，const定义的变量不能重复，否则执行报错。
3.var定义的变量作用域是全局/局部作用域。const定义的变量如果在{}中只能在{}中调用。
4.const 定义的变量存储的数据数值不能改变，也就是const定义的变量，不能重复赋值。
使用const声明常量，一旦声明，就必须立即初始化,const声明常量，允许在不重新赋值的情况下修改它的值（基本数据类型不可，只有引用数据类型可以，引用类型引用的是地址不是值）
DOM编程
基于Document Object Model:文档对象模型编程
将html文档每一个封装"标签对象",自己的属性,自己的函数,完成表单校验
dom核心:
1)获取指定的标签对象
2)改变标签对象的属性
一、获取标签对象
Title
//document集合属性:
//links:获取带有href的a标签对象 以及area标签(热点域)
//获取第一个a标签对象
var aNode = document.links[0] ; //集合属性
//获取它的父节点
var bodyNode = aNode.parentNode ;
//childNodes:所有子节点
var nodes = bodyNode.childNodes ;
for(var i = 0 ; i < nodes.length ; i ++){
alert(nodes[i].nodeName) ;
}
var first = bodyNode.firstChild ;//第一个子节点
通过id获取标签对象
var 对象名= document.getElementById（“id”）;
//添加文本内容
对象名.span.innerHTML =“xxx“；
获取通过标签对象获得标签属性
var 对象名= document.getElementById(“id”).value;
通过标签名找到 HTML 元素
方法：getElementsByTagName("合法的元素名");
通过类名找到HTML 元素
方法：getElementsByClassName("class属性的值")
修改css属性
Hello World!
定时器
JavaScript定时器
定义定时器：
setInterval('调用函数',毫秒时间)：每间隔固定毫秒值就执行一次函数
setTimeout('调用函数',毫秒时间)：在固定时间之后执行一次调用函数
关闭定时器：
clearInterval(定时器名称)
clearTimeout(定时器名称)
window.setInterval()
setInterval("generateTime()",1000) ;//每隔1秒执行这个函数一次
JavaScript 内置对象字符串
字符串定义方式
var str1 = new String("hello");
var str2 = "jack";
字符串比较
==：默认比较地址值
str1==str2
valueOf():返回指定对象的原始值
str1.valueOf() == str2.valueOf()
正则表达式
js的正则表达式基本语法；
x后面带上符号：x代表任意字符
数量词
x+：x字符出现1次或者多次
X？：x字符出现0次或1次
X*：x字符出现0次或者多次
范围
x{n}：x恰好出现n次
x{n,}：x字符至少出现n次
x{n，m}：x字符至少出现n次，不超过m次
x[a-z]：x字符为a-z的小写字母
\d ：0-9的数字字符
\w : 匹配下划线的任意单词字符。等价于[A-Za-z0-9_]
创建一个正则规则：基本语法
不完全匹配
var 正则对象名 = /基本语法/； 不完全匹配
完全匹配
var 正则对象名 = /^正则语法$/； 精确匹配
^:输入匹配规则的开始位置：以指定的字符开头
$:输入匹配的结束位置：以指定的字符结尾
内置的方法：
var 结果变量 = 正则对象名.test(字符串)；true匹配成功，false匹配失败
var str = “waha123”;
var reg = /^[a-z0-9]+$/ 代表：a-z0-9的字符出现1次或者多次
if（reg.test（str））{
//匹配成功
}else{
alter("匹配失败")
}
修饰符:
i 执行对大小写不敏感的匹配
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
m 执行多行匹配
方法:
exec() 方法：检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回
null
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life a
正则表达式表单校验-onsubmit事件
Servlet
Servlet概念
Servlet:Server Applet:服务器连接器(java语言编写的服务端程序)
必须应用在应用服务器(web容器,tomcat/jetty/apache Http服务器...)
Servlet的本质:
习惯称为:一个能够实现javax.servlet.Servlet接口的类
servlet作用
1、接收前端的发送的请求
2、解析请求，完成服务端程序的登录/注册等并响应给客户
使用Servlet步骤
1)需要导入servlet的核心jar包
javax.servlet-api-4.0.1.jar
javax.servlet-api-3.1.0.jar
或者tomcat的解压目录lib---servlet-api.jar包
2)创建一个类(具体类),继承Servlet接口的抽象的子实现类(HttpServlet)
3)重写HttpServlet里面的两个方法
doGet(请求对象,响应对象):接收前端的get请求
doPost(请求对象,响应对象):接收前端的post请求
4)配置Servlet: 在WEB-INF的web.xml文件(网站全局配置文件)
MyFirstServlet
com.qf.servlet_01.MyFirstServlet
MyFirstServlet
/first
5)默认get接收前端请求:
@Override
//HttpServletRequest\HttpServletResponse http底层网络协议创建HttpServletResponse/HttpServletRequest对象
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//本质就是设置一个响应头:content-type:text/html;charset=utf-8
resp.setContentType("text/html;charset=utf-8");
//浏览器中输入地址:http://localhost:8080/day41_Servlet_Jsp_Web_exploded/first
System.out.println("进入到了MyFirstServlet") ;
//服务器端给浏览器响应一句话:HttpServletResponse
resp.getWriter().write("响应成功了!"); //有中文,解决响应的中文乱码
}
tomcat 怎么将请求精确转发给 servlet
web项目通过压缩成war部署到Tomcat服务器上 Serv实现子类对应out中xx.class文件
tomcat 怎么将请求精确转发给 servlet ？
一个 tomcat 下有好多个 servlet，那 tomcat 是怎么请求精确转发给 servlet 的呢？
tomcat 根据 URL 先确定转发给 webapps 下的哪个项目，再确定转发给项目中的哪个 servlet。
RL：http://localhost:8080/ch06-cookies/checkcookie.do
通信协议：http://（使用 http 通信协议）。
服务器IP：localhost (本地)。
端口号：8080 （tomcat 对应的 socket 的端口号默认是8080，大家常说的 tomcat “监听” 8080 端口）。
uri：/ch06-cookies/checkcookie.do （tomcat 用这部分判断是要将请求转发给哪个 servlet）。
webapps 下的项目名字：ch06-cookies
项目中的 servlet：checkcookie.do
在 tomcat 的 webapps 目录下，存放的项目文件结构是有要求的。
（1）webapps 目录下，每一个文件夹就是一个单独的 web 项目，文件夹的名字会作为 uri 的起始
确定了项目，接下来就是确定请求该转发给哪个 servlet
day41_Servlet_Jsp_Web_exploded 项目内部文件结构：
day41_Servlet_Jsp_Web_exploded
├── WEB-INF
│ ├── classes
│ │ └── com
│ │ └── qf
│ │ ├── CheckCookie.class
│ │ └── CookieTest.class
│ └── web.xml
├── cookieresult.jsp
└── form.html
web项目通过压缩成war部署到Tomcat服务器上 Serv实现子类对应out中xx.class文件
每个项目下都必须有有个 web.xml 文件，它被叫做（Deployment Descriptor，DD），里面定义了路径和 servlet 的对应关系
web.xml:
Ch6_Check_Cookie
com.example.CheckCookie
Ch6_Check_Cookie
/checkcookie.do
http://localhost:8080/ch06-cookies/checkcookie.do 请求会被转发给 CheckCookie servlet 来处理。
Servlet执行流程
Servelt的生命周期
Servelt接口有关生命周期的方法：
1、 初始化init
public void init(ServletConfig config) throws ServletException;
初始化参数ServletConfig，可以直接获取到web.xml的配置文件信息
Servelt的抽象子类:GenericsServlet未做任何实现（private transient ServletConfig config;定义ServletConfig不可序列化）
GenericsServlet的抽象子类HttpServlet未做任何实现
2、服务端应用程序的入口 service
public void service(ServletRequest req, ServletResponse res)
throws ServletException, IOException;
被抽象子类HttpServlet做了具体实现，里面实现了doxx方法
子类需重写该方法
3、销毁destroy
public void destroy();
自定义类可以实现这个方法
servlet销毁:服务器(web容器)正常关闭,就会标记当前这个servlet,被jvm进行对象回收
Servelt的初始化加载
服务器启动时不创建实现子类对象，前端发送请求给服务器时才创建
该类加载只执行一次，只有一个实例，单例。
初始化方法init(ServletConfig)以及构造方法都执行一次:
Servlet-->单例设计模式(线程不安全的，可以被多个浏览器同时访问) :在内存中始终只有一个对象
1、第一次访问 当前端访问时：
inti方法被调用：初始化该类， service方法被调用
2、第二次访问
只调用service方法 service方法不断被调用
底层方法:获取前端提交方式,判断前端是GET,还是Post请求,执行不同
doXXX()方法;直接覆盖doXXX方法,完成自己的逻辑
初始化时机:在访问Servlet的时候创建
想要服务器一启动就进行初始化该类（Servlet），需要在配置文件中进行设置
1
web.xml文件配置参数说明
1、全局参数
encoding
utf-8
2、servet的基本配置
//serlvet的名称:可以自定义名字或则和你定义的Servlet的类名一致
MyFirstServlet
//当前servlet的全限定名称，用于Tomcat通过反射获得当前类的字节码文件并调用方法
com.qf.servlet_01.MyFirstServlet
3、servlet的映射配置mapping
//必须和上面的serlvet-name一致
MyFirstServlet
/*前端请求服务器的路径
必须以"/开头"
精确匹配,具体前端请求的路径, /名称
*/
/first
4、初始化配置参数：放在load-on-startup上面
类一加载，立马就会加载上下文的地址，地址中加载资源文件
path 上下文地址
D:\EE_2302\day41\hello.java 资源文件
encoding
utf-8
5、配置servlet的初始化时机参数,一启动web容器就加载（原先web容器启动时不初始化，客户端访问时才初始化）
1
ServletConfig配置对象
web.xml文件
初始化配置参数：类一加载，立马就会加载上下文的地址，地址中加载资源文件
path 上下文地址
D:\EE_2302\day41\hello.java 资源文件
可以有多个初始化参数
ServletConfig接口：servlet配置对象，可以获得web.xml文件里面的配置系信息
作用:可以获取Servlet配置信息中init-param:初始化参数
获取ServletConfig
GenericsServlet中个方法可以直接拿到ServletConfig，
浏览器发请求--解析servlet--->顶层父类可以直接获取到Servletconfig
被自定义类继承
public ServletConfig getServletConfig() {
return config;
}
private transient ServletConfig config;
ServletConfig config = this.getServletConfig();
方法1：一次获取一个配置信息
可以获取Servlet配置信息中初始化参数：init-param
ServletConfig中方法 public String getInitParameter(String name)
可以获取Servlet配置信息中init-param:初始化参数
param-name :初始化名称
param-value :初始化值
String pathValue = config.getInitParameter("path");
方法2：一次获获取所有初始化参数名称
ServletConfig接口中方法，被自定义类继承（servlet）
//Enumeration迭代器
public Enumeration getInitParameterNames();
//获取所有初始化参数名称,遍历参数名称,通过参数名称获取参数值
Enumeration en = config.getInitParameterNames();
while(en.hasMoreElements()){
String paramName = en.nextElement();
//public String getInitParameter(String name)
String paramValue = config.getInitParameter(paramName);
}
用于框架中读取配置文件
类一加载，立马就会加载上下文的地址，地址中加载资源文件
path 上下文地址
D:\EE_2302\day41\hello.java 资源文件
方法3：String servletName = config.getServletName();
获取servlet的名称，及当前的类
ServletContext接口
ServletContext接口：代表整个web Application :全局对象 无实现子类，唯一父类Object
作用:
获取ServletContext对象
GenericsServlet中getServletContext（）方法
public ServletContext getServletContext() {
ServletConfig sc = getServletConfig();
if (sc == null) {
throw new IllegalStateException(
lStrings.getString("err.servlet_config_not_initialized"));
}
return sc.getServletContext();
}
ServletContext context = this.getServletContext();
1)获取全局参数--开发中 使用context-param获取全局参数读取核心配置文件
xxx
xxx.properties/xx.xml
contextConfigLocation
/WEB-INF / root-context.xml
2)获取上下文路径 String getContextPath()
String contextPath = request.getContextPath();
//接收get请求
@Override
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
//统一这块处理post乱码
//请求服务器的时候,服务器端将请求过来的中文解决
//1)获取ServletContext对象:
ServletContext context = this.getServletContext();
// public String getInitParameter(String name);
String encoding = context.getInitParameter("encoding");//全局参数
request.setCharacterEncoding(encoding);
//获取到用户名登录的信息 用户名和密码
//HttpServletRequest--->public String getParameter(String name);
//参数:表单提交的表单元素的里面的name属性值
// http://localhost:8080/day41_Servlet_Jsp_Web_exploded/context1?username=hello&password=123
//get请求,提交数据有中文,不会乱码
String username = request.getParameter("username");
String password = request.getParameter("password");
//2)ServletContext获取上下文路径
//public String getContextPath();
String contextPath = context.getContextPath();
//简写格式:请求对象HttpSevletRequest里面-->public String getContextPath(); 动态获取上下文路径
String contextPath = request.getContextPath();
response.setContentType("text/html;charset=utf-8");
response.getWriter().write("用户未登录");
}
//接收post请求
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取前端提交的数据的方式通用的
//post提交的是,中文有乱码的
/*String username = req.getParameter("username");
String password = req.getParameter("password");
System.out.println("登录的用户名是:"+username+",密码是:"+password);*/
//get请求或者post请求获取前端提交数据都是一样,直接复用
doGet(req,resp);
3)请求转发
4)域对象：在不同servelt之间进行数据传输
请求/响应解决中文乱码
请求解决中文乱码
encoding
utf-8
ServletContext context = this.getServletContext();
String encoding = context.getInitParameter("encoding");//获取全局参数
request.setCharacterEncoding(encoding);
1. request.setCharacterEncoding("utf-8");
同时设置服务端的编码格式和客户端响应的文件类型及响应时的编码格式
响应解决中文乱码
2. response.setContentType("text/html;charset=utf-8");
域对象
域对象:在不同servlet之间进行"数据传输"(数据共享)
Servlet+jsp :jsp本质就是Servlet
1、PageContext page域 在某一个jsp(java server Page)有效
2、HttpServletRequest :请求对象: 在一次请求有效 (请求对象) 使用居多
3、HttpSession session会话 : 在一次"会话"中有效(存储服务器端),关闭浏览器失效
4、ServletContext : 全局对象:代表整个web application,服务器重启或关闭失效
通用方法:public void setAttribute(String name,Object obj) :
给域对象中属性名称中添加任意类型数据
public Object getAttribute(String name):通过属性名称获取内容
HttpServletRequest请求对象
//所有的请求信息都封装在HttpServletRequest,获取请求信息
1、获取请求行中的请求方式 String getMethod()
String method = request.getMethod();
2、获取请求行的中uri(范围大)，getRequestURI()
String requestURI = request.getRequestURI();
3、获取请求行的中url(范围小)，getRequestURL()
StringBuffer requestURL = request.getRequestURL();
4、获取请求行中的协议版本String getProtocol()
String protocol = request.getProtocol();
5、获取请求头中的具体内容
String getHeader(String var1);通过指定的请求头获取请求的内容
//请求头:User-Agent:客户端的浏览器类型
String header = request.getHeader("user-agent");
header.contains("Chrome") //客户端的浏览器类型
6、通过参数名称获取参数值String getParameter(String var1)
String username = request.getParameter("username");
7、获取所有参数名称Enumeration getParameterNames()
Enumeration parameterNames = request.getParameterNames();
while(parameterNames.hasMoreElements()){
String name = parameterNames.nextElement(); //参数名称
//通过参数名称获取参数值
String value = request.getParameter(name);
}
8、后端通过Map集合的方法获取参数
//Map getParameterMap();获取前端提交的所有参数的参数名和参数值都封装Map中,遍历map取出来
Map parameterMap = request.getParameterMap();
//遍历Map---Set keySet()获取所有键 + V get(K key) (推荐)
//要么entryset--Map.entry键值对对象
Set set = parameterMap.keySet();
for(String key:set){
//通过键获取值
String[] array = parameterMap.get(key);
for(String s:array){
System.out.println(key+"---"+s);
}
}
9、request域对象存一个数据
request.setAttribute("name",object) ;
HttpServletResponse响应对象
HttpServletRequest处理请求信息
1、设置响应的内容 void setContentType(String var1)
//设置响应的字符编码格式
response.setContentType("text/html;charset=utf-8");
2、设置给浏览器响应头
//void setHeader(String var1, String var2);设置响应头
response.setHeader("content-type","text/html;charset=utf-8");
3、添加响应头
//refresh,定时刷新或者定时跳转页面
//每秒刷新访问的这个地址
response.setHeader("refresh","1");
//定时跳转指定的页面,3秒后跳转登录页
response.setHeader("refresh","3;/Servlet_Jsp_02_Web_exploded/login.jsp");
请求转发
请求转发：属于"服务器行为"进行操作,不需要带上下文路径
前端发送请求,后端的Servlet,接收参数,查询数据库,获取到数据库的信息,将判断结果返回前端,从后端跳转前端 ， 用户名或者密码输入错误,给页面提示"错误信息"
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
一、通过ServletContext请求转发，是域对象
//获取SevletContext对象
ServletContext servletContext = this.getServletContext();
1)获取分发器:RequesDispatcher
//public RequestDispatcher getRequestDispatcher(String path);
//参数:是转发到前端页面地址或者后端的另一个地址
RequestDispatcher rd = servletContext.getRequestDispatcher("/getValue.jsp”）属于"服务器行为"进行操作,不需要带上下文路径
//2)RequestDispatcher分发器--->进行转发
//public void forward(ServletRequest request, ServletResponse response)
rd.forward(request,response);
二、 //简写格式，通过域对象HttpServlet请求转发
request.getRequestDispatcher("/getValue.jsp").forward(request,response);
//request对象---类型：HttpServletRequest：本身是域对象，域对象可以存数据
}
//直接后端/context2地址,请求转发到一个jsp页面上,并且jsp页面还能获取到里面存储数据
//域对象方法：通用方法:public void setAttribute(String name,Object obj) :
给域对象属性名称中添加任意类型数据
servletContext.setAttribute("name","李国栋");
request.setAttribute("name2","高圆圆");
web容器里面内部进行跳转，当前目录下面的xx.jsp
请求转发的特点：
1）地址栏没有变化
2）整个过程request对象一致
request对象---类型：HttpServletRequest：本身是域对象，域对象可以存数据
在jsp页面中，可以取数据
3）请求转发可以访问WEB—INF资源文件（WEB—INF的资源文件不能直接访问）
重定向
后端直接完成页面跳转---重定向方式也可以跳转页面，用于页面跳转
原理:
1)设置响应头名称location 以及跳转地址 "/web上下文路径/资源页面"
response.setHeader("location",request.getContextPath()+"/login.jsp");
2)设置响应状态 302 :进一步请求
response.setStatus(302);
浏览器第一次请求原界面，返回给浏览器信息，浏览器看到响应信息302将第二次请求login.jsp
重定向简写格式
// void sendRedirect(String var1) throws IOException;
response.sendRedirect(request.getContextPath()+"/login.jsp");
请求转发和重定向的区别
1.地址栏是否有变化
请求转发:地址栏没有变化
重定向:地址栏有变化
2.是否能够访问WEB-INF下的资源文件
请求转发:可以访问WEB-INF下的资源文件
重定向:不能访问WEB-INF下的资源文件
3.整个过程请求对象是否一致
请求转发:request对象一致,所以使用请求转发,在servlet存数据,请求转发jsp从request中获取数据
重定向:request对象不一致
4.是否能够访问外部项目资源文件(一个tomcat可以部署多个web项目)
请求转发:只能访问当前项目下的资源文件包括wEB-INE下面的资源文件
重定向:可以访问当项目下的资源文件以及访问其他项目下的资源文件
JSP—Java server Pages
jsp注释
<%-- 注释 --%> JSP注释，注释内容不会被发送至浏览器甚至不会被编译
< !--注释-- > HTML注释，通过浏览器查看网页源代码时可以看见注释内容
jsp的三大指令/九大内置对象
三大指令<%@page%>\<%@include%>\<%@taglib prefix="c" uri="xxx" %>
<%@page
contentType="text/html;charset=UTF-8" language="java"
isErrorPage="false"
errorPage="指定错误页面的路径" //errorPage="404.jsp"
%>
contentType:页面编码格式(默认的)
language:支持的语言格式java(默认)
isErrorPage:是否是错误页面:默认值是false()默认的
errorPage:如果当前页码存在问题（异常等）,直接跳转错误页面上
buffer="8kb":jsp页面存储缓冲区大小 8kb(默认的)
isELIgnored:是否能够使用EL表达式 ${}，默认为true可以使用
自定义：404页面
<%@ page
contentType="text/html;charset=UTF-8"
language="java"
isErrorPage="true" //这个页面是错误页面
%>
亲,您访问的资源找不到了
静态包含指令include
<%--静态包含指令
特点:不会将被导入进来的jsp文件(03_导航.jsp)单独进行翻译和编译:节省jsp内存
拼接到该文件（jsp）中
--%>
<%@include file="03_导航.jsp"%> //导入其他页面
<%--主页信息--%>
<%--taglib指令
导入jstl的核心库,指定前缀名称"c" c标签
uri:指定jsp/jstl/core地址
--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
9大内置对象:前面4个域对象：从小到大
PageContext page域:仅仅是当前某个jsp页面中有效,范围最小，页面跳转后无效
HttpServletRequest request域:在请求中有效，
HttpSession session域:一次会话中有效，浏览器关闭无效
ServletContext application域:在整个web程序中有效
//给request域中存储数据
pageContext.setAttribute("name","王宝强");
request.setAttribute("name","高圆圆"); //类似于Map结合
session.setAttribute("name","李国栋"); //session存储的服务器端的
application.setAttribute("name","赵又廷");
//取数据
<%=(String)request.getAttribute("name")%>
<%--el表达式默认在jsp是可以启用的 代替上面的输出表达式
${pageScope.属性名} page域中取数据 // ${pageScope.name3}
${requestScope.属性名} request域中取数据 //${requestScope.name}
${sessionScope.属性名} session域中取数据 //${sessionScope.name2}
${applicationScope.属性名} application域取数据 //${applicationScope.name4}
简写 ${name}
当属性明相同时：
${属性名}--必须从域对象搜索(从小到大搜索)，里面是否存在数据,有的数据直接获取
EL表达式，OGNL对象图导航语言
<%--使用jsp的角标模拟服务器端代码--%>
<%
//存储User实体到request域中
User user = new User() ;
user.setUsername("高圆圆") ;
user.setGender("女");
user.setAge(44);
user.setAddress("西安市") ;
request.setAttribute("user",user);
%>
OGNL对象图导航语言：
<%=((User)request.getAttribute("user")).getName()%> //原书写方式
<%--el表达式可以操作javabean(javabean导航)
${存储的属性名称}--->类似于Map
${Key}--->获取到value
${Key.javabean实体的bean属性}
Object Graph Navigation Language ---OGNL 对象图导航语言:jsp支持/开源框架Spring家族/mybatis
${user} 就等价于(User)request.getAttribute("user") 获取到user对象
${user}访问getUsername():get()去掉,第一个字母小写:username
user对象实例.getUsername()方法
${user.username}
--%>
${user.name} - ${user.gender} - ${user.age} - ${user.address}
Servlet+jsp:实践
Servlet--->接收前端页面提交数据,调用service获取业务数据,在控制台视图以及数据(存储域对象中)
Jsp----->里面通过jsp内置对象:其中四个域对象:request域和Session域,从servlet取数据,展示数据:渲染视图
jstl标签库:里面核心标签:展示数据
<%
//频繁书写java代码(不推荐)
%>
Jsp:
1)翻译 :将jsp文件翻译成.java文件
2)编译 :将.java文件 编译.class文件
<%
jsp脚本书写,java代码
%>
jstl标签库
<%--使用jsp的角标模拟服务器端代码--%>
<%
//存储User实体到request域中
User user = new User() ;
user.setUsername("高圆圆") ;
user.setGender("女");
user.setAge(44);
user.setAddress("西安市") ;
request.setAttribute("user",user);
User user2 = new User() ;
user2.setUsername("王五") ;
user2.setGender("男");
user2.setAge(23);
user2.setAddress("渭南市") ;
List list = new ArrayList<>() ;
list.add(user) ;
list.add(user2) ;
request.setAttribute("list",list);
//jsp页面上遍历List集合获取里面每一个实体,需要jstl:jsp的标签库(导入jar包)
%>
<%--taglib指令
导入jstl的核心库,指定前缀名称"c" c标签
uri:指定jsp/jstl/core地址
--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
1、遍历集合标签foreach
<%--遍历集合数据
c:foreach标签的属性
items="从域对象获取的数据"
var ="循环中变量名"
--%>
<%--${循环中的变量}
${u}---就是每一个user实体
--%>
${u.name}
${u.gender}
${u.age}
${u.address}
<%-- varStatus="循环中状态属性">
它的属性值.ixdex:索引值,根据begin的值开始计算
--%>
${status.index}helloword${i}
2、<%--c:if:判断存储的数据内容是否满足要求
test属性=${域对象获取的数据}
empty:空
empty 对象名:表示对象是否为空
--%>
list集合是空的
list集合对象不为空
3、<%--c:choose
c:when test="${域对象获取数据}"
c:otherwise:类似java语言中选择结构语句
--%>
request.setAttribute("number",2);
星期一
星期二
非法数据
jstl函数库
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
${fn:substring(<string>, <beginIndex>, <endIndex>)}
参数1:获取指定的字符串名称
参数2:指定开始截取的索引位置 从0开始
参数3:最终索引,包含endIndex-1处
<a href="${pageContext.request.contextPath}/product?methodName=getProduct&pid=${p.pid}" style='color:#666'>${fn:substring(p.pname, 0, 6)}...</a>
信息摘要算法的工具:MessageDigest
//jdk提供:信息摘要算法的工具:MessageDigest
//public sattic MessageDigest getIntstance 创建当前类的实例
// String字符串内容---byte[] digest() :转换成字节数组
password = MD5Utils.md5(password) ;
HttpSession清除会话
//public void invalidate()
//1)从request对象中获取HttpSession
HttpSession session = request.getSession();
//2)判断
if(session!=null){
//将session清除了,使用会话无效
//public void invalidate()
session.invalidate();
}
//public void removeAttribute(String name);
从此会话中移除与指定名称绑定在一起的对象。如果会话没有与指定名称绑定在一起的对象，则此方法不执行任何操作。
超链接失效与js事件
请登录
恭喜,${admin.username}
<%-- 【退出】--%>
超链接失效:javascript:void(0)
【退出】
function btn_logOut(){
//window:代表窗口对象
//window.loaction.href="加载地址":窗口打开一个页面
//top.laction.href="从顶部弹出一个页面"
top.location.href ="${pageContext.request.contextPath}/logOut" ;
}
function btn_login(){
//点击登录,打开登录页面
top.location.href="${pageContext.request.contextPath}/admin/admin_login.jsp"}
//修改
修改
1.原生js对象转为Jqery对象
function changeSpanInnerHTML(){
//使用Jquery对象方式:改变span的内容
//获取id="span"标签对象
var span = document.getElementById("span") ;
// span.innerHTML :原生js访问它的innerHTML:设置标签文本 (推荐)
// span.innerText :原生Js访问它的innerText:设置普通文本
var $span = $(span) ;
//设置它的文本方法:text(xx):等价于之前的innerText
// html("<标签名称>xxx"):等价于innerHTML属性
$span.html("将span内容切换为了JavaEE") ;
}
2.jquery对象转js对象 $("#xx").get(0) 0,1,2...依次获取
//页面载入事件
$(function (){
//逻辑
//给id="btn" 设置点击(Jquery的写法)
$("#btn").click(function(){
//$("#btn"):将它(Jq对象)转换成原生js对象
//Jq提供对象的方法:Jq对象.get(index):匹配第几个index的元素
var spanObj = $("#spanTip").get(0) ; //id="spanTip"
//原生Js改变它的文本
spanObj.innerHTML = "使用Jq对象转换Js改变为:Filter" ;
}) ;
}) ;
Jquery基本选择器
常用三个基本选择器
id选择器:$("#id属性值") :id必须唯一
1. class选择器:$(".class属性值"):class可以同名
2. element选择器:$("标签名称");
3. $(selector1,selector2,...):jquery并集选择器
//页面载入事件
$(function(){
//获取id="b1"标签对象,并设置点击
$("#b1").click(function (){
//改变 id 为 one 的元素的背景色为 红色
//Jquery对象设置样式:css("样式名称","样式样式")
//或者多个样式css({"样式名称1":"值1","样式名称2":"值2"}...)
$("#one").css("background-color","red") ;
}) ;
Jquery层级选择器/子元素选择器
层级选择器
$("selector1 selector2"):Jquery的后代选择器:匹配父标签下所有的子元素
//页面载入事件
$(function(){
//id="b1"设置点击
$("#b1").click(function(){
//改变 内所有 的背景色为红色
$("body div").css("background-color","red") ;
}) ;
子元素选择器
$("selector1 > selector2"):Jquery的子元素选择器,第二个选择器中的元素一定是第一个选择器中元素的子元素
//id="b2"设置点击
$("#b2").click(function(){
//改变 内子 的背景色为 红色
$("body>div").css("background-color","orange") ;
}) ;
Jquery属性选择器
Jquery属性选择器
$("元素名称[attribute]"):带有指定属性的元素
$("元素名称:[attribute=value]"):匹配给定元素具有特定值的元素
$("[attribute!=value]") :匹配给定元素不具备特定的值
$("[attribute^=value]"):匹配给定的属性以某些值开始的元素
$("[attribute$=value]"):匹配给定的属性以某些特定值结尾的元素
$("[attribute*=value]"):匹配给定的属性包含value值的元素
$("[selector1][selector2][selectorN]"):符合属性选择器,同时有多个属性满足条件
//含有属性title 的div元素背景色为红色
$("div[title]").css("background-color","red") ;
//属性title值等于test的div元素背景色为红色
$("div[title='test']").css("background-color","red") ;
//属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色
$("div[title!='test']").css("background-color","red") ;
//属性title值 以te开始 的div元素背景色为红色
$("div[title^='te']").css("background-color","red ") ;
//属性title值 以est结束 的div元素背景色为红色
$("div[title$='est']").css("background-color","red ") ;
//属性title值 含有es的div元素背景色为红色
$("div[title*='es']").css("background-color","red ") ;
//选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色
$("div[id][title*='es']").css("background-color","red ") ;
Jquery文档处理
Jq对象.append("xx"):在文档内部追加指定内容
$("#ul").append("宝鸡 ")
Jq对象.appednTo("xx"):将XX内容添加到Jq对象指定元素的后面
$("#gz").appendTo($("#xa")) ;
Jq对象.prepend(content):在文档内容指定的元素的前面追加内容
$("#ul").prepend("神木 ");
Jq对象.prependTo(content):在文档内容指定的元素的前面追加内容
$("#sm").prependTo($("#xa")) ;
Jquery对象.after("xx"):在文档外部插入
$("#ul").after("宝鸡 ")
Jquery方式表单校验
//页面载入事件
$(function(){
//获取到id="formSubmit"的form标签对象
//Jquery里面的函数submit ---->类似form表单给了属性on submit
$("#formSubmit").submit(function(){
//验证表单元素
//用户名 密码 确认密码 邮箱
if(checkUsername() && checkPwd() && checkRepwd() && checkEmail()){
return true ;//表单提交
}
return false ;//禁用提交
}) ;
})
//校验用户名
function checkUsername(){
//获取id="username"的input标签对象同时获取内容
//var username = document.getElementById("username").value ;
//Jq方式获取用户名的内容
var username = $("#username").val() ;
alert(username) ;
//获取id="userTip"的span标签对象
//var span = document.getElementById("userTip") ;
var span = $("#userTip") ;
//创建正则规则
//用户名:6-16位数字或者字母组成
var reg = /^[A-Za-z0-9_]{6,16}$/ ;
/* if(username==""){
span.innerHTML ="用户名不能为空".fontcolor("red") ;
}*/
var flag = reg.test(username) ;
if(flag){
//成立,给span标签设置标签文本
// span.innerHTML = "恭喜您".fontcolor("green") ;
//给input标签对象css样式
$("#username").css("border","") ;
//满足正则规则提示
span.html("恭喜") ;
span.css("color","green") ;
}else{
//span.innerHTML = "不可用".fontcolor("red") ;
//给输入框的input对象设置边框样式
$("#username").css("border","1px solid red") ;
span.html("不可用") ;
span.css("color","red") ;
}
return flag ;
}
//校验确认密码
function checkRepwd(){
//获取密码框的内容
// var pwd = document.getElementById("pwd").value;
var pwd = $("#pwd").val() ;
//获取确认密码框的内容
//var repwd = document.getElementById("repwd").value ;
var repwd = $("#repwd").val() ;
//获取id="repwdTip"的span标签对象
// var span = document.getElementById("repwdTip") ;
var span =$("#repwdTip") ;
//两次内容一致
if(pwd.valueOf() == repwd.valueOf()){
// span.innerHTML = "一致".fontcolor("green") ;
$("#repwd").css("border","") ;
span.html("√") ;
span.css("color","green") ;
return true ;
}else{
// span.innerHTML = "两次信息不一致".fontcolor("red") ;
$("#repwd").css("border","1px solid red") ;
span.html("×") ;
span.css("color","red") ;
return false ;
}
}
原生ajax的操作步骤
1)创建xmlHttpRequest
2)建立连接open(method,url,是否异步);
3)发送请求
4)等待响应
function mySendAjax() {
//1)创建xmlHttpRequest:浏览器代理对象
var xmlHttp;
if (window.XMLHttpRequest) {
//所有现代浏览器使用这个XMLHttpRequest
xmlHttp = new XMLHttpRequest();
} else {
// code for IE6, IE5 //很低版本的浏览器
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2)建立连接open
//open(method, url, async)
//参数1:请求方式: get/post
//如果get请求,可以地址栏携带参 url?key1=value1&key2=value2....
//参数2:和服务器端建立连接的地址 后端服务器接口地址
//参数3:默认true:表示异步,false,表示同步
xmlHttp.open("get", "/Jquery_boostrap_war/my?username=zhangsan", true);
//3)发送器请求到服务器地址
//send()
xmlHttp.send();
//4)异步交互:等待响应
//代理对象:监听服务器的状态的改变,会触发函数:
//onreadystatechange
xmlHttp.onreadystatechange = function () {
//等待响应状态 readyState是4并且状态码200响应成功
if (this.readyState == 4 && this.status == 200) {
//获取数据
//响应文本属性 responseText
//将服务器端响应过来的内容存储在这个代理对象中
alert(this.responseText);
}
}
}
jquery的ajax代替原生写法
//jquery的ajax发送异步请求
$.ajax(
type: 请求方式:GET/POST,(默认get)
url: 请求后端地址,
data: 请求的参数:如果get,还在url?key1=value1&key2=value2,
success:function(data){
//响应成功的回调函数,data:服务器响应的数据
},
error:function(data){
//失败的回调函数:data服务器响应过来的数据
},
dataType:服务器响应过来的数据格式 :jsonjson/text文本格式/html格式,
contentType:浏览器请求的服务器内容格式(可以不写)
//方式2:
$.get(url,参数,function(data),"服务器响应的格式");get提交
//方式3
$.post(url,参数,function(data),"服务器响应的格式"); post提交
$(function(){
//给用户名文本输入框添加失去焦点事件
$("#username").blur(function(){
//获取用户名的内容
var username = $(this).val() ;
$.ajax({
type:"get",
url:"/Jquery_boostrap_war/my?username="+username+"",
success:function(data){
//data服务器响应过来的数据
//{"code":1,"msg":"用户名太受欢迎了,请更换!"}
//{"code":0,"msg":"共享,可用"}
if(data.code==0){
alert(data.msg) ;
}
if(data.code==1){
alert(data.msg) ;
}
},
dataType:"json" //服务器响应来的数据格式
}) ;
}) ;
}) ;
JSON接收与发送数据
发送数据:
如果数据存储在JavaScript对象中，可以把该对象转换为JSON，然后将其发送到服务器。
var myJSON = JSON.strirlgify(myobj);
接收数据:
如果以]JSON格式接收到数据，能够将其转换为JavaScript对象
var myobj =JSON.parse(myJSON);
jsp的el表达式
jsp的el表达式
内置对象
${sessionScope.属性名} session域中取数据
${requestScope.属性名} request域域中取数据
${pageScope.属性名} page域中获取数据
${applicationScope.属性名} 全局(servletContext)获取数据
${cookie}:---Map ${cookie.名称} 获取cookie 对象
${param} --- Map 获取url地址栏上?后面的所有的参数名称以及参数值
${param.key}获取value
jstl: substring方法
${fn:substring(, , )}
参数1:获取指定的字符串名称
参数2:指定开始截取的索引位置 从0开始
参数3:最终索引,包含endIndex-1处
注解
注解是一种标记,是可用Java程序解析;
公共接口---本质就是一个接口:public interface Annotation---里面方法名在注解中,称为"属性"
@Annotation
注解分为:---底层都依赖"元注解":@Target:正在使用的注解它使用的范围(类上/方法/参数...)
@Retention:正在使用的直接它的保留阶段: SORUCE/CLASS/RUNTIME
1)jdk内置注解
@Override:标记这个方法是否实现接口或者重写父类的
@Deprecated //标记这个方法已经过时的,但是可以用
@SuppressWarnings//压制警告
@FunctionalInterface:函数式接口:当前接口中有且仅仅有一个抽象的方法,加入注解标记
@Override注解
@Target(ElementType.METHOD)
@Retention(RetentionPolicy.SOURCE)
public @interface Override {
}
@Target
@Target--->public @interface Target { //当前标记的这个注解能够在什么类型上用(方法用/类上用/参数上用...)
ElementType[] value();//value属性--返回值类型:枚举类型
---public enum ElementType{
TYPE, //当前这个注解可以用在类上
FIELD,//当前这个注解可以用在成员变量上
METHOD,//这个注解可以用在成员方法上
PARAMETER,//这注解可以用在形式参数上
CONSTRUCTOR,//能够用在构造函数上
LOCAL_VARIABLE,//能够用在局部变量上
ANNOTATION_TYPE,//能够注解类型上
PACKAGE,//能够用在包上
TYPE_PARAMETER, //能够使用在参数类型上
TYPE_USE //使用标记类型
}}
@Retention(RetentionPolicy.SOURCE):标记当前正在使用的注解的保留范围(标记当前这个在原码阶段)
@Retention(RetentionPolicy.RUNTIME) 标记当前这个注解的保留范围在运行阶段
//Java代码经历三个阶段
public enum RetentionPolicy {
SOURCE,//Java源代码阶段
CLASS,//Java编译阶段(类的加载-获取字节码文件对象,创建对象...)
RUNTIME//运行阶段 (一般自己用 Runtime)
}
自定义注解
自定义注解
@自定义名称 ---指定的属性
自定义注解 MySelfAnno
@Target(ElementType.TYPE) //能够在类上
@Retention(RetentionPolicy.RUNTIME) //保留在运行阶段上
public @interface MySelfAnno {
String value() ;
String name() ;
}
在类上加入刚才自定义的注解MySelfAnno
@MySelfAnno(value = "com.qf.ann.Fateher",name = "show")
public class ParseAnno {
public static void main(String[] args) {
//如何解析这里MySelfAnno的value和name?
//public A getAnnotation(类 annotationClass)
// 就可以直接获取"注解"(接口)的实现类
Class c = ParseAnno.class ;
}
}
1.
//自定义了一个注解:本质是接口 public @interface MyAnno{}
//标记MyAnno能够在类上使用,加入元注解
@Target(ElementType.TYPE)
//标记MyAnno保留在运行阶段上使用
@Retention(RetentionPolicy.RUNTIME)
public @interface MyAnno {
//注解中的属性----也就是接口的方法名
//属性的返回值只有5中类型:
int myId() ; //myId属性的返回值int类型
String value() ; //value属性,返回值String类型
MyEnum my() ; //my属性返回值,枚举类型
MyAnn2 anno() ;//anno属性的返回值 注解类型
//以上四种类型的数组
String[] strs() ;//数组格式
}
2.
public enum MyEnum {
LEFT, //传统定义的类的时候自定义常量 :public static final 数据类型 变量名 = 初始化值;
RIGHT,
BEHIND,
FRONT ;
}
3.
//使用这个自定义注解:注解里面只有五种类型
@MyAnno(myId = 1,
value = "高圆圆",
my=MyEnum.BEHIND,
anno = @MyAnn2(value = "helloword"),
strs = {"servlet","hello"})
public class MyTest {
//@MyAnno() :只能在类上用
public void method(){
}
}
实际开发中:
大量使用第三方提供的注解:
现在使用Servlet---->@WebServlet:标记在类上使用,里面有很多的属性---代替了xml配置
//给MyTest2加入刚才自定义的注解
@MySelfAnno(className = "com.qf.demo.Worker",name = "love")
public class MyTest2 {
public static void main(String[] args) throws Exception {
//解析自定义注解
//1)获取当前类的字节码文件对象 MyTest2.class
Class c = MyTest2.class ;
//2)public A getAnnotation(类 annotationClass)
//参数是:当前注解类型的Class对象
MySelfAnno mySelfAnno = (MySelfAnno) c.getAnnotation(MySelfAnno.class);
//返回值是Annotation公共接口,需要强转为自己的注解类型
//上面操作:获取到了注解(接口)它的实现类,就可以调用方法(注解中的属性名)
String s1 = mySelfAnno.className();
//System.out.println(s1);
String name = mySelfAnno.name();
//System.out.println(name);
//反射代码
Class clazz = Class.forName(s1) ; //正在使用的类对象
//创建实例
Object obj = clazz.newInstance();
//获取这个类的方法Method类对象
Method method = clazz.getDeclaredMethod(name);
//取消Java语言访问检查
method.setAccessible(true) ;
//调用方法
method.invoke(obj) ;
}
}
Servlet启用注解方式
//@WebServlet(name="默认当前类名MyServlet",value="/my(可以配置多个路径,只有一个value则可以省略)",loadOnStartup=1(初始化时机,类一加载就创建实例),initParams=@WebInitParam(name="初始化参数",value="初始化值"))
@WebServlet("/my") //必须"/开头"
public class MyServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("访问到了Servlet了");
response.getWriter().write("hello,Servlet,,,");
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
Servlet启用注解方式---代替xml配置方式
@WebServlet
String name():name属性---等价于xml配置的时候 (不写,默认当前类名)
默认当前类名/可以自己定义名称
1 //web容器一启动,创建当前类实例
String[] value() default {};
int loadOnStartup() default -1; 等价于1
String[] urlPatterns() default {};
value属性和urlPatterns他们意义一样的,指定后端服务器请求地址 等价
/映射路径
WebInitParam[] initParams() default {} -->等价于
初始化参数
用户登录
1.jsp中设置登录的表单页面
//action:提交的服务器地址
商品金额: ￥${order.total}
1.2 OrderServlet 订单后端访问地址
/**
* 订单的后端访问地址
*/
@WebServlet("/order")
public class OrderServlet extends BaseServlet {
/**
*生成订单信息和订单项信息
* @param request 请求对象
* @param response 响应对象
*/
public void generateOrder(HttpServletRequest request,HttpServletResponse response) throws IOException, ServletException {
//封装订单数据之前,从request域中获取HttpSession,是否有用户信息;如果没有,继续登录
User user = (User) request.getSession().getAttribute("user");
if(user==null){
//重定向登录页面中
response.sendRedirect(request.getContextPath()+"/jsp/login.jsp");
return;
}
//封装订单
Order order = new Order() ;
//订单编号
order.setOid(UUIDUtils.getId()) ;
//下订单时间
order.setOrdertime(new Date()) ;
//从HttpSession获取购物车
Cart cart = (Cart) request.getSession().getAttribute("cart") ;
//获取购物车中的总金额
order.setTotal(cart.getTotalMoney()) ;
//收货地址/电话/收货人
//封装订单项----包含的商品/数量/小计--都来自于购物车CartItem
OrderItem orderItem = null ;
for(CartItem cartItem:cart.getCartItems()){
//获取到每一个购物车项
orderItem = new OrderItem() ;
//订单项itemid
orderItem.setItemid(UUIDUtils.getId()) ;
orderItem.setCount(cartItem.getCount()) ;
orderItem.setSubtotal(cartItem.getSubTotal()) ;
orderItem.setProduct(cartItem.getProduct()) ;
orderItem.setOrder(order) ; //属于哪个订单
//订单里面添加多个订单项数据
List<OrderItem> list = order.getList();
list.add(orderItem) ;
}
//这个订单属于哪个用户的
order.setUser(user) ;
//调用订单业务接口
OrderService orderService = new OrderServiceImpl() ;
orderService.addOrder(order) ;
//将购物车里面的数据删除了
request.getSession().removeAttribute("cart") ;
//将Order实体存储在request域中
request.setAttribute("order",order) ;
//请求转发到/jsp/order_info.jsp
request.getRequestDispatcher("/jsp/order_info.jsp").forward(request,response);
}
}
1.3 OrderService订单业务接口实现
/**
* @author 高圆圆
* @date 2023/4/25 14:14
* 订单业务接口实现
*/
public class OrderServiceImpl implements OrderService {
/**
* 添加订单信息
* @param order 订单实体
*/
@Override
public void addOrder(Order order) {
try {
//调用订单数据访问接口
OrderDao orderDao = new OrderDaoImpl() ;
//控制事务:产生订单这个业务需要同时给订单项和订单添加数据,要么同时执行成功,要么同时失败
//获取连接对象---封装到自定义工具类中
DruidJdbcUtils.setAutoCommit();
//插入订单
orderDao.insertOrder(order) ;
//有一个异常
// int i = 1 / 0 ;
for(OrderItem orderItem:order.getList()){
//插入订单项
orderDao.insertOrderItem(orderItem);
}
//提交事务
DruidJdbcUtils.commitAndClose();
} catch (SQLException throwables) {
//事务回滚
try {
DruidJdbcUtils.rollbackAndClose();
} catch (SQLException e) {
e.printStackTrace();
}
throwables.printStackTrace();
}
}
}
1.4 Orderdao:订单数据访问接口层实现
/**
* @author 高圆圆
* @date 2023/4/25 14:17
* 订单数据访问接口实现
*/
public class OrderDaoImpl implements OrderDao {
/**
* 插入订单
* @param order 订单实体
*/
@Override
public void insertOrder(Order order) throws SQLException {
//自动提交
/* //执行对象
QueryRunner qr = new QueryRunner(DruidJdbcUtils.getDataSource()) ;
//sql
String sql = "insert into orders values(?,?,?,?,?,?,?,?)" ;
int count = qr.update(sql,
order.getOid(),
order.getOrdertime(),
order.getTotal(),
order.getState(),
order.getAddress(),
order.getUser().getName(),
order.getTelephone(),
order.getUser().getUid());*/
//Commons-dbutils使用这个工具---自动提交---需要执行对象QueryRunner无参构造方法
QueryRunner qr = new QueryRunner() ;
String sql = "insert into orders values(?,?,?,?,?,?,?,?)" ;
//添加/删除/修改 ----update(Connection conn,String sql,Object[] params...)
int count = qr.update(
DruidJdbcUtils.getConnection(),
sql, order.getOid(),
order.getOrdertime(),
order.getTotal(),
order.getState(),
order.getAddress(),
order.getUser().getName(),
order.getTelephone(),
order.getUser().getUid());
}
/**
* 插入订单项实体
* @param orderItem 订单项实体
*/
@Override
public void insertOrderItem(OrderItem orderItem) throws SQLException {
/* //执行对象
QueryRunner qr = new QueryRunner(DruidJdbcUtils.getDataSource()) ;
//sql
String sql = "insert into orderitem values(?,?,?,?,?)" ;
int count = qr.update(sql,
orderItem.getItemid(),
orderItem.getCount(),
orderItem.getSubtotal(),
orderItem.getProduct().getPid(),
orderItem.getOrder().getOid());*/
QueryRunner qr = new QueryRunner() ;
String sql = "insert into orderitem values(?,?,?,?,?)" ;
int count = qr.update(
DruidJdbcUtils.getConnection(),
sql,
orderItem.getItemid(),
orderItem.getCount(),
orderItem.getSubtotal(),
orderItem.getProduct().getPid(),
orderItem.getOrder().getOid());
}
}
1.5订单实体
/**
* @author 嘟嘟噜
* @version 1.0
* @date 2023/4/25 19:14
* 订单实体
*/
public class Order {
private String oid; //订单编号,UUID生成
private Date ordertime; //下订单时间
private double total; //总金额,来自购物车的总金额
private int state; //订单状态,默认为0未支付,1为已支付
private String address ; //订单收货地址
private String name; // 收货人
private String telephone; //电话号码
private User user ;//订单属于的用户,包含uid等信息
private List<OrderItem> list = new LinkedList<>(); //订单中的订单项
public Order() {
}
public String getOid() {
return oid;
}
public List<OrderItem> getList() {
return list;
}
public void setList(List<OrderItem> list) {
this.list = list;
}
public void setOid(String oid) {
this.oid = oid;
}
public Date getOrdertime() {
return ordertime;
}
public void setOrdertime(Date ordertime) {
this.ordertime = ordertime;
}
public double getTotal() {
return total;
}
public void setTotal(double total) {
this.total = total;
}
public int getState() {
return state;
}
public void setState(int state) {
this.state = state;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getTelephone() {
return telephone;
}
public void setTelephone(String telephone) {
this.telephone = telephone;
}
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
}
1.6订单项实体
/**
* 订单项实体
* @author 嘟嘟噜
* @version 1.0
* @date 2023/4/25 19:09
*/
public class OrderItem {
private String itemid; //订单编号,UUID工具生成
private int count; //商品数量,可从购物车数据中取出
private double subtotal; //订单项的小计金额,可从购物车数据中取出
private Product product; //包含的商品,可从购物车数据中取出
private Order order; // 属于哪个订单
public OrderItem() {
}
public String getItemid() {
return itemid;
}
public void setItemid(String itemid) {
this.itemid = itemid;
}
public int getCount() {
return count;
}
public void setCount(int count) {
this.count = count;
}
public double getSubtotal() {
return subtotal;
}
public void setSubtotal(double subtotal) {
this.subtotal = subtotal;
}
public Product getProduct() {
return product;
}
public void setProduct(Product product) {
this.product = product;
}
public Order getOrder() {
return order;
}
public void setOrder(Order order) {
this.order = order;
}
}
查询用户订单列表-分页展示
1.1点击链接跳转后端地址
<a href="${pageContext.request.contextPath}/order?methodName=getOrderListByPage¤tPage=1&pageSize=3">订单列表</a>
1.2查询用户订单列表servlet
public void getOrderListByPage(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
User user = (User) request.getSession().getAttribute("user");
if (user == null){
response.sendRedirect(request.getContextPath()+"/jsp/login.jsp");
return;
}
String cPage = request.getParameter("currentPage");
String pPage = request.getParameter("pageSize");
int currentPage = Integer.parseInt(cPage);
int pageSize = Integer.parseInt(pPage);
OrderService orderService = new OrderServiceImpl();
PageBean<Order> pageBean = orderService.getOrderByPage(currentPage, pageSize, user);
request.setAttribute("pb",pageBean);
for (Order order : pageBean.getPageList()) {
System.out.println( order.getOid());
}
request.getRequestDispatcher("/jsp/order_list.jsp").forward(request,response);
}
1.3查询用户订单列表servlce层
/**
* 分页查询订单列表接口
* @param currentPage 当前页码
* @param pageSize 每页显示的数量
* @param user 用户实体
* @return 分页信息实体
*/
@Override
public PageBean<Order> getOrderByPage(int currentPage, int pageSize, User user) {
try {
OrderDao orderDao = new OrderDaoImpl();
List<Order> list = orderDao.getOrderByPage(currentPage, pageSize, user);
int count = orderDao.getTotalCount(user);
System.out.println(list);
PageBean<Order> pageBean= new PageBean<>(currentPage,pageSize,list,count);
System.out.println(pageBean);
if (list!=null || list.size()>0){
return pageBean;
}
} catch (SQLException throwables) {
throwables.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
return null;
}
1.4查询用户订单列表dao层
/**
* 数据库访问接口,分页查询订单
*
* @param currentPage 当前页码
* @param pageSize 每页显示条数
* @param user 用户实体
* @return 订单集合
*/
@Override
public List<Order> getOrderByPage(int currentPage, int pageSize, User user) throws SQLException, InvocationTargetException, IllegalAccessException {
QueryRunner qr = new QueryRunner(DruidJdbcUtils.getDataSource());
//分页查询用户的订单列表
String sql = "select * from orders where uid =? order by ordertime desc limit ?,?";
List<Order> orderList = qr.query(sql, new BeanListHandler<>(Order.class),
user.getUid(),
(currentPage - 1) * pageSize,
pageSize);
//订单项,商品表内联接查询页
sql = "select * from orderitem oi,product po where oi.pid=po.pid and oid=?";
//遍历每一个订单
for (Order order : orderList) {
//key为订单项和商品的属性,value为对应的属性值
List<Map<String, Object>> mapOfOrderItem = qr.query(sql, new MapListHandler(), order.getOid());
//遍历每一个订单项,封装每个订单中的订单项,加入到每一个订单下
for (Map<String, Object> map : mapOfOrderItem) {
OrderItem orderItem = new OrderItem();
Product product = new Product();
//工具类将map中的信息,商品的值封装进商品中
BeanUtils.populate(product, map);
//工具类将map中的信息,订单项的值封装进订单项中
BeanUtils.populate(orderItem, map);
//将商品封装进订单项中
orderItem.setProduct(product);
//获得每一个订单的集合
List<OrderItem> list = order.getList();
//将每一个订单项加入到对应的订单中
list.add(orderItem);
}
}
return orderList;
}
/**
* 数据访问接口,通过用户实体的id查询用户的订单总数
*
* @param user 用户实体
* @return 订单总数
*/
@Override
public int getTotalCount(User user) throws SQLException {
QueryRunner qr = new QueryRunner(DruidJdbcUtils.getDataSource());
//查询用户的订单总数
String sql = "select count(oid) from orders where uid=?";
Object obj = qr.query(sql, new ScalarHandler<>(), user.getUid());
int count = Integer.parseInt(String.valueOf(obj));
return count;
}
支付宝支付
1.1配置
public class AlipayConfig {
// 页面跳转同步通知页面路径 需http://格式的完整路径，不能加?id=123这类自定义参数
public static String return_url = "http://yuqx65.natappfree.cc/test08_war_exploded/aliPayReturnUrlServlet"; // 此处使用外网ip(使用免费的花生壳或者netapp产生的外网域名)
// 服务器异步通知页面路径 需http://格式的完整路径，不能加?id=123这类自定义参数，必须外网可以正常访问
public static String notify_url = "http://yuqx65.natappfree.cc/test08_war_exploded/notify";
// 应用ID,您的APPID，收款账号既是您的APPID对应支付宝账号
public static String app_id = "2021000122685092";
// 支付宝公钥,查看地址：https://openhome.alipay.com/platform/keyManage.htm 对应APPID下的支付宝公钥。
public static String alipay_public_key ="xxx";
// 商户私钥，您的PKCS8格式RSA2私钥
public static String merchant_private_key="xxx";
// 签名方式
public static String sign_type = "RSA2";
// 字符编码格式
public static String charset = "utf-8";
// 支付宝网关
public static String gatewayUrl = "https://openapi.alipaydev.com/gateway.do" ;
}
<!--加入支付宝的SDK-->
<dependency>
<groupId>com.alipay.sdk</groupId>
<artifactId>alipay-sdk-java</artifactId>
<version>4.12.4.ALL</version>
</dependency>
@WebServlet("/aliPayReturnUrlServlet")
public class AliPayReturnUrlServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//支付宝回调 : 外网必须访问:
//支付宝响应get请求
PrintWriter out = response.getWriter();
//输入支付密码--->确认支付--->通过内网穿透工具产生的外链(公网域名)去访问本地web服务
//获取支付宝GET过来反馈信息
Map<String,String> params = new HashMap<String,String>();
Map<String,String[]> requestParams = request.getParameterMap();
for (Iterator<String> iter = requestParams.keySet().iterator(); iter.hasNext();) {
String name = (String) iter.next();
String[] values = (String[]) requestParams.get(name);
String valueStr = "";
for (int i = 0; i < values.length; i++) {
valueStr = (i == values.length - 1) ? valueStr + values[i]
: valueStr + values[i] + ",";
}
//乱码解决，这段代码在出现乱码时使用
//tomcat7.0 get提交中文的乱码
//valueStr = new String(valueStr.getBytes("ISO-8859-1"), "utf-8");
//System.out.println("转码后："+valueStr);
params.put(name, valueStr);
//订单账号/订单总金额/订单中的信息主题("数码产品....")
}
try {
//调用SDK验证签名
boolean signVerified = AlipaySignature.rsaCheckV1(
params,
//支付宝应用公钥
AlipayConfig.alipay_public_key, //否则验签失败
//编码格式 utf-8
AlipayConfig.charset,
//验签方式
AlipayConfig.sign_type);
//——请在这里编写您的程序（以下代码仅作参考）——
if(signVerified) {
//商户订单号
String out_trade_no = new String(request.getParameter("out_trade_no").getBytes("ISO-8859-1"),"UTF-8");
//支付宝交易号
String trade_no = new String(request.getParameter("trade_no").getBytes("ISO-8859-1"),"UTF-8");
//付款金额
String total_amount = new String(request.getParameter("total_amount").getBytes("ISO-8859-1"),"UTF-8");
//调用OrderService业务接口,将支付的状态变成1(完成业务)
OrderService orderService = new OrderServiceImpl() ;
//通过订单编号获取订单 out_trade_no
Order order = orderService.getOrderByOid(out_trade_no);
order.setState(1) ;
orderService.updateOrderState(order) ;
//设置成功的页面
request.setAttribute("order",order) ;
//请求转发到/success.jsp
request.getRequestDispatcher("/jsp/success.jsp").forward(request,response);
}else {
//启用的支付宝的公钥模式---没有使用支付宝公钥
out.println("验签失败");
}
//——请在这里编写您的程序（以上代码仅作参考）——
} catch (AlipayApiException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
1.2jsp
<form id="payForm" action="${pageContext.request.contextPath}/order?methodName=pay" method="post">
<%--隐藏域--%>
<input type="hidden" name="oid" value="${order.oid}" />
<tr class="active">
<td width="60" width="40%">
<input type="hidden" name="id" value="22">
<img src="${pageContext.request.contextPath}/${bean.product.pimage}" width="70" height="60">
</td>
<td width="30%">
<a target="_blank">${bean.product.pname}</a>
</td>
<td width="20%">
￥${bean.product.shop_price}
</td>
<td width="10%">
${bean.count}
</td>
<td width="15%">
<span class="subtotal">￥${bean.subtotal}</span>
</td>
</tr>
</form>
<script>
function btn_pay(){
//获取id="payForm"的jquery标签对象,触发表单提交事件
var form = $("#payForm");
form.submit() ;
}
</script>
1.3订单支付servlet
/**
* 订单支付的功能---调用支付宝接口
* @param request 请求对象
* @param response 响应对象
*/
public void pay(HttpServletRequest request, HttpServletResponse response){
String oid = request.getParameter("oid");
//System.out.println(oid);
//调用订单业务接口---通过订单编号获取订单实体
OrderService orderService = new OrderServiceImpl() ;
Order order = orderService.getOrderByOid(oid);
try {
//获得初始化的AlipayClient (创建支付宝客户端对象)
AlipayClient alipayClient = new DefaultAlipayClient(
AlipayConfig.gatewayUrl,
AlipayConfig.app_id,
AlipayConfig.merchant_private_key,
"json",
AlipayConfig.charset,
AlipayConfig.alipay_public_key,
AlipayConfig.sign_type);
//设置请求参数---设置支付宝回调的参数
AlipayTradePagePayRequest alipayRequest =
new AlipayTradePagePayRequest();
alipayRequest.setReturnUrl(AlipayConfig.return_url);
alipayRequest.setNotifyUrl(AlipayConfig.notify_url);
//设置发送请求的时候,里面的具体的参数:
//1)out_trade_no:订单编号
//2)subject：主题信息
//3)product_code:产品码名称,支付宝默认值:FAST_INSTANT_TRADE_PAY
//4)total_amount:总金额
alipayRequest.setBizContent("{\"out_trade_no\":\""+ order.getOid() +"\","
+ "\"total_amount\":\""+ order.getTotal() +"\","
+ "\"subject\":\""+ "数码产品" +"\","
+ "\"body\":\""+ "手机和电脑相关"+"\","
+ "\"product_code\":\"FAST_INSTANT_TRADE_PAY\"}");
//若想给BizContent增加其他可选请求参数，以增加自定义超时时间参数timeout_express来举例说明
//alipayRequest.setBizContent("{\"out_trade_no\":\""+ out_trade_no +"\","
// + "\"total_amount\":\""+ total_amount +"\","
// + "\"subject\":\""+ subject +"\","
// + "\"body\":\""+ body +"\","
// + "\"timeout_express\":\"10m\","
// + "\"product_code\":\"FAST_INSTANT_TRADE_PAY\"}");
//请求参数可查阅【电脑网站支付的API文档-alipay.trade.page.pay-请求参数】章节
//请求
//将设置表单信息全部以form表单方式发送支付宝
String result = alipayClient.pageExecute(alipayRequest).getBody();
//输出
//响应给浏览器---->用户看到支付宝的登录页面
response.getWriter().write(result) ;
response.getWriter().flush();
response.getWriter().close();
} catch (AlipayApiException | IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
1.4订单支付service dao
/**
* 修改订单支付状态
* @param order 订单实体
*/
@Override
public void updateOrderState(Order order) {
try {
OrderDao orderDao = new OrderDaoImpl() ;
orderDao.updateOrderFroState(order);
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
/**
* 数据访问接口,修改订单支付状态
* @param order 订单实体
*/
@Override
public void updateOrderFroState(Order order) throws SQLException {
QueryRunner qr = new QueryRunner(DruidJdbcUtils.getDataSource()) ;
String sql = "update orders set state =? where oid =?";
qr.update(sql,order.getState(),order.getOid());
}
文件上传
1.前端-文件上传的表单
enctype="multipart/form-data" 支持多文件上传
必须设置为post提交
上传组件:input type="file"
2. 后端访问接口地址中—>Servlet提供的@MultipartConfig
@MulipartConfig--->会前端文件上传组件 input type="file"获取到文件流对象
@WebServlet("/upload")
@MultipartConfig
public class UploadFileServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//接收其他的表单数据
//String pname = request.getParameter("pname");
//System.out.println(pname) ;
//接收 前端enctype="multipart/form-data"--->支持post
//1)通过请求对象Part对象----它可以解析文件名称
Part part = request.getPart("file") ;//参数--->文件上传组件的name属性值
//2)获取上传文件的名称
String fileName = part.getSubmittedFileName() ;
// System.out.println("上传文件的名称是:"+fileName) ;
//3)获取文件的存储路径---项目部署路径
String realPath = request.getServletContext().getRealPath("/myImage");
// System.out.println("文件存储路径是:"+realPath) ;
// D:\EE_2302\day43\code\Maven_2302\src\main\webapp\myImage
//4)通过part对象将写入磁盘上--->realpath地址里面
part.write(realPath+"/"+fileName);
// part.write("") ; //绝对路径
//数据库图片地址,/myImage/图片名称
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
Git 分布式版本控制系统
命令行方式使用:
初始化本地库
git init //在指定的文件中出生本地库 ---->文件夹中产生 .git文件
将指定一些文件添加在暂存区中
git add 文件名称.后缀名
git commit 文件 -m '注释:标名当前代码更新的内容是什么'
将本地库的代码推送远程仓库上----新建仓库完成
设置个人签名信息---用户名/邮箱 (设置一次即可,以后不用设置了)---c://users/用户名目录//.gitconfig文件---记录签名信息
需要给当前https远程仓库请求地址,设置别名
git remote add origin(别名名称) http地址
git push origin 主分支名称(默认master) --->第一次使用:弹出一个窗口,设置gitee码云的账户和密码
git log 查看日志
git工作流
git命令
1.git init 初始化本地库
2.git status 查看当前本地库文件的状态:
3.git add 文件名称: 将指定文件添加到暂存区
4.git commit 文件名称 -m '注释' 将暂存区中的文件提交到本地库中
5.git log 查看日志
6.git remote add origin 仓库地址 给远程仓库设置别名origin
7.git push 别名 分支名称(默认master 主分支) :将本地库的代码---推送到远程仓库上
8.git clone 仓库地址: 就是下载远程仓库 的代码
你可能感兴趣的:(java,前端,mysql)