JAVA学习第八周总结

最新推荐文章于 2022-04-29 08:53:20 发布

Sally-lee

最新推荐文章于 2022-04-29 08:53:20 发布

阅读量443

点赞数

文章标签： html5 html javascript java

本文链接：https://blog.csdn.net/weixin_47950199/article/details/119983047

版权

CSS定位属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS定位属性</title>
		<!-- 
		 
			定位属性:position
					left:向右移动
					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)形式参数列表:只需要书写参数名称即可,不需要带var
					2)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;") ;
			
			
			//获取时getHours
			document.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) :参数任务id
		 function 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 ;  //zhangsan
            this.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:919081924



                          var 变量名 = /正则语法/; 不完全匹配,只要的字符串中某个子字符串满足条件就通过...

                          如果需要进行完全匹配,需要在正则语法的前后加上边界匹配器
                          ^:以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.jar
        2)在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继承自HttpServlet
	doGet()/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提交

    @Override
    protected 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对象被创建了...");
    }

    @Override
    public void init(ServletConfig config) throws ServletException {
        //ServletConfig:接口  servlet的配置对象:每一个servlet都会自己的配置对象:
        // 获取servlet名称以及当前servlet的初始化参数
        System.out.println("servletLife初始化了...");
    }

    //servlet入口:业务方法服务方法
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("程序的入口service方法被调用了...");
    }

    //servlet销毁

    @Override
    public 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提交
    @Override
    protected 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,response
       doGet(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对象创建了...");
    }*/


   //初始化: 就可以配置对象获取初始化参数
    @Override
    public 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流文件传输(复制)
    }
    /*

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("业务方法service调用了....");
    }

    @Override
    public void destroy() {
        System.out.println("servlet被销毁了...");
    }*/

   /* @Override
    protected 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的名称
        //获取初始化参数
    }*/

    /*@Override
    protected 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/contextDemo1
        System.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;
    }

    @Override
    public 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.jsp
        request.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本质就是 Servlet
 
 public final class hello_jsp extends org.apache.jasper.runtime.HttpJspBase{}
 
public abstract class HttpJspBase extends HttpServlet implements HttpJspPage {}

2. JSP的三大指令

指令1: 

<%@Page
		 import:导入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.jsp
        request.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:foreach
                var:循环中的变量
                items:从后台域对象中获取数据 ${绑定的属性名称}
                varStauts:循环中的变量状态
--%>
<%
    //创建List集合对象
    List<String> list = new ArrayList<>() ;

    //List<User>   username  password

    list.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.properties
            InputStream inputStream = DruidJdbcUtils.class.getClassLoader().
                    getResourceAsStream("test.properties");

            //将资源文件所在的输入流加载列表中
            prop.load(inputStream);
            ds = DruidDataSourceFactory.createDataSource(prop); //底层子实现类:DruidDataSource
            System.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线程中已经存在Connection
            return 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;
    }
    @Override
    public 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;
    }
    @Override
    public 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 {


    @Override
    public 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 {
    @Override
    public 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 {

    @Override
    public 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 {

    @Override
    public 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
            特殊按钮div

            div+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)]

Sally-lee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVA学习第八周总结

CSS定位属性<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>CSS定位属性</title> <!-- 定位属性:position left:向右移动 top:向下移动绝对定位 absolute 针对他的父元素进行移动:body父元素进行移动相对定位 relative
复制链接

扫一扫