Cookie
1) 创建cookie对象 ： Cookie cookie = new Cookie(name,value);
2) 将cookie响应给客户端： response.addCookie(cookie);
3) 默认情况下，cookie是不会保存到客户端的磁盘上的。我们需要设置：
cookie.setMaxAge(秒) 这样浏览器才会将cookie保存到磁盘
4) cookie.setDomain(域)
为什么不同网站的cookie浏览器不会“搞混”？因为有domain进行区分
5) cookie.setPath("/") 这是默认值
cookie.setPath("/hello02/a");
如果这么设置，那么/hello02/a下的所有的url都可以访问到这个cookie。但是，/hello02/b , /hello02/c , /hello03 ... 是访问不到该cookie的。
JSON
json是一种数据格式，在开发中凡是涉及到跨平台数据传输，json格式一定是首选。
1.JSON对象的格式：
{key : value , key : value , ... , key : value}
2.JSON数组的格式：
[value , value , ... value]
3.客户端对js Object和js String相互转换
js String在idea中定义为 objectStr = '{"pid":"1001"}';//双引号在里面，单引号在外面。反过来的话会报语法错误
① 客户端发送给服务器的消息一定是字符串，服务器端才好接收，所以客户端需要将js Object->js String
使用 JSON.stringify(jsObject)方法
② 服务器端响应给客户端的一定是字符串，客户端需要的是一个个对象，所以客户端需要将js String->js Object
使用 JSON.prase(jsString)方法
正则表达式
正则表达式就是描述一个规则的公式
步骤
步骤一：定义正则表达式对象
var reg = new RegExp("l");
var reg = //; //表示是正则表达式，常见写法。
步骤二：定义待校验的字符串
**var** str = "hello world!";
步骤三：校验
校验test() ：var flag = reg.test(str); //判断str中是否存在l
替换replace(): str = str.replace(reg,"X"); //将str中的l替换成X(只替换第一个l)
模式匹配：
g：全局的
i：忽略大小写匹配
m：多行匹配
eg:
var reg = new RegExp("l","g");
var str = "hello world!";
str = str.replace(reg,"X"); //则可将str中的所有小写l替换成X
var reg = new RegExp("l","g");
var str = "helLo world!";
str = str.replace(reg,"X");//大写的L无法被替换成X，需要加上i表示忽略大小写匹配
reg = new RegExp("l","gi");//改写成这样 则大写L也可被替换
...
var reg = new RegExp("o$","gm"); //o$ 表示以o结尾
var str = "hello\nworld!";
alert(reg.test(str));//即使加了\n，依然把str当作一个整体，所以认为str是以d结尾的,需要加上i表示多行皮皮额
reg = new RegExp("o$","gmi");//修改成这样 则认为第一行结尾是o，警告框弹出的是true
...
/**
注意：
① gmi三者的顺序不是固定的，可随意变换位置
② 定义正则表达式：
var reg = new RegExp("l","g"); <-> var reg = /l/g;
var reg = new RegExp("o$","gmi"); <-> var reg = /o$/igm;
**/元字符
元字符：对正则表达式的字符进行描述的字符
| 代码 | 说明 |
|---|---|
| . | 匹配除换行符以外的字符 |
| \w | 匹配单词字符(字母、数字、下划线) |
| \W | 匹配非单词字符 |
| \s | 匹配空白字符 |
| \S | 匹配非空白字符 |
| \d | 匹配数字 |
| \D | 匹配非数字 |
| \b | 匹配单词的开始和结束(不修改原字符串) |
| ^ | 匹配以***开始 |
| $ | 匹配以***结尾 |
字符集合
//下面的abcxy只是一个示例，都是指的未知数，可根据情况修改。
-
[abc] 只要包含a、b、c中任意一个字符即可.
-
abc 只要包含a、b、c以外的任意一个字符即可(^ 表示取反分意思).
-
[x-y] 只要包含x-y的任何一个字符即可。常用[a-zA-Z0-9] ：表示所有字母和数字范围内
出现次数
| 代码 | 说明 |
|---|---|
| * | 表示出现0或多次 |
| + | 表示出现1或多次 |
| ? | 表示出现0或1次 |
| {n} | 表示出现n次 |
| {n,} | 表示出现n或多次 |
| {n,m} | 表示出现n到m次 |
示例：
| 表示或者
VUE
MVVM(M V VM)
如何把数据模型(M)中的数据展示到视图(V)上去，需要在两者之间架设一个桥梁，VM就是这个桥梁。
<html>
<head>
//... meta , title
<script src="script/vue.js"></script> //必须要导入vue.js(下载下来的文件，放在了web文件夹下的script中)，才能使用vue。
//或者直接导入 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"xx"; //字符串
studentList:[ //对象数组
{name:"Tom",
mobie:"123456"},
{name:"Luck",
mobie:"112233"}
]
},
methods:{
sayHello:function(){
alert("Hello");
}
}
})
</script>
</head>
<body>
<div id="#app">
<p>{{msg}}</p>
</div>
</body>
</html>el: 挂载点
🔰el是用来设置Vue实例挂载（管理）的元素
🔰Vue会管理el选项 命中的元素 及其内部的 后代元素
data: 数据对象
🔰Vue中用到的数据定义在 data 中
🔰data中可以写 复杂类型 的数据
🔰渲染复杂类型数据时，遵守js的 语法 即可
🔰有多组数据时，用 , 隔开
methods：方法
🔰Vue中用到的方法定义在 methods 中
🔰有多个方法时，用 , 隔开
methods:{
方法名1:function(){
//逻辑
},
方法名2:function(){
//逻辑
}
}
<input type="button" value="提交" v-on:click="方法名1"> //方法名后面的括号可带可不带
插值表达式
使用 {{}} 获取到 data 内的数据， {{}} 可以书写数字，表达式，运算符号。
eg:{{massage}}
v-bind(属性绑定)
设置元素的属性（如：src, title, class）完整写法是 v-bind:属性名。简写的话可以直接省略 v- bind ，只保留 :属性名
v-model(表单元素绑定)
设置和获取表单元素的值【双向绑定】
绑定的数据会和表单元素的值相关联。修改表单中的值，对应的data中的变量值也会改变
完整写法是 v-model:属性名。简写的话可以直接省略 :属性名 ，只保留 v-model
.trim 表示去掉首尾空格
.stop 表示阻止事件冒泡 eg: @click.stop="sayHello"
.prevent 表示阻止(取消)事件的默认行为
v-if
v-if和v-else之间不能有其他的元素节点(其他标签，换行符都不行)，否则报错。
eg: <p v-if="flag">Hello</p> //如果flag为true，则显示Hello,为false则显示World
<p v-else="flag">World</p>
v-show
eg: <p v-show:"flag">2024</p> //如果flag为true，则显示2024，否则不显示2024
v-show 功能与 v-if 一样，但是在dom树上仍然有该p标签，该节点存在，只是被隐藏了(display:none;)。
区别：v-if成立，则dom树上有这个节点，反之没有这个节点；v-show是通过样式表的display属性来控制是否显示的，dom树上一定存在这个节点的。
v-for(列表循环)
常与数组组合使用
语法是： 变量 in 数据
数组长度的更新会同步到页面上，是响应式的
v-on(事件绑定)
完整写法是 v-on: 事件名="方法名" 。简写：@事件名:"方法名"，将 v-on: 替换为 @
注意：可能js和vue中的方法都需要
<input type="button" value="提交" onclick="普通的js方法" v-on:click="vue对象中的方法">event 表示当前事件，作为方法的形参直接传入，可通过event.clientX,event.clientY获得当前对象的x,y轴坐标
属性侦听
示例：
watch:{ //newValue指的是你监视的那个属性的新的值 //表示监听num1数据 num1:function(newValue){ this.result = parseInt(newValue) + parseInt(this.num2) ; }, 表示监听num2数据 num2:function(newValue){ this.result = parseInt(newValue) + parseInt(this.num1) ; } }
Ajax
Ajax的全称是 异步的JavaScript和XML
原生的Ajax操作步骤：
1.创建XMLHttpRequest对象(核心对象)
2.调用open方法，设置请求方式，设置请求URL，设置异步发送请求
3.绑定回调函数
4.实现回调函数
Axios
Axios是Ajax的一个框架，需要导入axios依赖，在代码中使用<script src = "script/axios.min.js"></script>标签之后才能写axios代码
Axios
1. 发送异步请求
axios({
method:"GET",
URL:"/ajax01"
});
2. 发送带请求参数的异步请求
axios({
method:"GET",
URL:"/ajax01",
params:{
uname:"jim",
pwd:"ok"
}
});
回调函数：
axios({
method:"GET",
URL:"/ajax01",
params:{
uname:"jim",
pwd:"ok"
}
}).then(response=>{
//操作 (response.data)
}).catch(reason=>{
//操作
});
3. 发送带请求体参数的异步请求
【发送JSON请求体参数的异步请求，一定是POST请求方式】
axios({
method:"POST",
URL:"/ajax01",
data:{
uname:"jim",
pwd:"ok"
}
}).then(response=>{
//操作 (response.data)
}).catch(reason=>{
//操作
});
服务器 ： java Object对象<->jsonStr字符串 4. 服务器获取请求体参数，然后转化成java对象 不能使用：request.getParameter() 这种方式只能获取请求参数的数据，对于请求负载(request payload)是获取不到的 而应该使用：request.getReader() //可以一行行读取数据 //解析JSON格式的字符串，我们有第三方jar包：GSON。GSON提供了两个方便的方法：fromJson() , toJson() Gson gson = new Gson(); gson.fromJson(string,class); //String->Object 5. 服务器已知java对象，需要将java对象转化成json字符串，然后响应给客户端，客户端展示json信息 Gson gson = new Gson(); string = gson.toJson(class); //Object->String
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
