html指代超文本标记语言 html中使用标签来定义各种效果,浏览器会对标签进行解析和补全,若不能解析,则标签无效. 浏览器读取html文档 从上到下 从左到右解析 后加载的样式会覆盖先加载的样式 html中使用空格/tab键/回车/换行都会体现成一个空格 标签分为单标签和双标签 <标签名[ / ]> : 单标签,具有特殊效果,会自动结束 <标签名 [属性] = [属性值]> : 双标签,一般成对出现,用来包裹其他标签或内容,使用属性定义标签包裹内容的具体效果,或标记标签自身
&XXX; : 可以使用此类格式的转义符避免与特殊符号冲突
小空格 中空格 大空格 < 小于 > 大于 © 公司符号 " 引号 & &符号
http协议路径规则 http:// 127.0.0.1 : 5500 /day1_html/3HTML.html ? key=value & key = value 协议 ip地址 端口 资源地址 参数 http协议 默认端口80 https协议 默认默认端口443 采用默认端口可省略不写端口 地址格式: 1.相对路径 ./当前目录 可以忽略 ../上级目录 不能忽略 2.相对根路径 从根目录路径开始 3.绝对路径 从协议开始拼接路径 可以访问外部网站
块标签
换行
分割线标题标签 文本加粗且占满一行 共h1-h6六种
段落标签 文本占满一行 上下存在间距
自定义段落标签 文本占满以后 上下无间距 行内文字标签 加粗文字 下划线文字 斜体文字 用于标记文字 列表标签
点击a标签的内容(文本 图片...)可跳转进href属性赋值路径的页面 一些特殊的地址 #回到网页顶部 ###展示为链接标签,但无跳转效果 #id 跳转到id对应元素的位置
展示src属性值路径的图片
列头 加粗居中 |
---|
行一个单元格 | align属性为设置对齐方向 right(默认)/left/center rowspan属性为设置跨行的数量 默认1 olspan属性为设置跨列的数量 使用时必须在一个表格区域内 默认1
声明一个框 其中type属性设置框的功能 输入功能框type为: text文本输入(type标签默认)/password密码输入 placeholder属性设置输入框提示信息 value属性输入框默认值 maxlength属性输入框最大长度 readonly属性设置框的只读 disabled=true属性禁用编辑框 且提交不传递值 选择框type为: radio单选框/cheked多选框 name属性设置选择按钮的分组 checked属性(true)设置默认选中 value设置选项提交的值 按钮框type为: submit提交按钮/reset重置按钮/button自定义按钮 value属性设置按钮上的文本 disabled属性设置按钮禁用
name属性表示提交时的key row属性声明默认的行数 cols属性声明默认的列数
for属性用于绑定id,id为点击文本时访问框的id
在style标签中编写css代码 在link标签引入css文件 在元素上使用style通用属性
选择器{ 样式:值 多个样式之间;隔开 }
style属性中声明css样式代码
class属性用于标记元素 便于使用.class选择器筛选元素 class属性可以声明多个值并使用空格隔开
基本选择器 标签 样式将在标签区域内生效 优先级1 .class 样式将在对应class值的元素上生效 优先级10 #id 样式在对应id值的元素上生效 优先级100 选择器:hover 鼠标悬停在选择器内时触发样式 选择器:active 鼠标点击选择器内时触发样式 * 选择页面所有元素,使样式对所有元素生效 优先级非常低 高级选择器 选择器1,选择器2 同时在多个声明的选择器上生效,多个选择器,隔开, 选择器.class选择器 在同时满具备多个选择器的元素上生效 选择器1 选择器2 在选择器1内部的选择器2中所有元素生效 选择器1>选择器2 在选择器1内部的选择器2中仅子元素生效 [标签] [属性=值] 满足对应标签中对应属性和值的元素生效
color 颜色 三原色声明方式rgb(0~255,0~255,0~255) 16进制声明方式#XXXXXX 两个字符相同时可以简写为一个 font-size 大小 单位px font-famliy 字体 黑体/宋体... font-wdight 粗细 text-decoration 线修饰 none(没有线) 删除线 下划线 text-align x对齐方式 左 中 右 vertical-align y对齐方式 上中下
background-color 背景颜色 规则同文字颜色规则 background-image : url(); 设置背景图片路径声明在url函数中 background-repeat 背景图片重复方式 no-repeat 不重复铺图片
width 宽度 px(像素大小) %(相对于父元素的百分比) vw(相对于整个屏幕的百分比) height 高度 px %(页面默认父元素为0,必须声明父元素高度) vh(相对于整个屏幕的百分比) border 边框规格 声明粗细 线条 颜色 默认为0px solid(边框线条为实线) black(颜色为黑色)
line-height 行高 list-style 列表的标题自定义样式 cursor : pointer; 光标变成手 提示用户此元素可以点击
opacity 0~1之间设置元素透明度 display : 元素类别 none 隐藏元素 且脱离文档流 block 设置为块元素 从上到下排列 占满一行 宽高有效 inline 设置为行内元素 从左到右排列 根据内容大小扩展 宽高无效 inline-block 设置为行内块元素(类似按钮) 从左到右排列 宽高有效
position : 定位方式 relative 相对定位 不脱离文档流 以元素之前所在的位置偏移 absolute 绝对定位 脱离文档流 以屏幕位置进行动态偏移 fixed 固定定位 脱离文档流 以页面位置进行偏移 static 默认值 不偏移 从上到下排列 必须使用在改变定位方式之后的偏移 top 正数向下偏移 负数向上偏移 left 正数向右偏移 负数向左偏移 z-index 控制层叠显示的先后顺序 默认后加载的优先显示
页面中元素排布时 每个元素都有一个盒子模型 根据盒子模型的相关属性 决定元素的大小 间距 盒子模型有 宽 高 边框 等共有属性 盒子模型的属性 padding 内部填充 上/右/下/左 上下/左右 上右下左 三种方法设置 px margin 外边距 上/右/下/左 上下/左右 上右下左 三种方法设置 px 左右可以设置为auto(块在父元素范围自动居中) overflow : hidden 排列超过边界隐藏 scroll 超过边界出现滚动轴 float : right/left/center 浮动布局 使被float修饰的元素优先按规定的排序方式排列,其次往下排列 display : flex 让子元素使用弹性布局 justify-content: 子元素的优先布局方式 必须使用在设置弹性布局后 center子元素居中排列 space-between 子元素两端对齐 space-around 子元素等间隔对齐
正则使用方式为 let temp = /正则表达式/ 使用正则验证时 temp.test(待验证字符串) 来验证是否符合正则 正则表达式的元素构成 ^:用来表示正则模式的开头,可以省略,在使用字符串相关正则模式的方法时,必须省略 ( ):可以省略,表示一个域段,可以使用 ,\n就代表第n个域段 [ ] : 可以省略,维护匹配的字符数据,里面填写正则的对应匹配数据 [a]匹配字符a,[a-c]匹配a-c之间的字符,多个条件直接继续写即可 { } : 可以省略,对[ ] 中的匹配数据进行匹配次数的限制{1}匹配1次,{1,5}匹配1-5次,{5,}至少匹配5次 \ : 转义符 . :表示任何单个字符 +:匹配一次以上,[ a ]+,匹配字符a一次以上 \d:等价于[0-9] \w:等价于[A-Za-z0-9 _ ] $:用于结尾,可以省略不写,在使用字符串相关正则模式的方法时,必须省略
使用script标签引入 尽量在body后引入 避免加载script时未找到body中的数据 使用script标签的src属性引入js文件 此时标签体无效 直接在元素标签中使用script属性引入 在a标签中设置href属性为javascript:viod(0)时 等价于###
命名规则同java 小写驼峰多单词 定义变量 var 全局变量 let 局部变量 const 常量 数据类型 number 数字类型(NaN属于数字中的特殊类型 代表不是数字) string 字符串类型(在页面取值时都是字符串)('' "" ``可以在``中加${将变量直接插入字符串}) bollean 布尔类型(!1-> false !0-> true) undefined 未被定义的变量(声明未赋值时) function 函数类型(函数名或函数引用) object 其他类型(数组 对象 等)
与java运算符基本相同 不同如下
== 内置类型转换进行相对数据比较(0 false 1 true)(数字转字符串比较)
=== 无内置类型转换的绝对比较
if(){} ... else if(){} ... else{} switch(){ ... case: ... break ... default:} while(){} do{}while() for( ; ; ){} for(let x in arr){x为索引} for(let x of arr){x为对应索引的值}
let [函数名1] = function [函数名2]([参数列表]){ 函数名不能与变量名重复 非匿名函数的函数名1和2必须声明1个 参数不需指定数据类型 多个参数之间","隔开 在标签属性值中传递实参时 双引套单引 不能使用斜着的'' 形参数量与实参数量可以不对应 实参多时截断 形参多时undefined 函数中的变量未声明变量类型时 作用域是全局 [return] 不需指定返回值数据类型 直接返回即可 } 匿名函数可以简化为箭头函数 (参数列表)=>{ 函数逻辑体 } 与匿名函数的this有所区别 箭头函数的this始终指向引用 匿名函数的this会在部分情况下找不到引用
在html元素中通过给事件属性绑定函数名 来通过事件触发对应函数 事件名 = "函数名()" 格式来绑定函数 常见事件 onclick 鼠标单击 onmouseover/onmouseout 鼠标移入/移出 onfocus/onblur 获得焦点/失去焦点 onload 页面加载完毕 onkeyup/onkeydown 键盘弹起/键盘按下 onsubmit 是否提交表单 true 提交 chang 当用户更改 /
通过元素对象对元素的某个属性取值或赋值 doucment.getElementById(id值) 获取对应id值元素的对象 this对象默认指代当前窗口-windows整个窗口对象 this对象在作为参数传递时 表示当前实参元素的对象 event对象代表键盘敲击事件 可以作为实参 在形参处通过event.keyCode获得用户敲击的键盘码 操作对象 对象.属性/对象["属性"] = 新值 给属性赋值 let temp = 对象.属性/对象["属性"] 对属性取值 对于属性中的属性可以链式多重调用 常用隐藏属性 innerHTML 指代双标签体中的内容 select标签中的value属性代表当前被选中的option元素的value值
获取元素 getElementById("") 通过id获得一个元素 getElementsByTagName("") 通过标签名获取元素数组 getElementsByClassName("") 通过class值获取元素数组 可以使用上述方法通过获取到的元素对象来获取该元素对象内的子级元素对象 操作元素 取值 元素对象.属性 元素对象.getAttribute("属性名") 赋值 元素对象.属性 = 值 元素.setAttribute("属性名","属性值")
使用元素对象获取节点 .children 获取该对象所有子元素节点 .childNodes 获取该对象所有节点(包括文本节点) .firstElementChild 获取该对象第一个子元素节点 .lastElementChild 获取该对象最后一个子元素节点 .firstChild 获取该对象第一个子元素节点(包括文本节点) .lastChild 获取该对象最后一个子元素节点(包括文本节点) .previousElementSibling 获取该对象上一个同级元素节点 .nextiousElementSibling 获取该对象下一个同级元素节点 .parentNode 获取该对象父元素节点 操作节点 操作节点时,可以在被双标签包裹的节点中使用``通过字符串编写代码动态创建子节点 而后通过编辑innerHtml属性添加进去 可以通过虚拟dom元素减少渲染次数 document.createElement("节点类型") 根据类型创建一个虚拟节点 可以对节点进行属性编辑 在其未被使用时,不会渲染页面 节点元素对象.appendChild("节点对象") 追加子节点 节点对象.insertBefore("节点对象","追加参照节点元素对象") 子节点追加在某个节点之前 节点元素对象.cloneNode([true]) 克隆出一个虚拟节点 true时克隆节点内部所有数据 否则只是空节点 节点元素对象.removeChild() 删除节点及该节点下所有子级
rows代表所有行组成的数组 row[n].cells 代表第n行所有单元格组成的数组 元素对象.insertRow(index) 指定索引添加tr 元素对象.deleteRow(index) 指定索引删除tr row行对象.insertcell(index) 指定索引位置添加td
window 表示当前页面的全局对象 操作页面 alert() 弹出页面 会阻止页面加载和运行 confirm("") 弹出页面并给出是否选项 history 历史记录对象 .forward前进 .back回退 location 地址栏对象 .reload()刷新 .href赋值控制地址栏跳转 open("地址","别名",配置参数) 打开新窗口 close() 关闭窗口 谁调关谁 document.write(数据) 在页面打印出对应数据 console.log(值) 在控制台输出对应值 定时类 定时执行 setInterval("执行函数",间隔毫秒) 一个函数返回一个唯一的task码 clearInterval(task码) 结束函数执行 延时执行 clearTimerout("执行函数",间隔毫秒) 一个函数返回一个唯一的task码 clearTimeout(task码) 结束函数执行 转换类型 parseInt() 传入字符或数字 返回整型(遇到非数字直接截断) parseFloat() 传入字符 返回浮点型 eval(值) 将字符串数据运算后的值转为字符串 toString() 将其他类型转为字符串 与""+基本同理 .toFixed(位数) 保留指定的位数运算 四舍六入 其他类 isNaN() 判断是否NaN typeof 值 获取当前值的数据类型
indexOf() 返回指定字符串出现在字符串中的索引位置 无时为-1 substring(起点索引,[终止索引]) 截取字符串 substr(起点索引,[截取个数]) 截取字符串 split() 以指定字符串切割字符串成数组 toUpperCase() 转大写 toLowerCase() 转小写 replace(old,new) 用new替换old 字符串
Math.ceil() 向上取整 Math.floor() 向下取整 Math.round() 四舍五入 Math.random() [0,1)取随机数
获取当前时间 new Date([]) 无参时获取当前时间 有参时格式化参数时间返回对应时间 时间对象方法 getTime() 计算两时间的日期差(ms) getFullYear() 返回时间对象的年字符串 getMonth()+1 返回时间对象的月字符串 getDate() ⽇返回时间对象的日字符串 getDay() 返回时间对象的星期字符串 0(周日)-6(周六) getHours() 时返回时间对象的时字符串 getMinutes() 分返回时间对象的分字符串 getSeconds() 秒返回时间对象的秒字符串
js数组类似java无泛型集合 join("") 数组元素之间拼接指定字符串 Push() 尾部添加元素 Pop() 尾部删除元素 Shift() 头部删除元素 Unshift() 头部添加元素 splice(起始索引,个数,obj可变参...) 从起始索引开始 指定个数的元素数组替换为可变参 删除/添加/替换均可 Array.from(数组对象) 将数组转为Prototype类型数组 forEach() 遍历Prototype类型数组 sort(匿名函数排序规则) 升序/降序 function(a,b){ return a-b;从a至b排序 return b-a;从b至a排序 }
export{...} 导出{}中对应的变量提供给导入者使用 import{...} 导入{}中对应的变量 变量必须被导出才可以被导入
json格式常用于前后端的数据传递 存储一对对数据 经常和数组相互嵌套使用 let json对象名 = {key1:value1,...,keyn:valuen} 标准json格式key必须是字符串 一般用于前后端 简化json格式key可以什么都不加 一般用于纯前端 json对象中valuen也可以是匿名函数 前端API json对象名.key 获得value值 json对象名.key = value 在json对象中新增/修改一组数据 key存在时修改 不存在时新增 json对象名.key() 获得匿名函数 JSON.parse(str) 把标准json格式字符串转为json对象 简化不能转换 JSON.stringify(json) 将json对象转为标准json格式字符串 后端API JSON.toJSONString(object) : 将任意类型转为为JSON格式字符串 前提是支持JSON转换(集合,对象等) JSON.parseArray(jsonstr,类名.class) : 将任意类型JSON字符串装配成类对象存进list<类>集合 未匹配上的数据以默认值代替
vue就是封装好了各种的函数简化人们的使用 vue2原理 数据劫持+虚拟dom vue3原理 数据劫持+代理对象+虚拟dom 数据劫持 Object.defineProperty(//此方法通用于定义属性 对象,"属性名",{ value:"属性值"//可以给对应的属性名赋值 get(){可重写,所有对属性取值的操作都会调用此方法}, set(要新赋值形参){ 重写,所有对属性赋值的操作都会调用此方法 可以使用此形参在set中将对应的元素赋值,即为数据劫持的核心原理 例如 document.getElementById("myTitle").innerHTML=形参; } }) 代理对象 代理对象和对象本身指向同一个引用 对代理的更改会还原到原对象 let newJson = new Proxy(//proxy即为创建对应对象的代理对象 对象,{ get(对象形参,属性形参){ return target[prop];//返回对象对应属性的值 }, set(对象形参,属性形参,要新赋值形参){ 在此处将对应形参赋值给需要的元素 即代理对象的核心原理 例如 document.getElementById("mytext").value=新值; }});
方法一
通过script标签中的src属性引入vue创建一个声明id属性的div,用于给vue提供根标签 vue提供的各种指令必须在此根标签中才能进行使用
方法二
data(){//date属性,用于声明变量 return { //以json格式将多个变量声明在此处 以供页面调用 } } methods:{//methods属性,用于声明函数 将多个函数声明在此处 以供页面调用 } mounted(){//钩子函数属性,用于在对应加载的时机执行内部逻辑 此处一般用来初始化数据 }
属性相关指令 v-html="变量" 解析html指令 将变量先进行html解析再展示 v-if/v-else-if/v-else 一般绑定布尔变量 用于控制页面对应元素是否显示 flase是换为空标签 v-show 作用等价于v-if 用于控制对应元素的显示隐藏 flase是声明为none (v-on:/@) 用于绑定事件,函数需要在vue中声明 例如 @click="fun()"将单击事件绑定给vue中的函数fun() [v-bind]:元素属性="变量" 将变量绑定为元素属性值,vue中无对应属性时效果等同赋值 v-for="遍历到的元素名 in 遍历集合" 对集合进行遍历 会将当前元素及其子级在每次遍历中复制 在遍历过程中获取元素的属性 必须是scrip的vue代码段 即动态赋值属性要是v-bind 动态传参函数事件要是v-on v-model="变量" 双向绑定变量与元素value相互绑定 相互赋值 v-model可以取代文本框和下拉框的value 选择框的name {{变量}} 插值表达式 会将变量的值在表达式处展示为纯文本
vue8个生命周期钩子 (钩子函数 在vue执行到该周期时 钩子函数中的代码会自动执行) beforeCreate: 在组件实例初始化完成之后立即调用; 数据还没有监听,没有绑定到vue对象实例,同时也没有挂载对象; created: 在组件实例处理完所有与状态相关的选项后调用; 数据已经绑定到了对象实例,但是还没有挂载对象; beforeMount: 在组件被挂载之前调用; 模板已经编译好了,根据数据和模板已经生成了对应的元素对象,将数据对象关联到了 对象的el属性,el属性是一个HTMLElement对象,也就是这个阶段,vue实例通过原生的 createElement等方法来创建这个html片段,准备注入到我们vue实例指明的el属性所对应的挂载点 mounted: 在组件被挂载之后调用; 将el的内容挂载到了el,相当于我们在jquery执行了(el).html(el),生成页面上真正的dom; 在此之后,我们能够用方法来获取到el元素下的dom对象,并进行各种操作 beforeUpdate: 数据更新到dom之前,$el对象已经修改,但是页面上dom的数据还没有发生改变 updated: dom结构会通过虚拟dom的原则,找到需要更新页面dom结构的最小路径,将改变更新到dom上面 beforeUnmounted: 马上要执行取消挂载,但此刻vm中的data、methods...还处于可用状态 Unmounted: 组件已经取消挂载,此组件在浏览器中对应的DOM结构已被完全移除
ipv4协议 ipv6协议 tcp协议 udp协议
TCP是一种面向连接的 可靠的 基于字节流的通信协议,数据在传输前要建立连接,传输完毕后还要断开连接。如果数据有丢失,TCP协议会重发数据.
1.客户端发送请求报文给服务器端 服务器端确定客户端的发送能力和自己的接收能力没有问题 2.服务器端发送ACK报文给客户端并为此次连接分配资源 客户端确定自己的发送能力和服务器的接收能力没有问题 3.客户端发送ACK报文给服务器端并为此次连接分配资源 服务器端确定自己的发送能力没有问题 自此双方都确认了自己的发送能力和接收能力没有问题 TCP连接就成功建立了 三次也不是完全可靠的 只是三次握手之后后面的握手也不会比三次握手更安全所以选择三次握手作为规则
1.客户端给服务器端发送FIN报文 并停止客户端到服务器端的数据传递 2.服务器端给客户端发送ACK报文 表示收到关闭请求并准备传输完成剩余数据 3.服务器给客户端发送FIN报文 表示剩余数据已经传输完毕 进入等待关闭的状态 4.客户端给服务器端发送ACK报文 服务器在收到ACK报文后随之断开连接 客户端在服务器断开后也会超时断开
此类表示ip协议地址 InetAddress.getLocalHost() 获取本机ip地址(ipv4) InetAddress.getAllByName("名称") 获取对应名称的所有ip 对象.gethostname 获取本机名称
所有的网络之间的数据传递 都是字节流,需要用到java.net.URL去对网络资源路径进行解析 URL统一资源定位符 new URL()传入路径后获得对应路径的资源对象 openStream(): 将URL对象转换为字节流 openConnection() : 将url对象转换为URLConnection对象 可以将此对象转换为其他流
无连接也可发送数据 数据丢失不重发 一般用于直播等 速度比tcp快但容易丢失数据 DatagramPacket(byte[],byte.length(),["路径"],[端口号]) 只有字节数组相关参数时 用于接收数据并存进数组 有路径端口参数时 用于将数组数据向对应端口发送 new DatagramSocket([端口号]) 未填写端口号时对象用于发送数据 填写时用于从对应端口接收数据 send(DatagramPacket对象) : 发送数据 receive(DatagramPacket对象) : 接收数据
基于tcp/ip协议簇 进行网络数据的发送 new serveSocket(端口号) 监听对应端口 .accept() 将其变为一个socket对象 new socket("ip地址",端口号) 与对应ip的对应端口号建立连接 返回socket对象 每获得一次数据都需提供一个新对象 getOutputStream() 获得outputstream流 getInputStream() 获得inPutStream流
//使用注解配置请求路径 @WebServlet("/demo") public class MyServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //HttpServletRequest 解析了请求报文 与请求报文相关的数据 都可以通过req对象获取 //HttpServletResponse 封装了输出流 // 封装后的输出流 PrintWriter writer = resp.getWriter(); writer.print("hello world!!!!
"); writer.flush(); writer.close(); } }
配置时可以直接在类上使用注解 或者在web.xml中写配置文件
myservlet com.javasm.test.MyServlet myservlet /myservlet
常见的错误:
1.servlet配置的请求路径上必须由/开始 @WebServlet("/demo") 如果没有 项目无法正常启动
2.servlet配置路径时 每个servelt配置独立的请求路径 如果多个servlet配置为相同的路径 启动报错 项目无法正常启动
1.项目欢迎页面可以修改 在web.xml中改配置文件2.WEB-INF是受保护的目录 无法通过url直接访问 3.项目依赖的jar包 tomcat在运行时 指定在当前项目的WEB-INF/lib/ 目录中查找jar包 mypage.html
1.继承httpServlet 重写 doGet()+doPost() 或者重写service() 2.继承GenericServlet 重写 service() 3.实现Servlet接口 实现接口中所有方法 包括service()方法
1.当请求路径被解析 对应servlet需要被执行时 先判断servelt实例是否存在 2.如果不存在 先创建servlet实例 再执行service方法 3.如果已存在 servlet实例长期有效 直接执行service方法 4.当服务器关闭时 服务会销毁servlet实例 5.如果配置项中有 load-on-startup 服务器在启动过程中 会创建servlet的实例
类似于懒汉模式的一种单例设计 是线程不安全的
request 在每个完整的请求过程中都是独立的 请求结束时销毁 session 在同一个用户的多次访问间共享数据 获取时才会创建 失效条件 1.有一方连接断开 2.超过设置的有效期 3.代码设置失效 servletcontext 全局共享数据 一般用来存放公共配置参数 是线程不安全的
请求参数相关 setCharacterEncoding("charset") 设置tomcat解析参数的字符(默认iso-8859-1),设置在第一次获取参数前 getParameter("key") 按照对应key获取请求参数中的value getParameterValues("key") 按照对应key取请求参数中的所有value getParmeterMap() 解析所有的请求参数并放入Map上两个方法的实质就是从此方法获取 getInPutStream() 获取请求体的完整内容 对象相关 getServletContext() 获取context对象 getsession() 使用HttpServletRequest获取session对象 getScheme() 获取本次请求的协议 m () 获取服务器地址 getServerPort() 获取服务器端口号 getServletPath() 获取servlet配置的路径 getRequestURI() 获取当次请求的uri getRequestURL() 获取当次请求的URL
setContentType("text/html;charset=utf-8") 设置content-type响应头 指定返回数据格式和字符编码 getWriter().print(""+username+"
"); 获得输出流并用输出流输出页面
可以用this调用相关方法 但实质this指代的是当前servlet对象只不过该对象有这些方法的重写 getInitParameter("configkey"); 获得servlet上配置的初始参数 getServletContext(); 获得服务器对象(servletcontext) getServletName(); 读取servlet配置的name
getcontextPath() 获取服务器配置的项目名 getrealPath("/") 获取服务器运行的真实目录 getInitParameter("username") 获得全局初始化参数 ???????? 该配置在web.xml文件中 固定的一组写法为name zhangsan
getId() 获取唯一的session对象编号 setAttribute("key","value") 在此对象中设置一组键值对 getAttribute("") 根据k读取对应的v removeAttribute("key") 根据k删除一组键值对 setMaxInactiveInterval(ms) 设置对象超时间隔(秒) getMaxInactiveInterval() 读取对象超时间隔 invalidate() 直接让对象失效
在vscode中 用户---首选项--配置用户代码片段 进行快捷代码的配置和修改 注意 元素要被""包裹才可以生效 ,"",是空一行
xml配置文件
1.0 war 11 11 UTF-8 mysql mysql-connector-java 8.0.28 org.projectlombok lombok 1.18.24 provided junit junit 4.13.2 test com.alibaba fastjson 1.2.79 javax.servlet javax.servlet-api 4.0.1 provided
jsp本质上还是servlet 就像在一个servlet方法中写页面和java代码
<%...%> 声明普通java代码 <%=...%> 声明输出变量 <%!...%> 声明方法和成员变量 <%--...--%> 声明注释 注释不参与编译 <%@...%> 声明指令 page指令 做页面参数设置 include指令 引入其他页面 taglib指令 引入第三方标签库
request response session application config out page pageContext exception
pageScope 就是当前页面作用域 pageContext requestScope 等价于httpRequest SessionScope 等价于httpsession applicationScope 等价于servletcontext
从域中根据对应的keyt来取值 并将值输出到页面 内置自动的类型转换和非空判断 ${...} 在括号中声明一个key 在域中依照这个key取出对应的值 el表达式取值会自动从小作用域到大作用域检索 直接返回第一个结果 也可以使用内置的对象指定检索该对象作用域的值 el表达式的取值对象有内置的以下几种 pageScope requestScope sessionScope applicationScope param pageContext
request.getRequestDispatcher("转发路径").forward(request,response) 整个过程是一次请求,一次响应 request数据不会丢失 浏览器的url地址栏不变 是服务器内部的跳转行为 在一次访问中效率更高 但在频繁刷新中会频繁转发 可以转发到WEB-INF目录下 不可以访问工程以外的资源(如:http://www.baidu.com)
response.senRedirect("跳转路径") 在频繁刷新的页面效率更高 浏览器地址栏发生改变,变为目标地址 重定向是浏览器的行为,通过响应对象HttpServletResponse来执行 整个过程是两次请求,两次响应 不共享Request域中数据 不能访问WEB-INF目录下的资源 可以访问工程外的资源(如:http://www.baidu.com)
异步请求是子线程进行请求处理 异步请求不进行页面跳转 通过设定的请求路径与服务器进行数据交互 当收到服务器的响应时 执行回调函数内的逻辑 异步请求中使用请求转发是无效的
ajax是纯前端的异步请求技术 在script标签中使用 new XMLHttpRequest() 创建异步请求线程对象 onreadystatechange=function(){} 配置回调函数逻辑体 open("请求方式","请求路径",[true]/flase) 创建连接 true表示异步请求 可省 setRequestHeader(""Content-Type","application/x-www-form-urlencoded")设置请求头 send("请求参数") 发送请求
引入axios get("请求路径+?+请求参数参数").then(回调成功函数).catch(回调失败函数) post("请求路径","请求体参数") 其余与get相同
1.存储字符串键值对 不使用中文 2.按域(domain)存储 不同网站有自己的cookie数据 3.当访问对应的域时 cookie存储的数据 自动拼入请求报文 发送到服务端
写入 new Cookie("key", "value") : 创建个coolie对象 cookie.setPath("/") : 设置path cookie.setMaxAge(int): 设置过期时间(ms) 0删除 -1为session(关闭浏览器失效) resp.addCookie(cookie) : 让浏览器存储cookie 响应报文中出现set-cookie 不存在cookie时 直接储存cookie 如果cookie存在 且同name同path 此操作为修改 读取 req.getCookies() :获得所有cookie键值对数组 是tomcat根据请求报文键值对克隆的cookie对象,非浏览器cookies本体 tomocat部分版本存在bug 解析时会将""数据变为不解析 需要用以下方法拿请求头解析数据获得所有cookie String cookie = req.getHeaders("cookie").asIterator().next()
写入 document.cookie ="key=value;path=/;expires="+new Date('2023-10-10 11:11:11'); 不存在cookie时 直接储存cookie 如果cookie存在 且同name同path 此操作为修改 如果时间过期 为删除 读取 document.cookie 读取到所有cookie键值对字符串 如果要改特定key的值 需要手动解析 读取到以前的值 再重新覆盖
都是一种储存机制 但cookie存储在浏览器端 session存储在服务器端 session实质也依赖于cookie技术在浏览器中储存了sesson标识id 详细说就是 如果使用到了session对象 服务器会自动写一条响应报文 把session编号 写入浏览器 当再次接收到请求时 服务器会自动读取cookie中的jsessionid 然后从服务器端sesssion集合 根据cookie中存入的编号 取出session对象 在服务端使用
在前端存储数据的技术 按照键值对存储 存字符串 只提供存取功能 没有默认发送功能 localStorage 无限期存储 sessionStorage 关闭浏览器自动失效 两个对象操作API相同
写入 localStorage.key = "value" : 存入一组键值对 localStorage.setItem("key","value") : 存入一组键值对 不存在的key 新增 已存在的key 覆盖 读取 localStorage.key 根据key读取值 localStorage.getItem("key") 根据key读取值 删除 localStorage.removeItem("key"): 删除指定key localStorage.clear() : 全部删除
1.安装node.js 2.配置npm仓库地址 npm config set registry https://registry.npm.taobao.org 3.安装并创建vite项目 通过cmd进入指定目录 npm create vite@latest 4.cd进入项目目录 npm install 安装项目编译运行使用的基础依赖 会自动安装到 node_modules中 如果出错 删掉重新运行命令 5.执行npm run dev 启动vite内嵌服务器
1.项目配置目录中输入命令: npm install vue-router@4 安装路由js库 2.新建路由路径配置路由配置文件 :src/router/index.js 3.在index.js中进行路由的配置
//引入 vue-router插件 import { createRouter, createWebHistory } from 'vue-router' //引入一个Vue文件,可以使用 Home 这个名字来指向它,这个名字随意起 const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ 在这数组中配置一组组json对象 映射路径与组件的对应关系 { path: '/hello',//浏览器输入 http://[ip]:[port]/hello的时候 指向这里 component: () => import('../components/HelloWorld.vue')//转发到HelloWorld.vue 这样不需要在上面单独引入,属于懒加载,这个路径被访问了才会加载 } ] }) export default router
3.在main.js中 加入启用路由组件 import { createApp } from 'vue' import App from './App.vue' import router from './router' //引入根组件app.vue 作为页面模板 做初次渲染 let app = createApp(App) 将页面app作为对象给赋值 //使用某插件 在此进行引入 app.use(router); app.mount('#app');
vue文件是单页面应用中 用于替换到根组件显示的页面文件代码 相当于之前写的html文件 写html代码
main.js引入axios import axios from 'axios' 引入axios axios.defaults.baseURL = '' 声明axios请求的路径 app.config.globalProperties.$axios = axios 公共对象引入 配置到全局参数中
浏览器对ajax请求有限制 默认只能向同一个服务器发送ajax请求 向其他服务器发送请求 属于跨域请求 浏览器会阻止 协议/地址/端口 有一个不同就属于跨域请求 需要在服务端设置特定响应头允许跨域 Access-Control-Allow-Origin 浏览器在发现 会发送预检请求 method = options 检查服务端是否标记了特殊响应头 允许跨域访问
resp.setHeader("Access-Control-Allow-Origin", "协议路径端口") 设置允许跨域的主机地址 resp.setHeader("Access-Control-Allow-Methods", "请求方式") 允许跨域的请求⽅法GET, POST, HEAD ,*(全部都可)等 resp.setHeader("Access-Control-Max-Age", "3600") 重新预检验跨域的缓存时间 (s) resp.setHeader("Access-Control-Allow-Headers", "*") 允许跨域的请求头 resp.setHeader("Access-Control-Allow-Credentials", "true") 是否携带cookie
终端执行命令 npm install element-plus --save main.js中添加 import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' app.use(ElementPlus)
1. 在xml文件的标签中添加mybatis与mysql数据库驱动jar包。其他jar包也添加在此 2. 在main中的entity包下创建数据库表对应的实体类。 3. 在resources下创建mybatis的xml核⼼配置⽂件,注意引⼊映射⽂件路径。 4. 在resources中的mapper包下创建实体类对应的xml语句映射⽂件。
org.mybatis mybatis 3.5.6 mysql mysql-connector-java 8.0.28
mybatis 基本加载方式 通过配置文件 生成configuration对象 在对象中 注册 语句 mappedStatements 别名 typeAliases 等等其他对象...从而可以自动生成执行代码和语句设置mybatis通用参数设置 驼峰和下划线的转换 日志输出 STDOUT_LOGGING 输出到控制台 配置数据源 数据源可以配置多个 通过defalut指定当前使用的 配置sql语句的映射文件 每个文件都可以单独配置 配置别名 别名在映射配置文件中可以直接使用 --> 扫描包 指定类名 该包下所有的实体类都会生成别名 类名当做别名 --> -->
1.如果要查询出某个字段的集合 配合selectList 可以查出单个字段的集合 2.统计表中数据的总量 配合selectOne 和sql语句中的count() 查询单个字段内部声明sql语句的相关标签namespace属性设置当前映射⽂件的唯⼀命名,确保不同映射⽂件不重复,在getmapper中还需要指定interface文件全限定名称 常规标签 查询标签 插入标签 修改标签 删除标签 sql标签 把公共的sql部分独立出来 通过id属性单独标识 通过在其他语句中使用include标签的id属性引用对应sql标签中的数据 动态标签 如果if标签一个都没有返回true where语句直接忽略 第一个if的and符号会被忽略 条件判断 看是否需要拼接条件 在test属性中声明判断条件 用于在新增标签中时生成set及控制其后面的语句 忽略最后一个if条件的, 遍历标签 collection属性指定遍历的集合,一般搭配@Param("key")将key给到属性取集合的值 item属性设置每次遍历到元素的别名 separator属性设置两个元素之间的分隔符 open属性设置整个循环体的头部 close属性设置整个循环体的尾部
id 当前语句的编号 方便mybatis加载 在getMapper中需要对应到interface文件中的方法名 resultType 指定封装对象返回的结果集 自动装配 resultMap 可以不增加java类中的属性的前提下向java类的字段手动指定数据 select标签的resultMap属性与resultType属性不能同时出现 resultType属性的值⼀般是实体类,map或简单类型及对象; resultMap属性的值必须是resultMap标签的id值,一般是有子对象或子集合使用 parameterType 标记参数的类型 可以忽略不写会自动匹配 简单类型 基本数据类型 对象类型 list map
传入参数时 在mybatis映射文件中 可以使用#{}或${}表示传入的参数 参数名使用规则: 1个参数 简单类型时 参数名可以随意使用 但是 尽量跟传入参数的属性符合 提高可读性 使用对象 直接使用属性名 (此属性是否有值) 使用map (自定义键值对) 直接使用map的key
inputStream = Resources.getResourceAsStream("mybatis-config.xml"); SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream); SqlSession sqlSession = sqlSessionFactory.openSession(); sqlSession对象API getMapper(抽象方法类名.class) getMapper法 获得抽象类对象 从而实现各种方法的调用 selectOne() 查询单条 selectList() 查询多条 insert() 插入数据 update() 修改数据 delete() 删除数据 commit(); 提交事务 rollback(); 回滚事务 close(); 关闭会话 (归还连接)
id属性是标识符 用于select标签绑定 type属性是结果集的全限定类名 基本映射标签 ⽤来进⾏主键列映射 进⾏⾮主键列映射 column属性对应的是数据库的列名 property属性对应的是结果集的属性。 对象封装标签 在该标签体中将单个对象具体属性的各种映射的对象封装 在该标签体中进行多个对象具体属性的各种映射的集合封装 property属性对应结果集的属性名 javaType属性是对象类型的全限定类名 ofType属性是集合数据类型的全限定类名
不需要再编写daoImpl实现类代码 在此处写抽象方法 规则照旧 由mybatis根据mapper的namespace和方法名 找到对应的配置文件 自动生成dao执行的代码 形参为map集合时 @Param("key") 写在每个参数上,此时可传递多个形参 会自动把参数封装入map 自定义的key做key 实际数据做值
${} 硬拼接 不会带引号 把变量直接拼进sql语句 没有使用占位符 无法防止注入攻击 动态排序时会用到 #{} 占位符替换 会带引号 用preparedStatement的?动态传参 可以防止特殊符号
like '%#{xxx}%' 每次传递参数时加上%% like CONCAT('%',#{prodName},'%') 编辑配置文件时使用concat 推荐用此种
mybatis会自动创建缓存 用来存储已查询的数据 当再次查询时优先从缓存中取数据 一级缓存 会话级别缓存 与对象紧密关联 归还对象连接时失效 初次使用时 从数据库加载并创建map集合装载缓存数据 再次使用时 从缓存加载 二级缓存 全局缓存 归还连接也不会失效 其他对象依然可以拿到缓存数据 需要手动开启 开启方法 核心文件配置映射文件配置