JavaWeb回顾笔记

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wh1nKopi-1605668744709)(F:\资料\Java\笔记\笔记\assets\javaweb阶段知识体系.png)]

Day01HTML

1.1HTML简介

HTML:HyperText Markup Language,超文本 标记/标签 语言。超文本: 超出了普通文本的能力标记: 标签W3C(World Wide Web Consortium)世界万维网联盟给我们定义好了这套标签
语法特点:HTML文件后缀名是:.html或者.htm不需要编译,可以使用浏览器直接打开(在浏览器中进行解释执行)不区分大小写HTML文件由一堆标签组成:标签:<关键字>内容</关键字>, <关键字/>自闭合标签标签可以嵌套,但是最外层的根标签是`html`属性:写在开始标签上,用于对标签做进一步修饰(后边会有专门的讲解)浏览器可以对html的内容进行自动纠错
代码<!DOCTYPE html> HTML5页面默认声明,可以省略html 页面根标签head 页面的主要信息,给浏览器看body 浏览器中显示给用户的内容

1.2文字标签

文字排版相关的标签有:标题标签:h1~h6默认加粗内置字号:h1最大,h6最小独占一行横线标签/水平分割线:hrcolor:横线的颜色size:横线的粗细width:横线的长短algin:横线的水平位置。left/center(默认)/right段落标签:palgin:位置换行标签:br文字标签:fontcolor:文字的颜色size:文字的大小,最小1,最大7,默认3face:文字的字体粗体字标签:b、strong斜体字标签:i

1.3图片标签

<img src="../img/mm.jpg" height="500px" title="美女" alt="漂亮"/>
属性src:图片的路径,必须设置,而且要使用相对路径width:图片显示的宽度height:图片显示的高度。通常只加width或者只加height,图片会等比例缩放显示,而不会变形title:鼠标悬浮提示alt:图片加载不出来时,显示的文字描述

1.4列表、超链接、表格

1.超链接标签<a> <a/>href:跳转的路径跳转到外部网页,一定得写协议还能跳转到本项目的其它网页,我们同样的使用相对路径进行设置target:在哪显示新页面,常用值有:_self:在当前窗口显示(原页面被覆盖掉)_blank:在新窗口显示
2.清单标签/列表标签无序清单 <ul><li>...</li></ul>disc:小圆点,默认值circle:小圆圈square:小方块有序清单   <ol><li>...</li></ol>1:阿拉伯数字序号a/A:英文字母序号i/I:罗马数字序号
3.基本表格:作用: 展示大量数据进行页面的布局(目前几乎不使用表格进行布局了,而会使用css+div)table标签:表格本身width:表格的宽度height:表格的高度align:表格的水平位置。left左,center中,right右bgcolor:表格的背景颜色cellspacing:单元格之间的间隔。设置为0,看起来是单线条border:表格的边框tr:行,作为table的子标签使用bgcolor:表格的背景颜色height:行高align:行里内容的水平位置。left左,center中,right右td:单元格bgcolor:表格的背景颜色align:单元格里内容的水平位置。left左,center中,right右colspan:跨列rowspan:跨行th:表头单元格。是一种特殊的td,用法和td完全相同只是自带样式:内容加粗,并居中显示caption:表格的标题作为table的子标签使用

1.5文档声明和head标签

<!DOCTYPE html>
<!--文档声明:声明的是当前网页是使用哪个版本的HTML编写的,声明给浏览器使用的,要写到HTML的最前边-->
<html lang="zh-CN">
<head><!--charset:当前网页的字符集--><meta charset="UTF-8"><!--title:网页标题--><title>...</title><!--Keywords:给搜索引擎使用的搜索关键字--><meta name="Keywords" content="关键字1,关键字2,。。。" /><!--description:给搜索引擎使用的,在搜索结果上显示的网站描述--><meta name="description" content="描述。。。" /><!--icon:网页标题前边的图标--><link rel="icon" href="http://www.jd.com/favicon.ico" type="image/x-icon" />
</head>
<body><h1>一级标题</h1>
</body>
</html>

1.6其它

颜色的写法颜色的名称,比如:`red, blue, green, ...`十六进制的色码,比如:#FF0000。如果六位数字一样,可以简写,比如:#666666简写成:#666RGB表示法: 很少使用(255,255,255)尺寸的写法固定像素,比如:500px百分比,比如:50%。 注意:根据父容器计算的百分比路径的写法绝对路径:带盘符的路径(在web应用里是禁用的),比如:C:\a.jpgurl网址(要求是联网的),比如:http://www.xxx.com/aa.jpg以/开头的路径(在web核心里有少量使用)
相对路径:以./开头的,从当前文件夹里查找。./可以省略不写以../开头的,从上级文件夹里查找特殊字符的写法有些字符是HTML 语法里需要使用的,比如:>  <等等,这些字符就是特殊字符。要使用实体字符代替特殊字符 &lt;        <&amp;       &&gt;       >&copy;      ©&spades;   ♠ &clubs;       ♣ &hearts;  ♥&diams;        ♦

1.7媒体标签

1.audio 音频标签<audio> 标签用于播放声音,比如音乐或其他音频流,是 HTML 5 的新标签。可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。属性:属性            值           描述autoplay  autoplay    如果出现该属性,则音频在就绪后马上播放。controls     controls    如果出现该属性,则向用户显示控件,比如播放按钮。loop      loop        如果出现该属性,则每当音频结束时重新开始播放。preload       preload     如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用"autoplay",则忽略该属性。src      url         要播放的音频的 URL。
2.video 视频标签<video> 标签用于播放视频,比如电影片段或其他视频流,是 HTML 5 的新标签。Internet Explorer 8 以及更早的版本不支持 <video> 标签。可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。属性属性         值           描述autoplay  autoplay    如果出现该属性,则视频在就绪后马上播放。controls     controls    如果出现该属性,则向用户显示控件,比如播放按钮。height        pixels      设置视频播放器的高度。width        pixels      设置视频播放器的宽度。loop         loop        如果出现该属性,则当媒介文件完成播放后再次开始播放。muted      muted       规定视频的音频输出应该被静音。poster       URL         规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。preload   preload     如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用"autoplay",则忽略该属性。src      url         要播放的视频的 URL。

1.8框架标签

1.框架标签:frame框架标签在html5中已经淘汰,但后期某些项目中会使用到
2.应用场景用于HTML4.01,框架主要用于后台管理系统的界面开发。在一个页面中引用了其它几个页面,每个页面是一个框架,整个构成了一个框架集。
3.与普通页面的区别:1. 需要使用框架的DTD文件2. 页面中没有body标签,而是使用frameset标签代替
4. frameset框架集的属性rows   设置框架每1行的高度。 如:rows="100,300,300" 表示有3行,第1行高100,第2行300,第3行300rows="10%,90%" 表示有2行,第1行高占页面的10%,第2行占90%rows="200,*" 表示有2行,第1行200个像素,剩下的给第2行cols    设置框架每1列的宽度
5.frame框架的属性属性名         作用src       框架中显示的HTML文件name        当前框架的名字noresize     不能修改框架的尺寸

1.9内联框架iframe

1.iframe 元素会创建包含另外一个文档的内联框架(即行内框架),用于在一个页面中包含另一个页面或资源。可以把需要的文本放置在 <iframe> 和 </iframe> 之间,这样就可以应对无法理解 iframe 的浏览器。
2.属性            值                   描述left      right
align           top                 不赞成使用。请使用样式代替。规定如何根据周围的元middle              素来对齐此框架bottomframeborder    1/0                 规定是否显示框架周围的边框。height            pixels/%            规定 iframe 的高度。
longdesc        URL                 规定一个页面,该页面包含了有关 iframe 的较长描述。
marginheight    pixels              定义 iframe 的顶部和底部的边距。
marginwidth     pixels              定义 iframe 的左侧和右侧的边距。
name            frame_name          规定 iframe 的名称。""allow-formsallow-same-origin    启用一系列对 <iframe> 中内容的额外限制。
sandbox         allow-scripts       allow-topnavigationscrolling        yes/no/auto         规定是否在 iframe 中显示滚动条。
seamless        seamless            规定 <iframe> 看上去像是包含文档的一部分。
src             URL                 规定在 iframe 中显示的文档的 URL。
srcdoc          HTML_code           规定在 <iframe> 中显示的页面的 HTML 内容。
width           pixels/%            定义 iframe 的宽度。

1.10表单

1.表单使用的标签有:form标签 :表单本身 input标签:输入项标签select标签:下拉框标签textarea标签:文本域标签注意:input、select、textarea要放到form标签内部,才能提交数据;否则不能提交
2.form标签:1.代表表单本身,要把表单项写到form标签内部才会生效2.接收用户的输入信息3.将输入的数据提交给服务器属性:name:表单的名称action:表单提交的路径method:表单提交的方式,常用的有get和postget提交,参数会显示到地址栏;post提交,参数不会显示到地址栏get提交,不安全;post提交,相对安全get提交,有长度限制;post提交,没有长度限制get提交,只能提交字符串数据;post提交可以提交任意数据,包含文件,所以如果是文件上传必须使用post一般get方式是用于从服务器获取数据,post方式是用于向服务器提交数据
3.input标签输入项标签,不同type属性,会有不同的显示效果和不同的作用属性:type:input的类型,不同type是不同的表单项text        文本框:value属性是默认值password  密码框:value属性是默认值radio     单选按钮:name属性相同,说明同组;value是选项的值;增加checked属性表示选中了checkbox 复选框:name属性相同,说明同组;value是选项的值;增加checked属性表示选中了button        按钮:普通按钮,value是按钮上显示的文字submit      按钮:提交按钮,value是按钮上显示的文字reset       按钮:重置按钮,value是按钮上显示的文字image       按钮:图片提交按钮,value是图片显示不出来时的文字file       文件选择框,value无效hidden      隐藏域,不显示到页面上,但是会提交的表单项name:表单项的名称,如果表单项数据要提交,就必须有name属性value:表单项的值,作用随着type属性值而改变disabled:表单项禁用,不可修改值,也不会被提交readonly:表单项只读,不可修改值,但会被提交
4.select标签下拉框标签,要和子标签option配合实现下拉框select标签:下拉框name:表单项的名称,如果表单项的数据要提交,就必须有name属性multiple 表示可以多选option标签:下拉选项value:下拉选项的值,选中哪个选项,就提交哪个选项的值selected:表示下拉选项被选中了
5.textarea标签文本域标签,用于输入多行文本属性:name:如果表单项数据要提交,就必须要有name属性rows:文本域的高度,可以显示几行(有浏览器兼容性问题)cols:文本域的宽度,可以显示几列(有浏览器兼容性问题)注意:textarea标签没有value属性,它的默认值要写在标签体里

1.11块元素和内联元素

1.根据占据空间方式不同,标签分为两类块元素:也叫行级元素,指独占一行的元素。内联元素:也叫行内元素,内容多大就占多大空间的元素
3.两个典型容器标签div和span都不会对标签内容做任何修饰,都是配合CSS实现样式修饰和页面布局的区别:span:通常用于文本信息的显示,span不会换行div:通常用于非文本信息的显示,div会换行

Day02CSS

2.1CSS引入方式

简介:CSS(Cascading Style Sheet)层叠样式表层叠样式: 对同一个标签应用不同的样式,所有样式会叠加在一起展示出效果.优点:把html内容和css样式分离,降低了耦合度,提高了样式复用性,而且还可以提供更强大的美化效
果.
css引入方式:
1.行内样式把样式写在标签的style属性里没有复用性
2.内部样式把样式写在style标签里,style标签放在head标签里在当前页面里可以复用
3.外部样式把样式写在单独的css文件里,在页面里使用link标签引入外部的css文件项目里所有页面都可以复杂,复用性最强link标签的属性:type:引入的文件类型,固定值text/css。可以省略不写rel:引入的文件和当前文件的关系,固定值stylesheet。href:引入的文件路径
4.优先级:行内样式的优先级是最高;内部和外部就要看谁写在后面通常在项目里面基本上不会用行内样式,都是使用内部或者外部样式

2.2CSS选择器

CSS提供了多种查找标签的方式,常用的有:基本选择器,扩展选择器
1.基本选择器:标签选择器:标签名称{...},根据标签名称选择ID选择器:#ID值{...},根据标签的id选择,约定俗成的规范: 一个页面上不能出现多个标签有相同的id类选择器:.类名{...},根据标签的class属性选择,页面上允许出现相同类名的标签通配符选择器:*{...},查找所有标签优先级:ID选择器 > 类选择器 > 标签选择器>通配符如果优先级相同,后加载覆盖先加载2.扩展选择器把基本选择器进行组合,可以更加灵活的使用选择器 后代选择器{...}:后代选择器/层级选择器不同层级间用空格分开选择器[属性名]{...}:含有指定属性名的元素选择器[属性名='值']{...}:属性名=指定值的元素选择器1,选择器2,...{...}:并集选择器3.伪类选择器a:link{...}:正常状态的超链接a:visited{...}:被访问过的超链接a:hover{...}:鼠标悬停的超链接a:active{...}:鼠标点下的超链接a 表示的是超链接的标签。
4.CSS语法:选择器{CSS样式}选择器:匹配标签CSS样式:标签要显示的外观效果 格式 {样式名:样式值;样式名:样式值;}样式名多个单词用短杠-分割样式值多个单词用空格 分割
5.CSS注释/* CSS注释*/

2.3CSS常用样式

  • 修饰文本的样式
样式名 作用 取值
color 设置文本颜色
line-height 设置文本行高: 一行的高度
text-decoration 设置文本上的线条 underline:下划线;
overline:上划线;
line-through:删除线
none:没有线条
text-indent 设置首行缩进 使用em。一个em表示一个字符
text-align 设置文本的水平位置 left:靠左
center:居中
right:靠右
  • 修饰文字的样式
样式名 作用 取值
font-family 设置字体 宋体、楷体等等
font-size 设置文字大小
font-style 设置文字样式 italic:斜体, normal:普通字体,可以代替i标签
font-weight 设置文字加粗 bold:加粗,可以代替b标签
  • 修改背景的样式
样式名 作用 取值
background-color 设置背景颜色
background-image 设置背景图片 url("图片路径")
background-repeat 设置平铺方式 no-repeat:不重复
repreat-x:横向重复
repeat-y:纵向重复
repeat:都重复
background-position 设置背景图片位置 left top
  • 显示与隐藏样式
样式名 作用 取值
display 设置元素显示的方式 none:元素隐藏不显示
inline:元素显示成内联元素
block:元素显示成为块元素

2.4盒子模型

盒子模型介绍:Java开发:一切皆对象; 前端页面的设计:万物皆盒子给任何一个元素添加一些样式,看起来像是盒子。这些样式一起,统称为:盒子模型。所有HTML元素可以看作盒子,是用来设计和布局时使用。盒子模型包含的样式有:width:宽度height:高度margin (外)边距 边框之外的距离 默认透明 可以设置 上 右 下 左 的 大小 auto为自动居中对齐border 边框 可以设置边框的 上 右 下 左 的 大小 类型 颜色border-radius 可以设置四个角(左上,右上,右下,左下)边框从多少像素开始圆滑,一般设置一个值全部应用padding (内)填充 边框和内容之间的距离 默认透明 可以设置 上 右 下 左 的 大小content 内容 是标签中内容放置区域两种盒子模型:标准盒子模型:是默认的盒子模型样式:`box-sizing:content-box;`特性:width和height是内容区域的大小。如果增加了内边距和边框,盒子会撑大怪异盒子模型:样式:`box-sizing:border-box;`特性:width和height是盒子的大小。如果增加了内边距和边框,内容会缩小,盒子大小不变

Day03JavaScript初级

3.1js简介和作用

1.简介:JS:JavaScript。是web开发中不可缺少的脚本语言,不需要编译就能运行(解释型语言)。它“寄生”在html体内放在服务器上,随网络传输到客户端,在浏览器里运行。运行环境:浏览器js跨平台(Java跨平台,因为Java在JVM里运行)js大小写敏感;基于对象的语言(它里面没有继承)
2.作用:和用户交互,实现页面的动态效果的操作浏览器:用户做某些操作,让js操作浏览器  前进一步、后退一步、弹窗、刷新页面等等操作网页:用户做某些操作,让js操作网页  操作网页样式、操作标签内容、操作属性
3.组成:ECMAScript:规定了js的基本语法规范BOM:Browser Object Model,浏览器对象模型。js可以调用BOM对象,来操作浏览器DOM:Document Object Model,文档对象模型。js可以调用DOM对象,来操作网页
4.js的引入语法内部js在html文档里增加script标签,把js代码写在script标签里<script>alert();</script>引入外部js把js代码写在单独的xxx.js文件里,在html中使用script标签引入js文件   <script src="js文件路径"></script>注意:js越晚加载越好,建议放在body结束标签之前(css建议放在head里)如果一个script标签负责引入了外部js文件,那么它里面不能再写js代码
5.js的注释js的单行注释:// 注释内容js的多行注释:/* 多行注释 */
6.js的三种输出方式弹窗输出:alert("输出内容")输出到页面:document.write("输出内容")输出到控制台:console.log("输出内容")

3.2基本语法

1.定义变量关键字 变量名 = 变量值var       定义变量:允许重复定义变量,定义变量是全局变量,用在ES5及更低版本中let     定义变量:变量不可重复声明,只在当前代码块有效,用在ES6及更高版本中(开发中建议使用let定义变量,语法更严谨)const    定义常量:常量值不可修改js是弱类型语言:声明变量时,不需要声明类型。js是动态类型语言:一个变量的类型是可变的
2.数据类型number        数字类型        1, 2, 3, 3.14boolean        布尔类型        true, falsestring       字符串类型       "hello", 'hello'object      对象类型        new Date(),  nullundefined  未定义类型       undefined
3.输出变量的类型typeof关键字,用于判断一个变量的类型
4.运算符+,-,*,/,%,+=,-=,*=,/=,%=,++,--,>,<,=,>=,<=,==,!=,&&,||,!,三元等等== 比较值。只要值一样,就是true,1=="1",结果是true===(推荐)比较值和类型。只有值和类型都一样,才是true,1==="1",结果是false-*/   :如果是数字,正常运算如果不是数字,js会尝试转换成数字再运算如果转换不成功,结果是NaN如果除数是0,结果是Infinity
5.流程控制语句if, else, else if, while, switch, for特殊的是if判断:任何类型的数据,都可以作为判断条件boolean类型:true/falsenumber类型:0是false,非0是truestring类型:空串""是false,非空字符串是trueobject类型:null是false,非null是trueundefined类型:始终是false

3.3函数

1.普通函数://1.定义 一个普通函数function 函数名(参数名1,  参数名2, ...){//函数体//如果需要返回值,就return 值; 否则就不return}//2.调用 一个普通函数let result = 函数名(实参1,实参2, ...);
2. 匿名函数:1.把匿名函数赋值给一个变量,通过变量名调用2.匿名函数作为参数,传递给其它函数3.js的函数没有重载:同名函数会覆盖掉,只有最后一个有效4.形参个数和实参个数无关:在函数里可以使用隐含的arguments来得到所有的实参数组
3.修改标签的属性值let element = document.getElementById("id");参数id:标签上的id属性值返回值:id对应的标签对象element.src = "新的属性值"//修改src的值element.innerHTML = "新的属性值"//设置span文本的值

3.4事件

1.概念事件:用户在浏览器上做一些事情、动作事件源:事件、动作发生在哪个标签,即:事件发生的源头响应行为:事件发生之后,要执行的代码,通常是封装成函数来调用
2.事件绑定:第一种普通函数方式: 在标签上设置onclick="普通函数()"第二种匿名函数方式:在script代码中,获取到标签.onclick = 匿名函数let button = document.querySelector("#id");button.onclick = function(){//this:当前事件源-按钮标签对象alert();}
事件属性 描述,监听什么
onclick 监听鼠标单击
ondblclick 监听鼠标双击
onsubmit 监听表单提交了,事件源是表单form标签
onchange 监听域内容改变,通常用于监听下拉框的选项变化
onload 监听加载完成,通常用于监听浏览器加载完了页面
onfocus 监听获取焦点(光标)
onblur 监听失去焦点(光标)
onkeydown 监听键盘按键按下
onkeypress 监听键盘按键按下或按住
onkeyup 监听键盘按键弹起
onmousedown 监听鼠标按键按下
onmouseup 监听鼠标按键弹起
onmouseover 监听鼠标移入
onmouseout 监听鼠标移出
onmousemove 监听鼠标移动

3.5引用数据类型

1.Array数组创建:new Array();//长度是0new Array(size);//长/度为size,里边是空的new Array(element0, element1, ..., elementn);//相当于Java的:new Object[]{v1,v2,v3...}let arr = ["a","b","c"];(推荐)遍历whiledo whilefor循环forin循环,可以遍历对象,遍历出数组中的索引let stu = {id:5,name:"李四",age:18};//JS对象使用大括号定义forof循环,不能遍历对象,遍历出数组中的元素let arr = ["刘一","陈二","张三"];//JS数组使用中括号[]定义属性length:设置或获取数组中元素的数目设置的值小,会截取数组前面对应的值设置的值大,会扩容数组(没有值的元素是undefined)方法concat(arr1, arr2, ..., arrn):把多个数组合并成一个,返回新数组join(seperator):把数组元素 按照指定分隔符拼接字符串,返回拼接的字符串reverse():颠倒数组里元素的顺序,直接在原数组里操作,不会创建新数组sort():数组元素排序。直接在原数组里排序,不会创建新数组arr.sort(function(a,b){return a-b;//升序});
2.Date日期创建let now = new Date();//当前时间let date1 = new Date(2019, 9, 1);// 2019-10-01。注意:月是从0开始的let date2 = new Date(2019, 9, 1, 11, 20, 30);//2019-10-01 11:20:30方法getTime():获取毫秒值(从197011日开始)setTime(ms):以毫秒值设置日期toLocaleString():把日期对象 转换成  本地日期格式的字符串
3.Math数学工具不需要创建对象,直接使用Math的方法和属性即可属性和方法:Math.PI:圆周率Math.floor():向下取整,取小于该值的第一个整数Math.ceil():向上取整Math.random():求随机数,范围[0,1)
4.String字符串属性:length:字符串的长度方法:substring(startIndex, endIndex):截取字符串,含头不含尾subStr(begin,length),从下标为begin的字符开始截取,总共截取length个字符split(separator):切分字符串toLowerCase():转换成小写toUpperCase():转换成大写
5.RegExp正则表达式创建let reg1 = /pattern/attributes;   //直接量方式,通常采用这一种let reg2 = new RegExp(pattern, attributes); //对象形式,特殊符号需要转义pattern 正则表达式attributes 正则表达式修饰符i 不区分大小写 ,匹配字符串时不区分大小写g 全局匹配 ,匹配到一个之后不停止,匹配字符串的所有内容m 多行匹配 ,匹配字符串的所有行的内容校验test(string):校验字符串的格式是否符合正则表达式注意/[a-z]{3}/  //正则表达式对象,模糊匹配/^[a-z]{3}$/ //精确匹配/^[a-z]{3}$/i //忽略大小写
6.全局函数1. 字符串转为数字parseInt();//字符转为整数数字,从左到右遇到非数字停止parseFloat();//字符转为小数数字,从左到右遇到非数字停止isNaN();//判断非数字2. 对数据进行加密encodeURI() 把字符串编码为 URI3. 对加密数据进行解密decodeURI() 解码某个编码的 URI4. 把字符串当做js表达式来执行eval() 计算 JavaScript 字符串,并把它作为脚本代码来执行

Day04JavaScript高级

4.1bom对象

1.概念:Browser Object Model,浏览器对象模型,可以理解为是把浏览器封装成的对象,这些对象提供了操作浏览器的方法
2.作用:让js代码调用bom对象的方法,来操作浏览器
3.对象:window:浏览器窗口对象,是其它bom对象的顶级对象window.location:浏览器地址对象,可以实现网页跳转。可以简写成locationwindow.history:浏览器历史记录对象,可以实现历史记录切换。简写成historywindow.screen:浏览器的屏幕显示信息对象,可以操作浏览器窗口大小、位置、颜色等信息,简写成screenwindow.navigator:浏览器信息对象,只读的。可以获取浏览器的内核、版本、操作系统等信息,简写成navigator
4.JSON:简介:JavaScript Object Notation, JS 的对象简谱,是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。语法规则:数据:{属性:值,属性:值}键值:键值之间是冒号,属性值与属性值之间是逗号对象:用{}表示数组:用[]表示JSON对象与字符串转换的相关函数JSON.stringify(object) 把对象转为字符串JSON.parse(string) 把字符串转为对象

4.2BOM API

让浏览器弹窗

方法 参数 返回值 说明
alert(string) 提示信息内容 普通弹窗
confirm(string) 提示信息内容 boolean 确认弹窗
prompt(string) 提示信息内容 string/null 输入弹窗

让浏览器开启定时器

方法 参数 返回值 说明
setInterval(fn,ms) fn:函数对象 ms:间隔毫秒值 number,定时器的id 开启执行多次的定时器
clearInterval(id) id:定时器的id 清除定时器
setTimeout(fn, ms) fn:函数对象 ms:延迟毫秒值 number,定时器的id 开启执行一次的定时器
clearTimeout(id) id:定时器的id 清除定时器

全局函数

方法 参数 返回值 说明
parseInt(string) 字符串 number 转换成整数
parseFloat(string) 字符串 number 转换成小数
eval(string) 字符串 把字符串作为js代码执行一次

location对象

方法/属性 说明 示例
href 获取/设置网址 获取网址:let url = location.href 网址跳转:location.href="http://www.baidu.com"
reload() 刷新当前页面 location.reload()

history对象

方法 说明 参数 示例
forward() 前进一步 history.forward()
back() 后退一步 history.back()
go(n) 切换n步 n:整数。正数前进,负数后退 history.go(-1)

4.3dom

1.简介:Document Object Model,文档对象模型,可以理解为是把整个html网页封装成的对象,dom对象提供了操作网页的方法
2.作用:可以操作标签:获取标签、创建标签、插入标签、删除标签可以操作属性:获取标签的属性值,设置标签的属性值可以操作css样式
3.dom树网页被加载到浏览器的内存中后,网页上所有的标签、属性、文本全部都会转换成节点对象,然后按照层级结构形成一个树形结构,这棵树叫dom树

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Df2iy9v-1605668744711)(assets\dom树.png)]

4.4 DOM API

ES6提供的获取标签方法

方法 说明 参数 返回值
querySelector(selector) 获取一个标签 选择器字符串 Element
querySelectorAll(selector) 获取多个标签 选择器字符串 Element类数组

ES5老版本获取标签方法【了解】

方法 说明 参数 返回值
getElementById("id值") 根据id获取标签对象 标签的id Element
getElementsByName("name值") 根据标签name获取标签对象 标签的name Element类数组
getElementsByTagName("标签名") 根据标签名称获取标签对象 标签名称 Element类数组
getElementsByClassName("类名") 根据标签class获取标签对象 标签的class Element类数组

操作标签

方法 说明 参数 返回值
createElement("标签名称") 创建标签 标签名称,比如:option Element对象
父标签对象.appendChild(element) 追加插入子标签 要插入的标签Element
remove() 删除标签

操作属性

方法 说明 参数 返回值
getAttribute(attrName) 获取属性值 属性名称 属性值
setAttribute(attrName, attrValue) 设置属性值 属性名称,属性值
removeAttribute(attrName) 删除属性 属性名称
1.操作标签体内容Element对象提供了获取和操作标签体的API获取标签体内容:let inner = 标签element.innerHTML设置标签体内容:标签element.innerHTML = "新的标签体内容"是覆盖式设置设置的html代码会生效
2.操作标签体文本innerText:只用在获取标签体的文本
3.移除元素(了解) outerHTML标签element.outerHTML = "";//删除包含自身的所有html内容
3.标签Element对象提供了操作属性的方式1.一般属性值获取属性值:let v = 标签element.属性名称;设置属性值:标签element.属性名称 =;注意:通过 对象.getAttribute(‘属性’)拿到的是当初设置的值通过 对象.属性 拿到的是浏览器计算后的值因为class是关键字,所以操作class属性的方式有点特殊:2.class属性获取class属性值:let className = 标签element.className设置class属性值:标签element.className = "值";5.操作标签的css样式:有浏览器兼容性问题,后期会被jQuery代替掉1. 设置一个css样式语法: element.style.驼峰格式样式属性名 获取或者修改一个css样式2. 批量设置css样式语法: element.style.cssText 获取后者修改 标签的style属性的文本值3. 通过class设置样式语法: element.className 获取或者修改标签的class属性的文本值4. 切换class样式语法: element.classList es6特别提供的操作元素class的接口element.classList常用方法有四个:add() 添加一个class样式remove() 移除一个class样式contains() 判断是否包含某一个样式toggle() 切换一个class样式 有则删除,无则添加

Day05jQuery

5.1jQuery概念及特点

1.简介1.是一个优秀的JavaScript轻量级框架之一。2.jQuery本质是js文件,但是功能更强、更简洁。3.兼容CSS3和各大浏览器4.提供了dom、events(事件)、animate(动画)、ajax(异步请求)等的简易操作5.还有非常丰富的插件6.简化了获取标签的方法:得到的是数组,但是又对数组做了再封装7.简化了操作dom的方法:使用jQuery的方法直接操作即可,获取了多少个标签,操作的就是多少个标签,不需要再循环了
2.引入<script src="jQuery类库的路径"></script>
3.和js的区别对象说明:js对象:js语法提供的对象,或者使用js方法得到的对象jQuery对象:使用jQuery方法得到的对象jQuery对象进行dom操作只能调用jQuery的方法,js对象进行dom操作只能调用js的方法或者属性对象转换:js对象转jQuery对象:$(js对象)jQuery对象转js对象:jQuery对象[索引]或者 jQuery对象.get(索引)
4.基础语法: $(selector).action()$:使用美元符号来定义一个jquery对象selector: 匹配一个标签action: 执行jquery的方法
5.jquery对象的遍历1.$.each() 用法示例 let items = $("li");items.each(function(index, element){});$.each(items, function(index,element){});2.fori $.length 表示jquery对象中元素的个数 $[index]3.forof $.toArray()把jquery对象转为dom对象数组

5.2选择器

基本选择器

选择器 描述
$("元素名称"),比如:$("div") 标签选择器
$("#id值"),比如:$("#d1") ID选择器
$(".类名"),比如:$(".c1") 类选择器

层级选择器

选择器 描述
$("A B")★★ 后代选择器,获取到A的后代元素B。比如:$("div a")找div的后代元素a
$("A>B")★★ 子选择器,获取到A的子元素B。比如:$("div>a")找div的子元素a
$("A+B") next选择器,获取A元素后边挨着的B元素(B是A挨着的弟弟)
$("A~B") siblings选择器,获取A元素后边同级所有的B元素(B是A的弟弟妹妹们)

属性选择器

选择器 描述
$("A[attr]") 获取 含有attr属性的 A元素。$("input[class]"),找含有class属性的input标签
$("A[attr=v]") 获取 attr属性值等于v的 A元素。$("input[type='text']"),找文本框
$("A[][]...") 复合属性选择器。$("input[class][type='text']"),找有class属性的文本框
$("A[attr!=v]") 获取 attr属性值不等于v的 A元素
$("A[attr^=v]") 获取 attr属性值以v开头的 A元素
$("A[attr$=v]") 获取 attr属性值以v结尾的 A元素
$("A[attr*=v]") 获取 attr属性值里包含v的 A元素

基本过滤选择器

选择器 描述
:first 获取第一个,$("div:first")找第一个div
:last 获取最后一个,$("span:last")找最后 一个span
:not(selector) 排除 selector的结果不要,$("div:not(.cls)")找div,但是不要.cls的
:even 获取索引为偶数的,$("div:even")
:odd 获取索引为奇数的
:eq(n) 获取索引等于n的, equals
:gt(n) 获取索引大于n的, greater than
:lt(n) 获取索引小于n的, less than

表单属性选择器

选择器 描述
:enabled 获取可用的表单项
:disabled 获取不可用的表单项
:checked★★★ 获取被选中的radio,或者checkbox
:selected★★★ 获取被选中的下拉选项option

5.3dom操作

操作标签体

方法 参数 描述
html() 获取标签体
html(string)★★ string:要设置的内容 设置标签体,设置的html会生效,覆盖式设置
text() 获取标签体里的文本
text(string) 设置文本,哪怕设置html代码,也不会生效,覆盖式设置

操作表单项的值

方法 参数 描述
val() 获取表单项的值
val(string) string:要设置的值 设置表单项的值

操作属性

方法 参数 描述
attr(name) name:属性名称 获取属性值
attr(name,value) value:属性值 设置属性值
prop(name) 获取属性值
prop(name,value) 设置属性值
removeAttr(name) 删除属性

操作样式

方法 参数 描述
css(name) name:样式名称 获取样式
css(name,value) value:样式值 设置样式
css({name:value,name:value}) 批量设置样式
addClass(className) 添加类名
removeClass(className) 删除类名
toggleClass(className) 切换类名:如果有就删掉;如果没有就加上

操作标签

方法 描述
$("完整html代码") 创建标签。$("<li class='a'>WOW</li>")
parent.append(child) 把child插入到parent内部最后(child成为parent的小儿子)
child.appendTo(parent) 把child插入到parent内部最后(child成为parent的小儿子)
parent.prepend(child) 把child插入到parent内部最前(child成为parent的大儿子)
child.prependTo(parent) 把child插入到parent内部最前(child成为parent的大儿子)
remove() 删除元素
empty() 清空元素

5.4事件

js事件写法 jQuery事件写法
onclick单击 click(fn)
ondblclick双击 dblclick(fn)
onsubmit表单提交 submit(fn)
onchange域内容改变 change(fn)
onload加载完成 $(fn),$(document).ready(fn)
onfocus获取焦点 focus(fn)
onblur失去焦点 blur(fn)
onkeydown键盘按键按下 keydown(fn)
onkeypress键盘按键按下、按住 keypress(fn)
onkeyup键盘按键弹起 keyup(fn)
onmousedown鼠标按键按下 mousedown(fn)
onmouseup鼠标按键弹起 mouseup(fn)
onmouseover鼠标移入 mouseover(fn)
onmouseout鼠标移出 mouseout(fn)
onmousemove鼠标移动 mousemove(fn)

5.5其他

1.基本选择器:$("selector,selector")
2.基本过滤选择器:通常是和其它选择器配合使用,进行再次过滤不是在整个页面里的索引
3.标签体开始标签 和 结束标签中间的内容
4.操作表单项的值(val)仅仅适用于表单项标签,而不适用于div、span.....非表单项标签
5.操作属性如果要操作的是checked和selected等boolean类型的属性(原生属性值),必须使用prop()方法形式一般是checked="checked",disabled="disabled"其它属性,优先使用attr(),如果不行,再使用prop()
6.jQuery绝大多数的事件写法:js事件名称去掉on事件变成方法响应行为作为方法的实参
7.事件绑定与解绑1. $对象.event(函数) 把event事件与函数绑定 注意: $.event() 手动触发一次事件2. $对象.on("event",函数) 把event事件与函数绑定3. $对象.off("event") 解除event事件绑定4.当对象为多个时的遍历绑定方法1.用for循环绑定,相当于一次全部绑定,分别等待响应2.用$(this)代表相应的那个对象
8.对象克隆jQuery对象有一个clone()方法,可以复制当前的jQuery对象

5.6JQ动画

基本效果

方法名称 解释
show([speed],[easing],[fn]]) 显示元素方法
hide([speed,[easing],[fn]]) 隐藏元素方法
toggle([speed],[easing],[fn]) 切换元素方法,显示的使之隐藏,隐藏的使之显示

滑动效果

方法名称 解释
slideDown([speed,[easing],[fn]]) 向下滑动方法
slideUp([speed,[easing],[fn]]) 向上滑动方法
slideToggle([speed],[easing],[fn]) 切换元素方法,显示的使之隐藏,隐藏的使之显示

淡入淡出效果

方法名称 解释
fadeIn([speed,[easing],[fn]]) 淡入显示方法
fadeOut([speed,[easing],[fn]]) 淡出隐藏方法
fadeToggle([speed],[easing],[fn]) 切换元素方法,显示的使之隐藏,隐藏的使之显示

参数

参数名称 解释
speed 三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
easing 用来指定切换效果,默认是"swing",可用参数"linear"
fn 在动画完成时执行的函数,每个元素执行一次

Day06Ajax

6.1JSON

1.从xml说起ml的作用:传输数据,配置文件,存储数据xml定义的语法:标签语言的语法xml的解析:如果数据过多的话内存占用较大xml的问题:语法太繁琐,无用数据太多js提供了一种数据格式:json,代替了xml
2.json简介JavaScript Object Notation,js对象标记法。是一种轻量级的数据格式,可以代替XML。采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
3.json的语法定义的语法:对象形式:{"key":value, "key":value, ...}类似于js对象的格式:{key:value, key:value, ...}json格式的key,都是字符串数组形式:[value1, value2, value3,...]    let arr = ["a","b","c"]混合形式:以上两种类型任意混合解析的语法:从数组里取数据,使用索引:json数组对象[索引]从对象里取数据,使用:json对象.key
4.JSON对象与字符串的转换JSON.stringify(json) 把json对象/数组转换成字符串类型JSON.parse(string)        把字符串解析成json对象/数组

6.2Ajax介绍

1.简介Ajax:Asynchronous JavaScript and XML,异步的JS和XML。JavaScript:Ajax技术是JavaScript提供的XML:服务端和客户端交互时使用的数据格式是XML,但是目前已经被JSON代替了。Microsoft的IE提供的,但是由chrome推广:Chrome的gmail邮箱里使用了自己的Ajax技术
2.作用:局部刷新技术:只刷新页面的一部分,不刷新整个页面。刷新速度快,用户体验好异步加载技术:发完请求之后,不需要等待结果,可以继续做其它事情。如果需要在页面不刷新的情况下,完成一些功能,那么这个功能就要使用Ajax实现。
3.同步和异步同步加载:1.发完请求之后,在等待服务端的响应的过程中,是“假死”状态,直到收到服务器的响应信息之后才能发起下一次请求操作(一个页面只能有一个同步请求)2.整个页面都会发生刷新(跳转)3.同步请求地址栏会发生变化异步加载:1.发完请求之后,在响应回来之前,仍然可以做其它操作,而不会“假死”,一次异步请求还未收到服务器响应的时候,我们可以再次发起下一次异步请求操作(一个页面可以同时存在多个异步请求)2.异步请求是进行局部刷新3.异步请求不会改变地址栏地址

6.3js的Ajax

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js的Ajax</title>
</head>
<body>
<input type="button" value="js的Ajax" onclick="jsAjax()"><div id="resultDiv">在这里显示最终的响应结果
</div>
<!--
js的Ajax问题:1. 重复代码过多。不同功能只是请求信息和响应结果的处理不同,其它完全一样2. 有浏览器兼容性问题。
-->
<script>function jsAjax() {//1. 创建Ajax引擎对象let xmlhttp = new XMLHttpRequest();//2. 给Ajax引擎对象绑定事件xmlhttp.onreadystatechange = function(){//如果已经正常响应了if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {//获取服务端响应的结果,显示到页面上resultDiv里let result = xmlhttp.responseText;document.querySelector("#resultDiv").innerHTML = result;}};//3. 设置请求信息 请求方式 请求路径 是否异步xmlhttp.open("post", "../data/demo01.json", true);//4. 发送请求xmlhttp.send();}</script>
</body>
</html>

6.4jQuery的Ajax

1.$.get()和$.post():都是异步的$.get(url, data, callback, type):GET方式的请求$.post(url, data, callback, type):POST方式的请求参数:url:请求的地址。必须 data:提交的表单参数。非必须,格式有两种:name=value&name=value&...{name:value, name:value, ...}callback:回调函数,非必须,是一个匿名函数,里边写对响应结果的处理function(result){//result:服务端响应的结果}type:服务端响应的结果类型,非必须。text/json
2.$.ajax()$.ajax({key:value, key:value,...}) 其中,每个key就是一个配置项,常用的配置项有:url:请求的地址。必须data:请求提交的表单参数,格式有两种:name=value&name=value&...{key:value, key:value,...}type:请求方式,常用的有GET/POST。将来还会用到PUT, DELETEdataType:服务端响应的数据类型/格式,常用的有text, jsonsuccess:回调函数,用来处理结果的async:是否异步,默认是true

6.5其他

客户端和服务器端进行交互的流程[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jp4KulOf-1605668744712)(assets\客户端与服务器端进行交互的流程.png)]

Day07Tomcat&Http协议

7.1WEB开发概述

1.软件架构(Java开发注重的是B/S架构!)C/S架构:客户端/服务器(Client/Server) B/S架构:浏览器/服务器(Browser/Server)
2.web通信WEB采用B/S通信模式,通过超文本传送协议(HTTP, Hypertext transport protocol)进行通信。
3.WEB资源静态资源:指web页面中供人们浏览的数据始终是不变。比如:HTML、CSS、JS、图片、多媒体。动态资源:指web页面中供人们浏览的数据是由程序产生的,不同时间点访问web页面看到的内容各不相同。比如:JSP/Servlet、ASP、PHP注意:如果用户访问的是一个静态资源,那么服务器端是直接响应的!如果用户访问的是一个动态资源,那么服务器会先将动态资源转成静态资源,然后再将这个静态资源响应到客户端浏览器!
3.WEB服务器Web服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,可以向浏览器等Web客户端提供文档、网站文件、数据文件等。一些常用JavaWeb服务器:Tomcat(Apache):免费,不是支持所有的JavaEE规范JBoss(Redhat红帽):支持JavaEE,应用比较广;EJB容器(银行)Resin(Caucho):支持JavaEE,应用越来越广;  Weblogic(Orcale):要钱的!支持JavaEE,适合大型项目;Websphere(IBM):要钱的!支持JavaEE,适合大型项目;Glass Fish:最早是Sun公司的产品,后来被Oracle收购,开源,中型服务器。
4.规范J2EE 企业级开发Java规范。标准规范包括:servlet、jsp、jdbc、xml、jta、javamail等。在java中规范就是接口。J2EE又称为JavaEE。WEB服务器对JavaEE规范部分或全部支持(实现),也就是WEB服务器实现部分或全部接口。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H3Xh2NZ3-1605668744714)(assets\1.png)]

7.2WEB服务器Tomcat

1.概述:一个免费的开放源代码的Web应用服务器软件,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选。大型项目和并发访问用户很多的场合下依旧可以通过服务器集群胜任!支持Servlet和JSP 规范,且最新的Servlet 和JSP 规范总是能在Tomcat 中得到体现。因为omcat服务器是在不断更新的!Tomcat本身也是使用Java语言编写的启动Tomcat之前,我们必须要配置JAVA_HOME,因为Tomcat启动需要使用JDK如果是安装版,那么还需要配置CATALANA_HOME变量,用来指定Tomcat的安装路径
2.版本:市场大部分使用的Tomcat7.x版本,趋势向Tomcat8.x版本发展!极少数比较老的项目还在使用6.x版本
--------------------------------------------------------------------------Tomcat版本  Servlet版本   JSP版本   EL版本    JavaEE版本    JDK版本(最低)8.0.x          3.1         2.3      3.0        7.0         7 (1.7)7.0.x            3.0         2.2      2.2        6.0         6 (1.6)6.0.x            2.5         2.1      2.1        5.0         5 (1.5)
--------------------------------------------------------------------------
3.文件目录1.bin:该目录下存放的是二进制可执行文件2.conf:1.server.xml:配置整个服务器信息。例如修改端口号,添加虚拟主机等;2.tomcat-users.xml:存储tomcat用户的文件,保存的用户名及密码以及角色信息。3.web.xml:部署描述符文件,这个文件中注册了很多MIME类型,即文档类型。4.context.xml:对所有应用的统一配置,通常我们不会去配置它。3.lib:Tomcat的类库,里面是一大堆jar文件。4.logs:这个目录中都是日志文件,记录了Tomcat启动和关闭、异常的信息5.temp:存放Tomcat的临时文件,这个目录下的东西可以在停止Tomcat后删除!6.webapps:存放web项目的目录,其中每个文件夹都是一个项目;7.work:运行时生成的文件,最终运行的文件都在这里。通过webapps中的项目生成的!8.LICENSE:许可证。9.NOTICE:说明文件。
4.URL:(Uniform Resource Locator),统一资源定位符是对互联网上资源位置的一种表示,互联网上的每个文件都有一个唯一的URL。完整格式:协议://域名(ip地址):端口号/资源位置?参数=值协议:http、https、ftp等域名:域名或IP地址,都可以访问WEB资源端口号:程序必须使用端口号,才可以让另一个计算机访问。http协议的默认端:80资源位置:用于描述WEB资源再服务器上的位置。参数=值:浏览器和服务器交互传递的数据
5.修改端口号:dos窗口中输入 netstat –nao 就可以查看当前端口的占用情况修改:$JAVA_HOME%/conf/server.xml,同时得修改8009 和 8080端口)
6.发布WEB项目创建一个目录(web资源),里面存放一个html文件!然后将这个目录复制到tomcat/webappas目录下启动Tomcat,通过浏览器访问即可!
7.使用虚拟路径的方式发布项目:1.配置server.xml,添加context标签在tomcat/conf/server.xml中找到<Host>标签,添加<Context>标签<Context path="路径A" docBase="c:\work\文件夹目录"/>访问http://localhost:8080/路径A/文件.html缺点:server.xml是tomcat核心文件一旦出错,导致整个tomcat无法启动。2.配置独立xml文件(无需重启服务器自动加载和卸载项目)tomcat/conf目录下新建一个Catalina目录在Catalina目录下创建localhost目录在localhost中创建xml配置文件,名称为:路径A添加xml文件的内容为:<?xml version="1.0" encoding="UTF-8"?><Context docBase="C:\work\文件夹目录" />访问http://localhost:8080/路径A/文件.html

7.3HTTP协议

1.概念HTTP(hypertext transport protocol),即超文本传输协议。这个协议详细规定了浏览器和万维网服务器之间互相通信的规则。用于定义WEB浏览器与WEB服务器之间交换数据的过程,规定了请求与响应的数据的格式!(请求协议/响应协议)互联网的数据传输底层依赖tcp协议,http协议架构在tcp协议之上,它规范了传输数据的内容和格式。
2.组成HTTP请求包括:请求首行、请求头、请求体(get请求没有请求体、post请求有)HTTP响应包括:响应首行、响应头、响应体
3.特点基于请求/响应模型的协议。请求和响应必须成对出现;先有请求后有响应。HTTP协议默认的端口:80例如:http://www.baidu.com:80Http协议它是无状态的(无法标记用户信息)(要有状态,需要会话跟踪)
4.版本(我们使用的是Http1.1版本)HTTP/1.0:(1996)发送请求,创建一次连接,获得一个web资源,连接断开。使用非持久连接,即在非持久连接下,一个tcp连接只传输一个Web对象.HTTP/1.1:(1999)发送请求,创建一次连接,获得多个web资源,连接断开。默认使用持久连接(然而,HTTP/1.1协议的客户机和服务器可以配置成使用非持久连接).在持久连接下,不必为每个Web对象的传送建立一个新的连接, 一个连接中可以传输多个对象!http/2.0 : (2015)传输的数据经过压缩的,效率很高, 支持推送    http/3.0 : (2019)想基于udp

7.4Http请求协议

1.Http协议规定有7种方式,常用的有GET和POST,在表单中没有明确指定method为post,其余全部为get方式
2.组成:三个部分:请求行,请求头,请求体请求首行;(请求方式 请求的地址 协议与版本)请求头信息;(请求头名称:请求头值)空行;请求体。(POST请求有请求体、GET请求没有请求体)请求头:Host:请求的主机名User-Agent:与浏览器和OS相关的信息。Accept:浏览器可支持的MIME类型(文件类型的一种描述方式)MIME格式:大类型/小类型[;参数]Accept-Language:当前客户端支持的语言Accept-Encoding:支持的压缩格式。Accept-Charset:客户端支持的编码;Connection:客户端支持的链接方式。Cookie:与会话有关技术,用于存放浏览器缓存的cookie信息。Content-Type: 发送数据的媒体类型(POST才用)Content-Length:请求体的字节数(POST才用)Referer:请求来自哪个页面,用来做统计工作和防盗链。If-Modified-Since:本地缓存的最后变更时间,与Last-Modified一起使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oltMDn6z-1605668744715)(assets\2.png)]

7.5Http响应协议

1.格式:响应首行;(协议和版本,响应状态码,对响应状态码的解析)响应头信息;(具体的头名称和值构成)空行;响应体。(服务器发送给浏览器的正文)
2.响应状态码:响应状态码    解释              说明200   OK  请求已成功,请求所希望的响应头或数据体将随此响应返回。出现此状态码是表示正常状态。302 Move temporarily    重定向,请求的资源临时从不同的 URI响应请求。304  Not Modified    从缓存中读取数据,不从服务器重新获取数据。403 Forbidden   服务器已经理解请求,但是拒绝执行它,一般在权限不够的时候常见。404    Not Found   请求失败,请求所希望得到的资源未被在服务器上发现。405 Method Not Allowed  请求行中指定的请求方法不能被用于请求相应的资源500  Internal Server Error   服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理。3.常见响应头信息:常见响应头        描述Location  指定响应的路径,需要与状态码302配合使用,完成跳转。Content-Type   响应正文的类型(MIME类型)Content-Disposition    通过浏览器以下载方式解析正文Set-Cookie    与会话相关技术。服务器向浏览器写入cookieContent-Encoding 服务器使用的压缩格式Content-length    响应正文的长度Refresh  定时刷新,格式:秒数;url=路径。url可省略,默认值为当前页。Server    指的是服务器名称,Last-Modified   服务器通知浏览器,文件的最后修改时间。与If-Modified-Since一起使用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8cI4qE6x-1605668744716)(assets\3.png)]

7.6完整的web项目目录

--src:【Java源代码】
--web:【web资源文件】--html--css--js--img--WEB-INF--web.xml文件【配置文件】--lib目录【第三方jar包】--classes目录【Java源代码生成的字节码文件,自动生成】--index.jsp文件【资源文件】

Day08Servlet

快捷键:1. ctrl + alt + u : 查看一个类的继承结构图2. ctrl + h : 这个类的简化版继承结构

8.1Servlet介绍

1.概述Servlet它是一个接口,它的本质是运行在服务器端的java程序。
2.作用接收用户发起请求携带的数据处理请求将处理的结果响应到客户端浏览器
3.编写一个可以通过浏览器访问的java类:1.创建web项目2.编写普通java类,实现servlet接口3.配置web.xml4.部署web项目5.启动测试注意:但凡与Servlet相关的所有类的对象的创建都是由服务器容器负责创建的!
3.API与Servlet生命周期相关的方法:初始化方法:public void init(ServletConfig servletConfig)创建完对象后就会执行!服务方法:public void service(ServletRequest servletRequest, ServletResponse servletResponse)接收用户发起请求携带的数据、处理请求、将处理的结果响应到客户端浏览器销毁方法:public void destroy()
4.Servlet生命周期:1.默认情况,用户第一次发起请求,由服务器容器Tomcat创建Servlet实例对象,对象在整个Servlet生命周期中只会创建一次。2.紧接着调用init()方法来完成初始化操作,此方法在整个Servlet生命周期中只会执行1次!3.然后调用serivce()服务方法来处理用户请求,这个方法在整个Servlet生命周期中会被执行多次(每访问一次Servlet就执行1)4.当关闭服务器的时候,会调用destroy()方法完成Servlet的销毁!
5.启动加载:<load-on-startup> n </load-on-startup>n取值必须是整数:1) n < 0 , 表示第一次被访问的时候才加载(默认-1)2) n >= 0, tomcat 一启动就会加载这个servlet(创建对象,并调用init方法)a. 数字越小,优先级越高b. 我们一般取值n>=4, tomcat已经默认占用前几位
6.ServletConfigTomcat在Servlet对象创建时,执行init()方法,并创建一个ServletConfig 配置对象主要作用:读取web.xml配置文件Servlet中<init-param>信息,实现参数和代码的解耦

8.2Servlet体系结构

实现Servlet除了实现Servlet接口方式以外,还有2种方式:
1.GenericServlet1.编写普通java类,继承GenericServlet抽象类2.重写service()方法3.配置web.xml
2.HttpServlet(开发常用)1.编写普通java类,继承HttpServlet抽象类2.重写doXXX()方法3.配置web.xml
3.响应代码:响应状态码405,请求方法没有重写响应状态码500,java代码写错了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bsTpkG5V-1605668744716)(assets\4.png)]

8.3Servlet路径

1.web.xml文件的配置<servlet><servlet-name>过度用名字</servlet-name>//名字不能重复<servlet-class>要进入的servlet处理类的全限定类名</servlet-class></servlet><servlet-mapping><servlet-name>过度用名字</servlet-name><url-pattern>/虚拟路径1</url-pattern><url-pattern>/虚拟路径2</url-pattern>//Servlet映射多个url</servlet-mapping>
2.url映射模式<url-pattern> url地址取值:完全匹配:    /xxx/abc  匹配所有:  /*          【只要是这个项目里面的资源都可以匹配到】目录匹配:    /xxx/*      【只要是xxx目录下面的内容都可以匹配到当前Servlet】扩展名匹配: *.html      【只要访问的是html文件,都会匹配到这个Servlet】注意:不要将*放在中间!只能在两边!匹配的精度越高,那么它的优先级越高!
3.访问路径访问资源的方式:1. 浏览器的地址栏2. a标签的href属性3. form表单的action属性4. js的location.href属性5. ajax请求地址路径写法1.完整路径协议://ip:port/资源位置2.简要写法只要在本项目内,省略三要素, 协议://ip:port/模块名称/..路径../3.相对路径相对于当前文件的路径 (相对路径就是省略两个路径相同的部分)

8.4Servlet3.0注解

1.注解:通过注解配置Servlet,简化web.xml配置Servlet复杂性,提高开发效率,几乎所有的框架都在使用注解
2.使用:在要进入的servlet处理类上添加注解@WebServlet(urlPatterns = {"/访问路径1","/访问路径2"...})添加注解后不再需要配置servlet-class。

Day09Request

9.1概述

1.用户通过浏览器访问服务器时,Tomcat将HTTP请求中所有的信息都封装在Request对象中
2.开发人员可以通过request对象方法,来获取浏览器发送的所有信息.
3.体系结构:ServletRequest|HttpServletRequest|org.apache.catalina.connector.RequestFacade(由tomcat厂商提供实现类)

9.2 获取Http请求信息

1.获取Http请求信息request对象的由来:// 父接口的引用指向 子类的实现 (多态)【Tomcat负责】HttpServletRequest request = tomcat/orcacle.RequestFacade(); 首行信息:GET /day09/requestDemo HTTP/1.相关API:(对象为request)String getMethod()  获取请求方式   "GET"String getContextPath()  获取项目虚拟路径  "/day09"String getRequestURI() 获取URI(统一资源标识符)"/day09/requestDemo"StringBuffer getRequestURL()  获取URL(统一资源定位符)"http://localhost:8080/day09/requestDemo"String getProtocol() 获取协议和版本号"HTTP/1.1"String getRemoteAddr() 获取客户端ip
--------------------------------------------------------------
2.获取请求头信息API:String getHeader(String name)根据请求头名称对应的值,注:名称不区分大小写Enumeration<String> getHeaderNames()//获取所有请求头的名称,注:是Iterator前身
--------------------------------------------------------------
3.获取请求参数()注意:不论get还是post请求方式,都可以使用下列方法来获取请求参数在web课程里面,get和post处理的业务逻辑都是一样的....API:String getParameter(String name)获取指定参数名的值String[] getParameterValues(String name) 获取指定参数名的值数组Map<String,String[]> getParameterMap()获取所有参数名和对应值数组
--------------------------------------------------------------
4.中文乱码【重点】原因:编码和解码的码表不一致导致!get:在tomcat8及以上版本,内部URL编码(UTF-8)【不用处理!】post:编码解码不一致,造成乱码现象客户端(浏览器)编码:UTF-8  【html页面已经明确指定为UTF-8】服务器默认     解码:ISO-8859-1 拉丁文  【request.getParameterXxx获得数据,对数据进行解码】解决:指定解码:void setCharacterEncoding(String env)【必须在方法内,行首】或者:String(byte[] bytes, Charset charset) 通过使用指定的 charset 解码指定的 byte 数组,构造一个新的 String。byte[] getBytes(Charset charset) 使用给定的 charset 将此 String 编码到 byte 序列,并将结果存储到新的 byte 数组。

9.3BeanUtils

1.简介提供一些属性用于封装从页面表单获得的那些数据apache组织,提供一套工具类,简化参数的封装将前端提交的数据,直接封装到你想要的JavaBean中需要导两个包
2.JavaBean普通Java类:用于封装页面表单提交的数据实现Serializable接口Serializable:标记接口(里面什么也没有,保证JavaBean能够顺利的完成序列化)类中的属性来自于页面表单的属性!【建议属性与页面表单的name属性值保持一致!】
3.使用BeanUtils.populate(JavaBean,map数组);

9.4请求转发、域对象

1.请求转发:APIRequestDispatcher getRequestDispatcher(String path)通过reqeust对象,获得转发器对象(path前的/可带可不带)void forward(ServletRequest request, ServletResponse response) 通过转发器对象,实现转发功能
2.域对象:域对象必须先设置值,才能获取到值【底层是map结构】一个有作用范围的对象,可以在范围内共享数据request域:代表一次请求的范围,一般用于一次请求中转发的多个资源中共享数据可以用来间接访问WEB-INF目录中,数据比较敏感的页面API:void setAttribute(String name, Object o)设置数据Object getAttribute(String name)获取数据void removeAttribute(String name)删除数据生命周期:用户发送请求时,创建request服务器返回响应时,销毁request作用范围:一次请求,包含多次转发 【只要是转发,就是一次请求~

Day10ServletContext、Response

10.1ServletContext

1.概述web容器(tomcat)在启动时,它会为每个web项目创建一个对应的ServletContext对象,代表当前web项目ServletContext对象是域范围最大的一个域对象【作用域整个web项目,不管多少个请求,数据全都能共享】
2.作用:1. 域对象(共享数据)2. 获取资源在服务器的真实地址3. 获取全局的配置参数4. 获取文件MIME类型
3.ServletContext对象获取方式:ServletContext getServletContext()对象可以是:1. ServletConfig对象2. 继承了GenericServlet的类(this)【GenericServlett实现了ServletConfig接口】3. 继承了HttpServlet的类(this4. request对象获得(doXxx方法中的参数)
4.API:1. 存储数据void setAttribute(String name,Object value)2. 获取数据Object getAttribute(String name)3. 删除数据void removeAttribute(String name)4.根据文件的虚拟路径获取真实路径String getRealPath(String "/相对当前项目的路径")5.获得项目路径String getContextPath()(结果是“/day01”)6.从web.xml文件获取参数String getInitParameter("param-name标签中的文字");7.获得文件的MIME类型String getMimeType(String file)8.根据WEB项目的文件获取流InputStream getResourceAsStream(String path)5.在web.xml文件中配置全局参数<context-param><param-name>encoding</param-name><param-value>utf-8</param-value></context-param>
6.生命周期:项目加载时,创建项目卸载时(或者服务器停止),销毁多个servlet都可以操作
7.Servlet类中对参数化初始化对参数的初始化放在init()中,因为在执行init(ServletConfig config)的时候,会调用无参的init()方法
8.理解HTTP协议Web服务器收到客户端的http请求,会针对每一次请求分别创建一个用于代表请求的request对象和代表响应的response对象。

10.2MIME类型

1.介绍:在互联网通信过程中定义的一种文件数据类型
2.格式:大类型/小类型 例如:text/html image/jpeg
3.使用方式:String filename = request.getParameter("filename");String mimeType = getServletContext().getMimeType(filename);

10.3Response

1.介绍:所有从服务器端响应到客户端的数据全部都封装到Response对象response对象表示web服务器给浏览器返回的响应信息开发人员可以使用response对象的方法,设置要返回给浏览器的响应信息
2.Response体系结构ServletResponse 接口| HttpServletResponse 接口| org.apache.catalina.connector.ResponseFacade 实现类(由tomcat提供的)
3.设置Http响应消息1.响应行格式协议/版本号 状态码例如HTTP/1.1 200APIvoid setStatus(int sc) 设置响应的状态代码(一般用来设置 1xx 2xx 3xx)void sendError(int sc) 设置响应的状态代码(一般用来设置 4xx 5xx)注意 : 状态码的一般不需要我们手动设置2.响应头格式响应头名称:响应头的值例如Location:结合302状态码完成重定向Refresh:页面定时刷新Content-Disposition:进行文件下载需要设置这个响应头 【服务器告诉浏览器需要弹出一个下载窗口】Content-Type:服务器响应到浏览器的数据的Mime类型APIvoid setHeader(String name, String value); 设置一头一值void addHeader(String name, String value);设置一头多值3.响应体APIPrintWriter getWriter()    字符输出流ServletOutputStream getOutputStream()字节输出流注意:在同一个servlet中,二种类型的输出流不能同时存在,互斥用获取到的流对象的write方法

10.4Response应用

1.响应重定向用户访问AServlet后,服务器告诉浏览器重定向到BServlet重定向是两次请求,浏览器的地址栏会发生改变不能使用request域共享数据方法一:response.setStatus(302);设置状态码response.setHeader("Location","重定向网络地址");设置响应头 Location方法二:response.sendRedirect("重定向网络地址");专门处理重定向的方法2.转发与重定向的区别1.对象转发(request对象的方法),重定向(response对象的方法)2.写法 转发("/servlet资源路径") 服务器内部行为重定向 ("/虚拟路径(项目名)/servlet资源路径") 浏览器外部行为3.使用场景(重点掌握) 如果需要传递数据(request域),使用转发如果不需要传递数据(request域),使用重定向3.三秒之后刷新到新网址response.setHeader("Refresh","3;url=新网址");4.使用Servlet进行文件下载//设置两个头1.setHeader("Content-Disposition","attachment;filename="+文件名);2.setHeader("Content-Type",MIME类型)//新的浏览器可省//先根据虚拟路径获取真实路径3.getRealPath("/download/" + filename)//设置两个流4.FileInputStream(真实路径)5.response.getOutputStream()//流拷贝6.IOUtils.copy(is,os)7.释放资源中文乱码问题如果该下载文件名是中文的话,会出现乱码...原因:谷歌和绝大多数的浏览器是通过 url编码URLEncode() 编码URLDecode() 解码火狐浏览器   base64编码解决:我们就需要考虑浏览器兼容性问题....使用判断浏览器不同编码的工具类(hutool工具包)

10.5响应中文

1.问题:服务器Tomcat默认使用iso8859-1来编码,客户端浏览器使用gbk来解码
2.解决:1.方法一// 告诉服务器使用gbk来编码response.setCharacterEncoding("gbk");// 响应中文数据response.getWriter().write("中国");2.方法二//让服务器使用utf-8来编码,并且告诉浏览器也使用utf-8来解码response.setContentType("text/html;charset=utf-8");特点:能处理响应中文乱码问题告诉客户端浏览器,服务器端响应数据的Mime类型(纯文本的网页)此代码需要写在响应数据之前

Day11Cookie

11.1会话

1.概念B/S架构的会话:从客户端打开浏览器向服务器发起请求,此时会话开始,到关闭浏览器,会话结束。一次会话,里面可以有N多个请求
2.会话技术用于存储浏览器与服务器在请求和响应过程中产生的数据客户端会话技术:Cookie【在服务器端创建,保存在客户端】服务器端会话技术:HttpSession 【在服务器端创建,保存在服务器端】不仅仅只是Java有会话技术,其它语言也有会话技术
3.特点:1. cookie存储数据都在客户端(浏览器)2. cookie的存储数据只能是字符串3. cookie单个大小不能超过4KB4. 同一个域名下cookie数量不能超过50个5. cookie路径不同,可以重名出现6. cookie存储的数据不太安全

11.2Cookie

1. 设置数据到cookie中// 1.创建cookie对象,设置数据 【构造方法】Cookie cookie = new Cookie(String name,String value);// 2.通过response,响应(返回)cookieresponse.addCookie(cookie);2. 从cookie中获取数据// 1.通过request对象,接收cookie数组Cookie[] cookies = request.getCookies();// 2.遍历数组从一堆cookie中获取我们需要的cookie数据// 3.获得cookie的名称String name = cookie.getName();// 4.获得cookie的值String value = cookie.getValue();
3.保存时间默认情况下浏览器关闭(会话结束),cookie销毁(内存)设置cookie的存活时间cookie.setMaxAge(int second); -- 单位是秒正数:指定存活时间,持久化浏览器的磁盘中,到期后自动销毁负数:默认浏览器关闭,cookie销毁 【默认级别】零:立即销毁(自杀)
4.存储中文tomcat8之前的版本,不支持中文URLEncoder 编码//创建cookie前进行编码new Cookie("username", URLEncoder.encode("亚 索","utf-8"));URLDecoder 解码//获取数据后进行解码URLDecoder.decode(cookie.getValue(),"utf-8")tomcat8以及以后的版本,支持中文...Rfc6265Cookie规范,不允许使用 分号、空格、逗号等一些特殊符号...
5.Cookie的路径// 设置路径的方法cookie.setPath(String path);要想下次能够携带cookie到服务器端,那么下次访问服务器的路径必须包含之前响应Cookie的路径~
6.相同服务器:   在一个tomca服务器中,部署了多个web项目,那么这些web项目的Cookie默认情况下不可以共享,除非:cookie.setPath("/");// 相当于 http://localhost:8080/注意:路径相同,同名的cookie值存在覆盖~cookie的携带路径不同,名称可以重复....
7.不同服务器:不同tomcat服务器之间Cookie默认情况下不可以共享多个服务器之间的数据共享cookie,需要在同一个一级域名下cookie.setDomain(".baidu.com")

Day12Session

12.1概述

1.介绍:HttpSession技术,依旧是为了保证客户端多次请求的数据共享  【数据是保存在服务器端】HttpSession也是一个域对象
2.API1. 存储数据void setAttribute(String name,Object value)2. 获取数据Object getAttribute(String name)3. 删除数据void removeAttribute(String name)
3.HttpSession对象获取方式一:手动调用方法来获得【服务器可以存储N多个Session】HttpSession session = request.getSession(Boolean b);不写: 有就返回,没有就创建新的返回true:有就返回,没有就创建新的返回false:有就返回,没有就返回null方式二:若你访问的是一个jsp页面,那么自动的就会创建(获取)一个Session对象
4.特点:1. session存储数据在服务器【服务器端创建】2. session存储类型任意(Object)3. session存储大小和数量没有限制(相对于内存)4. session存储相对安全
5.cookie和sessioncookie将数据保存在浏览器端,数据相对不安全.建议敏感的数据不要放在cookie中,而且数据大小是有限制的成本低,对服务器要求不高浏览器不安全问题,解决这个不足,localStroage【项目二中讲解...】session将数据保存在服务器端,数据相对安全.数据的大小要比cookie中数据灵活很多成本较高,对服务器压力较大

12.2工作原理

1.Session基于Cookie技术实现
2.客户端关闭,服务器不关闭默认情况下,浏览器关闭,再次打开二次获取的session不一样代替服务器,做一个小操作,覆盖这个JSESSIONID,指定持久化时间// 手动修改cookie,关闭保留JSESSIONString id = session.getId();Cookie cookie = new Cookie("JSESSIONID",id);// 设置路径// 设置存活时间// 响应
3.客户端不关闭,服务器关闭当服务器正常关闭,重启后,二次获取的session数据一样钝化(序列化)当服务器正常关闭时,session中的数据,会序列化到磁盘活化(反序列化)当服务器开启后,从磁盘文件中,反序列化到内存中钝化和活化:钝化(关闭服务器),将session的数据保存到硬盘(内存的数据没了),重启服务器活化,将硬盘的数据加载到内存(id新分配,数据克隆) 4.生命周期何时创建用户第一次调用request.getSession()方法时,创建你访问一个jsp页面也会创建!何时销毁服务器非正常关闭     非活跃状态30分钟后 【session超时】tomcat进行配置  /tocmat安装目录/conf/web.xmlsession.invalidate(); 自杀作用范围一次会话中,多次请求之间注意:每一个浏览器跟服务器都是独立的会话...
5.URL重写开发中,一般我们是不关注用户的cookie是否禁用的,若用户禁用了cookie,只能别用网站了String url = "/day12_session/GetSession";url = response.encodeURL(url)// /day12_session/GetSession?JSESSIONID=xxsdfasdf

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-as9Co8Db-1605668744717)(assets\5.png)]

12.3三大域对象总结

request、session、ServletContext
1. API    所有域对象都具有相同的设置值、获取值、删除值的方法1. 设置数据void setAttribute(String name, Object o)2. 获取数据Object getAttribute(String name)3. 删除数据void removeAttribute(String name)
2.小结能用小的不用大的:request<session<servletContext常用的场景:request:一次查询的结果(servlet转发jsp)session:存放当前会话的私有数据用户登录状态验证码购物车servletContext:若需要所有的servlet都能访问到,才使用这个域对象.spring课程中会涉及到

生命周期

ServletContext域对象

* 何时创建服务器正常启动,项目加载时,创建* 何时销毁服务器关闭或项目卸载时,销毁* 作用范围整个web项目(共享数据)【N次会话】* 应用场景整个项目的统计(统计访问本网站的用户个数)

HttpSession域对象

* 何时创建用户第一次调用request.getSession()方法时,创建【不太标准..】用户访问携带的jsessionid与服务器不匹配时,创建* 何时销毁服务器非正常关闭未活跃状态30分钟自杀* 作用范围一次会话中,多次请求间(共享数据)* 应用场景重定向:一般使用session域

HttpServletRequest域对象

* 何时创建用户发送请求时,创建* 何时销毁服务器做出响应后,销毁* 作用范围一次请求中,多次转发间(共享数据)* 应用场景代码书写的是请求转发,那么我们可以使用request域

Day13JSP&MVC

13.1JSP

1.概述本质就是一个ServletJSP是简化Servlet编写的一种技术,它将Java代码和HTML标签混合在同一个文件中编写,页面动态资源使用java代码,页面静态资源使用html标签。简单来说:可以在html页面中嵌套java代码
2.工作原理jsp文件====》Java文件====》class文件====》静态资源
3.脚本JSP通过脚本方式来定义java代码jsp的脚本分为三类:1.嵌套java代码片段   <% 书写java代码 %>以前在java类中方法里面可以写什么代码,那么这个脚本中就可以写什么样的java代码例如:定义局部变量,调用方法!2.输出脚本   <%=表达式或者变量 %>   将表达式的结果或者变量的值输出到浏览器类似于书写的response.getWriter.write();3.声明脚本    <%! 书写java代码  %>以前在java类中方法外能书写什么java代码,那么这个脚本中就能书写什么样的java代码例如:定义成员(全局)变量,常量!
4.注释jsp页面中允许书写三种注释html注释只要是html标签被html注释包裹,那么这些标签就不会被解析执行java注释只要是java代码被java注释包裹,那么这些java代码就不会被执行!jsp注释只要是jsp脚本被jsp注释包裹,那么这些jsp脚本就不会执行!结论:三种注释,只有html注释对jsp脚本里面的java代码片段执行结果没有影响,其余的2种都有影响~

注释作用范围

注释 JSP源码 java源码 html源码
html 可见 可见 可见
java 可见 可见 不可见
JSP 可见 不可见 不可见

13.2JSP指令

jsp的指令分为三类:

  • page指令:对整个jsp页面里面一些内容的描述(它是通过这个指令里面的一些属性来完成描述功能)
  • include指令:静态包含(可以将2个页面进行合并)
  • taglib指令:引入第三方标签库(使用标签来取代java代码片段)

13.3page指令

对整个jsp页面里面一些内容的描述(它是通过这个指令里面的一些属性来完成描述功能)
1.语法格式:<%@ page 属性名称1="属性值1” 属性名称2="属性值2” ... %>
2.我们学习page指令,主要就是学习它里面的一些属性!!!
3.page指令常用属性说明:contentType:整个文件的Mime类型以及编码格式  【★★★★★】pageEncoding:指定当前jsp页面的编码格式language: 这哥们比较尴尬,只有一个取值java 【代表的是使用功能的语言】import: 导包(在jsp页面中书写java代码可能使用到了其它类) 【★★★★★】isErrorPage: 当前页面是否是一个错误提示信息页面 【★★★★】errorPage:指定那个错误页面(地址) 【★★★★】session: 访问jsp页面是否需要为你创建一个session对象呢?取值有2个(默认true,false) 【★★★】isELIgnored:是否忽略el表达式呢?(true或者false)  【★★★】buffer: 缓存autoFlush:自动刷新缓存

13.4include指令(静态包含)

include指令:合并2个页面语法:<%@ include file="被包含进来的jsp文件的路径" %>例如:<%@ include file="data.jsp"%>静态包含:将2个页面合并成一个页面,然后生成一个java文件,编译为一个字节码文件

13.5taglib指令

1.taglib指令:引入第三方标签库(取代java代码片段)语法:<%@ taglib prefix="标签的前缀" uri="第三方标签库的地址" %>例如:<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>语法解释:uri:指定你在这个页面使用jstl标签库的哪一个库。【一般使用jstl的核心标签库】prefix:书写jstl标签的前缀,取值是任意的 【建议写成uri最后一个单词的首字母】

13.6内置对象

作用在JSP页面中不需要获取和创建,可以直接使用的对象【隐式对象】     JSP一共有9个内置对象类型                          内置对象名称              含义域对象ServletContext     =====>>> application           代表整个项目HttpSession           =====>>> session               一次会话HttpServletRequest  =====>>> request               一次请求PageContext         =====>>> pageContext           当前页面其它对象HttpServletResponse =====>>> response              响应对象JspWriter           =====>>> out                   输出对象ServletConfig       =====>>> config                    配置信息对象Throwable         =====>>> exception             当前页面的错误信息的对象Object              =====>>> page                  当前页面上面9个内置对象,有5个我们已经学习过了还剩余:pageContext out   exception page重点关注 pageContext对象~out:将数据输出到浏览器exception:当前jsp页面里面代码有误,此时会出现这个对象 【页面出错,并且isErrorPage属性值为true】page:代表当前页面信息的对象out的输出与response对象的输出的区别<%// out输出数据out.print("first line");// response输出数据response.getWriter().write("second line");%><%--在浏览器输出的数据是: second line  first line--%>pageContext对象:它可以获得其他的内置对象它有一个全域查找的方法 =====>>>> EL表达式使用就是它从小范围到大范围挨个找,知道找到就不继续找,没有找到就继续,所有域都没找到返回null<%=pageContext.getAttribute(String str,int i)%>str:要查找的属性i:不写:page域1:page域2:request域3:session域4:servletContext域

13.7JSP动作标签

作用简化JSP页面编码
常用1.<jsp:include>:将2个页面的内容生成的数据进行合并(合并的是结果)相当于request.getRequestDispatcher().include(request,response);2.<jsp:forward>:请求转发(页面跳转)相当于request.getRequestDispatcher().forword(request,response);3.<jsp:param>:参数传递其实是forward子标签使用request.getParameter() 获取参数请求转发:<jsp:forward page="to.jsp"><jsp:param name="username" value="jack"></jsp:param><jsp:param name="age" value="38"></jsp:param></jsp:forward>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r1CMRSfy-1605668744718)(assets\1592118152576.png)]

13.8MVC模式

1.JSP发展史:早期只有servlet,只能使用response输出html标签,非常麻烦。后来有了JSP,简化了servlet开发;如果过度使用JSP,在JSP页面中写了大量的java代码和html标签,造成难于维护,难于分工协作的场景。再后来为了弥补过度使用jsp的问题,我们使用servlet+jsp这套组合拳,利于分工协作。
2.MVC介绍Model-View-Controller,是软件工程中的一种软件架构模式它是一种分离业务逻辑与显示界面的设计方法,目的是高内聚,低耦合M:model(模型) JavaBean(1.处理业务逻辑、2.封装实体)V:view(视图)  Jsp(展示数据)C:controller(控制器)Servlet(1.接收请求、2.调用模型、3.转发视图)优缺点优点降低耦合性,方便维护和拓展,利于分工协作缺点使得项目架构变得复杂,对开发人员要求高

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gMF9Xn5r-1605668744719)(assets\6.png)]

Day14el、jstl

14.1EL表达式

1.简介jsp页面里面既可以写html标签,也可以写java代码,但是如果里面的代码比较多,嵌套严重,这样对后期的维护造成了极大的不便在jsp2.0规范中给出了建议:尽量不要在jsp页面中书写java代码。可以使用el表达式来获取域中的数据来进行显示!
2.作用为了取代jsp输出脚本 <%= %>主要是获取数据在页面显示【不能向域中设置值】
3.语法${表达式}

14.2从域中获取值

1.从域中获取普通单值 【非常重要】它们都是字符串数据(单值)<%--使用el表达式从域中获取数据--%>${pageScope.book}<br>${requestScope.book}<br>${sessionScope.book}<br>${applicationScope.book}<br><br><!--全域查找-->${book}
2.从域中获取数组中的数据 【了解】在Servlet中向域里面设置值,如果数据较多,一般都是弄到集合中${cities[1]}
3.从域中获取List集合中的数据 【比较重要】${list[2]}
4.从域中获取Map集合中的数据 【非常重要】在Servlet中,去查询数据库的数据,得到多一些数据,可能需要封装到map${map.address}<br>${map['address']}<br>${map["address"]}
5.从域中获取JavaBean里面的数据【非常非常重要】必须实现Serializable接口${student.name}<br>${student['name']}<br>${student["name"]}
6.从域中获取多个对象构成的集合里面的数据【非常非常重要】有时需要将系统所有的数据全部查询出来,此时将这些数据封装到多个对象构成的集合里面${students[3].name}<br>${students[3]['name']}<br>${students[3]["name"]}<br>
7.注意:数组、List集合 这类单列数据,我们只能使用[]JavaBean、Map集合 这类双列数据,我们可以使用[],也可以使用.双列数据的key里面如果有特殊符号,那么也只能使用[]

14.3EL表达式进行运算

1.算术运算${1+2}\${1+2}=${1+2}    <!--\后面的el表达式不会进行运算,直接原样输出-->
2.关系运算${12<50}  <!--关系运算符: < <= > >= == != -->
3.逻辑运算${12<50 and 1>3}    <!-- 逻辑运算:&&(and) ||(or)   -->
4.三元运算${12>50?"Niubility":"nonono"}
5.非空判断 【非常重要】${empty ""}            <!-- jsp中,认为 null "" 空集合 都是空  -->${not empty ""}       <!-- 非空判断 -->

14.4EL表达式操作WEB常用对象

jsp中有九大内置对象,还有11个常用对象!1.四个域范围对象pageScoperequestScopesessionScopeapplicationScope2.与请求头相关的对象header:一头一值headerValues:一头多值3.Cookie相关的cookie4.全局初始化参数initParam5.pageContext对象【非常重要】6.与请求参数相关的【非常重要】param         获得请求携带的参数值(指定参数的值)paramValues       ${pageContext.request.contextPath}

14.5jstl标签

1.简介用于取代Java代码片段,但是没有完全实现底层依旧是Java代码
2.使用步骤1.导包javax.servlet.jsp.jstl.jarjstl-impl.jar2.在jsp页面中使用taglib指令引入标签库<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>3.在页面书写对应的jstl标签即可
3.常用标签1.if标签<c:if test="">标签体</c:if>test:if标签判断的条件,为true就会执行if标签体的代码,否则不执行!2.choose标签<c:choose><c:when test="">标签体</c:when>...<c:otherwise>标签体</c:otherwise></c:choose>3.forEach标签主要用于在jsp页面获取域中一堆数据,对其进行遍历操作格式:<c:forEach items="" var="" varStatus="" begin="" end="" step="">        </c:forEach>属性:    items:被遍历的数据(一般使用el表达式从域中获取)var:遍历之后得到的单个对象数据begin:遍历的起始位置end:遍历的结束位置step:步进 【默认是1】varStatus:被遍历之后很多对象的数据都在这个属性值中count: 编号,永远从1开始

14.6三层架构

JavaEE注重三层架构(web层、service层、dao层),而在web层会使用MVC模式。
1.web层:又称之为表现层!接收请求,封装数据,调用service层的方法,将处理的结果保存域中,跳转到页面mvc:m:model 模型  JavaBeanv:view 视图   jspc: controller 控制器 servlet2.service层:又称之为业务逻辑层 处理具体用户的一个需求功能,根据用户的需求而定。调用dao层进行增删改查3.dao层:又称之为持久层专门与数据库打交道

Day15Filter

15.1xml配置

1.web的三大组件servlet(控制器)主要:处理用户请求,响应结果。filter(过滤器)主要:用户发起请求,针对请求进行过滤,只有通过filter过滤器,请求才会抵达Servlet得以处理!listener(监听器)
2.原理:发送任何请求,先经过xml,如果没有直接执行路径的资源文件,如果有,去找对应配置的处理类

15.2配置

1.xml配置1.编写java类,实现filter接口doFilter(servletRequest,servletResponse,chain){//执行这句就是放行chain.doFilter(servletRequest,servletResponse);}2.配置web.xml<filter><filter-name>CFilter</filter-name><filter-class>com.demo.web.filter.CFilter</filter-class></filter><filter-mapping><filter-name>CFilter</filter-name><url-pattern>/jsp/c.jsp</url-pattern><!--只对服务器内部转发到/jsp/c.jsp进行拦截,才会进入CFilter--><dispatcher>FORWARD</dispatcher><!--只对直接访问/jsp/c.jsp进行拦截,才会进入CFilter--><dispatcher>REQUEST</dispatcher></filter-mapping>
--------------------------------------------------------------------
2.注解配置1.编写java类,实现filter接口在实现类上面添加一个注解 @WebFilter(urlPatterns = "/jsp/c.jsp")2.配置@WebFilter@WebFilter(urlPatterns = "/jsp/c.jsp",dispatcherTypes = {DispatcherType.REQUEST,DispatcherType.FORWARD})3.拦截方式1. request(默认拦截方式)浏览器直接发送请求时,过滤器拦截2. forward资源A转发到资源B时,过滤器拦截3. 我们可以配置 二个同时存在...

15.3生命周期

* 创建服务器启动项目加载,创建filter对象,执行init方法(只执行一次)public void init(FilterConfig config);
* 运行(过滤拦截)用户访问被拦截目标资源时,执行doFilter方法(每访问一次就执行一次)public void doFilter(ServletRequest request, ServletResponse response,FilterChain chain);
* 销毁服务器关闭项目卸载时,销毁filter对象,执行destroy方法(只执行一次)public void destroy();
* 注意:过滤器一定是优先于servlet创建的

15.4FilterConfig对象

与之前的ServletConfig对象非常类似!
// 获得当前Filter的名称
String getFilterName();// 获得ServletContext实例对象         【★★★★★】
ServletContext getServletContext();// 获得你在当前Filter配置的初始化参数指定名称的值
String getInitParameter(String var1);// 获得所有当前Filter配置的初始化参数名称
Enumeration<String> getInitParameterNames();

15.5拦截路径

* 精准匹配用户访问指定目标资源(/jsp/show.jsp)时,过滤器进行拦截* 目录匹配用户访问指定目录下(/user/*)所有资源时,过滤器进行拦截* 后缀匹配用户访问指定后缀名(*.html)的资源时,过滤器进行拦截* 匹配所有用户访问该网站所有资源(/*)时,过滤器进行拦截总结:开发中最为常用的是匹配所有!                        

15.6过滤器链

1.过滤器链执行顺序 (先进后出)1.用户发送请求2.DFilter拦截,放行3.EFilter拦截,放行4.执行目标资源 E.jsp5.EFilter增强响应6.DFilter增强响应7.封装响应消息格式,返回到浏览器2.过滤器链中执行的先后问题....配置文件谁先声明,谁先执行<filter-mapping></filter-mapping>注解【不推荐】根据过滤器类名进行排序,值小的先执行FilterA  FilterB  进行比较, FilterA先执行...

15.7过滤器统一处理中文乱码

1.需求tomcat8.5版本中已经将get请求的中文乱码解决了,但是post请求还存在中文乱码浏览器发出的任何请求,通过过滤器统一处理中文乱码
2.代码// 对req和resp进行强转HttpServletRequest request = (HttpServletRequest) req;HttpServletResponse response = (HttpServletResponse) resp;// 获得用户请求方式String method = request.getMethod();System.out.println(method);// 判断if("post".equalsIgnoreCase(method)){// 处理post请求中文乱码request.setCharacterEncoding("utf-8");}// 处理响应中文乱码response.setContentType("text/html;charset=utf-8");// 放行chain.doFilter(request, response);}

Day16Listener

16.1Listener介绍

  • JavaWeb中:
    事件源: 域对象本身、域对象属性、特殊的JavaBean存入Session
    监听器: 域对象本身的监听器、域对象属性的监听器、特殊的JavaBean在Session的监听器
  • 事件源:被操作或者被关注的那个对象
  • 事件: 对事件源进行了某个具体的操作
  • 监听器:负责监听事件源(一旦对事件源进行了某个事件操作,那么监听器就会捕获到)
  • 注册监听:将事件与监听器绑定
  • JavaWeb中监听器的分类:
    1. 域对象本身监听器:关注创建和销毁
    • HttpServletRequestListener
    • HttpSessionListener
    • ServletContextListener 【★★★★★】
    1. 域对象属性监听器:关注域对象属性值的变更(添加数据、替换数据、删除数据)

      • HttpServletRequestAttributeListener
      • HttpSessionAttributeListener 【★★★★★】
      • ServletContextAttributeListner
    2. 特殊JavaBean在Session:
      • HttpSessionActivitionListener 【钝化(序列化)与活化(反序列化)】
      • HttpSessionBindingListener

16.2ServletContextAttributeListner

服务器启动,spring框架就会通过ServletContextListener自动加载一些配置文件。

  • 编写监听器类实现对应的监听器接口
/*域对象本身监听器,关注的是域对象的创建和销毁!ServeltContext:创建:服务器启动创建销毁:服务器停止销毁事件源:ServletContext对象事件:创建和销毁监听器: MyServletContextListener注册监听:在web.xml文件中配置事件对象:可以获得事件源对象!只要ServletContext创建了或者销毁了,那么就会被监听器MyServletContextListener捕获到,从而执行对应的方法!*/
public class MyServletContextListener implements ServletContextListener {// 当ServletContext被创建的时候会执行@Overridepublic void contextInitialized(ServletContextEvent servletContextEvent) {System.out.println("已监听到ServletContext创建了");System.out.println("去加载spring框架的配置文件");// 通过事件对象获得事件源对象ServletContext context = servletContextEvent.getServletContext();}// 当ServletContext对象销毁的时候被执行!@Overridepublic void contextDestroyed(ServletContextEvent servletContextEvent) {System.out.println("已监听到ServeltContext对象销毁了");}}
  • xml配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"version="3.0"><!-- 只需要配置监听器处理类的全限定类名即可 --><listener><listener-class>com.itheima.web.listener.MyServletContextListener</listener-class></listener>
</web-app>
  • 注解配置
@WebListener
public class MyServletContextListener implements ServletContextListener {//  代码省略。。。。。
}

// 处理post请求中文乱码
request.setCharacterEncoding(“utf-8”);
}

    // 处理响应中文乱码response.setContentType("text/html;charset=utf-8");// 放行chain.doFilter(request, response);
}

# Day16Listener## 16.1Listener介绍* JavaWeb中:事件源: 域对象本身、域对象属性、特殊的JavaBean存入Session监听器: 域对象本身的监听器、域对象属性的监听器、特殊的JavaBean在Session的监听器
* 事件源:被操作或者被关注的那个对象
* 事件: 对事件源进行了某个具体的操作
* 监听器:负责监听事件源(一旦对事件源进行了某个事件操作,那么监听器就会捕获到)
* 注册监听:将事件与监听器绑定
* JavaWeb中监听器的分类:1. 域对象本身监听器:关注创建和销毁- HttpServletRequestListener- HttpSessionListener- ServletContextListener  【★★★★★】2. 域对象属性监听器:关注域对象属性值的变更(添加数据、替换数据、删除数据)- HttpServletRequestAttributeListener- HttpSessionAttributeListener  【★★★★★】- ServletContextAttributeListner   3. 特殊JavaBean在Session:- HttpSessionActivitionListener 【钝化(序列化)与活化(反序列化)】 - HttpSessionBindingListener ## 16.2ServletContextAttributeListner服务器启动,spring框架就会通过ServletContextListener自动加载一些配置文件。- 编写监听器类实现对应的监听器接口```java
/*域对象本身监听器,关注的是域对象的创建和销毁!ServeltContext:创建:服务器启动创建销毁:服务器停止销毁事件源:ServletContext对象事件:创建和销毁监听器: MyServletContextListener注册监听:在web.xml文件中配置事件对象:可以获得事件源对象!只要ServletContext创建了或者销毁了,那么就会被监听器MyServletContextListener捕获到,从而执行对应的方法!*/
public class MyServletContextListener implements ServletContextListener {// 当ServletContext被创建的时候会执行@Overridepublic void contextInitialized(ServletContextEvent servletContextEvent) {System.out.println("已监听到ServletContext创建了");System.out.println("去加载spring框架的配置文件");// 通过事件对象获得事件源对象ServletContext context = servletContextEvent.getServletContext();}// 当ServletContext对象销毁的时候被执行!@Overridepublic void contextDestroyed(ServletContextEvent servletContextEvent) {System.out.println("已监听到ServeltContext对象销毁了");}}
  • xml配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"version="3.0"><!-- 只需要配置监听器处理类的全限定类名即可 --><listener><listener-class>com.itheima.web.listener.MyServletContextListener</listener-class></listener>
</web-app>
  • 注解配置
@WebListener
public class MyServletContextListener implements ServletContextListener {//  代码省略。。。。。
}

04_JavaWeb回顾笔记相关推荐

  1. iOS回顾笔记( 02 ) -- 由九宫格布局引发的一系列“惨案”

    iOS回顾笔记( 02 ) -- 由九宫格布局引发的一系列"惨案" 前言(扯几句淡先) 回顾到学习UI过程中的九宫格布局时,发现当时学的东西真是不少. 这个阶段最大的特点就是:知识 ...

  2. iOS回顾笔记( 01 )-- XIB和纯代码创建应用的对比

    iOS回顾笔记( 01 )--  XIB和纯代码创建应用的对比 很多时候我们工作很久突然闲下来的时候,是不是也感到无聊过?这就是我现在的生活,不过闲一段时间也挺好,可以好好回顾一下自己以前学习iOS路 ...

  3. JavaSE回顾笔记Ⅲ

    JavaSE回顾笔记Ⅲ ​ 前言,,懒得写了,去看2吧,开头有几句废话. ​ day13和上一个重复,是因为这一个是完全自学的一个章节,因为并没什么用,但是很感兴趣就简单看了一下.因为强迫症,不想向后 ...

  4. 正则表达式JavaScript版本回顾笔记背诵版本

    前言 正则表达式之所以强大,是因为其能实现模糊匹配,精确匹配没有任何价值. 正则表达式学习笔记 第一章 JavaScript原型对象与原型链 1.1 正则表达式概念 RegExp:是正则表达式(reg ...

  5. java se个人回顾笔记(持续更新)

    看前须知:本人代码写的还行,但由于大一学java时不是很认真,很多东西都学的一知半解,写的出来但不是很能理解原理,现在从面向对象开始重新回顾,会写一写自己一些一直不大会的东西,大部分还是会记录下来,但 ...

  6. 我的Java知识复习回顾笔记

    1 public class JavaSE { 2 3 public static void main(String[] args) { 4 /* 5 * JDK JRE JVM 6 * 注释 7 * ...

  7. C语言知识的回顾(笔记)

    第一章: 总体上必须清楚: 1, 首先,程序上是有3种结构:顺序结构,选择结构(分支结构),循环结构. 2,读程序都需要入口(main()),然后从最上到最下(碰到循环做循环,碰到选择做选择),且只有 ...

  8. 面向对象程序设计-C++ Default constructor Copy constructor Destructor Operator Overloading【第九次上课笔记】...

    先上笔记内容吧: 这次上课的内容有关 构造函数 析构函数 运算符重载 return * this 内容很细,大家好好回顾笔记再照应程序复习吧 :) #include <iostream>u ...

  9. 《创新者的基因》读书笔记

    创新者的基因 创新者的"基因",即最具创意的企业家具备的五种"发现技能":联想,观察,实验,发问,建立人脉. 第一部分破坏性创新,从你开始 第一章破坏性创新者的 ...

最新文章

  1. Tensorflow 源码安装成功,导入报错 ImportError: cannot import name 'build_info'
  2. 国内35所人工智能学院大盘点
  3. 17秋 软件工程 第六次作业 Beta冲刺 总结博客
  4. 杂乱无章之javascript(一)
  5. C++ leetcode 7. 整数反转 给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转。
  6. maven配置_eclipse创建maven_maven插件配置
  7. vue中引用swiper轮播插件
  8. How to Run Mac OS X in VirtualBox on Windows
  9. oracle中的代码在那里写,oracle中如何编写树级代码-数据库专栏,ORACLE
  10. validation注解
  11. Android实时获取音量(单位 分贝)
  12. 编程范式:函数式编程防御式编程响应式编程契约式编程流式编程
  13. 本软件仅供学习交流,如作他用所承受的法律责任一概与作者无关(下载使用即代表你同意上述观点)
  14. C# 9.0新特性详解系列之五:记录(record)和with表达式
  15. putty使用方法~SSH等
  16. 用 Vue 改造 Bootstrap,渐进提升项目框架[转]
  17. 一些简单常见的网站反爬策略和解决办法
  18. LayaBox怎么添加定时器
  19. 并发编程系列之什么是Java内存模型?
  20. 【笔记】贝叶斯估计(Bayesian Estimation)

热门文章

  1. 中国美食味道PPT模板
  2. java计算机毕业设计医护人员排班系统源码+系统+lw+数据库+调试运行
  3. VUE3 图片懒加载实现
  4. 下载vs后,移动windows kits文件夹(不使用快捷方式的方法)
  5. 大数据入门第一课 Hadoop基础知识与电商网站日志数据分析
  6. 终结:VirtualBox启动win7黑屏 !
  7. Universal-Image-Loader(UIL) 源码详解
  8. 第12周-后半段-日常与事件反思复盘
  9. OpenGL中的glLoadIdentity、glTranslatef、glRotatef原理【转帖】
  10. redis常用命令个人总结