JAVA学习第八周总结

CSS定位属性

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>CSS定位属性</title><!-- 定位属性:positionleft:向右移动top:向下移动绝对定位   absolute针对他的父元素进行移动:body父元素进行移动相对定位 relative针对当前元素以前的位置进行移动固定定位 :fixed(使用居多)(上下滑动网页位置不变)--><style>.di1{border:1px solid #000 ;background-color: cornflowerblue;width: 150px;height: 150px;}.di2{border:1px solid #000 ;background-color: seagreen;width: 150px;height: 150px;}.di3{border:1px solid #000 ;background-color: bisque;width: 150px;height: 150px;/* 定位属性 *//* 绝对定位position: absolute; *//* 相对定位*//* position: relative; *//* 向右移动30*//*   left: 30px;top:50px */}/* 设置class="adv"的样式 */.adv{border: 2px solid #000;background-color: plum;width: 150px;height: 150px;/* 固定定位 */position: fixed;left: 550px;top:200px;}</style></head><body><div class="di1">div1</div><div class="di2">div2</div><div class="di3">div3</div>网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><div class="adv"><a href="#" style="text-decoration: none;">立刻咨询</a></div></body>
</html>

23. javascript 变量定义以及数据类型划分

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>js变量定义以及数据类型划分</title><!--1)在js中，定义变量是var定义,var可以省略不写,(前期学习阶段不建议)js是一个弱类型语言(语法以及语句不严谨),可以重复定义变量,后面的值将前面的值覆盖2)var可以定义任何数据类型, 如何查看数据类型 typeof(变量名)js中数据类型:通过值判定的3)基本数据类型划分:无论整数还是小数,都是number类型 -----提升为js的内置对象Number(引用类型)无论是字符串还是字符,都是string类型----提升为js的内置对象String(引用类型)boolean类型----提升js内置对象Boolean(引用类型)undefined:未定义类型,没有给变量赋值(毫无意义)object---自动提示js内置对象 (引用类型:代表任意Javascript内置对象的模板)--><script>//定义一个变量var  a = 10 ;var  a = 20 ;var b = 3.14 ;var c = "hello" ;var d = 'a' ;var e = true ;var f ;var g = new Object() ;document.write("a的值是:"+a+",a的数据类型是:"+typeof(a)+"<br/>") ;document.write("b的值是:"+b+",b的数据类型是:"+typeof(b)+"<br/>") ;document.write("c的值是:"+c+",c的数据类型是:"+typeof(c)+"<br/>") ;document.write("d的值是:"+d+",d的数据类型是:"+typeof(d)+"<br/>") ;document.write("e的值是:"+e+",e的数据类型是:"+typeof(e)+"<br/>") ;document.write("f的值是:"+f+",e的数据类型是:"+typeof(f)+"<br/>") ;document.write("g的值是:"+g+",g的数据类型是:"+typeof(g)+"<br/>") ;//console.log("a的值是:"+a) ;</script></head><body></body>
</html>

24. javascript中的运算符

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>js中的运算符</title><!-- 算术运算符比较逻辑三元...--><script>var a = 10 ;var b = 20 ;var c = 5 ;document.write("(a+b):"+(a+b)+"<br/>") ;document.write("(a-b):"+(a-b)+"<br/>") ;document.write("(a*b):"+(a*b)+"<br/>") ;document.write("(a/b):"+(a/b)+"<br/>") ;document.write("(a%b):"+(a%b)+"<br/>") ;document.write("<hr/>") ;//弱类型语言: true代表 数字1  false 数字 0 (实际开发:仅仅代表 逻辑判断)document.write(a+false) ;document.write("<hr/>") ;document.write((a>b)+"<br/>") ;document.write((a==b)+"<br/>") ;document.write((a>b) && (c>b)+"<br/>") ; document.write("<hr/>") ;//三元运算符var age = 18 ;document.write((age>=18)?"成年人":"未成年人") ;</script></head><body></body>
</html>

1.流程语句

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>流程语句</title><!-- 顺序语句选择循环语句--><script>//选择语句之if/* js中弱类型语言:boolean的值:true,成立;false不成立表达式中如果是非0的number类型,条件成立,否则不成立;表达式中如果是string类型,非空字符串,条件成立,否则不成立;表达式如果是object类型,非null对象,条件成立,否则不成立;实际开发中,if语句中表达式(通过一些逻辑运算符 || &&)*//*     if(new Object()){alert("条件成立") ;}else{alert("条件不成立") ;} *//* switch:弱类型语言的switch中的case后面 既可以是变量,也可以是常量java语言:强类型语言:case后面只能常量*/var week = 4 ;var b = 4 ;switch(week){case 1:alert("星期一") break ;case 2:alert("星期二") break ;case 3:alert("星期三") break ;          case b:alert("星期四") break case 5:alert("星期五") break ;default:   alert("非法数据") break}//for循环//while//do-while循环for(var i = 0 ; i  < 10 ; i++ ){document.write(i+"<br/>") ;}//for-in语句:遍历数组或者自定义对象的数据/*** for(var 变量名 in  数组对象/自定义对象){ //类似于Java中增强for循环使用变量名 如果是数组 数组对象[变量名]}*///js中定义数组//静态初始化的简写方式var arr = [10,20,30,40,50] ;//普通for循环for(var i = 0 ; i < arr.length ; i++){document.write(arr[i]+"&ensp;")}document.write("<hr/>") ;for(var x in arr){    document.write(arr[x]+"&ensp;");}</script></head><body></body>
</html>

2.js中函数的定义以及调用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>js中函数的定义以及调用</title><!-- js中函数定义注意事项:1)形式参数列表:只需要书写参数名称即可,不需要带var2)js中定义函数的时候,可以书写return,也可以不书写3)js是弱类型语言,没有函数重载的概念,函数名称相同,后面的函数将前面函数就覆盖了如果形式参数个数大于实际参数列表,函数会被调用,只不过值NaN有某个形参没赋值:导致结果是NaN如果形式参数个数小于实际参数列表,函数会被调用,会将多余的实际参数去掉然后将前面的实际参数分别绑定给形式参数,进行计算...4)js中函数中默认存在一个数组对象:arguments        作用:就是将实际参数赋值给形式参数function 函数名称(形式参数列表){1)可以写return语句2)直接输出}调用1) var 结果 = 函数名称(实际参数列表) ;输出结果2)单独调用 函数名称(实际参数列表) ;--><script>//定义求两个数据之后的函数//function add(var a, var b ){ //不需要数据类型function add(a,b){//return语句//return a + b ;var result = a+ b ;document.write("两个数据之和是:"+result)  ;}function add(a,b,c){//a=20,b=30,c=10//默认存在arguments数组对象for(var i = 0 ; i<arguments.length ; i++){alert(arguments[i]) ;}var result = a+ b+ c ;document.write("三个数据之和是:"+result)  ;}//调用//var result = add(10,20) ;//document.write("reuslt:"+result) ;//方式2调用//单独调用add(20,30,10) ;</script></head><body></body>
</html>

3.函数以及流程语句的使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>练习</title></head><!-- 通过文本输入框输入月份的值,点击按钮进行查询,获取是夏季,秋季,春季,冬季键入的值3,4,5  春季6,7,8  夏季9,10,11 秋季1,2,12,冬季--><body><!-- js时事件编程的三要素1)事件源html标签2)编写事件监听器编写一个js函数3)绑定事件监听器利用html一些事件属性和js函数进行关on事件="js函数()"dom操作:浏览器加载html页面 ---内置js引擎将标签都封装对象,然后形成"树结构"想办法获取某个标签对象,然后改变属性--><!-- 事件源 --><input type="text" id="month"  /><input type="button" value="点击查询" onclick="checkButton()" /></body><script>/* 编写一个js函数 */function checkButton(){//alert("触发点击事件...") ;//业务:需要通过文本输入框的id属性值"month"获取所在的标签对象//oElement = document.getElementById(sIDValue) :通过id属性值获取标签对象/* var textInput = document.getElementById("month") ; //原生js对象//alert(textInput);//获取标签属性var content = textInput.value ;alert(content) ; *///一步走var content = document.getElementById("month").value ; //content---->String//alert(content) ;//document.write("content的数据类型:"+typeof(content)) ;//if..else if...else...//if中的string和number比较,string---自动转换number然后在和number比较/* if(content<0 || content>12){alert("非法数据") ;} else if(content>=3 && content<=5){alert("春季") ;}else if(content>=6 && content<=8){alert("夏季") ;}else if(content>=9 && content<=11){alert("秋季") ;}else{alert("冬季") ;} *///switch语句  :content:表单输入的内容string 不能自动转换number//alert(typeof(content)) ;content = parseInt(content) ; //类型转换函数:将string--->number//alert(typeof(content)) ;switch(content){case 3:case 4:case 5:alert("春季") ;break ;case 6:case 7:case 8:alert("夏季") ;break ;case 9:case 10:case 11:alert("秋季") ;break ;case 12:case 1:case 2:alert("冬季") ;break ;default:alert("非法数据");break ;}}</script>
</html>

4. 内置属性String

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>内置String</title><!-- 基本类型:无论字符还是字符串 string---- String内置对象--><script>//语法格式// var newString = new String(["stringLiteral"])var s1 = new String("hello") ;var s2 = new String("hello") ;/* ==:比较的是地址值是否相同*/document.write((s1==s2)+"<br/>");/* js内置String对象:valueOf()获取指定对象的原始值。(字符串本身的内容值)比较两个字符串的内容是否一致*/document.write((s1.valueOf()==s2.valueOf())+"<br/>") ;document.write("<br/>") ;//简化格式:  js中创建String对象var str1 = "world" ;var str2 = "world" ;document.write((str1==str2)+"<br/>");document.write("<hr/>") ;var str = "hellojavascript" ;//获取指定索引处的字符:charAt(var index)document.write("charAt():"+str.charAt(5)+"<br/>") ;//concat(var str):拼接功能document.write("concat():"+str.concat("javaee")+"<br/>") ;//indexOf(var childStr):查找指定子字符串第一次出现索引值document.write("indexOf():"+str.indexOf("oja")+"<br/>") ;//lastIndexOf(var childStr):子字符串最后一次出现的索引值//fontcolor(颜色单词/或者RGB的写法#字符值)document.write("fontcolor():"+str.fontcolor("#ffaa00")+"<br/>") ; //截取substring(start,end):[start,end-1]document.write("substring():"+str.substring(5,9)+"<br/>") ;//substr(start [, length ]):参数1:起始索引,参数2:指定截取长度document.write("substr():"+str.substr(5,4)+"<br/>") ;document.write("<hr/>") ;//分割功能(拆分)spilt("分隔符号")var strs = "JavaEE-Python-Php-Hadoop-R-Go" ; var strArray = strs.split("-") ;//字符串数组for(var i = 0 ; i < strArray.length;  i++){document.write(strArray[i]+"&ensp;") ;}</script></head><body></body>
</html>

5. 内置对象Date

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>内置对象Date</title><script>//js创建Date对象// var dateObj = new Date()var date = new Date() ;//document.write(date) ; //当前系统时间//获取年  //getYear():获取当前系统时间年份和1900之间的差值//getFullYear()//document.write(date.getYear()+"年") ;document.write(date.getFullYear()+"年") ;//获取月//getMonth():0-11之间的整数document.write(date.getMonth()+1+"月") ;//获取月中的日期getDate()document.write(date.getDate()+"日&ensp;&ensp;") ;//获取时getHoursdocument.write(date.getHours()+":") ;//获取分钟getMinutes()document.write(date.getMinutes()+":") ;//获取秒getSeconds()document.write(date.getSeconds()) ;</script></head><body></body>
</html>

6. 网页时钟

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>网页时钟</title></head><body><font>当前系统时间是:</font><span id="spanTip"></span><!-- 事件源 --><input type="button" value="清除定时器" onclick="clearTask()" /></body><script>function genDate(){//1)创建当前Date对象:拼接当前系统时间var date = new Date() ;//2)拼接日期字符串var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"&ensp;&ensp;"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds() ;//alert(dateStr)//通过id属性值获取span标签对象var spanObject = document.getElementById("spanTip") ;//设置span标签对象的innerHTML属性: 添加文本内容(可以加入html标签 渲染)//innerText属性:只是添加普通文本: 如果添加标签体,不会将标签进行转义spanObject.innerHTML = "<h4>"+dateStr +"</h4>";}//window对象(可以省略不写)中有网页定时器 //window.setInterval(vCode, iMilliSeconds ): 每经过iMilliSeconds毫秒值重复执行vCode//参数1:任务函数//参数2:毫秒数  var taskId = setInterval("genDate()",1000) ;//每经过1000毫秒执行这个任务//window.setTimeout(vCode, iMilliSeconds):经过iMilliSeconds毫秒值后执行一次vCode//参数1:任务函数//参数2:毫秒数  //清除定时器//window.clearInterval(iIntervalID) :参数任务idfunction clearTask(){//alert("触发点击...");window.clearInterval(taskId) ;}</script></html>

7. js常用事件分类

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>js常用事件分类</title><style>#div1{border: 1 solid #000;background-color: olivedrab;width: 100px;height: 100px;}</style><!-- 点击相关的事件单击:click双击:dbclick和焦点相关的事件获取焦点:focus失去焦点:blur和选项卡发生变化事件相关的change(下列菜单 选择子选项...)和鼠标相关的:鼠标经过mouseover,鼠标移出mouseout...页面载入事件load 键盘按下:keyup ----参考文档...--></head><!-- 将整个body内容加载完毕之后,触发一个函数 --><body onload="testLoad()">
<input type="button" value="单击" onclick="testClick()" /><br/>
<input type="button" value="双击" ondblclick="testDbClick()" /><br/>
用户名:<input type="text" id="username" value="请输入用户名" onblur="testBlur()" onfocus="testFocus()" /><span id="usernameSpan"></span><br/>籍贯:
<select id="province" onchange="testChange()"><option value="请选择">请选择</option><option value="陕西省">陕西省</option><option value="山西省">山西省</option><option value="江西省">江西省</option><option value="广东省">广东省</option>
</select>
<select id="city"><!-- <option value="西安市">西安市</option> -->
</select>
<br />
<div id="div1" onmouseover="testMouseOver()" onmouseout="testMouseOut()">div
</div></body>
<script>/* 编写事件监听器 */function testClick(){alert("触发了单击点击事件...") ;}function testDbClick(){alert("双击点击事件触发了...") ;}//获取焦点function testFocus(){//alert("触发获取焦点事件...");//需要通过id="username"获取input标签对象var inputObj = document.getElementById("username") ;inputObj.value = "" ; //清空掉}//失去焦点函数function testBlur(){需要通过id="username"获取input标签对象并且同时获取文本框的内容var username = document.getElementById("username").value ;//alert(username) ;//id="usernameSpan"所在的标签对象var spanObj = document.getElementById("usernameSpan") ;if(username !="马三奇"){//设置span标签对象的innerHTML内容spanObj.innerHTML="对不起,用户名不可用".fontcolor("red") ;}else{spanObj.innerHTML="√".fontcolor("green") ;}}//选项卡发生变化的事件函数function testChange(){//alert("change事件触发了...") ;//获取当前的省份内容://id="province"获取的标签对象同时内容var jiguan = document.getElementById("province").value;//alert(jiguan) ;//获取id="city"所在的标签对象var city = document.getElementById("city") ;//每次选项卡变化,将之前的innerHTML清空掉city.innerHTML = "" ;//选择某个省份之后,出现城市 :省市联动//判断如果jiguan如果是陕西省if(jiguan=="陕西省"){//创建数组 :arrayObj = [element0[, element1[, ...[, elementN]]])简写格式var arr = ["西安市","宝鸡市","咸阳市","渭南市","神木市"] ;//遍历for(var i = 0 ; i <arr.length; i ++){//获取到每一个元素//设置城市所在的select标签对象的innerHTML属性city.innerHTML+="<option value='"+arr[i]+"'>"+arr[i]+"</option>";}}if(jiguan=="山西省"){//创建数组 :arrayObj = [element0[, element1[, ...[, elementN]]])简写格式var arr = ["太原市","运城市","晋中市","吕梁市","大同市"] ;//遍历for(var i = 0 ; i <arr.length; i ++){//获取到每一个元素//设置城市所在的select标签对象的innerHTML属性city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";}}if(jiguan=="江西省"){//创建数组 :arrayObj = [element0[, element1[, ...[, elementN]]])简写格式var arr = ["赣州市","南昌市","上饶市","滨海市","宜春市"] ;//遍历for(var i = 0 ; i <arr.length; i ++){//获取到每一个元素//设置城市所在的select标签对象的innerHTML属性city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";}}if(jiguan=="广东省"){//创建数组 :arrayObj = [element0[, element1[, ...[, elementN]]])简写格式var arr = ["深圳市","广州市","东莞市","惠州市","中山市"] ;//遍历for(var i = 0 ; i <arr.length; i ++){//获取到每一个元素//设置城市所在的select标签对象的innerHTML属性city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";}}}//鼠标经过事件的函数function testMouseOver(){//alert("触发鼠标经过事件...") ;window.open("03_js中的运算符.html") ;}function testMouseOut(){alert("鼠标移出事件触发...") ;}//页面载入事件load 一般用在body里面/* function testLoad(){//alert("body加载完比了") ;} *//* 绑定onLoad事件 */window.onload = function(){alert("页面载入事件触发了") ;}</script>
</html>

8. js_之dom操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js_之dom操作.</title><!--一般通过doucment对象的方法获取标签对象,通过标签对象改变属性内容DOM操作document.getElementById("id属性值") ;id属性值必须唯一,获取某个标签对象document.getElementsByName("name属性值") ---获取的是当前列表标签对象(集合)document.getElementsByClassName("所有的同名class属性值")---获取的是当前列表标签对象(集合)document.getElenentsBtTagName("所有的同名的标签名称") ;-----获取的是当前列表标签对象(集合)-->
</head>
<!--想通过dom操作:获取文本框输入的内容:文本框失去焦点,将获取的内容弹框出来-->
<body>
<!--<h3>hello,tomcat...</h3>-->用户名:<input type="text" id="username"  name="user" class="user_class"onblur="getUserName()" /></body>
<script>function getUserName() {//方式1:document.getElementById("id属性值") ;var username = document.getElementById("username");//方式2:document.getElementsByName("name属性值");获取的标签对象列表//var username = document.getElementsByName("user")[0];//通过name属性值获取标签对象//方式3:document.getElementsByClassName("所有的同名class属性值")---获取的是当前列表标签对象(集合)// var username = document.getElementsByClassName("user_class")[0];//方式4:document.getElenentsBtTagName("所有的同名的标签名称") ;-----获取的是当前列表标签对象(集合)//var username = document.getElementsByTagName("input")[0] ;//获取标签对象的文本内容alert(username.value) ;}</script>
</html>

9. js 的自定义对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>01_js的自定义对象</title><!--四种格式自定义的对象:1)定义一个对象---符号函数定义的格式2)创建对象:var 变量名 = new 对象(实际参数列表) ;1)类似于Java中有参构造函数定义person对象创建一个Person对象2)类似于java的无参构造定义对象创建对象3)利用Js模板对象Object  :内置对象:代表所有Js内置对象的模板直接创建new Object() ;4))字面量值 "json格式"--><script>//方式1:类似于Java中有参构造函数//定义一个Person对象/*  function Person(name,age){//姓名和年龄属性//赋值//追加属性this.name = name ;  //zhangsanthis.age = age ;    //20//追加方法this.speakEnglish=function(){alert("会说英语") ;}}*///创建一个对象//var p = new Person("高圆圆",41) ;//for-in/* for(var i in p){//遍历属性document.write(p[i]+"&ensp;") ;}*///方式2:类似Java中的无参构造函数//定义一个对象/*    function Person(){}//创建对象var p = new Person() ;//通过对象名追加属性和追加功能呢p.name = "赵又廷" ;p.age = 45 ;p.speakEnglish=function(msg){alert("会说"+msg) ;}*///方式3:3)利用Js模板对象Object  :内置对象:代表所有Js内置对象的模板// 直接创建new Object() ;//创建对象/*  var p = new Object() ;//追加属性p.name = "张安" ;p.age = 20 ;//追加功能p.speak=function(msg){alert("会说"+msg) ;}*///方式4:字面量值 "json格式"/*** 最简单的字符串* {"name":"张三","age":20,"address":"西安市"}* 列表数据* [{"id":1,"name":"李四","age":20},* {"id":2,"name":"李四2","age":22},* {"id":3,"name":"李四3","age":23},* {"id":4,"name":"李四4","age":24}]** 复杂数据: 类似Map<String,ArrayList<Citys>>*      var provinces ={*                      "陕西省":[{"id":1,"city":"西安市"},{"id":2,"city":"咸阳市"}...]*      };*/var p = { //p:json对象    json对象.key获取 value"id":1,"name":"高圆圆","age":42,"address":"西安市","gender":"女","speak":function (msg) {alert("会话"+msg) ;}}/**   Java后台的实体类:     Person类*                               id,name,age,address,gender..** Person----->json数据*           jsonlib.jar包*           第三方:gson,fastJson,springmvc提供的内置的json解析插件jackson.jar***** */document.write("学号是:"+p.id+"<br/>") ;document.write("姓名是:"+p.name+"<br/>") ;document.write("年龄是:"+p.age+"<br/>") ;document.write("地址是:"+p.address+"<br/>") ;document.write("性别是:"+p.gender+"<br/>") ;p.speak("日语") ;</script>
</head>
<body></body>
</html>

10.js 正则表达式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js正则表达式</title><!--正则表达式:能够浏览器(js引擎)进行解析的限定用户输入数据的时候的一种约束!常用语法:X字符:X代表字符数量词相关的语法:X+:表示X字符出现一次或者多次X?:表示X字符出现0次或者一次X*:表示X字符出现零次或多次范围相关的\w    等价于 [A-Za-z0-9_] :任意的大小写字母或者数字字符X{n,}:表示至少n次X{n}: 表示恰好出现n次X{n,m}:X字符串至少出现n次,不超过m次正则表达对象:var 变量名 = /正则语法/;变量名.test(被校验的字符串)---返回true,匹配成功,否则匹配失败举例:正则规则  [A-Za-z0-9_]+      任意的大小写字母或者数字字符出现一次或多次String QQ:919081924var 变量名 = /正则语法/; 不完全匹配,只要的字符串中某个子字符串满足条件就通过...如果需要进行完全匹配,需要在正则语法的前后加上边界匹配器^:以xxx指定的内容开头$:以xxx指定的内容结尾...--><script>var str = "asdf12abc" ;//定义正则var pattern = /^[0-9]{2}$/ ;if(pattern.test(str)){alert("条件成立") ;}else{alert("条件不成立") ;}</script>
</head>
<body></body>
</html>

11.js的原生表单校验

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js的原生表单校验</title><!--用户名:8-16位的数字或者字母密码:6-16位的数字字母组成确认密码和密码一致邮箱符合邮箱格式:数字或字母@数字字母.(com/.com.cn/)--><style>#formDiv{border: 1px solid #000;width: 420px;height: 240px;margin: 150px 0 0 400px;}#userDiv{margin: 30px 0 0 60px;}#pwdDiv{margin: 10px 0 0 60px;}#repwdDiv{margin: 10px 0 0 60px;}#emailDiv{margin: 10px 0 0 60px;}#btnDiv{margin: 10px 0 0 80px;}</style>
</head>
<body><div id="formDiv"><!--表单是否能够提交取决于当前onsbumit事件(绑定一个函数:将所有的表单项都必须校验)的返回值如果true,表示能够提交否则false,不能提交--><!-- <h3>GET方式提交</h3>--><div><h3>Post方式提交</h3></div><!--action:servlet后台地址--><form action="http://localhost:8080/Web_02/args" method="post" onsubmit="return checkAll()"><div id="userDiv">用户名:<input type="text" name="username" id="username" onblur="checkUserName()" placeholder="请输入用户名"><span id="userTip"></span></div><div id="pwdDiv">密&ensp;&ensp;码:<input type="password" name="password" onblur="checkPassword()" id="password" placeholder="请输入密码"><span id="pwdTip"></span></div><div id="repwdDiv">确认密码:<input type="password" name="repwd" id="repwd" onblur="checkRePassword()" placeholder="请输入密码"><span id="repwdTip"></span></div><div id="emailDiv">邮箱:<input type="text" name="email" id="email" onblur="checkEmail()" placeholder="请输入邮箱"><span id="emailTip"></span></div><div id="btnDiv"><input type="submit" value="注册"><input type="button"  style="margin-left: 30px" value="登录"></div></form></div><hr/><script>//校验用户名:function checkUserName(){//通过 id="username"获取当前用户名所在的文本框的标签对象并获取它的内容var username =  document.getElementById("username").value ;//密码:6-16位的数字字母组成//定义正则表达式var reg = /^[A-Za-z0-9_]{6,16}$/ ;//获取id="userTip"的span标签对象var spanTip =  document.getElementById("userTip") ;//校验用户名if(reg.test(username)){//成立spanTip.innerHTML = "恭喜您,可用".fontcolor("green") ;return true ;}else{//不成立spanTip.innerHTML = "×".fontcolor("red") ;return false ;}}//校验用户名:function checkPassword(){//通过 id="password"获取当前密码所在的文本框的标签对象并获取它的内容var password =  document.getElementById("password").value ;//用户名:8-16位的数字或者字母//定义正则表达式var reg = /^[A-Za-z0-9_]{8,16}$/ ;//获取id="pwdTip"的span标签对象var spanTip =  document.getElementById("pwdTip") ;//校验用户名if(reg.test(password)){//成立spanTip.innerHTML = "√".fontcolor("green") ;return true ;}else{//不成立spanTip.innerHTML = "×".fontcolor("red") ;return false ;}}//确认密码和密码一致function  checkRePassword() {//通过 id="password"获取当前密码所在的文本框的标签对象并获取它的内容var password =  document.getElementById("password").value ;//获取当前确认密码框的内容id="repwd"var repassword =  document.getElementById("repwd").value;//获取span标签对象// id="repwdTip"var spanTip = document.getElementById("repwdTip");if(repassword==password){spanTip.innerHTML="√".fontcolor("green") ;return true ;}else{spanTip.innerHTML = "×".fontcolor("red") ;return false ;}}//校验邮箱function  checkEmail() {// id="email"的输入的内容var email = document.getElementById("email").value ;// 邮箱符合邮箱格式://数字或字母@数字字母.(com/.com.cn/.ISTone/)//纯QQ邮箱  数字@qq.com//本身字符:就是.----转义 \.var reg = /^[A-Za-z0-9]+@[A-Za-z0-9]+(\.[A-Za-z]{2,3}){1,2}$/ ;//获取id="emailTip"的span标签对象var spanTip = document.getElementById("emailTip");//校验if(reg.test(email)){spanTip.innerHTML="√".fontcolor("green") ;return true ;}else{spanTip.innerHTML="×".fontcolor("red") ;return false ;}}//表单能否提交function  checkAll() {//将所有的表单项都必须满足规则if(checkUserName() && checkPassword() && checkRePassword() && checkEmail()){return true ;}else{return false ;}}</script></body></html>

12. 表单提交

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--get提交-->
<form method="get" action="http://localhost:8080/Web_02/resolve">用户名:<input  type="text" name="username" /><br/>密码:<input type="password" name="password"/><br/><input type="submit" value="提交" />
</form><hr/>
<!--post提交-->
<form method="post" action="http://localhost:8080/Web_02/resolve">用户名:<input  type="text" name="username" /><br/>密码:<input type="password" name="password"/><br/><input type="submit" value="提交" />
</form></body>
</html>

13. servlet的概念

Servlet:    Servlet Applet针对服务端的程序的开发(服务端的连接器)Servlet的本质:servlet----狭义的规范 接口/广义的规范:是一个能够实现Servlet接口的一个类使用步骤:xml配置方式(基本创建步骤)1)导入servlet-api.jar2)在src下面创建一个类  MyServlet继承自HttpServlet (javax.servlet.http.HttpServlet)3)重写HttpServlt的doGet():执行前台get请求的提交/doPost()方法(执行前台post提交)4)需要在当前web工程WEB-INF的web.xml文件去配置servlet<!--servlet的基本配置--><servlet><!--servlet的名称--><servlet-name>MyServlet</servlet-name><servlet-class>com.qf.servlet_01.MyServlet</servlet-class></servlet><!--servlet的映射配置 访问的请求路径--><servlet-mapping><servlet-name>MyServlet</servlet-name><!--映射路径必须以"/指定的路径"--><url-pattern>/myFirst</url-pattern></servlet-mapping>5) 访问路径: http://localhost:8080/Web_02/myFirst       URL 属于URI子集/Web_02/myFirst  :URI

Servlet的执行流程

1)Web客户端向服务器发送请求  http://loclhost:8080/web工程名称/hello
2)服务器接收请求,解析访问路径uri:  /web工程/hello找当前web工程是否存在url-pattern为"/hello",web.xml去查找
3)如果找不到,404---->找不到路径
如果找到了,解析servlet-mapping  获取url-pattern对应的servlt-name
在通过servlt-name找servlet的基本配置里面servlet-class : 当前servlet的全限定名称:包名.类名
4)反射的方式Class.forName("包名.类名")--->Class clazz
5)创建当前类实例----clazz.newIntance()---->Object obj
6)获取当前字节码文件对象中Method类对象Method method = clazz.getDeclaredMethod("doGet()",HttpServletRequest.class,HttpServletResponse.class) ;
7)调用方法method.setAccessiable(true) ;method.invoke(obj,request,response) ;

Servlet的体系结构

Servlet接口
public void service(ServletRequest req, ServletResponse res)
抽象的GenericServlet   子实现类
public void service(ServletRequest req, ServletResponse res) 抽象的HttpServlt类     子实现类
public void service(ServletRequest req, ServletResponse res) {//获取前提的提交方式//public String getMethod()String method = req.getMethod() ;//选择结构语句判断if(method.equals("GET")){..doGet(req,res) ;}else if(method.equals("POST")){doPost(req,res) ; }}xxxServlet继承自HttpServletdoGet()/doPost()

Servlet的入门

package com.qf.servlet_01;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;/*** @author Kuke* @date 2021/8/25* Servlet的入门*/
public class MyServlet  extends HttpServlet {//执行get提交@Override//Http协议:在请求的时候就创建了,服务器响应的时候就创建了protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {//1)访问servlet---给tomcat发送请求//2)tomcat需要给浏览器进行相应:将响应数据封装到HttpServletResponse 响应对象//解决响应的中文乱码//void setContentType(String var1);response.setContentType("text/html;charset=utf-8");response.getWriter().write("hello,这是我第一个Servlet");}//执行post提交@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req,resp);}
}<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"version="4.0"><!--servlet的基本配置--><servlet><!--servlet的名称当前类名--><servlet-name>MyServlet</servlet-name><!--指定当前servlet的全限定名称--><servlet-class>com.qf.servlet_01.MyServlet</servlet-class></servlet><!--servlet的映射配置 访问的请求路径--><servlet-mapping><servlet-name>MyServlet</servlet-name><!--映射路径必须以"/指定的路径"--><url-pattern>/myFirst</url-pattern></servlet-mapping><servlet><servlet-name>HelloServlet</servlet-name><servlet-class>com.qf.servlet_01.HelloServlet</servlet-class></servlet><servlet-mapping><servlet-name>HelloServlet</servlet-name><url-pattern>/hello</url-pattern></servlet-mapping>

14.Servled的生命周期

package com.qf.servlet_life_02;import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;/*** Servlet的生命周期** void init(ServletConfig var1) throws ServletException;初始化** //业务服务方法* void service(ServletRequest var1, ServletResponse var2) throws ServletException, IOException;**     void destroy();servlet的销毁***     Servlet的是一个单例的,线程不安全*          当前我们定义的servlet就被创建一次,初始化也是一次*          service方法是业务方法方法,不断被调用,因为我们使用具体的get提交还是post提交,覆盖的应该具体的doXXX()方法*/
public class ServletLife extends HttpServlet {/*** 提供无参构造方法*/public ServletLife(){System.out.println("servletLife对象被创建了...");}@Overridepublic void init(ServletConfig config) throws ServletException {//ServletConfig:接口  servlet的配置对象:每一个servlet都会自己的配置对象:// 获取servlet名称以及当前servlet的初始化参数System.out.println("servletLife初始化了...");}//servlet入口:业务方法服务方法@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("程序的入口service方法被调用了...");}//servlet销毁@Overridepublic void destroy() {System.out.println("当前servlet被销毁了...");}
}<!--servlet的基本配置--><servlet><servlet-name>ServletLife</servlet-name><servlet-class>com.qf.servlet_life_02.ServletLife</servlet-class><!--  <init-param><param-name></param-name><param-value></param-value></init-param>--></servlet><servlet-mapping><servlet-name>ServletLife</servlet-name><url-pattern>/life</url-pattern></servlet-mapping><servlet><servlet-name>GetArgsServlet</servlet-name><servlet-class>com.qf.servet_03_getArgs.GetArgsServlet</servlet-class></servlet><servlet-mapping><servlet-name>GetArgsServlet</servlet-name><url-pattern>/args</url-pattern></servlet-mapping><servlet><servlet-name>ServletResolveEncoding</servlet-name><servlet-class>com.qf.servet_03_getArgs.ServletResolveEncoding</servlet-class></servlet><servlet-mapping><servlet-name>ServletResolveEncoding</servlet-name><url-pattern>/resolve</url-pattern></servlet-mapping>
</web-app>

15. get提交和post提交

do get 和 do post

//get提交和post提交后台接收参数的都是相同,所以后台在doPost将doGet()复用(get提交方式居多)或者是在doGet()/复用doPost//get提交tomcat8.0不会出现中文乱码(优化了)
//post提交tomcat8.0必须解决中文乱码
public class GetArgsServlet extends HttpServlet {//doGet:接收get提交参数protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {//前提一提交://http://localhost:8080/Web_02/args?username=zhangsanfeng123&password=12345678&repwd=12345678&email=zhangsan%40qq.com//HttpServletRequest接口//String getParameter(String var1);接收前台提交过来的参数 (在doPost通用)  通过参数名称获取参数值// Enumeration<String> getParameterNames(); 获取所有的参数名称//前提要求:必须在页面上指定name属性的属性值:给后台标记内容/* String username = request.getParameter("username");System.out.println("username:"+username);String password = request.getParameter("password");System.out.println("password:"+password);String email = request.getParameter("email");System.out.println("email:"+email);*///Enumeration<String> getParameterNames();Enumeration<String> enums = request.getParameterNames();while(enums.hasMoreElements()){//获取下一个元素String parameterName = enums.nextElement();//在通过参数名称获取参数值String value = request.getParameter(parameterName);System.out.println(parameterName+"----"+value);}}//接收post提交@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {//将doGet()复用doGet(request,response);/* //一次获取单个参数String getParameter(String var1);接收前台提交过来的参数String username = request.getParameter("username");System.out.println("username:"+username);String password = request.getParameter("password");System.out.println("password:"+password);String email = request.getParameter("email");System.out.println("email:"+email);*///  Enumeration<String> getParameterNames();/*Enumeration<String> enums = request.getParameterNames();while(enums.hasMoreElements()){//获取下一个元素String parameterName = enums.nextElement();//在通过参数名称获取参数值String value = request.getParameter(parameterName);System.out.println(parameterName+"----"+value);}*/}
}

do post必须解决中文乱码

/*
*   doPost()必须解决前提提交的中文乱码
*   doget()不需要解决中文乱码,tomcat8.0以后优化了
* */
public class ServletResolveEncoding extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {//解决post提交乱码request.setCharacterEncoding("utf-8");//解决响应给浏览器的中文乱码response.setContentType("text/html;charset=utf-8");//获取前提提交参数:中文格式//获取用户名String username = request.getParameter("username");System.out.println("username:"+username);}protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {//HttpServletReuqest它的父接口中有就这个方法//void setCharacterEncoding(String var1) throws UnsupportedEncodingException;/*   request.setCharacterEncoding("utf-8");*///获取前提提交参数:中文格式/* //获取用户名String username = request.getParameter("username");System.out.println("username:"+username);*///复用 do get中的 request,responsedoGet(request,response);}
}

16. ServletConfig 的作用

    <servlet><servlet-name>MyServlet</servlet-name><servlet-class>com.qf.servletconfig_02.MyServlet</servlet-class><!--每一个serlvet都有自己的初始化参数--><init-param><param-name>path</param-name><param-value>d://a.txt</param-value></init-param><!--配置:初始化时机:默认的时候访问serlvet的创建在web容器启动的时候,就创建Servlet对象数字越小,优先级越大(默认1)--><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>MyServlet</servlet-name><url-pattern>/my</url-pattern></servlet-mapping>/*
*   Servlet默认访问的时候创建当前类对象(web容器反射的方式创建)
* 在web.xml
*   <servlet><servlet-name>MyServlet</servlet-name><servlet-class>com.qf.servletconfig_02.MyServlet</servlet-class><!--配置:初始化时机:默认的时候访问serlvet的创建在web容器启动的时候,就创建Servlet对象数字越小,优先级越大(默认1)--><load-on-startup>1</load-on-startup></servlet>
*
* */
public class MyServlet extends HttpServlet {/* public MyServlet(){System.out.println("MyServlet对象创建了...");}*///初始化: 就可以配置对象获取初始化参数@Overridepublic void init(ServletConfig config) throws ServletException {System.out.println("init方法被调用了...");//获取ServletConfig对象:接口 代表每一个servlet的配置对象//在父类中的父类有一个成员方法//ServletConfig getServletConfig()//this:代表当前Servlet对象的地址值引用(web容器创建)//public String getServletName()String servletName = config.getServletName();System.out.println(servletName);System.out.println("------------------------");//作用2;获取初始化参数init-param参数值//String getInitParameter(String var1);通过初始化参数名称的参数值String path = config.getInitParameter("path");System.out.println(path);//后面:进行io流文件传输(复制)}/*@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("业务方法service调用了....");}@Overridepublic void destroy() {System.out.println("servlet被销毁了...");}*//* @Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//获取ServletConfig对象:接口 代表每一个servlet的配置对象//在父类中的父类有一个成员方法//ServletConfig getServletConfig()//this:代表当前Servlet对象的地址值引用(web容器创建)ServletConfig servletConfig = this.getServletConfig();//public String getServletName()String servletName = servletConfig.getServletName();System.out.println(servletName);System.out.println("------------------------");//作用2;获取初始化参数init-param参数值//String getInitParameter(String var1);通过初始化参数名称的参数值String path = servletConfig.getInitParameter("path");System.out.println(path);//后面:进行io流文件传输(复制)//获取当前servlet的名称//获取初始化参数}*//*@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req,resp);}*/
}

17. ServlrtContext 的作用

作用1

<servlet><servlet-name>ServletContextDemo1</servlet-name><servlet-class>com.qf.servletcontext_03.ServletContextDemo1</servlet-class></servlet><servlet-mapping><servlet-name>ServletContextDemo1</servlet-name><url-pattern>/contextDemo1</url-pattern></servlet-mapping>/*** ServletContext:代表整个web application (全局对象)** 作用1:*      获取上下文路径*      jsp/html :href/src(写路径:最好使用全局路径):绝对不会出现404*              html:*                   http://localhost:8080/URI***/
public class ServletContextDemo1 extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {//1)先获取ServletContext 接口(web容器反射创建)//public ServletContext getServletContext()/* ServletContext servletContext = this.getServletContext();//2)获取上下文路径 String getContextPath();String contextPath = servletContext.getContextPath();//URI:/Servlet_jsp_war_exploded/contextDemo1System.out.println(contextPath); //是URI的一部分 /Servlet_jsp_war_exploded*///HttpServletRequest//请求信息： 请求行+key（请求头）：value）内容）//GET /Servlet_jsp_war_exploded/contextDemo1 HTTP/1.1// 获取url和uri//String getRequestURI();//    StringBuffer getRequestURL();String url = request.getRequestURL().toString();System.out.println("url:"+url);String uri = request.getRequestURI();System.out.println("uri:"+uri);String protocol = request.getProtocol();//获取协议版本号（Http/1.1反复请求）System.out.println("protocol:"+protocol);//获取默认提交方式String method = request.getMethod();System.out.println("method:"+method);//获取请求头信息//String getHeader(请求头名称)---> 获取内容String header = request.getHeader("User-Agent");//用户使用的浏览器类型if(header.contains("Chrome")){System.out.println("你使用的谷歌浏览器");}else if(header.contains("firefox")){System.out.println("你使用的火狐浏览器");}else{System.out.println("浏览器未知...");}System.out.println("----------------------");//简化格式//HttpServletRequest//获取上下文// 路径 String getContextPath();String contextPath = request.getContextPath();System.out.println(contextPath);}protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doGet(request,response);}}

作用2

<servlet><servlet-name>ServletContextDemo2</servlet-name><servlet-class>com.qf.servletcontext_03.ServletContextDemo2</servlet-class></servlet><servlet-mapping><servlet-name>ServletContextDemo2</servlet-name><url-pattern>/contextDemo2</url-pattern></servlet-mapping>/***Servletcontext:全局对象* 作用2:获取全局配置参数*/
public class ServletContextDemo2 extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//获取ServletContext对象ServletContext servletContext = this.getServletContext();//获取全局参数//String getInitParameter(String var1);String value = servletContext.getInitParameter("characterEncoding");System.out.println("value:"+value);//解决post提交的中文乱码request.setCharacterEncoding(value);//解决响应的乱码response.setContentType("text/html;charset="+value+"");response.getWriter().write("Servletcontext的作用2,获取全局参数配置");}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request,response);}}

作用3

 <servlet><servlet-name>ServletContextDemo3</servlet-name><servlet-class>com.qf.servletcontext_03.ServletContextDemo3</servlet-class></servlet><servlet-mapping><servlet-name>ServletContextDemo3</servlet-name><url-pattern>/contextDemo3</url-pattern></servlet-mapping>/*
*   ServletContext作用3:请求转发  本质属于"服务器行为"
*
* 当前请求当前后台/contextDemo3  跳转到前前台  login.html 登录页面中
* */
public class ServletContextDemo3 extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {//获取全局对象/*  ServletContext servletContext = this.getServletContext();//public RequestDispatcher getRequestDispatcher(String path)//获取当前项目的请求分发器(接收web客户端的请求之后,将请求通过服务器进行转发到指定的页面上)//路径必须"/"RequestDispatcher requestDispatcher = servletContext.getRequestDispatcher("/login.html");//public void forward(ServletRequest request, ServletResponse response)//从当前servlet后台转发到前台资源地址上requestDispatcher.forward(request,response);*///请求转发的简写格式//public RequestDispatcher getRequestDispatcher(String path)被封装请求对象中//请求转发不需要携带上下文路径//request.getRequestDispatcher("/login.html").forward(request,response);request.getRequestDispatcher("/WEB-INF/hello.html").forward(request,response);System.out.println("请求转发成功...");}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request,response);}
}

请求转发的特点

1) 地址栏没有明显变化: 始终访问后台某个地址
2) 请求转发只能访问当前项目下的资源文件(html/jsp),以及包含WEB-INF的资源文件
将jsp/html放在WEB-INF:为了数据安全(只能通过请求转发来访问)
3) 请求转发的整个过程:是服务器行为:由web容器内部通过RequestDispatcher分发器来完成的事情,请求对象request对象一致!有业务数据需求:需要在jsp中获取后台接口的数据,那么只能请求就转发, HttpServletRequest : 域对象
4) 请求转发不能跨工程访问别的资源文件,只能在当前项目下.

作用4

//User实体类public class User{private String username ;private String password ;public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}@Overridepublic String toString() {return "User{" +"username='" + username + '\'' +", password='" + password + '\'' +'}';}
}<servlet><servlet-name>ServletDemo1</servlet-name><servlet-class>com.qf.servletcontext_04.ServletDemo1</servlet-class></servlet><servlet-mapping><servlet-name>ServletDemo1</servlet-name><url-pattern>/demo1</url-pattern></servlet-mapping><servlet><servlet-name>ServletDemo2</servlet-name><servlet-class>com.qf.servletcontext_04.ServletDemo2</servlet-class></servlet><servlet-mapping><servlet-name>ServletDemo2</servlet-name><url-pattern>/demo2</url-pattern></servlet-mapping>// 保存数据/*** ServletContext的作用4:* 作为"域对象"** 什么叫域对象:*      就是可以在不同的servlet之间进行"数据共享"----web容器(tomcat')*/public class ServletDemo1 extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1)获取全局对象ServletContext servletContext = this.getServletContext();//2)public void setAttribute(String name, Object object)/* List<String> list = new ArrayList<>() ;list.add("eric") ;list.add("jakcy") ;list.add("Lee") ;servletContext.setAttribute("list",list);*/User user = new User() ;user.setUsername("张三");user.setPassword("123456");//将属性名称对应的值进行绑定servletContext.setAttribute("user",user);System.out.println("保存数据成功...");}protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doGet(request,response);}
}/*** 获取数据*/public class ServletDemo2 extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {//1)获取全局对象ServletContext servletContext = this.getServletContext();//2)当前域对象中获取数据//public Object getAttribute(String name):获取在域对象中绑定的内容,通过属性名称/*   List<String> list = (List<String>) servletContext.getAttribute("list");for (String s : list) {System.out.println(s);}*/User user = (User) servletContext.getAttribute("user");System.out.println("用户名是:"+user.getUsername());System.out.println("获取数据成功...");}protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doGet(request,response);}
}

使用注解的方式

 - name 属性:指定当前servlet名称--- 等价于xml配置方式 servlet-name- url-patterns 和value属性都是一样:返回值String[]//@WebServlet(urlPatterns = {"/user"})
@WebServlet("/user") //必须以"/开头"
public class UserServlet extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//创建User对象User user  = new User() ;//设置用户名和密码user.setUsername("张三");user.setPassword("123456");//将user对象存储在request域中request.setAttribute("user",user);//请求转发到/el/02_el.jsprequest.getRequestDispatcher("/el/02_el.jsp").forward(request,response);}protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doGet(request,response);}
}

25.域对象

就是可以在不同的servlet之间进行"数据共享"----web容器(tomcat')

1.四种域对象

数据类型/对象名称	范围(从小到大)
PageContext(page域)	在某一个jsp页面中有效
HttpServletRequest(request域)	在一次请求中有效
HttpSession(session域)	在一次会话中有效(存储在服务器端)
ServletContext(context/application)	全局对象:在整个web工程下有效(web容器一直处于运行状态)

2.HttpServletRequest域对象

在一次请求中有效

public class RequestServletDemo extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {//通过request 作为域对象,给里面存储一些数据request.setAttribute("name","高圆圆");System.out.println("存储成功...");//需要请求转发到01_jsp的引入.jsp页面中request.getRequestDispatcher("/01_jsp的引入.jsp").forward(request,response);}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request,response);}
}

26. JSP

概念
Java Server Page:能够书写Java代码的服务页面
只限定于Java语言，能够和后台服务器端程序进行交互 ：主要展示视图层，服务端程序，获取数据

1.JSP的执行两个阶段

举例:
1)hello.jsp---->通过web容器 "翻译"  成  hello_jsp.java文件会将当前jsp页面中所有内容通过JspWriter:输出对象给浏览器中拼接内容
class hello_jsp    ---->规定了jsp的生命周期 :_jspInit()  _jspService(请求对象,响应对象)_jspDestory()2)第二个阶段:需要将hello_jsp.java----hello_jsp.class   ---字节码文件对象         (web容器通过反射机制(内省机制)获取当前类对象,调用_jspservice:程序入口方法)   Jsp本质就是 Servletpublic final class hello_jsp extends org.apache.jasper.runtime.HttpJspBase{}public abstract class HttpJspBase extends HttpServlet implements HttpJspPage {}

2. JSP的三大指令

指令1: <%@Pageimport:导入java的一些核心类或者接口contentType="text/html;charset=UTF-8" 设置jsp的内容格式以及编码language="java":只支持Java语言buffer：jsp默认的缓冲区大小(jsp中可以不断向浏览器输出:写数据过去):默认8kb(一般不用设置)errorPage:当jsp发生异常,跳转到错误页面上session:是否启用HttpSession域对象, (不用去设置,默认就是自动启动)isErrorPage:当前页面是否为错误页面 默认false<html>
<head><title>Title</title>
</head>
<body>
<%--jsp的脚本--%>
<%//定义变量int i = 100 ;System.out.println("i:"+i);//控制台打印//向浏览器写入内容out.write("i:"+i);int b = 10 / 0 ;
%>
<%--jsp的输出表达式--%>
i的值是:
<%=i%>
</body>
</html>
%>指令2 :<%@include jsp静态导入%>file属性:导入资源文件静态导入:原理不会将被导入的jsp文件单独进行翻译和编译,而只是将当前被导入jsp文件的内容加载进来,节省内存!指令3 :<%@taglib 导入jsp的核心标签库jstl%>

3. JSP 9个内置对象

4个域对象

数据类型/对象名称	范围(从小到大)
PageContext(page域)	在某一个jsp页面中有效
HttpServletRequest(request域)	在一次请求中有效
HttpSession(session域)	在一次会话中有效(存储在服务器端)
ServletContext(context/application)	全局对象:在整个web工程下有效(web容器一直处于运行状态)

5个非域对象

数据对象/对象名称	意思
ServletConfig(config)	配置对象
JspWriter(out)	字符输出流,向浏览器写内容
Object(this)	代表当前jsp对象(类)地址值引用
Throwable(t)	异常:当jsp中出现异常,获取异常信息
HttpServlerResponse

27. el表达式

 - el表达式就是为了简化书写方式,代替<%=jsp的输出表达式%>- ${域.属性名称} ----获取预对象中该属性名称绑定的实际内容

<body>
<h3>没有使用el表达式之前的写法</h3>
<%//给pageContext域中绑定数据//pageContext.setAttribute("name","lucy");//给reqest域中绑定数据request.setAttribute("name","eric");//给session域中绑定数据// session.setAttribute("name","zhangsan");//给applictation域中绑定数据// application.setAttribute("name","蒋乐乐") ;%>
<%=request.getAttribute("name")%><hr/><h3>使用el表达式</h3>
<%--   ${域.属性名称} --%>
<%--name是:${requestScope.name}  -   name是:${sessionScope.name}--%>
<%--name是:${pageScope.name}<br/>
name是:${applicationScope.name}--%><%--最终的简化格式直接将域的写法省略了${域对象中绑定参数名称}---就会从四个域对象中搜索,从小到大,绑定到这个参数名称,先使用这个数据: 使用最多的域对象就是request!--%>
${name}
</body>

1. el语法(JavaBean)

 - JavaBean导航:操作实体JavaBean设计规范:1)当前类是具体类(公共的类)2)具备私有字段(私有的成员变量3)提供setXXX()/getXXX()公共方法,暴露出来4)实现序列化接口serializable

${user.username}   -   ${user.password}

//@WebServlet(urlPatterns = {"/user"})
@WebServlet("/user") //必须以"/开头"
public class UserServlet extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//创建User对象User user  = new User() ;//设置用户名和密码user.setUsername("张三");user.setPassword("123456");//将user对象存储在request域中request.setAttribute("user",user);//请求转发到/el/02_el.jsprequest.getRequestDispatcher("/el/02_el.jsp").forward(request,response);}protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doGet(request,response);}
}

28.核心标签库

c : if标签

<html>
<head><title>taglib指令</title>
</head>
<body>
<%--核心标签库:c:if标签 :jsp提供一个判断功能test属性:从域对象中获取数据,判断数据结果为true成立,否则不成立!test属性:内置的关键字empty 从域对象中获取内容 判断对象是否为空--%>
<%int num  = 10 ;List<String> list = new ArrayList<>() ;list.add("hello") ;list.add("word") ;list.add("java") ;//存储在request域中list = null ;request.setAttribute("list",list);%>
${list[0]}      - ${list[1]}  -  ${list[2]}<%--判断集合是否为空 empty
--%>
<c:if test="${empty list}">list对象为空
</c:if>
<br/>
<%--not empty 不为空--%>
<c:if test="${ not empty list}"><h3>list对象不为空</h3>
</c:if>
<hr/>
<c:if test="${num==5}">num的值等于5
</c:if>
<c:if test="${num!=5}">num的值不等于5
</c:if></body>
</html>

c : choose标签

<head><title>c:choose标签</title>
</head><%--c:choose标签就类似于Java语法中if...esle if...else...c:choose:进入到选择语句c:when:具体的分支判断语句test属性:从域对象中获取数据,判断结是否成立,true:则执行when语句.否则不执行c:otherwise:当上面的c:when标签结果不成立,执行c:otherwise的语句
--%>
<body><%--定义变量--%>
<%int i = 10 ;//将i的存储在域对象中request.setAttribute("i",i);
%><%--进入选择结构语句--%>
<c:choose><%-- 具体判断语句--%><c:when test="${i==1}"><h4>星期一</h4></c:when><c:when test="${i==2}"><h4>星期二</h4></c:when><c:when test="${i==3}"><h4>星期三</h4></c:when><c:when test="${i==4}"><h4>星期四</h4></c:when><c:when test="${i==5}"><h4>星期五</h4></c:when><c:when test="${i==6}"><h4>星期六</h4></c:when><c:when test="${i==7}"><h4>星期日</h4></c:when><%--如果上面都不匹配--%><c:otherwise><h4>非法数据</h4></c:otherwise>
</c:choose>
</body>
</html>

c : foreach标签

<html>
<head><title>c_foreach</title><%--基本用法:c:foreach标签类似于Java中的普通for循环属性var:循环中的变量名称beigin:初始索引值end:结束索引值step:偏移量(步长语句)varStatus:属性值循环中的变量的状态属性值. 内置的属性名称:count:序号 (1开始...)index:索引(0开始)Java的语法for(int i = 0 ; i <=10 ; i++){//输出变量i}--%>
</head>
<body>
<%--<c:forEach begin="0" end="10" var="i" step="1" varStatus="status">&lt;%&ndash;${status.index} -  ${i} <br/>&ndash;%&gt;${status.count} -  ${i} <br/>
</c:forEach>--%>
<%--另外一种用法高级用法:从后台获取List列表数据,通过c-forech进行遍历c:foreachvar:循环中的变量items:从后台域对象中获取数据 ${绑定的属性名称}varStauts:循环中的变量状态
--%>
<%//创建List集合对象List<String> list = new ArrayList<>() ;//List<User>   username  passwordlist.add("张三") ;list.add("李四") ;list.add("王五") ;//将list集合存储域对象中request.setAttribute("list",list);
%><c:forEach var="i" items="${list}" varStatus="status">${status.count} -  ${i}<br/>
</c:forEach></body>
</html>

29.练习题(登录页面并访问商品)

1.配置文件

url=jdbc:mysql://localhost:3306/mysqldp
driverClassName=com.mysql.jdbc.Driver
username=root
password=root
initialSize=5
maxActive=10
maxWait=3000

2.工具类

package DruidJdbc;
import com.alibaba.druid.pool.DruidDataSourceFactory;import javax.sql.DataSource;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;public class DruidJdbcUtils {//成员变量位置private  static DataSource ds ;//为了保证线程安全:每一线程使用自己的Connection (张三/李四)private static ThreadLocal<Connection>  t1 = new ThreadLocal<>() ; //提供线程的局部变量保存连接对象//构造方法私有化private DruidJdbcUtils(){}//静态代码块static{try {//读取数据库连接池的配置文件----->通过DruidDataSourceFactory工厂类创建DataSource//创建一个属性集合列表Properties prop = new Properties() ;//读取druid.propertiesInputStream inputStream = DruidJdbcUtils.class.getClassLoader().getResourceAsStream("test.properties");//将资源文件所在的输入流加载列表中prop.load(inputStream);ds = DruidDataSourceFactory.createDataSource(prop); //底层子实现类:DruidDataSourceSystem.out.println("数据源获取成功");} catch (IOException e) {e.printStackTrace();} catch (Exception e) {e.printStackTrace();}}//提供静态方法:单独获取数据源public static DataSource getDataSource(){return ds ;}//获取连接对象Connection静态功能public static Connection getConnection(){//从ThreadLocal中获取局部变量的副本:Connection/***   public T get()  :从线程中获取局部变量的副本!*/Connection conn =  null ;try {conn  =  t1.get();if(conn==null){//如果空,需要从数据库的连接池中获取连接对象conn = ds.getConnection();//获取到之后,每一线程执行自己的Connection//将获取到的连接对象 绑定到当前线程中t1.set(conn);}//如果不为空,说明ThreadLocal线程中已经存在Connectionreturn conn ; //} catch (SQLException e) {e.printStackTrace();}return null ;}//关闭(释放资源)资源public static void close(ResultSet rs, Statement stmt, Connection conn)  {if(rs!=null){try {rs.close();} catch (SQLException e) {e.printStackTrace();}}if(stmt!=null){try {stmt.close();} catch (SQLException e) {e.printStackTrace();}}if(conn!=null){try {conn.close();//关闭之后,归还到连接池中,需要从当前线程中解绑t1.remove();} catch (SQLException e) {e.printStackTrace();}}}public static void close( Statement stmt,Connection conn)  {close(null,stmt,conn);}//事务管理代码 --- 加入public static void main(String[] args) {// DataSource ds = DruidJdbcUtils.getDataSource();//System.out.println(ds);Connection connection = DruidJdbcUtils.getConnection();System.out.println(connection);}
}

3.数据库用户/商品

用户信息

CREATE TABLE USER (
id INT PRIMARY KEY AUTO_INCREMENT,
NAME VARCHAR(10),
PASSWORD VARCHAR(50)
);INSERT INTO USER VALUES (1,'黑佳磊','123456');

商品信息

CREATE TABLE product(
id INT PRIMARY KEY AUTO_INCREMENT,
pname VARCHAR(10),
price INT,
pread VARCHAR(50)
);INSERT INTO product VALUES(1,'华为mate30',5999,'天空之境,为照相而生'),
(2,'华为mate30pro',6999,'天空之境,为照相而生'),
(3,'小米10',4999,'为发烧而生'),
(4,'三星',3999,'为爆炸而生');
SELECT * FROM product;

4.用户/商品实体类

用户类

package Pojo;public class User {private int id ;private String name;private String password;public User() {}public User(int id, String name, String passward) {this.id = id;this.name = name;this.password = passward;}public int getId() {return id;}public void setId(int id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getPassword() {return password;}public void setPassword(String passward) {this.password = passward;}@Overridepublic String toString() {return "User{" +"id=" + id +", name='" + name + '\'' +", password='" + password + '\'' +'}';}
}

商品类

public class Product {private int id;private String pname;private int price;private String pread;public Product() {}public Product(int id, String pname, int price, String pread) {this.id = id;this.pname = pname;this.price = price;this.pread = pread;}public int getId() {return id;}public void setId(int id) {this.id = id;}public String getPname() {return pname;}public void setPname(String pname) {this.pname = pname;}public int getPrice() {return price;}public void setPrice(int price) {this.price = price;}public String getPread() {return pread;}public void setPread(String pread) {this.pread = pread;}@Overridepublic String toString() {return "Product{" +"id=" + id +", pname='" + pname + '\'' +", price=" + price +", pread='" + pread + '\'' +'}';}
}

5.用户/商品服务接口层

用户服务接口层

public interface UserService {boolean getUser(String name,String password);
}

商品服务接口层

public interface ProductService {List<Product> getAllProduct();
}

6.用户/商品服务接口实现层

用户

public class UserServiceImpl implements UserService {@Overridepublic boolean getUser(String name, String password) {UserDao userDao = new UserDaoImpl();User user = userDao.selectUserByName(name);if (user!= null){String pw = user.getPassword();if(password.equals(pw)){return true;}}return false;}
}

商品

public class ProductServiceImpl implements ProductService {@Overridepublic List<Product> getAllProduct() {ProductDao productDao = new ProductDaoImpl();List<Product> list = productDao.selectProductAll();if (list!= null){return list;}return null;}
}

7.用户/商品数据访问接口层

用户

public interface UserDao {User selectUserByName(String name);
}

商品

public interface ProductDao {List<Product>selectProductAll();
}

8.用户/商品数据访问接口实现层

用户

public class UserDaoImpl implements UserDao {@Overridepublic User selectUserByName(String name) {try {QueryRunner qr = new QueryRunner(DruidJdbcUtils.getDataSource());String sql = "select * from USER where name = ?";User user = qr.query(sql, new BeanHandler<User>(User.class), name);return user;} catch (SQLException e) {e.printStackTrace();}return null;}
}

商品

public class ProductDaoImpl implements ProductDao {@Overridepublic List<Product> selectProductAll() {try {QueryRunner queryRunner = new QueryRunner(DruidJdbcUtils.getDataSource());String sql = "select * from product";List<Product> list = queryRunner.query(sql, new BeanListHandler<Product>(Product.class));return list;} catch (SQLException e) {e.printStackTrace();}return null;}
}

9.用户登录的控制器(LoginServlet)

@WebServlet("/login")
public class LoginServlet extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("Utf-8");response.setContentType("text/html;charset=UTF-8");String name = request.getParameter("name");String password = request.getParameter("password");UserService userService = new UserServiceImpl();boolean flag = userService.getUser(name,password);if(flag){request.getRequestDispatcher("/findAllproduct").forward(request,response);}else{request.setAttribute("msg","错误");request.getRequestDispatcher("/login.jsp").forward(request,response);}}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request,response);}
}

10.后台入口

@WebServlet( "/findAllproduct")
public class ProductServlet extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {ProductService productService = new ProductServiceImpl();List<Product> list = productService.getAllProduct();request.setAttribute("list",list);request.getRequestDispatcher("/list.jsp").forward(request,response);}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request,response);}
}

11.登录界面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><meta charset="utf-8"><title>盒子模型应用</title><style>#formDiv{/* 指定大div边框 */border: 1px solid #000;/* 设置宽和高度容量 */width: 450px;height: 300px;/* 设置div的外边距 */margin: 150px 0 0 400px;/* css背景属性 *//* background: darkgray url(./image/index_3.jpg) no-repeat center top; */background: darkgray  no-repeat center top;}/* 修饰用户名所在div */#user_div{margin: 50px 0 0 100px;}/* 修饰密码所在div */#password_div{margin: 20px 0 0 100px;}/* 修饰复选框所在div */#checkbox_div{margin: 20px 0 0 150px;}/* 修饰id="btn_div"的div*/#btn_div{margin: 20px 0 0 170px;}/* 修饰id="reg_btn"的外边距" */#reg_btn{margin-left: 30px;}#spanTip{font-size: 20px;color: red;text-align: center;}#msgTip{margin: 5px 0 0 10px;}</style>
</head>
<!--大的div中 包含三个div用户名所在div密码所在div特殊按钮divdiv+css:盒子模型 进行层级布局-->
<body>
<div id="formDiv"><div id="msgTip"><p style="text-align: center">管理员登录</p><span id="spanTip">${msg}</span></div><form action="${pageContext.request.contextPath}/login" method="post"><%--表单项中的name属性必须和Javabean的实体的属性名称一致--%><div id="user_div">用户名:<input type="text" name="name" placeholder="请输入用户名" /></div><div id="password_div">密&ensp;&ensp;码:<input type="password" name="password" placeholder="请输入密码" /></div><div id="checkbox_div"><input type="checkbox" value="remember me" />remember me</div><div id="btn_div"><input  type="submit" value="登录" /><input type="submit" id="reg_btn" value="注册" /></div></form>
</div>
</body>
</html>

12.表格数据

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title>
</head>
<body>
<table style="border-collapse: collapse" border="1px" width="200px" height="200px"><tr><th>商品编号</th><th>商品名称</th><th>商品价格</th><th>商品描述</th></tr><c:forEach var="product" items="${list}">   <%--每一个都实体对象 --%><tr><td>${product.id}</td>  <%--getXXX()  get()去掉 xxxbean属性--%><td>${product.pname}</td><td>${product.price}</td><td>${product.pread}</td></tr></c:forEach><%-- <tr><td>1</td><td>华为mate30</td><td>5999</td><td>为照相而生</td></tr><tr><td>2</td><td>小米10</td><td>4999</td><td>为发烧而生</td></tr>--%>
</body>
</html>

十七.MAVEN

1.下载地址

https://maven.apache.org/

2. maven项目工具中 conf 目录的setting的配置

<!--本地仓库配置
我自己是在d盘下repository\repository_personal存储的本地jar包
-->
<localRepository>D:\repository\repository_personal</localRepository>
<!--配置中央仓库的公共库 163行左右
推荐使用第一个镜像地址阿里云的镜像
-->
-->
<!--中央仓库默认不用配置，此处只是使用阿里云镜像替代中央仓库，提高jar的下载速度-->
<mirror>
<id>alimaven</id>
<name>aliyunmaven</name>
<url>http://maven.aliyun.com/nexus/content/groups/public/</url>
<mirrorOf>central</mirrorOf>
</mirror>
<mirror>
<id>uk</id>
<irrorOf>central</mirrorOf>
<name>Human Readable Name for this Mirror.</name>
<url>http://uk.maven.org/maven2/</url>
</mirror>
<mirror>
<id>CN</id>
<name>OSChina Central</name>
<url>http://maven.oschina.net/content/groups/public/</url>
<mirrorOf>central</mirrorOf>
</mirror>
<!--maven编译环境 257行左右-->
<profile>
<id>jdk-1.8</id>
<activation>
<activeByDefault>true</activeByDefault>
<jdk>1.8</jdk>
</activation>
<properties>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
<maven.compiler.compilerVersion>1.8</maven.compiler.compilerVersion>
</properties>
</profile>

3. idea创建maven项目 (勾选骨架创建,必须联网)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jz5IHMEj-1630229695621)(D:/图片1/QQ截图20210829171926.png)]

idea创建maven项目 (勾选骨架创建,必须联网)

当前maven项目的工程坐标

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BhaZSWFR-1630229695623)(D:/图片1/QQ截图20210829172119.png)]

maven中会带上根目录pom.xml:maven核心配置文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ZeWNm86-1630229695624)(D:/图片1/QQ截图20210829172235.png)]

4. 创建maven项目:不勾选骨架(不需要联网,自动创建项目结构,自己补全webapp目录)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cAwPoDK1-1630229695626)(D:/图片1/QQ截图20210829172334.png)]

补全项目结构后

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HR1ybLUm-1630229695626)(D:/图片1/QQ截图20210829172446.png)]

pom.xml文件需要将项目打成war包

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-118uIi1p-1630229695628)(D:/图片1/QQ截图20210829172607.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lxaVWY18-1630229695628)(D:/图片1/QQ截图20210829172709.png)]