CSS(Cascading Style Sheet层叠样式表)
使用方式(三种)
- 1)行内样式:不推荐
弊端:一次只能控制某一个标签,加入样式
任何html标签中都有style属性
style=“样式属性名称1:属性值1;样式属性名称2:属性值2;…”
- 2)内联样式(内部样式)
使用选择器
标签名称选择器
在head标签体中:style标签
选择器{ 样式属性名称1:属性值1; 样式属性清楚2:属性值2; }
弊端:style中样式代码和html标签在同一个页面使用,不利于后期管理!(优于第一种)
- 3)使用外联样式(外部样式)
单独在当前项目下css文件夹
书写关联当前html标签的css样式文件
在当前html页面要 使用css外部文件,需要导入
link href=“css文件” rel=“stylesheet” >
rel=“stylesheet” 关联层叠样式表 固定写法
<html>
<head>
<meta charset="utf-8">
<title>CSS入门</title>
<!-- 内联样式 -->
<style>
/*css注释 标签名称选择器 */
/* div{
font-size: 30px;
color: greenyellow;
/*文本属性的一种样式:文本修饰:添加下划线/上划线/中划线*/
/* text-decoration: underline; */
/* 鼠标经过后,变成"小手状态" 可以点击 */
/* cursor: pointer; */
/* } */
/* span{
font-size: 20px;
color: darkorange;
text-decoration: line-through;
} */
</style>
<!-- 导入外部css文件 -->
<link href="css/01.css" rel="stylesheet" />
</head>
<body>
<!-- div:块标签: 占一行内容 -->
<!-- <div style="font-size: 25px;color: grey;background-color: red;">div1</div> -->
<div>div1</div>
<div>div2</div>
<span>行内标签</span><br/>
<span>行内标签2</span>
</body>
</html>
CSS选择器
标签选择器
- class:类选择器
就是当前html标签上面给定义class属性,给定一个属性值
在样式标签中
.class属性值{
样式属性名称1:value1;
样式属性名称2:value2;
}
特点:同一个html页面上,多个标签可以指定相同的class属性值
- id选择器
在标签中指定id属性以及属性值
在style标签中
#id属性值{
样式属性名称1:value1;
样式属性名称2:value2;
}
在同一个html页面,标签中id属性值必须唯一,否则后面通过javascript 的id属性值获取标签对象可能获取不到!
- 优先级：id选择器 > class选择器 > 标签（element）选择器
- 子元素选择器
选择器1 选择器2{
属性样式:属性值;
}
选择器2选中的元素是选择器1选中的元素的子元素
<style>
标签选择器
/* div{
color: #00F;
font-size: 20px;
} */
class选择器
/* .c1{
color: #0F0;
font-size: 35px;
}
*/
id选择器
/* #cart{
color: #0000FF;
font-size: 10px;
} */
子元素选择器 (后代选择器)
/*selector1 selector2{
...
}
*/
/* .c1 #sp{
font-size: 20px;
color: #008000;
} */
并集选择器
/*selector1,selector2{
...
}
*/
/* .c1,#span2{
font-size: 40px;
color: red;
} */
通用选择器*{}
/* *{
font-size: 10px;
color: slategray
}
*/
</style>
</head>
<body>
<div class="c1">
color: greenyellow;
文本属性的一种样式:文本修饰:添加下划线/上划线/中划/
<span id="sp">span标签1</span>
</div>
<div id="cart">我的购物车</div>
<div>登录</div>
<span id="span2">span标签2</span>
</body>
CSS选择器之伪类选择器
- 伪类选择----锚伪类
描述的标签几种状态:
- link:未访问过当前标签的状态
- hover:鼠标悬停在标签的状态
- active:鼠标正在访问(激活状态) 点击标签,但是没有松开的状态
- visited:已经访问过的状态(点击了,并且已经松开)
语法:
选择器:状态名称(不区分大小写){
样式属性:属性值;
}
<style>
link:未访问过的状态
/*a:link{
font-size: 10px;
color: red;
}*/
visited:鼠标访问过的状态
/*a:visited{
font-size: 35px;
color: darkgray;
text-decoration: none;
}*/
hover:鼠标悬停在标签的状态
/*a:hover{
font-size: 20px;
color: blue;*/
去掉下划线
text-decoration:none ;
}
active:激活状态:点击,没有松开状态
/*a:active{
font-size: 30px;
color: greenyellow;*/
文本修饰:加入下划线
text-decoration: underline;
}
</style>
循环状态效果：必须遵循下面的先后顺序
在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。
在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。
-->
</head>
<body>
<a href="02_CSS选择器.html">伪类选择器</a>
</body>
伪类选择器应用
- 书写一个表格,4行4列
- 鼠标经过每一行,变成蓝色
- 背景的css样式:background-color:blue/#00F
<style>
.trClass{
/* 文本属性:文本对齐方式 */
text-align: center;
}
/*
设置鼠标经过每一行:变成蓝色背景
*/
.trClass:hover{
background-color: #0000FF;
cursor: pointer;
}
</style>
</head>
<body>
<table border="1" width="500px" cellspacing="0" height="300px">
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>住址</th>
</tr>
<tr class="trClass">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>西安市</td>
</tr>
<tr class="trClass">
<td>2</td>
<td>李四</td>
<td>女</td>
<td>咸阳市</td>
</tr>
<tr class="trClass">
<td>3</td>
<td>王五</td>
<td>男</td>
<td>渭南市</td>
</tr>
</table>
</body>
CSS常用样式属性
背景样式
- background-color:背景颜色
- background-image:背景图片
- background-repeat:设置背景图片是否重复以及如何重复
- background-position:设置背景图片的起始位置
<style>
body{
背景颜色
/* background-color:moccasin */;
背景图片
/*图片 不是当前系统默认分辨率大小,图片就会自动x轴,y轴重复
*/
/* background-image: url(image/c.jpg); */
设置背景图片是否重复以及如何重复
background-repeat:默认值 repeat(x轴/y轴重复)
no-repeat;不重复
repeat-x:x轴重复
repeat-y:y轴重复
/* background-repeat: no-repeat; */
background-position:默认值就是 left top
content center
right bottom
/* background-position: left top; */
背景的简写属性:
/*只需要声明一个样式:就可以将上面所有的属性都是设置(先后顺序有条件的)
background:background-color background-image background-repeat background-position''
*/
background: darkgray url(image/c.jpg) no-repeat right top ;
}
</style>
边框样式
<html>
<head>
<meta charset="utf-8">
<title>css边框</title>
<style>
/*将div---块标签:有四个边
设置边框颜色属性:
*/
div{
/*设置边框颜色 border-方向-color*/
/* border-left-color:#00F ;
border-right-color:#F00 ;
border-top-color:#0F0 ;
border-bottom-color:darkgray ; */
边框颜色,边框宽度,边框样式的简写属性:
border-color/border-width/border-style:将四个颜色 都可以指定进去
1)默认的方向:上 右 下 左
2)如果某一边没有设置颜色,补齐对边的颜色
/* border-color: red ; */
/*设置边框看度border-方向-width*/
/* border-left-width: 10px;
border-right-width: 20px;
border-top-width: 30px;
border-bottom-width: 40px; */
边框宽度简写属性
/* border-width:10px ; */
光有颜色和宽度不行,必须指定四个边框的样式属性:border-方向-style
solid:单实线
double:双实现
dotted:点
dashed:虚线
/* border-left-style: double;
border-right-style: dotted;
border-top-style: solid;
border-bottom-style: dashed ; */
边框样式的简写属性
/* border-style: solid; */
边框的简写属性:
/*border:border-width border-style（必需) border-color
border: 5px solid #000;
div中设置它的容量
/*width: 100px;
height: 100px;*/
}
</style>
</head>
<body>
<div>div1</div>
</body>
</html>
浮动属性(float)
一旦某个元素进行浮动,那么就会脱落当前文档流(当前body中的先后顺序),直到它的外边缘碰到某一个框或者是浏览器边框停止掉
- left(使用居多)
- right(其次)
设置不浮动css样式属性
- clear :清除浮动!
- both:两边都不浮动 (推荐)
- left:左不浮动
- right:右不浮动
<style>
/*分别给三个div设置边框 */
#div1{
border:1px solid #000;
background-color: #0F0;
width: 150px;
height: 150px;
/* 右浮动 */
/* float: right; */
/*左浮动*/
float: left;
}
#div2{
border:1px solid #000;
background-color: #00F;
width: 150px;
height: 150px;
float: left;
}
#div3{
border:1px solid #000;
background-color: #F00;
width: 150px;
height: 150px;
/* float: left; */
}
#clear{
clear: both;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<!-- 没有文本的div
设置空的div
-->
<div id="clear"></div>
<!--
如果不需要浮动
-->
<div id="div3">div3</div>
</body>
浮动属性应用
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#logo{
float: left;
}
#header{
float: left;
margin:0 0 0 100px ;
}
#my_btn{
float: left;
margin-left: 50px;
}
#part_one{
height: 50px;
line-height:60px ;
}
#part_two{
background-color: #000;
}
.li_class{
color: white;
margin: 10px;
text-decoration: none;
margin-left: 50px;
}
#clear{
clear: both;
}
</style>
</head>
<body>
<!-- 大的div -->
<div>
<!-- logo部分 -->
<div id="part_one">
<!-- 包含三个小的div -->
<div id="logo">
<img src="image/logo2.png" width="100%" />
</div>
<div id="header">
<img src="image/header.png" width="100%" />
</div>
<div id="my_btn">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<div id="clear"></div>
<!-- 第二部分:水平导航条件 -->
<div id="part_two">
<a class="li_class" href="#">首页</a>
<a class="li_class" href="#">手机数码</a>
<a class="li_class" href="#">笔记本专区</a>
<a class="li_class" href="#">电脑办公</a>
<input type="text" style="color: black;" />
</div>
</div>
</body>
</html>
文本样式
<html>
<head>
<meta charset="utf-8">
<title>css文本样式</title>
<style>
body{
文本对齐方式
/* text-align: center;*/
text-decoration 属性用于设置或删除文本装饰
underline:下划线
overline:上划线
line-through:中划线
none:去掉装饰
/* text-decoration: none;*/
字符间接letter-spacing
/* letter-spacing: 10px;*/
word-spacing 针对中文:单词间距
系统认为:两个字组成一个单词
/*word-spacing: 20px; */
}
</style>
</head>
<body>
今天 天气 不错!
</body>
</html>
字体样式
<html>
<head>
<meta charset="utf-8">
<title>css字体样式</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body{
font-family:字体类型:一定是字体库存在的类型
/*font-family: "Sofia"; */
font-style:字体样式
normal - 文字正常显示 默认值
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
/* font-style: oblique; */
font-size:字体大小
/*font-size: 20px;*/
字体粗细程度
bold:适当加粗
bolder:比bold设置的相对粗一些
/*font-weight: bold;*/
}
</style>
</head>
2021年9月27日举行 第十四届全运会在西安!
</body>
</html>
定位属性
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>
CSS盒子模型
<html>
<head>
<meta charset="utf-8">
<title>css盒子模型</title>
<style>
#d1{
width: 150px;
height: 150px;
border: 1px solid #000;
background-color: #00FF00;
内边距:
简写属性:padding:pading-top padding-right pading-bottom padding-left
/* padding:0 0 10px 10px ; */
/* padding-top: 10px;
padding-left: 10px; */
/* margin-bottom: 10px; */
/* 将div整体往浏览器中间移动 */
margin: 220px 0 0 480px;
}
#d2{
width: 150px;
height: 150px;
border: 1px solid #000;
background-color: #FF0000;
/* margin-top: 10px; */
}
</style>
</head>
<body>
<div id="d1">div1</div>
<!-- <div id="d2">div2</div> -->
</body>
</html>
CSS盒子模型应用
大的div中 包含三个div
用户名所在div
密码所在div
特殊按钮div
- div+css:盒子模型 进行层级布局
<html>
<head>
<meta charset="utf-8">
<title>盒子模型应用</title>
<style>
#formDiv{
/* 指定大div边框 */
border: 1px solid #000;
/* 设置宽和高度容量 */
width: 450px;
height: 260px;
/* 设置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;
}
</style>
</head>
<body>
<div id="formDiv">
<form>
<div id="user_div">
用户名:<input type="text" name="username" placeholder="请输入用户名" />
</div>
<div id="password_div">
密  码:<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>
JS(JavaScript)
JS使用方式(两种)
内部方式
<script>
常用的函数
弹框 window对象属于顶级对象,频繁使用可以不写
window.alert("消息对话框") ;
alert("消息对话框") ;
想浏览器输出内容
document.write("hello,javascript") ;
向浏览器的控制台打印内容
console对象
log(日志含)
console.log("hello,js") ;
</script>
外部方式
01.js
alert("这是一个消息对话框") ;
window.confirm("确认提示框") ;
console.log("hello,javascript") ;
<script src="js/01.js"></script>
js变量定义以及数据类型划分
- 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>
js运算符
算术运算符
比较
逻辑
三元…
<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>
js流程语句
顺序语句
选择
循环语句
<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]+" ")
}
document.write("<hr/>") ;
for(var x in arr){
document.write(arr[x]+" ");
}
</script>
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>
函数以及流程控制语句的使用
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>
js内置String
- 基本类型:无论字符还是字符串 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]+" ") ;
}
</script>
js内置对象Date
<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()+"日  ") ;
//获取时getHours
document.write(date.getHours()+":") ;
//获取分钟getMinutes()
document.write(date.getMinutes()+":") ;
//获取秒getSeconds()
document.write(date.getSeconds()) ;
</script>
Date对象应用----网页时钟
<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()+"  "+
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>
js自定义对象
自定义的对象:
- 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]+" ") ;
}*/
//方式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>
js常用事件
点击相关的事件
- 单击: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>
js正则表达式
- 正则表达式:能够浏览器(js引擎)进行解析的 限定用户输入数据的时候的一种约束!
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,匹配成功,否则匹配失败
<script>
var str = "asdf12abc" ;
//定义正则
var pattern = /^[0-9]{2}$/ ;
if(pattern.test(str)){
alert("条件成立") ;
}else{
alert("条件不成立") ;
}
</script>
js的原生表单校验
用户名: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">
密  码:<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>
BOM(基于浏览器对象模型编程)
- 将浏览器每一个部分看成窗口"windows"对象
网页定时:Windows对象的方法
- windows对象(顶级对象)
- location对象:地址栏
- history对象:历史记录
- screen对象:屏幕对象
使用浏览器类型对象:谷歌/IE/火狐
DOM(基于文档对象模型编程)
- 浏览器解析HTML页面:代码从上往下加载标签,将标签封装"标签对象",就会树状结构
DOM宗旨:
- 1)通过特殊的方式获取标签对象(节点)
- 2)通过标签对象改变属性,控制效果
js的DOM操作
- document.getElementById(“id属性值”) ;id属性值必须唯一,获取某个标签对象
- document.getElementsByName(“name属性值”) —获取的是当前列表标签对象(集合)
- document.getElementsByClassName(“所有的同名class属性值”)—获取的是当前列表标签对象(集合)
- document.getElenentsBtTagName(“所有的同名的标签名称”) ;-----获取的是当前列表标签对象(集合)
- 通过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>
Servlet(Servlet Applet)
- 针对服务端的程序的开发(服务端的连接器)
Servlet的本质
- 狭义的规范 接口
- 广义的规范:是一个能够实现Servlet接口的一个类
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使用步骤(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-class>com.qf.servlet_01.MyServlet
/servlet>
!–servlet的映射配置 访问的请求路径–>
servlet-mapping>
servlet-name>MyServlet
!–映射路径必须以"/指定的路径"–>
url-pattern>/myFirst
/servlet-mapping>
<?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>
使用idea自动创建Servlet(默认注解)
public class HelloServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("响应成功...");
//解决响应给浏览器的中文乱码
response.setContentType("text/html;charset=utf-8");
//servlet完成的事情:并不是输出html页面...
response.getWriter().write("<html>");
response.getWriter().write("<head>");
response.getWriter().write("<title>");
response.getWriter().write("这是我的servlet");
response.getWriter().write("</title>");
response.getWriter().write("</head>");
response.getWriter().write("<body><h3>Hello,Servlet</h3></body>");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
}
Servlet入门----执行get/post提交
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);
}
}
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被销毁了...");
}
}
get提交和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);
}
}
}
doGet()和doPost()关于中文乱码
- 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);*/
doGet(request,response);
}
}
Servlet默认访问的时候创建当前类对象
- web容器反射的方式创建
- 配置:初始化时机:默认的时候访问serlvet的创建
- 在web容器启动的时候,就创建Servlet对象
- 数字越小,优先级越大(默认1)
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);
}
}
ServletContext(全局对象)
ServletContext作用
作用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
- 获取全局配置参数
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
- 请求转发 本质属于"服务器行为"
- 当前请求当前后台/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);
}
}
作用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 + '\'' +
'}';
}
}
保存数据
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);
}
}
web.xml
<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>
请求转发的特点
- 1)地址栏没有明显变化:始终访问后台某个地址.
- 2)请求转发只能访问当前项目下的资源文件(html/jsp),以及包含WEB-INF的资源文件,将jsp/html放在WEB-INF:为了数据安全(只能通过请求转发来访问)
- 3)请求转发的整个过程:是服务器行为:有web容器内部通过RequestDispatcher分发器来完成的事情,请求对象request对象一致
- 4)请求转发不能跨工程访问别的资源文件,只能在当前项目下
域对象
- 就是可以在不同的servlet之间进行"数据共享"----web容器(tomcat’)
四种域对象
| 数据类型/对象名称 | 范围(从小到大) |
|---|---|
| PageContext(page域) | 在某一个jsp页面中有效 |
| HttpServletRequest(request域) | 在一次请求中有效 |
| HttpSession(session域) | 在一次会话中有效(存储在服务器端) |
| ServletContext(context/application) | 全局对象:在整个web工程下有效(web容器一直处于运行状态) |
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);
}
}
web.xml
<servlet>
<servlet-name>RequestServletDemo</servlet-name>
<servlet-class>com.qf.request_04.RequestServletDemo</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>RequestServletDemo</servlet-name>
<url-pattern>/requestDemo</url-pattern>
</servlet-mapping>
Jsp(Java Server Page)(Java服务页面)
- 能够处理后台的业务数据 (能够书写代码/提供很多标签库去使用)
- 只限定于Java语言，能够和后台服务器端程序进行交互 ：主要展示视图层，服务端程序，获取数据
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsp的引入</title>
</head>
<body>
<%--
jsp能够书写java代码
jsp的脚本
--%>
<%
//jsp脚本
String name = (String) request.getAttribute("name");
//jsp的内置对象 Writer----out给浏览器书写内容
out.write("name:"+name);
//System.out.println("name:"+name);
int i = 10 ;
%>
<%--jsp的输出表达式--%>
<%=i%>
<hr/>
${requestScope.name}
<%--jsp的el表达式 去替代jsp的输出表达式--%>
<h3>name</h3>${name}
</body>
</html>
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 {}
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%>
Jsp的九大内置对象
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 |
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>
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);
}
}
练习题(登录页面并访问商品)
数据库用户/商品
create table admin(
id int primary key auto_increment,
name varchar(20),
password varchar(20)
);
insert into admin(name,password) values('admin','admin'),('hjl','123456');
create table product(
id int primary key auto_increment,
pname varchar(20),
pprice int,
pdesc varchar(50)
);
insert into product(pname,pprice,pdesc) values('华为mate30',4299,'为照相而生'),('ipone11',4799,'垃圾'),('小米',4299,'为发烧而生'),('锤子',3299,'罗永浩牛逼');
工具类(DruidJdbcUtils)
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("druid.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);
}
}
用户实体类(Admin)
public class Admin {
private int id ;//编号
private String name ;//管理员名称
private String password ;//密码
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 password) {
this.password = password;
}
@Override
public String toString() {
return "Admin{" +
"id=" + id +
", name='" + name + '\'' +
", password='" + password + '\'' +
'}';
}
}
用户的数据访问接口(UserDao)
public interface UserDao {
/**
* 通过管理员的用户名查询当前管理员实体
* @param name 管理员的用户名
* @return 返回Admin实体对象
*/
Admin selectUserByName(String name ) ;
}
用户的数据访问接口实现(UserDaoImpl)
public class UserDaoImpl implements UserDao {
/**
* 通过管理员的用户名查询当前管理员实体
* @param name 管理员的用户名
* @return 返回Admin实体对象
*/
@Override
public Admin selectUserByName(String name) {
try {
//创建执行对象
QueryRunner qr = new QueryRunner(DruidJdbcUtils.getDataSource()) ;
//准备sql语句
String sql = "select * from admin where name = ?" ;
//将查询某一条记录封装到是一个实体类中
Admin admin = qr.query(sql, new BeanHandler<Admin>(Admin.class), name);
return admin ;
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
}
用户的业务接口(UserService)
public interface UserService {
/**
* 通过用户名查询用户
* @param name 前台输入的用户名
* @param password 前台输入的密码
* @return 返回值true,表示存在用户,可以登录;否则失败
*/
boolean getUser(String name,String password) ;
}
用户的业务接口功能实现(UserServiceImpl)
public class UserServiceImpl implements UserService {
@Override
public boolean getUser(String name, String password) {
//创建dao层对象
UserDao userDao = new UserDaoImpl() ;
Admin admin = userDao.selectUserByName(name);
//判断
if(admin!=null){
//存在.
//获取当前的用户名密码
String pwd = admin.getPassword();
//判断当前密码和前台输入的密码password是否匹配
if(password.equals(pwd)){
return true ;
}
}
return false;
}
}
用户登录的控制器(LoginServlet)
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//解决post提交的中文乱码
request.setCharacterEncoding("utf-8");
//设置响应乱码
response.setContentType("text/html;charset=utf-8");
//1)接收前台的参数
String name = request.getParameter("name");
// System.out.println(name);
String password = request.getParameter("password");
//2)创建Service层接口对象
UserService userService = new UserServiceImpl() ;
boolean flag = userService.getUser(name, password);
//3)判断结果
if(flag){
//true:登录成功
//给request域对象中存储数据
// request.setAttribute("msg","恭喜你,登录成功!");
//跳转到主页
// request.getRequestDispatcher("/index.jsp").forward(request,response);
//@WebServlet("/findAllproduct")
//跳转查询所有商品的页面--->跳转后台地址 ProductServlet
request.getRequestDispatcher("/findAllproduct").forward(request,response);
}else{
request.setAttribute("msg","用户名或者密码输入错误");
//4)请求转发到login.jsp
request.getRequestDispatcher("/login.jsp").forward(request,response);
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
商品实体类(Product)
public class Product {
/**
* id INT PRIMARY KEY AUTO_INCREMENT,
* pname VARCHAR(20),
* pprice int,
* pdesc VARCHAR(50)
*/
private int id ;
private String pname ;
private int pprice ;
private String pdesc ;
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 getPprice() {
return pprice;
}
public void setPprice(int pprice) {
this.pprice = pprice;
}
public String getPdesc() {
return pdesc;
}
public void setPdesc(String pdesc) {
this.pdesc = pdesc;
}
@Override
public String toString() {
return "Product{" +
"id=" + id +
", pname='" + pname + '\'' +
", pprice=" + pprice +
", pdesc='" + pdesc + '\'' +
'}';
}
}
访问商品数据的接口(ProductDao)
public interface ProductDao {
/**
* 查询所有的商品数据
* @return
*/
List<Product> selectProductAll() ;
}
商品访问接口实现(ProductDaoImpl)
public class ProductDaoImpl implements ProductDao {
@Override
public List<Product> selectProductAll() {
try {
//创建执行对象
QueryRunner qr = new QueryRunner(DruidJdbcUtils.getDataSource()) ;
//sql
String sql = "select * from product" ;
List<Product> list = qr.query(sql, new BeanListHandler<Product>(Product.class));
return list ;
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
}
商品业务接口(ProductService)
public interface ProductService {
/**
* 查询所有商品数据
* @return 返回list集合
*/
List<Product> getAllProduct() ;
}
后台商品模块业务实现(ProductServiceImpl)
public class ProductServiceImpl implements ProductService {
@Override
public List<Product> getAllProduct() {
//调用ProductDao
ProductDao productDao = new ProductDaoImpl() ;
List<Product> list = productDao.selectProductAll();
if(list!=null){
return list ;
}
return null;
}
}
针对的模块后台入口(ProductSevlet)
@WebServlet("/findAllproduct")
public class ProductServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//调用service
ProductService productService = new ProductServiceImpl() ;
List<Product> list = productService.getAllProduct();
//将list存储request域中
request.setAttribute("list",list);
//请求转发到list.jsp
request.getRequestDispatcher("/list.jsp").forward(request,response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
登录界面(login.jsp)
<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">
密  码:<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>
表格数据(list.jsp)
<body>
<table style="border-collapse: collapse" border="1px" width="500px" height="400px">
<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.pprice}</td>
<td>${product.pdesc}</td>
</tr>
Maven
- Maven是项目管理工具,主要用来管理项目的jar包以及版本号;
- 高级用法:可以去搭建子父工程
- POM:项目对象模型 Project Object Model,通过一小段信息描述就可以管理整个项目!
下载地址
https://maven.apache.org/
conf目录的setting的配置
本地仓库配置
<localRepository>D:\repository\repository_personal</localRepository>
中央仓库的公共库
- 推荐使用第一个镜像地址阿里云的镜像
- 中央仓库默认不用配置，此处只是使用阿里云镜像替代中央仓库，提高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编译环境
<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>
idea创建maven项目
勾选骨架创建,必须联网
不勾选骨架(不需要联网,自动创建项目结构,自己补全webapp目录)
147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
