控制台语言：
(" ").length 获取字符串长度
document.getElementByid(" ") ：document 文档的意思 getElementById 根据文档中的id获取数据
let a 定义变量 a.innerText = " " 对a中的值进行修改
一、HTML+CSS
1. HTML 元素
HTML 由一系列元素 elements 组成，例如
<p>Hello, world!</p>
-
整体称之为元素
-
<p>和</p>分别称为起始和结束标签 -
标签包围起来的 Hello, world 称之为内容
-
p 是预先定义好的 html 标签，作用是将内容作为一个单独的段
元素还可以有属性，如
<p id="p1">Hello, world!</p>
-
属性一般是预先定义好的，这里的 id 属性是给元素一个唯一的标识
元素之间可以嵌套，如
<p>HTML 是一门非常<b>强大</b>的语言</p>
不包含内容的元素称之为空元素，如
<img src="1.png"> <img src="1.png"/>
-
img 作用是用来展示图片
-
src 属性用来指明图片路径
2. HTML 页面
前面介绍的只是单独的 HTML 元素，它们可以充当一份完整的 HTML 页面的组成部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试页面</title> </head> <body> <p id="p1">Hello, world!</p> <img src="1.png"> </body> </html>
-
html元素囊括了页面中所有其它元素，整个页面只需一个，称为根元素 -
head元素包含的是那些不用于展现内容的元素，如title，link，meta等 -
body元素包含了对用户展现内容的元素，例如后面会学到的用于展示文本、图片、视频、音频的各种元素
3. 常见元素
1) 文本
Heading
<h1>1号标题</h1> <h2>2号标题</h2> <h3>3号标题</h3> <h4>4号标题</h4> <h5>5号标题</h5> <h6>6号标题</h6>
Paragraph
<p>段落</p>
List
无序列表 unordered list
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
有序列表
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol>
多级列表
<ul> <li> 北京市 <ul> <li>海淀区</li> <li>朝阳区</li> <li>昌平区</li> </ul> </li> <li> 河北省 <ul> <li>石家庄</li> <li>保定</li> </ul> </li> </ul>
Anchor
锚，超链接
<a href="网页地址">超链接文本</a> 其中href="#" 跳到页头，href="#id" 跳到id位置
2) 多媒体
Image
<img src="文件路径">
src 格式有 3 种
-
文件地址
-
data URL，格式如下
data:媒体类型;base64,数据
-
object URL，需要配合 javascript 使用
Video
<video src="文件路径"></video>
Audio
<audio src="文件路径"></audio>
3) 表单
作用与语法
表单的作用：收集用户填入的数据，并将这些数据提交给服务器
表单的语法
<form action="服务器地址" method="请求方式" enctype="数据格式"> <!-- 表单项 --> <input type="submit" value="提交按钮"> </form>
-
method 请求方式有
-
get （默认）提交时，数据跟在 URL 地址之后
-
post 提交时，数据在请求体内
-
-
enctype 在 post 请求时，指定请求体的数据格式
-
application/x-www-form-urlencoded（默认）
-
multipart/form-data
-
-
其中表单项提供多种收集数据的方式
-
有 name 属性的表单项数据，才会被发送给服务器
-
常见的表单项
文本框
<input type="text" name="uesrname">
密码框
<input type="password" name="password">
隐藏框
<input type="hidden" name="id">
日期框
<input type="date" name="birthday"> 默认的格式是：yyyy-MM-dd 后端接受需要设置相同的格式
单选
<input type="radio" name="sex" value="男" checked> <input type="radio" name="sex" value="女">
多选
<input type="checkbox" name="fav" value="唱歌"> <input type="checkbox" name="fav" value="逛街"> <input type="checkbox" name="fav" value="游戏">
文件上传
<input type="file" name="avatar">
4. HTTP 请求
1) 请求组成
请求由三部分组成
-
请求行
-
请求头
-
请求体
可以用 telnet 程序测试
2) 请求方式与数据格式
get 请求示例
GET /test2?name=%E5%BC%A0&age=20 HTTP/1.1 //请求行 Host: localhost //请求头
-
%E5%BC%A0 是【张】经过 URL 编码后的结果
post 请求示例
POST /test2 HTTP/1.1 //请求行 Host: localhost //请求头 Content-Type: application/x-www-form-urlencoded Content-Length: 21 name=%E5%BC%A0&age=18 //请求体
application/x-www-form-urlencoed 格式细节：
-
参数分成名字和值，中间用 = 分隔
-
多个参数使用 & 进行分隔
-
【张】等特殊字符需要用 encodeURIComponent() 编码为 【%E5%BC%A0】后才能发送
json 请求示例
POST /test3 HTTP/1.1
Host: localhost
Content-Type: application/json
Content-Length: 25
{"name":"zhang","age":18}
json 对象格式
{"属性名":属性值}
其中属性值可以是
-
字符串 ""
-
数字
-
true, false
-
null
-
对象
-
数组
json 数组格式
[元素1, 元素2, ...]
multipart 请求示例
POST /test2 HTTP/1.1 Host: localhost Content-Type: multipart/form-data; boundary=123 Content-Length: 125 --123 Content-Disposition: form-data; name="name" lisi --123 Content-Disposition: form-data; name="age" 30 --123--
-
boundary=123 用来定义分隔符
-
起始分隔符是
--分隔符 -
结束分隔符是
--分隔符--
数据格式小结
客户端发送
-
编码
-
application/x-www-form-urlencoded ：url 编码，特殊字符需要先编码才能发送
-
application/json：utf-8 编码
-
multipart/form-data：每部分编码可以不同
-
-
表单只支持以 application/x-www-form-urlencoded 和 multipart/form-data 格式发送数据
-
文件上传需要用 multipart/form-data 格式
-
js 代码可以支持任意格式发送数据
服务端接收
-
对 application/x-www-form-urlencoded 和 multipart/form-data 格式的数据，Spring 接收方式是统一的，只需要用 java bean 的属性名对应请求参数名即可
-
对于 applicaiton/json 格式的数据，Spring 接收需要使用 @RequestBody 注解 + java bean 的方式
3) session 原理
Http 无状态，有会话
-
无状态是指，请求之间相互独立，第一次请求的数据，第二次请求不能重用
-
有会话是指，客户端和服务端都有相应的技术，可以暂存数据，让数据在请求间共享
服务端使用了 session 技术来暂存数据
存
GET /s1?name=zhang HTTP/1.1 Host: localhost
取 （需要携带session存时生成的sessionID才能找到对应的session）
GET /s2 HTTP/1.1 Host: localhost Cookie: JSESSIONID=560FA845D02AE09B176E1BC5D9816A5D
session 技术实现身份验证
4) jwt 原理
jwt 技术实现身份验证
生成 token
GET /j1?name=zhang&pass=123 HTTP/1.1 Host: localhost
校验 token
GET /j2 HTTP/1.1 Host: localhost Authorization: eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiJ9._1-P_TLlzQPb1_lCyGwplMZaKQ8Mcw_plBbYPZ3OX28
5. CSS
即 Cascading Style Sheets，它描述了网页的表现与展示效果
1) 选择器
-
type 选择器 优先级最低 - 根据标签名进行匹配（元素选择器）
-
class 选择器 优先级第二 - 根据元素的 class 属性进行匹配 使用 .class {}
-
id 选择器 优先级最高 - 根据元素的 id 属性进行匹配 使用#id {}
2) 属性和值
-
background-color : red;
-
...
-
display : none 隐藏 : block 显现
3) 布局
与布局相关的 html 元素
-
div 容器标签
-
template 模板标签，用于动态添加
二、JavaScript
它是一种脚本语言，可以用来更改页面内容，控制多媒体，制作图像、动画等等
例子
-
修改页面内容
js 代码位置
<script>
// js 代码
</script>
引入 js 脚本
<script src="js脚本路径"></script>
-
注意，到了框架之后，引入方式会有不同
1. 变量与数据类型
声明变量
1) let ⭐️
let 变量名 = 值;
-
let 声明的变量可以被多次赋值，例如
let a = 100; // 初始值是 100 a = 200; // ok, 被重新赋值为 200
2) const ⭐️
-
const 修饰的叫常量，只能赋值一次
const b = 300; // 初始值是 300 b = 400; // error, 不能再次赋值
-
const 并不意味着它引用的内容不可修改，例如
const c = [1,2,3]; c[2] = 4; // ok, 数组内容被修改成 [1,2,4] c = [5,6]; // error, 不能再次赋值
3) var
-
var 声明的变量可以被多次赋值，例如
var f = 100; f = 200;
基本类型
1,2) undefined 和 null
-
执行表达式或函数，没有返回结果，出现 undefined
-
访问数组不存在的元素，访问对象不存在的属性，出现 undefined
-
定义变量，没有初始化，出现 undefined
例
console.log(1); // 函数没有返回值, 结果是 undefined
let a = 10; // 表达式没有返回值, 结果是 undefined
let b = [1,2,3];
console.log(b[10]); // 数组未定义元素是 undefined
let c = {"name":"张三"};
console.log(c.age); // 对象未定义属性是 undefined
let d;
console.log(d); // 变量未初始化是 undefined
二者共同点
-
都没有属性、方法
-
二者合称 Nullish
二者区别
-
undefined 由 js 产生
-
null 由程序员提供
3) string ⭐️
js 字符串三种写法
let a = "hello"; // 双引号 let b = 'world'; // 单引号 let c = `hello`; // 反引号
html 代码如下，用 java 和 js 中的字符串如何表示？
<a href="1.html">超链接</a>
java 显得比较繁琐
String s1 = "<a href=\"1.html\">超链接</a>"; String s2 = """ <a href="1.html">超链接</a>""";
js 就比较灵活
let s1 = '<a href="1.html">超链接</a>'; let s2 = `<a href="1.html">超链接</a>`;
模板字符串（Template strings）
需求：拼接 URI 的请求参数，如
/test?name=zhang&age=18 /test?name=li&age=20
传统方法拼接
let name = ; // zhang li ... let age = ; // 18 20 ... let uri = "/test?name=" + name + "&age=" + age;
模板字符串方式
let name = ; // zhang li ...
let age = ; // 18 20 ...
let uri = `/test?name=${name}&age=${age}`;
4,5) number 和 bigint⭐️
number 类型标识的是双精度浮动小数，例如
10 / 3; // 结果 3.3333333333333335
既然是浮点小数，那么可以除零
10 / 0; // 结果 Infinity 正无穷大 -10 / 0; // 结果 -Infinity 负无穷大
浮点小数都有运算精度问题，例如
2.0 - 1.1; // 结果 0.8999999999999999
字符串转数字
parseInt("10"); // 结果是数字 10
parseInt("10.5"); // 结果是数字 10, 去除了小数部分
parseInt("10") / 3; // 结果仍视为 number 浮点数, 因此结果为 3.3333333333333335
parseInt("abc"); // 转换失败，结果是特殊值 NaN (Not a Number)
"10" - 0 //转变number类型
要表示真正的整数，需要用 bigint，数字的结尾用 n 表示它是一个 bigint 类型
10n / 3n; // 结果 3n, 按整数除法处理
6) boolean ⭐️
-
Truthy
-
Falsy
在 js 中，并不是 boolean 才能用于条件判断，你可以在 if 语句中使用【数字】、【字符串】... 作为判断条件
let b = 1;
if(b) { // true
console.log("进入了");
}
这时就有一个规则，当需要条件判断时，这个值被当作 true 还是 false，当作 true 的值归类为 truthy，当作 false 的值归类为 falsy
下面值都是 falsy
-
false -
Nullish (null, undefined) -
0, 0n, NaN -
"" '' ``即长度为零的字符串
剩余的值绝大部分都是 truthy
有几个容易被当作 falsy 实际是 truthy 的
-
"false", "0"即字符串的 false 和 字符串的零 -
[]空数组 -
{}空对象
7) symbol
-
很少使用
对象类型
1) Function ⭐️⭐️
定义函数
function 函数名(参数) {
// 函数体
return 结果;
}
例
function add(a, b) {
return a + b;
}
调用函数
函数名(实参);
例
add(1, 2); // 返回 3
js 中的函数调用特点：对参数的类型和个数都没有限制，例如
add('a', 'b'); // 返回 ab
add(4, 5, 6); // 返回 9, 第三个参数没有被用到, 不会报错
add(1); // 返回 NaN, 这时 b 没有定义是 undefined, undefined 做数学运算结果就是 NaN
默认参数
java 中（spring）要实现默认参数的效果得这么做：
@RestController
public class MyController {
@RequestMapping("/page")
@ResponseBody
public void page(
@RequestParam(defaultValue="1") int page,
@RequestParam(defaultValue="10") int size
){
// ...
}
}
js 默认值
function pagination(page = 1, size = 10) {
console.log(page, size);
}
匿名函数
语法
(function (参数) {
// 函数体
return 结果;
})
例
(function(a,b){
return a + b;
})
第一种场景：定义完毕后立刻调用，只调用一次
(function(a,b){
return a + b;
})(1,2)
第二种场景：作为其它对象的方法，例如
页面有元素
<p id="p1">点我啊</p>
此元素有一个 onclick 方法，会在鼠标单击这个元素后被执行，onclick 方法刚开始是 null，需要赋值后才能使用
document.getElementById("p1").onclick = (function(){
console.log("鼠标单击了...");
});
箭头函数
(参数) => {
// 函数体
return 结果;
}
-
如果没有参数，() 还是要保留
-
如果只有一个参数，() 可以省略
-
如果函数体内只有一行代码，{} 可以省略
-
如果这一行代码就是结果，return 可以省略
例
document.getElementById("p1").onclick = () => console.log("aa");
函数是对象
以下形式在 js 中非常常见！
-
可以参与赋值，例，具名函数也能参与赋值
function abc() {
console.log("bb");
}
document.getElementById("p1").onclick = abc;
-
有属性、有方法，执行
console.dir(abc)，输出结果如下
ƒ abc()
arguments: null
caller: null
length: 0
name: "abc"
➡prototype: {constructor: ƒ}
[[FunctionLocation]]: VM1962:1
➡[[Prototype]]: ƒ ()
➡[[Scopes]]: Scopes[1]
-
其中带有 f 标记的是方法，不带的是属性
-
带有 ➡ 符号的可以继续展开，限于篇幅省略了
-
带有
[[ ]]的是内置属性，不能访问，只能查看 -
相对重要的是
[[Prototype]]和[[Scopes]]会在后面继承和作用域时讲到
-
可以作为方法参数
function a() {
console.log('a')
}
function b(fn) { // fn 将来可以是一个函数对象
console.log('b')
fn(); // 调用函数对象
}
b(a)
-
可以作为方法返回值
function c() {
console.log("c");
function d() {
console.log("d");
}
return d;
}
c()()
函数作用域
函数可以嵌套（js 代码中很常见，只是嵌套的形式更多是匿名函数，箭头函数）
function a() {
function b() {
}
}
看下面的例子
function c() {
var z = 30;
}
var x = 10;
function a() {
var y = 20;
function b() {
// 看这里
console.log(x, y);
}
b();
}
a();
-
以函数为分界线划定作用域，所有函数之外是全局作用域
-
查找变量时，由内向外查找
-
在内层作用域找到变量，就会停止查找，不会再找外层
-
所有作用域都找不到变量，报错
-
-
作用域本质上是函数对象的属性，可以通过 console.dir 来查看调试
闭包
var x = 10;
function a() {
var y = 20;
function b() {
console.log(x,y);
}
return b;
}
a()(); // 在外面执行了 b
-
函数定义时，它的作用域已经确定好了，因此无论函数将来去了哪，都能从它的作用域中找到当时那些变量
-
别被概念忽悠了，闭包就是指函数能够访问自己的作用域中变量
let、var 与作用域
如果函数外层引用的是 let 变量，那么外层普通的 {} 也会作为作用域边界，最外层的 let 也占一个 script 作用域
let x = 10;
if(true) {
let y = 20;
function b() {
console.log(x,y);
}
console.dir(b);
}
如果函数外层引用的是 var 变量，外层普通的 {} 不会视为边界
var x = 10;
if(true) {
var y = 20;
function b() {
console.log(x,y);
}
console.dir(b);
}
如果 var 变量出现了重名，则他俩会被视为同一作用域中的同一个变量
var e = 10;
if(true) {
var e = 20;
console.log(e); // 打印 20
}
console.log(e); // 因为是同一个变量，还是打印 20
如果是 let，则视为两个作用域中的两个变量
let e = 10;
if(true) {
let e = 20;
console.log(e); // 打印 20
}
console.log(e); // 打印 10
要想里面的 e 和外面的 e 能区分开来，最简单的办法是改成 let，或者用函数来界定作用域范围
var e = 10;
if(true) {
function b() {
var e = 20;
console.log(e);
}
b();
}
console.log(e);
2) Array ⭐️
语法
// 创建数组
let arr = [1,2,3];
// 获取数组元素
console.log(arr[0]); // 输出 1
// 修改数组元素
array[0] = 5; // 数组元素变成了 [5,2,3]
// 遍历数组元素，其中 length 是数组属性，代表数组长度
for(let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
API
-
push、shift、splice
let arr = [1,2,3]; arr.push(4); // 向数组尾部(右侧)添加元素, 结果 [1,2,3,4] arr.shift(); // 从数组头部(左侧)移除元素, 结果 [2,3,4] arr.splice(1,1); // 删除【参数1】索引位置的【参数2】个元素，结果 [2,4]
-
join
let arr = ['a','b','c'];
arr.join(); // 默认使用【,】作为连接符，结果 'a,b,c'
arr.join(''); // 结果 'abc'
arr.join('-'); // 结果 'a-b-c'
-
map、filter、forEach
let arr = [1,2,3,6];
function a(i) { // 代表的新旧元素之间的变换规则
return i * 10
}
// arr.map(a) // 具名函数，结果 [10,20,30,60]
// arr.map( (i) => {return i * 10} ); // 箭头函数
arr.map( i => i * 10 ); // 箭头函数
-
传给 map 的函数，参数代表旧元素，返回值代表新元素
map 的内部实现（伪代码）
function map(a) { // 参数是一个函数
let narr = [];
for(let i = 0; i < arr.length; i++) {
let o = arr[i]; // 旧元素
let n = a(o); // 新元素
narr.push(n);
}
return narr;
}
filter 例子
let arr = [1,2,3,6]; arr.filter( (i)=> i % 2 == 1 ); // 结果 [1,3]
-
传给 filter 的函数，参数代表旧元素，返回 true 表示要留下的元素
forEach 例子
let arr = [1,2,3,6];
/*for(let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}*/
arr.forEach( (i) => console.log(i) );
两个称呼
-
高阶函数，map，filter，forEach
-
回调函数，例如作为参数传入的函数
3) Object ⭐️⭐️
语法
let obj = {
属性名: 值,
方法名: 函数,
get 属性名() {},
set 属性名(新值) {}
}
例1
let stu1 = {
name: "小明",
age: 18,
study: function(){
console.log(this.name + "爱学习");
}
}
例2
let name = "小黑";
let age = 20;
let study = function(){
console.log(this.name + "爱学习");
}
let stu2 = { name, age, study }
例3（重点）
let stu3 = {
name: "小白",
age: 18,
study(){
console.log(this.name + "爱学习");
}
}
-
注意：对象方法这么写，仅限于对象内部
例4
let stu4 = {
_name: null, /*类似于java中私有成员变量*/
get name() {
console.log("进入了get");
return this._name;
},
set name(name) {
console.log("进入了set");
this._name = name;
}
}
调用 get，set
stu4.name = "小白" console.log(stu4.name)
特色：属性增删
对比一下 Java 中的 Object
-
Java 的 Object 是以类作为模板来创建，对象不能脱离类模板的范围，一个对象的属性、能用的方法都是确定好的
-
js 的对象，不需要什么模板，它的属性和方法可以随时加减
let stu = {name:'张三'};
stu.age = 18; // 添加属性
delete stu.age; // 删除属性
stu.study = function() { // 添加方法
console.log(this.name + "在学习");
}
添加 get，set，需要借助 Object.definePropery
let stu = {_name:null};
Object.defineProperty(stu, "name", {
get(){
return this._name;
},
set(name){
this._name = name;
}
});
-
参数1：目标对象
-
参数2：属性名
-
参数3：get，set 的定义
特色：this
先来对 Java 中的 this 有个理解
public class TestMethod {
static class Student {
private String name;
public Student(String name) {
this.name = name;
}
public void study(Student this, String subject) {
System.out.println(this.name + "在学习 " + subject);
}
}
public static void main(String[] args) {
Student stu = new Student("小明");
// 下面的代码，本质上是执行 study(stu, "java")，因此 this 就是 stu
stu.study("java");
}
}
-
Java 中的 this 是个隐式参数
-
Java 中，我们说 this 代表的就是调用方法的那个对象
js 中的 this 也是隐式参数，但它与函数运行时上下文相关
例如，一个“落单”的函数，this.name是全局window属性
function study(subject) {
console.log(this.name + "在学习 " + subject)
}
测试一下
study("js"); // 输出 在学习 js
这是因为此时函数执行，全局对象 window 被当作了 this，window 对象的 name 属性是空串
同样的函数，如果作为对象的方法
let stu = {
name:"小白",
study
}
这种情况下，会将当前对象作为 this
stu.study('js'); // 输出 小白在学习 js
还可以动态改变 this
let stu = {name:"小黑"};
study.call(stu, "js"); // 输出 小黑在学习 js
这回 study 执行时，就把 call 的第一个参数 stu 作为 this
一个例外是，在箭头函数内出现的 this，以外层 this 理解
用匿名函数
let stu = {
name: "小花",
friends: ["小白","小黑","小明"],
play() {
this.friends.forEach(function(e){
console.log(this.name + "与" + e + "在玩耍");
});
}
}
stu.play()
-
this.name 所在的函数是【落单】的函数，因此 this 代表 window
输出结果为
与小白在玩耍 与小黑在玩耍 与小明在玩耍
用箭头函数
let stu = {
name: "小花",
friends: ["小白","小黑","小明"],
play() {
this.friends.forEach(e => {
console.log(this.name + "与" + e + "在玩耍");
})
}
}
-
this.name 所在的函数是箭头函数，因此 this 要看它外层的 play 函数，play 又是属于 stu 的方法，因此 this 代表 stu 对象
输出结果为
小花与小白在玩耍 小花与小黑在玩耍 小花与小明在玩耍
不用箭头函数的做法
let stu = {
name: "小花",
friends: ["小白","小黑","小明"],
play() {
let me = this;
this.friends.forEach(function(e){
console.log(me.name + "与" + e + "在玩耍");
});
}
}
特色：原型继承
let father = {
f1: '父属性',
m1: function() {
console.log("父方法");
}
}
let son = Object.create(father); //以father为原型创建son
console.log(son.f1); // 打印 父属性
son.m1(); // 打印 父方法
-
father 是父对象，son 去调用 .m1 或 .f1 时，自身对象没有，就到父对象找
-
son 自己可以添加自己的属性和方法
-
son 里有特殊属性
__proto__代表它的父对象，js 术语： son 的原型对象 -
不同浏览器对打印 son 的
__proto__属性时显示不同-
Edge 打印 console.dir(son) 显示
[[Prototype]] -
Firefox 打印 console.dir(son) 显示
<prototype>
-
特色：基于函数的原型继承
出于方便的原因，js 又提供了一种基于函数的原型继承
函数职责
负责创建子对象，给子对象提供属性、方法，功能上相当于构造方法
函数有个特殊的属性 prototype，它就是函数创建的子对象的父对象
注意！名字有差异，这个属性的作用就是为新对象提供原型
function cons(f2) {
// 创建子对象(this), 给子对象提供属性和方法
this.f2 = f2;
this.m2 = function () {
console.log("子方法");
}
}
// cons.prototype 就是父对象
cons.prototype.f1 = "父属性";
cons.prototype.m1 = function() {
console.log("父方法");
}
配合 new 关键字，创建子对象
let son = new cons("子属性")
子对象的 __proto__ 就是函数的 prototype 属性
JSON
之前我们讲 http 请求格式时，讲过 json 这种数据格式，它的语法看起来与 js 对象非常相似，例如：
一个 json 对象可以长这样：
{
"name":"张三",
"age":18
}
一个 js 对象长这样：
{
name:"张三",
age:18
}
那么他们的区别在哪儿呢？我总结了这么几点
-
本质不同
-
json 对象本质上是个字符串，它的职责是作为客户端和服务器之间传递数据的一种格式，它的属性只是样子货
-
js 对象是切切实实的对象，可以有属性方法
-
-
语法细节不同
-
json 中只能有 null、true|false、数字、字符串（只有双引号）、对象、数组
-
json 中不能有除以上的其它 js 对象的特性，如方法等
-
json 中的属性必须用双引号引起来
-
json 字符串与 js 对象的转换
JSON.parse(json字符串); // 返回js对象 JSON.stringify(js对象); // 返回json字符串
动态类型
静态类型语言，如 Java，值有类型，变量也有类型、赋值给变量时，类型要相符
int a = 10; String b = "abc"; int c = "abc"; // 错误
而 js 属于动态类型语言，值有类型，但变量没有类型，赋值给变量时，没要求
例如
let a = 200; let b = 100; b = 'abc'; b = true;
动态类型看起来比较灵活，但变量没有类型，会给后期维护带来困难，例如
function test(obj) {
// obj 的类型未知，必须根据不同类型做出相应的容错处理
}
2. 运算符与表达式
-
+ - * / % ** -
+= -= *= /= %= **= -
++ -- -
位运算、移位运算
-
= = != > >= < <= -
= = = != =⭐️ -
&& || !⭐️ -
?? ?.⭐️ -
...⭐️ -
解构赋值 ⭐️
1) ===
严格相等运算符，用作逻辑判等
1 == 1 // 返回 true 1 == '1' // 返回 true，会先将右侧的字符串转为数字，再做比较 1 === '1' // 返回 false，类型不等，直接返回 false
typeof 查看某个值的类型
typeof 1 // 返回 'number' typeof '1' // 返回 'string'
2) ||
需求，如果参数 n 没有传递，给它一个【男】
推荐做法
function test(n = '男') {
console.log(n);
}
你可能的做法
function test(n) {
if(n === undefined) {
n = '男';
}
console.log(n);
}
还可能是这样
function test(n) {
n = (n === undefined) ? '男' : n;
console.log(n);
}
一些老旧代码中可能的做法（不推荐）
function test(n) {
n = n || '男';
console.log(n);
}
它的语法是
值1 || 值2
如果值1 是 Truthy，返回值1，如果值1 是 Falsy 返回值 2
3) ?? 与 ?.
??
需求，如果参数 n 没有传递或是 null，给它一个【男】
如果用传统办法
function test(n) {
if(n === undefined || n === null) {
n = '男';
}
console.log(n);
}
用 ??
function test(n) {
n = n ?? '男';
console.log(n);
}
语法
值1 ?? 值2
-
值1 是 nullish，返回值2
-
值1 不是 nullish，返回值1
?.
需求，函数参数是一个对象，可能包含有子属性
例如，参数可能是
let stu1 = {
name:"张三",
address: {
city: '北京'
}
};
let stu2 = {
name:"李四"
}
let stu3 = {
name:"李四",
address: null
}
现在要访问子属性（有问题）
function test(stu) {
console.log(stu.address.city)
}
现在希望当某个属性是 nullish 时，短路并返回 undefined，可以用 ?.
function test(stu) {
console.log(stu.address?.city)
}
用传统办法
function test(stu) {
if(stu.address === undefined || stu.address === null) {
console.log(undefined);
return;
}
console.log(stu.address.city)
}
4) ...
展开运算符
作用1：打散数组，把元素传递给多个参数
let arr = [1,2,3];
function test(a,b,c) {
console.log(a,b,c);
}
需求，把数组元素依次传递给函数参数
传统写法
test(arr[0],arr[1],arr[2]); // 输出 1,2,3
展开运算符写法
test(...arr); // 输出 1,2,3
-
打散可以理解为【去掉了】数组外侧的中括号，只剩下数组元素
作用2：复制数组或对象
数组
let arr1 = [1,2,3]; let arr2 = [...arr1]; // 复制数组
对象
let obj1 = {name:'张三', age: 18};
let obj2 = {...obj1}; // 复制对象
注意：展开运算符复制属于浅拷贝，例如
let o1 = {name:'张三', address: {city: '北京'} }
let o2 = {...o1};
作用3：合并数组或对象
合并数组
let a1 = [1,2]; let a2 = [3,4]; let b1 = [...a1,...a2]; // 结果 [1,2,3,4] let b2 = [...a2,5,...a1] // 结果 [3,4,5,1,2]
合并对象
let o1 = {name:'张三'};
let o2 = {age:18};
let o3 = {name:'李四'};
let n1 = {...o1, ...o2}; // 结果 {name:'张三',age:18}
let n2 = {...o3, ...o2, ...o1}; // 结果{name:'李四',age:18}
-
复制对象时出现同名属性，后面的会覆盖前面的
5) [] {}
解构赋值
[]
用在声明变量时
let arr = [1,2,3]; let [a, b, c] = arr; // 结果 a=1, b=2, c=3
用在声明参数时
let arr = [1,2,3];
function test([a,b,c]) {
console.log(a,b,c) // 结果 a=1, b=2, c=3
}
test(arr);
{}
用在声明变量时
let obj = {name:"张三", age:18};
let {name,age} = obj; // 结果 name=张三, age=18
用在声明参数时
let obj = {name:"张三", age:18};
function test({name, age}) {
console.log(name, age); // 结果 name=张三, age=18
}
test(obj)
3. 控制语句
-
if ... else -
switch -
while -
do ... while -
for -
for ... in⭐️ -
for ... of⭐️ -
try ... catch⭐️
1) for in
主要用来遍历对象
let father = {name:'张三', age:18, study:function(){}};
for(const n in father) {
console.log(n);
}
-
其中 const n 代表遍历出来的属性名
-
注意1：方法名也能被遍历出来（它其实也算一种特殊属性）
-
注意2：遍历子对象时，父对象的属性会跟着遍历出来
let son = Object.create(father);
son.sex = "男";
for(const n in son) {
console.log(n);
}
-
注意3：在 for in 内获取属性值，要使用 [] 语法，而不能用 . 语法
for(const n in son) {
console.log(n, son[n]);
}
2) for of
主要用来遍历数组，也可以是其它可迭代对象，如 Map，Set 等
let a1 = [1,2,3];
for(const i of a1) {
console.log(i);
}
let a2 = [
{name:'张三', age:18},
{name:'李四', age:20},
{name:'王五', age:22}
];
for(const obj of a2) {
console.log(obj.name, obj.age);
}
for(const {name,age} of a2) {
console.log(name, age);
}
3) try catch
let stu1 = {name:'张三', age:18, address: {city:'北京'}};
let stu2 = {name:'张三', age:18};
function test(stu) {
try {
console.log(stu.address.city)
} catch(e) {
console.log('出现了异常', e.message)
} finally {
console.log('finally');
}
}
4. API
环境准备
1) 安装 nvm
nvm 即 (node version manager)，好处是方便切换 node.js 版本
安装注意事项
-
要卸载掉现有的 nodejs
-
提示选择 nvm 和 nodejs 目录时，一定要避免目录中出现空格
-
选用【以管理员身份运行】cmd 程序来执行 nvm 命令
-
首次运行前设置好国内镜像地址
nvm node_mirror http://npm.taobao.org/mirrors/node/ nvm npm_mirror https://npm.taobao.org/mirrors/npm/
首先查看有哪些可用版本
nvm list available
输出
| CURRENT | LTS | OLD STABLE | OLD UNSTABLE | |--------------|--------------|--------------|--------------| | 18.7.0 | 16.16.0 | 0.12.18 | 0.11.16 | | 18.6.0 | 16.15.1 | 0.12.17 | 0.11.15 | | 18.5.0 | 16.15.0 | 0.12.16 | 0.11.14 | | 18.4.0 | 16.14.2 | 0.12.15 | 0.11.13 | | 18.3.0 | 16.14.1 | 0.12.14 | 0.11.12 | | 18.2.0 | 16.14.0 | 0.12.13 | 0.11.11 | | 18.1.0 | 16.13.2 | 0.12.12 | 0.11.10 | | 18.0.0 | 16.13.1 | 0.12.11 | 0.11.9 | | 17.9.1 | 16.13.0 | 0.12.10 | 0.11.8 | | 17.9.0 | 14.20.0 | 0.12.9 | 0.11.7 | | 17.8.0 | 14.19.3 | 0.12.8 | 0.11.6 | | 17.7.2 | 14.19.2 | 0.12.7 | 0.11.5 | | 17.7.1 | 14.19.1 | 0.12.6 | 0.11.4 | | 17.7.0 | 14.19.0 | 0.12.5 | 0.11.3 | | 17.6.0 | 14.18.3 | 0.12.4 | 0.11.2 | | 17.5.0 | 14.18.2 | 0.12.3 | 0.11.1 | | 17.4.0 | 14.18.1 | 0.12.2 | 0.11.0 | | 17.3.1 | 14.18.0 | 0.12.1 | 0.9.12 | | 17.3.0 | 14.17.6 | 0.12.0 | 0.9.11 | | 17.2.0 | 14.17.5 | 0.10.48 | 0.9.10 |
建议安装 LTS（长期支持版）
nvm install 16.16.0 nvm install 14.20.0
执行 nvm list 会列出已安装版本
切换到 16.16.0
nvm use 16.16.0
切换到 14.20.0
nvm use 14.20.0
安装后 nvm 自己的环境变量会自动添加，但可能需要手工添加 nodejs 的 PATH 环境变量
2) 检查 npm
npm 是 js 的包管理器，就类似于 java 界的 maven，要确保它使用的是国内镜像
检查镜像
npm get registry
如果返回的不是 https://registry.npm.taobao.org/，需要做如下设置
npm config set registry https://registry.npm.taobao.org/
3) 搭建前端服务器
新建一个保存项目的 client 文件夹，进入文件夹执行
npm install express --save-dev
修改 package.json 文件
{
"type": "module",
"devDependencies": {
"express": "^4.18.1"
}
}
-
其中 devDependencies 是 npm install --save-dev 添加的
编写 main.js 代码
import express from 'express'
const app = express()
app.use(express.static('./'))
app.listen(7070)
执行 js 代码（运行前端服务器）
node main.js
前端案例
初步效果
架构
-
前端只有静态页面，使用 Express 服务器
-
后端使用 Tomcat 服务器，通过 SpringBoot、MyBatis 等框架获取数据库数据
1) 查找元素
-
document.getElementById( ) - 根据 id 值查找一个元素
-
[document|元素].querySelector - 根据选择器查找第一个匹配元素
-
[document|元素].querySelectorAll - 根据选择器查找所有匹配元素
例如，有下面的 html 代码
<div> <div class="title">学生列表</div> <div class="thead"> <div class="row bold"> <div class="col">编号</div> <div class="col">姓名</div> <div class="col">性别</div> <div class="col">年龄</div> </div> </div> <div class="tbody"> <div class="row"> <div class="col">1</div> <div class="col">张三</div> <div class="col">男</div> <div class="col">18</div> </div> </div> </div>
执行
document.querySelector('.title'); // 找到 <div class="title">学生列表</div>
执行
document.querySelector('.col'); // 找到 <div class="col">编号</div>
执行
document.querySelectorAll('.col');
/*
找到的是一个集合
<div class="col">编号</div>
<div class="col">姓名</div>
<div class="col">性别</div>
<div class="col">年龄</div>
<div class="col">1</div>
<div class="col">张三</div>
<div class="col">男</div>
<div class="col">18</div>
*/
执行
const thead = document.querySelector('.thead');
// 只在 thead 元素范围内找
thead.querySelectorAll('.col');
/*
找到的是一个集合
<div class="col">编号</div>
<div class="col">姓名</div>
<div class="col">性别</div>
<div class="col">年龄</div>
*/
根据 id 属性查找既可以用
document.getElementById("id值")
也可以用
document.querySelector("#id值")
2) 修改元素内容
-
元素.innerHTML
-
元素.textContent
例如
document.querySelector('.title').innerHTML = '侠客列表'
效果
innerHTML 会解析内容中的标签，例如
textContext 不会解析内容中的标签
给 innerHTML 或 textContent 赋值空串，可以实现清空标签内容的效果
3) 利用模板
<div>
<div class="title">学生列表</div>
<div class="thead">
<div class="row bold">
<div class="col">编号</div>
<div class="col">姓名</div>
<div class="col">性别</div>
<div class="col">年龄</div>
</div>
</div>
<div class="tbody">
</div>
</div>
<template id="tp">
<div class="row">
<div class="col">xx</div>
<div class="col">xx</div>
<div class="col">xx</div>
<div class="col">xx</div>
</div>
</template>
<script>
// 将来这些数据从 java 端返回
let array = [
{ id: 1, name: '张三', sex: '男', age: 18 },
{ id: 2, name: '李四', sex: '女', age: 17 }
];
const tp = document.getElementById("tp");
const row = tp.content;
const [c1,c2,c3,c4] = row.querySelectorAll(".col");
const tbody = document.querySelector('.tbody');
for(const {id,name,sex,age} of array) {
c1.textContent = id;
c2.textContent = name;
c3.textContent = sex;
c4.textContent = age;
// 复制元素
const newRow = document.importNode(row, true); //复制出一个新的行
// 建立父子关系，左边父，右边子
tbody.appendChild(newRow);
}
</script>
4) Fetch API
Fetch API 可以用来获取远程数据，它有两种方式接收结果，同步方式与异步方式
格式
fetch(url, options) // 返回 Promise
同步方式
const 结果 = await Promise // 后续代码
-
await 关键字必须在一个标记了 async 的 function 内来使用
-
后续代码不会在结果返回前执行
异步方式
Promise
.then(结果 => { ... })
// 后续代码
-
后续代码不必等待结果返回就可以执行
例：
在 express 服务器上有 students.json 文件
[
{ "id": 1, "name": "张三", "sex": "男", "age": 18 },
{ "id": 2, "name": "李四", "sex": "女", "age": 17 }
]
现在用 fetch api 获取这些数据，并展示
同步方式
<script>
async function findStudents() {
try {
// 获取响应对象
const resp = await fetch('students.json')
// 获取响应体, 按json格式转换为js数组
const array = await resp.json();
// 显示数据
const tp = document.getElementById("tp");
const row = tp.content;
const [c1,c2,c3,c4] = row.querySelectorAll(".col");
const tbody = document.querySelector('.tbody');
for(const {id,name,sex,age} of array) {
c1.textContent = id;
c2.textContent = name;
c3.textContent = sex;
c4.textContent = age;
// 复制元素
const newRow = document.importNode(row, true);
// 建立父子关系
tbody.appendChild(newRow);
}
} catch (e) {
console.log(e);
}
}
findStudents()
</script>
-
fetch('students.json') 内部会发送请求，但响应结果不能立刻返回，因此 await 就是等待响应结果返回
-
其中 resp.json() 也不是立刻能返回结果，它返回的也是 Promise 对象，也要配合 await 取结果
异步方式
<script>
fetch('students.json')
.then( resp => resp.json() )
.then( array => {
// 显示数据
const tp = document.getElementById("tp");
const row = tp.content;
const [c1,c2,c3,c4] = row.querySelectorAll(".col");
const tbody = document.querySelector('.tbody');
for(const {id,name,sex,age} of array) {
c1.textContent = id;
c2.textContent = name;
c3.textContent = sex;
c4.textContent = age;
// 复制元素
const newRow = document.importNode(row, true);
// 建立父子关系
tbody.appendChild(newRow);
}
})
.catch( e => console.log(e) )
</script>
-
第一个 then 是在响应返回后，才会调用它里面的箭头函数，箭头函数参数即 resp 响应对象
-
第二个 then 是在 json 解析完成后，才会调用它里面的箭头函数，箭头函数参数即解析结果（本例是 array 数组）
-
上一个 then 返回的是 Promise 对象时，才能链式调用下一个 then
跨域问题
-
只要协议、主机、端口之一不同，就不同源，例如
-
同源检查是浏览器的行为，而且只针对 fetch、xhr 请求
-
如果是其它客户端，例如 java http client，postman，它们是不做同源检查的
-
通过表单提交、浏览器直接输入 url 地址这些方式发送的请求，也不会做同源检查
-
-
更多相关知识请参考
请求响应头解决
-
fetch 请求跨域，会携带一个 Origin 头，代表【发请求的资源源自何处】，目标通过它就能辨别是否发生跨域
-
我们的例子中：student.html 发送 fetch 请求，告诉 tomcat，我源自 localhost:7070
-
-
目标资源通过返回 Access-Control-Allow-Origin 头，告诉浏览器【允许哪些源使用此响应】
-
我们的例子中：tomcat 返回 fetch 响应，告诉浏览器，这个响应允许源自 localhost:7070 的资源使用
-
代理解决
npm install http-proxy-middleware --save-dev
在 express 服务器启动代码中加入
import {createProxyMiddleware} from 'http-proxy-middleware'
// ...
app.use('/api', createProxyMiddleware({ target: 'http://localhost:8080', changeOrigin: true }));
fetch 代码改为
const resp = await fetch('http://localhost:7070/api/students')
或
const resp = await fetch('/api/students')
5) 模块化
单个导出 const、let、function
export const a = 10;
export let b = 20;
export function c() {
console.log('c');
}
一齐导出
const a = 10;
let b = 20;
function c() {
console.log('c')
}
export {a,b,c}
导出 default，只能有一个
export const a = 10;
export let b = 20;
export function c() {
console.log('c')
}
export default b;
import 语法
<script type="module">
import 语句
</script>
-
import 需要遵循同源策略
整个导入
import * as module from '/1.js' console.log(module.a) // 输出10 console.log(module.b) // 输出20 module.c() // 输出c
单个导入
import {a,c} from '/1.js'
console.log(a) // 输出10
c() // 输出c
导入默认
import x from '/1.js' console.log(x) // 输出20
三. Vue 2
1. Vue 基础
1) 环境准备
安装脚手架
npm install -g @vue/cli
-
-g 参数表示全局安装，这样在任意目录都可以使用 vue 脚本创建项目
创建项目
vue ui
使用图形向导来创建 vue 项目，如下图，输入项目名
选择手动配置项目
添加 vue router 和 vuex
选择版本，创建项目
安装 devtools
-
devtools 插件网址：Installation | Vue Devtools
运行项目
进入项目目录，执行
npm run serve
修改端口
前端服务器默认占用了 8080 端口，需要修改一下
-
文档地址：DevServer | webpack
-
打开 vue.config.js 添加
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ // ... devServer: { port: 7070 } })
添加代理
为了避免前后端服务器联调时， fetch、xhr 请求产生跨域问题，需要配置代理
-
文档地址同上
-
打开 vue.config.js 添加
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ // ... devServer: { port: 7070, proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } } })
Vue 项目结构
PS D:\2022.js\代码\第3章\client> tree src D:\2022.JS\代码\第3章\CLIENT\SRC ├─assets ├─components ├─router ├─store └─views
-
assets - 静态资源
-
components - 可重用组件
-
router - 路由
-
store - 数据共享
-
views - 视图组件
以后还会添加
-
api - 跟后台交互，发送 fetch、xhr 请求，接收响应
-
plugins - 插件
2) Vue 组件
Vue 的组件文件以 .vue 结尾，每个组件由三部分组成
<template></template> <script></script> <style></style>
-
template 模板部分，由它生成 html 代码
-
script 代码部分，控制模板的数据来源和行为
-
style 样式部分，一般不咋关心
入口组件是 App.vue
先删除原有代码，来个 Hello, World 例子
<template>
<h1>{{msg}}</h1>
</template>
<script>
export default {
data() {
return {
msg: "Hello, Vue!"
}
}
}
</script>
解释
-
export default 导出组件对象，供 main.js 导入使用
-
这个对象有一个 data 方法，返回一个对象，给 template 提供数据
-
{{}}在 Vue 里称之为插值表达式，用来绑定 data 方法返回的对象属性，绑定的含义是数据发生变化时，页面显示会同步变化
文本插值
<template>
<div>
<h1>{{ name }}</h1>
<h1>{{ age > 60 ? '老年' : '青年' }}</h1>
</div>
</template>
<script>
const options = {
data: function () {
return { name: '张三', age: 70 };
}
};
export default options;
</script>
-
{{}}里只能绑定一个属性，绑定多个属性需要用多个{{}}分别绑定 -
template 内只能有一个根元素
-
插值内可以进行简单的表达式计算
属性绑定
<template>
<div>
<div><input type="text" v-bind:value="name"></div>
<div><input type="date" v-bind:value="birthday"></div>
<div><input type="text" :value="age"></div>
</div>
</template>
<script>
const options = {
data: function () {
return { name: '王五', birthday: '1995-05-01', age: 20 };
}
};
export default options;
</script>
-
简写方式：可以省略 v-bind 只保留冒号
事件绑定
<!-- 事件绑定 -->
<template>
<div>
<div><input type="button" value="点我执行m1" v-on:click="m1"></div>
<div><input type="button" value="点我执行m2" @click="m2"></div>
<div>{{count}}</div>
</div>
</template>
<script>
const options = {
data: function () {
return { count: 0 };
},
methods: {
m1() {
this.count ++;
console.log("m1")
},
m2() {
this.count --;
console.log("m2")
}
}
};
export default options;
</script>
-
简写方式：可以把 v-on: 替换为 @
-
在 methods 方法中的 this 代表的是 data 函数返回的数据对象
双向绑定
<template>
<div>
<div>
<label for="">请输入姓名</label>
<input type="text" v-model="name">
</div>
<div>
<label for="">请输入年龄</label>
<input type="text" v-model="age">
</div>
<div>
<label for="">请选择性别</label>
男 <input type="radio" value="男" v-model="sex">
女 <input type="radio" value="女" v-model="sex">
</div>
<div>
<label for="">请选择爱好</label>
游泳 <input type="checkbox" value="游泳" v-model="fav">
打球 <input type="checkbox" value="打球" v-model="fav">
健身 <input type="checkbox" value="健身" v-model="fav">
</div>
</div>
</template>
<script>
const options = {
data: function () {
return { name: '', age: null, sex:'男' , fav:['打球']};
},
methods: {
}
};
export default options;
</script>
-
用 v-model 实现双向绑定，即
-
javascript 数据可以同步到表单标签
-
反过来用户在表单标签输入的新值也会同步到 javascript 这边
-
-
双向绑定只适用于表单这种带【输入】功能的标签，其它标签的数据绑定，单向就足够了
-
复选框这种标签，双向绑定的 javascript 数据类型一般用数组
计算属性
<!-- 计算属性 -->
<template>
<div>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
</div>
</template>
<script>
const options = {
data: function () {
return { firstName: '三', lastName: '张' };
},
/* methods: {
fullName() {
console.log('进入了 fullName')
return this.lastName + this.firstName;
}
},*/
computed: {
fullName() {
console.log('进入了 fullName')
return this.lastName + this.firstName;
}
}
};
export default options;
-
普通方法调用必须加 ()，没有缓存功能
-
计算属性使用时就把它当属性来用，不加 ()，有缓存功能：
-
一次计算后，会将结果缓存，下次再计算时，只要数据没有变化，不会重新计算，直接返回缓存结果
-
axios
axios 它的底层是用了 XMLHttpRequest（xhr）方式发送请求和接收响应，xhr 相对于之前讲过的 fetch api 来说，功能更强大，但由于是比较老的 api，不支持 Promise，axios 对 xhr 进行了封装，使之支持 Promise，并提供了对请求、响应的统一拦截功能
安装
npm install axios -S
导入
import axios from 'axios'
-
axios 默认导出一个对象，这里的 import 导入的就是它默认导出的对象
方法
| 请求 | 备注 |
|---|---|
| axios.get(url[, config]) | ⭐️ |
| axios.delete(url[, config]) | |
| axios.head(url[, config]) | |
| axios.options(url[, config]) | |
| axios.post(url[, data[, config]]) | ⭐️ |
| axios.put(url[, data[, config]]) | |
| axios.patch(url[, data[, config]]) |
-
config - 选项对象、例如查询参数、请求头...
-
data - 请求体数据、最常见的是 json 格式数据
-
get、head 请求无法携带请求体，这应当是浏览器的限制所致（xhr、fetch api 均有限制）
-
options、delete 请求可以通过 config 中的 data 携带请求体
例子
<template>
<div>
<input type="button" value="获取远程数据" @click="sendReq()">
</div>
</template>
<script>
import axios from 'axios'
const options = {
methods: {
async sendReq() {
// 1. 演示 get, post
// const resp = await axios.post('/api/a2');
// 2. 发送请求头
// const resp = await axios.post('/api/a3',{},{
// headers:{
// Authorization:'abc'
// }
// });
// 3. 发送请求时携带查询参数 ?name=xxx&age=xxx
// const name = encodeURIComponent('&&&');
// const age = 18;
// const resp = await axios.post(`/api/a4?name=${name}&age=${age}`);
// 不想自己拼串、处理特殊字符、就用下面的办法
// const resp = await axios.post('/api/a4', {}, {
// params: {
// name:'&&&&',
// age: 20
// }
// });
// 4. 用请求体发数据，格式为 urlencoded
// const params = new URLSearchParams();
// params.append("name", "张三");
// params.append("age", 24)
// const resp = await axios.post('/api/a4', params);
// 5. 用请求体发数据，格式为 multipart
// const params = new FormData();
// params.append("name", "李四");
// params.append("age", 30);
// const resp = await axios.post('/api/a5', params);
// 6. 用请求体发数据，格式为 json
const resp = await axios.post('/api/a5json', {
name: '王五',
age: 50
});
console.log(resp);
}
}
};
export default options;
</script>
创建实例
const _axios = axios.create(config);
-
axios 对象可以直接使用，但使用的是默认的设置
-
用 axios.create 创建的对象，可以覆盖默认设置，config 见下面说明
常见的 config 项有
| 名称 | 含义 |
|---|---|
| baseURL | 将自动加在 url 前面 |
| headers | 请求头，类型为简单对象 |
| params | 跟在 URL 后的请求参数，类型为简单对象或 URLSearchParams |
| data | 请求体，类型有简单对象、FormData、URLSearchParams、File 等 |
| withCredentials | 跨域时是否携带 Cookie 等凭证，默认为 false |
| responseType | 响应类型，默认为 json |
例
const _axios = axios.create({
baseURL: 'http://localhost:8080',
withCredentials: true
});
await _axios.post('/api/a6set')
await _axios.post('/api/a6get')
-
生产环境希望 xhr 请求不走代理，可以用 baseURL 统一修改
-
希望跨域请求携带 cookie，需要配置 withCredentials: true，服务器也要配置 allowCredentials = true，否则浏览器获取跨域返回的 cookie 时会报错
响应格式
| 名称 | 含义 |
|---|---|
| data | 响应体数据 ⭐️ |
| status | 状态码 ⭐️ |
| headers | 响应头 |
-
200 表示响应成功
-
400 请求数据不正确 age=abc
-
401 身份验证没通过
-
403 没有权限
-
404 资源不存在
-
405 不支持请求方式 post
-
500 服务器内部错误
请求拦截器
_axios.interceptors.request.use(
function(config) {
// 比如在这里添加统一的 headers
return config;
},
function(error) {
return Promise.reject(error);
}
);
响应拦截器
_axios.interceptors.response.use(
function(response) {
// 2xx 范围内走这里
return response;
},
function(error) {
// 超出 2xx, 比如 4xx, 5xx 走这里
return Promise.reject(error);
}
);
条件渲染
<template>
<div>
<input type="button" value="获取远程数据" @click="sendReq()">
<div class="title">学生列表</div>
<div class="thead">
<div class="row bold">
<div class="col">编号</div>
<div class="col">姓名</div>
<div class="col">性别</div>
<div class="col">年龄</div>
</div>
</div>
<div class="tbody">
<div class="row" v-if="students.length > 0">显示学生数据</div>
<div class="row" v-else>暂无学生数据</div>
</div>
</div>
</template>
<script>
import axios from '../util/myaxios'
const options = {
data: function() {
return {
students: []
};
},
methods : {
async sendReq() {
const resp = await axios.get("/api/students");
console.log(resp.data.data)
this.students = resp.data.data;
}
}
};
export default options;
</script>
<style scoped>
div {
font-family: 华文行楷;
font-size: 20px;
}
.title {
margin-bottom: 10px;
font-size: 30px;
color: #333;
text-align: center;
}
.row {
background-color: #fff;
display: flex;
justify-content: center;
}
.col {
border: 1px solid #f0f0f0;
width: 15%;
height: 35px;
text-align: center;
line-height: 35px;
}
.bold .col {
background-color: #f1f1f1;
}
</style>
列表渲染
<template>
<div>
<!-- <input type="button" value="获取远程数据" @click="sendReq()"> -->
<div class="title">学生列表</div>
<div class="thead">
<div class="row bold">
<div class="col">编号</div>
<div class="col">姓名</div>
<div class="col">性别</div>
<div class="col">年龄</div>
</div>
</div>
<div class="tbody">
<div v-if="students.length > 0">
<div class="row" v-for="s of students" :key="s.id">
<div class="col">{{s.id}}</div>
<div class="col">{{s.name}}</div>
<div class="col">{{s.sex}}</div>
<div class="col">{{s.age}}</div>
</div>
</div>
<div class="row" v-else>暂无学生数据</div>
</div>
</div>
</template>
<script>
import axios from '../util/myaxios'
const options = {
mounted: function(){
this.sendReq()
},
data: function() {
return {
students: []
};
},
methods : {
async sendReq() {
const resp = await axios.get("/api/students");
console.log(resp.data.data)
this.students = resp.data.data;
}
}
};
export default options;
</script>
<style scoped>
div {
font-family: 华文行楷;
font-size: 20px;
}
.title {
margin-bottom: 10px;
font-size: 30px;
color: #333;
text-align: center;
}
.row {
background-color: #fff;
display: flex;
justify-content: center;
}
.col {
border: 1px solid #f0f0f0;
width: 15%;
height: 35px;
text-align: center;
line-height: 35px;
}
.bold .col {
background-color: #f1f1f1;
}
</style>
-
v-if 和 v-for 不能用于同一个标签
-
v-for 需要配合特殊的标签属性 key 一起使用，并且 key 属性要绑定到一个能起到唯一标识作用的数据上，本例绑定到了学生编号上
-
options 的 mounted 属性对应一个函数，此函数会在组件挂载后（准备就绪）被调用，可以在它内部发起请求，去获取学生数据
重用组件
按钮组件
<template>
<div class="button" :class="[type,size]">
a<slot></slot>b
</div>
</template>
<script>
const options = {
props: ["type", "size"]
};
export default options;
</script>
-
注意，省略了样式部分
使用组件
<template>
<div>
<h1>父组件</h1>
<my-button type="primary" size="small">1</my-button>
<my-button type="danger" size="middle">2</my-button>
<my-button type="success" size="large">3</my-button>
</div>
</template>
<script>
import MyButton from '../components/MyButton.vue'
const options = {
components: {
MyButton
}
};
export default options;
</script>
2. Vue 进阶
1) ElementUI
安装
npm install element-ui -S
引入组件
import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Element)
测试，在自己的组件中使用 ElementUI 的组件
<el-button>按钮</el-button>
表格组件
<template>
<div>
<el-table :data="students">
<el-table-column label="编号" prop="id"></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="性别" prop="sex"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
</el-table>
</div>
</template>
<script>
import axios from '../util/myaxios'
const options = {
async mounted() {
const resp = await axios.get('/api/students');
this.students = resp.data.data
},
data() {
return {
students: []
}
}
}
export default options;
</script>
分页组件
<template>
<div>
<el-table v-bind:data="students">
<el-table-column label="编号" prop="id"></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="性别" prop="sex"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
</el-table>
<el-pagination
:total="total"
:page-size="queryDto.size"
:current-page="queryDto.page"
layout="prev,pager,next,sizes,->,total"
:page-sizes="[5,10,15,20]"
@current-change="currentChange"
@size-change="sizeChange"
></el-pagination>
</div>
</template>
<script>
import axios from '../util/myaxios'
const options = {
mounted() {
this.query();
},
methods: {
currentChange(page) {
this.queryDto.page = page;
this.query();
},
sizeChange(size){
this.queryDto.size = size;
this.query();
},
async query() {
const resp = await axios.get('/api/students/q', {
params: this.queryDto
});
this.students = resp.data.data.list;
this.total = resp.data.data.total;
}
},
data() {
return {
students: [],
total: 0,
queryDto: {
page: 1,
size: 5
}
}
}
}
export default options;
</script>
-
三种情况都应该触发查询
-
mounted 组件挂载完成后
-
页号变化时
-
页大小变化时
-
-
查询传参应该根据后台需求，灵活采用不同方式
-
本例中因为是 get 请求，无法采用请求体，只能用 params 方式传参
-
-
返回响应的格式也许会很复杂，需要掌握【根据返回的响应结构，获取数据】的能力
分页搜索
<template>
<div>
<el-input placeholder="请输入姓名" size="mini" v-model="queryDto.name"></el-input>
<el-select placeholder="请选择性别" size="mini" v-model="queryDto.sex" clearable>
<el-option value="男"></el-option>
<el-option value="女"></el-option>
</el-select>
<el-select placeholder="请选择年龄" size="mini" v-model="queryDto.age" clearable>
<el-option value="0,20" label="0到20岁"></el-option>
<el-option value="21,30" label="21到30岁"></el-option>
<el-option value="31,40" label="31到40岁"></el-option>
<el-option value="41,120" label="41到120岁"></el-option>
</el-select>
<el-button type="primary" size="mini" @click="search()">搜索</el-button>
<el-divider></el-divider>
<el-table v-bind:data="students">
<el-table-column label="编号" prop="id"></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="性别" prop="sex"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
</el-table>
<el-pagination :total="total" :page-size="queryDto.size" :current-page="queryDto.page"
layout="prev,pager,next,sizes,->,total" :page-sizes="[5, 10, 15, 20]" @current-change="currentChange"
@size-change="sizeChange"></el-pagination>
</div>
</template>
<script>
import axios from '../util/myaxios'
const options = {
mounted() {
this.query();
},
methods: {
currentChange(page) {
this.queryDto.page = page;
this.query();
},
sizeChange(size) {
this.queryDto.size = size;
this.query();
},
async query() {
const resp = await axios.get('/api/students/q', {
params: this.queryDto
});
this.students = resp.data.data.list;
this.total = resp.data.data.total;
},
search() {
this.query();
}
},
data() {
return {
students: [],
total: 0,
queryDto: {
name: '',
sex: '',
age: '',
page: 1,
size: 5
}
}
}
}
export default options;
</script>
-
sex 与 age 均用
''表示用户没有选择的情况 -
age 取值
0,20会被 spring 转换为new int[]{0, 20} -
age 取值
''会被 spring 转换为new int[0]
级联选择
级联选择器中选项的数据结构为
[
{value:100, label:'主页',children:[
{value:101, label:'菜单1', children:[
{value:105, label:'子项1'},
{value:106, label:'子项2'}
]},
{value:102, label:'菜单2', children:[
{value:107, label:'子项3'},
{value:108, label:'子项4'},
{value:109, label:'子项5'}
]},
{value:103, label:'菜单3', children:[
{value:110, label:'子项6'},
{value:111, label:'子项7'}
]},
{value:104, label:'菜单4'}
]}
]
下面的例子是将后端返回的一维数组【树化】
<template>
<el-cascader :options="ops"></el-cascader>
</template>
<script>
import axios from '../util/myaxios'
const options = {
async mounted() {
const resp = await axios.get('/api/menu')
console.log(resp.data.data)
const array = resp.data.data;
const map = new Map();
// 1. 将所有数据存入 map 集合(为了接下来查找效率)
for(const {id,name,pid} of array) {
map.set(id, {value:id, label:name, pid:pid})
}
// 2. 建立父子关系
// 3. 找到顶层对象
const top = [];
for(const obj of map.values()) {
const parent = map.get(obj.pid);
if(parent !== undefined) {
parent.children ??= [];
parent.children.push(obj);
} else {
top.push(obj)
}
}
this.ops = top;
},
data(){
return {
ops: []
}
}
};
export default options;
</script>
2) Vue-Router
vue 属于单页面应用，所谓的路由，就是根据浏览器路径不同，用不同的视图组件替换这个页面内容展示
配置路由
新建一个路由 js 文件，例如 src/router/example14.js，内容如下
import Vue from 'vue'
import VueRouter from 'vue-router'
import ContainerView from '@/views/example14/ContainerView.vue'
import LoginView from '@/views/example14/LoginView.vue'
import NotFoundView from '@/views/example14/NotFoundView.vue'
Vue.use(VueRouter)
const routes = [
{
path:'/',
component: ContainerView
},
{
path:'/login',
component: LoginView
},
{
path:'/404',
component: NotFoundView
}
]
const router = new VueRouter({
routes
})
export default router
-
最重要的就是建立了【路径】与【视图组件】之间的映射关系
-
本例中映射了 3 个路径与对应的视图组件
在 main.js 中采用我们的路由 js
import Vue from 'vue'
import e14 from './views/Example14View.vue'
import router from './router/example14' // 修改这里
import store from './store'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(Element)
new Vue({
router,
store,
render: h => h(e14)
}).$mount('#app')
根组件是 Example14View.vue，内容为：
<template>
<div class="all">
<router-view></router-view>
</div>
</template>
-
样式略
-
其中
<router-view>起到占位作用，改变路径后，这个路径对应的视图组件就会占据<router-view>的位置，替换掉它之前的内容
动态导入
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path:'/',
component: () => import('@/views/example14/ContainerView.vue')
},
{
path:'/login',
component: () => import('@/views/example14/LoginView.vue')
},
{
path:'/404',
component: () => import('@/views/example14/NotFoundView.vue')
}
]
const router = new VueRouter({
routes
})
export default router
-
静态导入是将所有组件的 js 代码打包到一起，如果组件非常多，打包后的 js 文件会很大，影响页面加载速度
-
动态导入是将组件的 js 代码放入独立的文件，用到时才加载
嵌套路由
组件内再要切换内容，就需要用到嵌套路由（子路由），下面的例子是在【ContainerView 组件】内定义了 3 个子路由
const routes = [
{
path:'/',
component: () => import('@/views/example14/ContainerView.vue'),
redirect: '/c/p1',
children: [
{
path:'c/p1',
component: () => import('@/views/example14/container/P1View.vue')
},
{
path:'c/p2',
component: () => import('@/views/example14/container/P2View.vue')
},
{
path:'c/p3',
component: () => import('@/views/example14/container/P3View.vue')
}
]
},
{
path:'/login',
component: () => import('@/views/example14/LoginView.vue')
},
{
path:'/404',
component: () => import('@/views/example14/NotFoundView.vue')
},
{
path:'*',
redirect: '/404'
}
]
子路由变化，切换的是【ContainerView 组件】中 <router-view></router-view> 部分的内容
<template>
<div class="container">
<router-view></router-view>
</div>
</template>
-
redirect 可以用来重定向（跳转）到一个新的地址
-
path 的取值为 * 表示匹配不到其它 path 时，就会匹配它
ElementUI 布局
通常主页要做布局，下面的代码是 ElementUI 提供的【上-【左-右】】布局
<template>
<div class="container">
<el-container>
<el-header></el-header>
<el-container>
<el-aside width="200px"></el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
路由跳转
标签式
<el-aside width="200px">
<router-link to="/c1/p1">P1</router-link>
<router-link to="/c1/p2">P2</router-link>
<router-link to="/c1/p3">P3</router-link>
</el-aside>
编程式
<el-header>
<el-button type="primary" icon="el-icon-edit"
circle size="mini" @click="jump('/c1/p1')"></el-button>
<el-button type="success" icon="el-icon-check"
circle size="mini" @click="jump('/c1/p2')"></el-button>
<el-button type="warning" icon="el-icon-star-off"
circle size="mini" @click="jump('/c1/p3')"></el-button>
</el-header>
jump 方法
<script>
const options = {
methods : {
jump(url) {
this.$router.push(url);
}
}
}
export default options;
</script>
-
其中 this.$router 是拿到路由对象
-
push 方法根据 url 进行跳转
导航菜单
<el-menu router background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<el-submenu index="/c1">
<span slot="title">
<i class="el-icon-platform-eleme"></i>
菜单1
</span>
<el-menu-item index="/c1/p1">子项1</el-menu-item>
<el-menu-item index="/c1/p2">子项2</el-menu-item>
<el-menu-item index="/c1/p3">子项3</el-menu-item>
</el-submenu>
<el-menu-item index="/c2">
<span slot="title">
<i class="el-icon-phone"></i>
菜单2
</span>
</el-menu-item>
<el-menu-item index="/c3">
<span slot="title">
<i class="el-icon-star-on"></i>
菜单3
</span>
</el-menu-item>
</el-menu>
-
图标和菜单项文字建议用
<span slot='title'></span>包裹起来 -
el-menu标签上加上router属性，表示结合导航菜单与路由对象，此时，就可以利用菜单项的index属性来路由跳转
动态路由与菜单
将菜单、路由信息（仅主页的）存入数据库中
insert into menu(id, name, pid, path, component, icon) values
(101, '菜单1', 0, '/m1', null, 'el-icon-platform-eleme'),
(102, '菜单2', 0, '/m2', null, 'el-icon-delete-solid'),
(103, '菜单3', 0, '/m3', null, 'el-icon-s-tools'),
(104, '菜单4', 0, '/m4', 'M4View.vue', 'el-icon-user-solid'),
(105, '子项1', 101, '/m1/c1', 'C1View.vue', 'el-icon-s-goods'),
(106, '子项2', 101, '/m1/c2', 'C2View.vue', 'el-icon-menu'),
(107, '子项3', 102, '/m2/c3', 'C3View.vue', 'el-icon-s-marketing'),
(108, '子项4', 102, '/m2/c4', 'C4View.vue', 'el-icon-s-platform'),
(109, '子项5', 102, '/m2/c5', 'C5View.vue', 'el-icon-picture'),
(110, '子项6', 103, '/m3/c6', 'C6View.vue', 'el-icon-upload'),
(111, '子项7', 103, '/m3/c7', 'C7View.vue', 'el-icon-s-promotion');
不同的用户查询的的菜单、路由信息是不一样的
例如：访问 /api/menu/admin 返回所有的数据
[
{
"id": 102,
"name": "菜单2",
"icon": "el-icon-delete-solid",
"path": "/m2",
"pid": 0,
"component": null
},
{
"id": 107,
"name": "子项3",
"icon": "el-icon-s-marketing",
"path": "/m2/c3",
"pid": 102,
"component": "C3View.vue"
},
{
"id": 108,
"name": "子项4",
"icon": "el-icon-s-platform",
"path": "/m2/c4",
"pid": 102,
"component": "C4View.vue"
},
{
"id": 109,
"name": "子项5",
"icon": "el-icon-picture",
"path": "/m2/c5",
"pid": 102,
"component": "C5View.vue"
}
]
访问 /api/menu/wang 返回
[
{
"id": 103,
"name": "菜单3",
"icon": "el-icon-s-tools",
"path": "/m3",
"pid": 0,
"component": null
},
{
"id": 110,
"name": "子项6",
"icon": "el-icon-upload",
"path": "/m3/c6",
"pid": 103,
"component": "C6View.vue"
},
{
"id": 111,
"name": "子项7",
"icon": "el-icon-s-promotion",
"path": "/m3/c7",
"pid": 103,
"component": "C7View.vue"
}
]
前端根据他们身份不同，动态添加路由和显示菜单
动态路由
export function addServerRoutes(array) {
for (const { id, path, component } of array) {
if (component !== null) {
// 动态添加路由
// 参数1：父路由名称
// 参数2：路由信息对象
router.addRoute('c', {
path: path,
name: id,
component: () => import(`@/views/example15/container/${component}`)
});
}
}
}
-
js 这边只保留几个固定路由，如主页、404 和 login
-
以上方法执行时，将服务器返回的路由信息加入到名为 c 的父路由中去
-
这里要注意组件路径，前面 @/views 是必须在 js 这边完成拼接的，否则 import 函数会失效
重置路由
在用户注销时应当重置路由
export function resetRouter() {
router.matcher = new VueRouter({ routes }).matcher
}
页面刷新
页面刷新后，会导致动态添加的路由失效，解决方法是将路由数据存入 sessionStorage
<script>
import axios from '@/util/myaxios'
import {resetRouter, addServerRoutes} from '@/router/example15'
const options = {
data() {
return {
username: 'admin'
}
},
methods: {
async login() {
resetRouter(); // 重置路由
const resp = await axios.get(`/api/menu/${this.username}`)
const array = resp.data.data;
// localStorage 即使浏览器关闭，存储的数据仍在
// sessionStorage 以标签页为单位，关闭标签页时，数据被清除
sessionStorage.setItem('serverRoutes', JSON.stringify(array))
addServerRoutes(array); // 动态添加路由
this.$router.push('/');
}
}
}
export default options;
</script>
页面刷新，重新创建路由对象时，从 sessionStorage 里恢复路由数据
const router = new VueRouter({
routes
})
// 从 sessionStorage 中恢复路由数据
const serverRoutes = sessionStorage.getItem('serverRoutes');
if(serverRoutes) {
const array = JSON.parse(serverRoutes);
addServerRoutes(array) // 动态添加路由
}
动态菜单
代码部分
<script>
const options = {
mounted() {
const serverRoutes = sessionStorage.getItem('serverRoutes');
const array = JSON.parse(serverRoutes);
const map = new Map();
for(const obj of array) {
map.set(obj.id, obj);
}
const top = [];
for(const obj of array) {
const parent = map.get(obj.pid);
if(parent) {
parent.children ??= [];
parent.children.push(obj);
} else {
top.push(obj);
}
}
this.top = top;
},
data() {
return {
top: []
}
}
}
export default options;
</script>
菜单部分
<el-menu router background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :unique-opened="true">
<template v-for="m1 of top">
<el-submenu v-if="m1.children" :key="m1.id" :index="m1.path">
<span slot="title">
<i :class="m1.icon"></i> {{m1.name}}
</span>
<el-menu-item v-for="m2 of m1.children" :key="m2.id" :index="m2.path">
<span slot="title">
<i :class="m2.icon"></i> {{m2.name}}
</span>
</el-menu-item>
</el-submenu>
<el-menu-item v-else :key="m1.id" :index="m1.path">
<span slot="title">
<i :class="m1.icon"></i> {{m1.name}}
</span>
</el-menu-item>
</template>
</el-menu>
-
没有考虑递归菜单问题，认为菜单只有两级
3) Vuex
入门
vuex 可以在多个组件之间共享数据，并且共享的数据是【响应式】的，即数据的变更能及时渲染到模板
-
与之对比 localStorage 与 sessionStorage 也能共享数据，但缺点是数据并非【响应式】
首先需要定义 state 与 mutations 他们一个用来读取共享数据，一个用来修改共享数据
src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
/*
读取数据，走 state, getters
修改数据，走 mutations, actions
*/
export default new Vuex.Store({
state: {
name: '',
age: 18
},
getters: {
},
mutations: {
updateName(state, name) {
state.name = name;
}
},
actions: {
},
modules: {
}
})
修改共享数据
<template>
<div class="p">
<el-input placeholder="请修改用户姓名"
size="mini" v-model="name"></el-input>
<el-button type="primary" size="mini" @click="update()">修改</el-button>
</div>
</template>
<script>
const options = {
methods: {
update(){
this.$store.commit('updateName', this.name);
}
},
data () {
return {
name:''
}
}
}
export default options;
</script>
-
mutations 方法不能直接调用，只能通过
store.commit(mutation方法名, 参数)来间接调用
读取共享数据
<template>
<div class="container">
<el-container>
<el-header>
<div class="t">
欢迎您：{{ $store.state.name }}, {{ $store.state.age }}
</div>
</el-header>
<el-container>
<el-aside width="200px">
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
mapState
每次去写 $store.state.name 这样的代码显得非常繁琐，可以用 vuex 帮我们生成计算属性
<template>
<div class="container">
<el-container>
<el-header>
<div class="t">欢迎您：{{ name }}, {{ age }}</div>
</el-header>
<el-container>
<el-aside width="200px">
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import { mapState } from 'vuex'
const options = {
computed: {
...mapState(['name', 'age'])
}
}
export default options;
</script>
-
mapState 返回的是一个对象，对象内包含了 name() 和 age() 的这两个方法作为计算属性
-
此对象配合
...展开运算符，填充入 computed 即可使用
mapMutations
<template>
<div class="p">
<el-input placeholder="请修改用户姓名"
size="mini" v-model="name"></el-input>
<el-button type="primary" size="mini" @click="updateName(name)">修改</el-button>
</div>
</template>
<script>
import {mapMutations} from 'vuex'
const options = {
methods: {
...mapMutations(['updateName'])
},
data () {
return {
name:''
}
}
}
export default options;
</script>
-
类似的，调用 mutation 修改共享数据也可以简化
-
mapMutations 返回的对象中包含的方法，就会调用 store.commit() 来执行 mutation 方法
-
注意参数传递略有不同
actions
mutations 方法内不能包括修改不能立刻生效的代码，否则会造成 Vuex 调试工具工作不准确，必须把这些代码写在 actions 方法中
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
/*
读取数据，走 state, getters
修改数据，走 mutations, actions
*/
import axios from '@/util/myaxios'
export default new Vuex.Store({
state: {
name: '',
age: 18
},
getters: {
},
mutations: {
updateName(state, name) {
state.name = name;
},
// 错误的用法，如果在mutations方法中包含了异步操作，会造成开发工具不准确
/* async updateServerName(state) {
const resp = await axios.get('/api/user');
const {name, age} = resp.data.data;
state.name = name;
state.age = age;
} */
updateServerName(state, user) {
const { name, age } = user;
state.name = name;
state.age = age;
}
},
actions: {
async updateServerName(context) {
const resp = await axios.get('/api/user');
context.commit('updateServerName', resp.data.data)
}
},
modules: {
}
})
-
首先应当调用 actions 的 updateServerName 获取数据
-
然后再由它间接调用 mutations 的 updateServerName 更新共享数据
页面使用 actions 的方法可以这么写
<template>
<div class="p">
<el-button type="primary" size="mini"
@click="updateServerName()">从服务器获取数据,存入store</el-button>
</div>
</template>
<script>
import { mapActions } from 'vuex'
const options = {
methods: {
...mapActions(['updateServerName'])
}
}
export default options;
</script>
-
mapActions 会生成调用 actions 中方法的代码
-
调用 actions 的代码内部等价于，它返回的是 Promise 对象，可以用同步或异步方式接收结果
this.$store.dispatch('action名称', 参数)
3. Vue 实战
课程不准备从头开发一个 Vue 项目，这里我准备采用这样的教学方法：带着大家看一个较为典型的基于 Vue 的项目实现，分析其中几个重点流程
这里选择了 vue-element-admin 这个项目骨架，它采用的技术与我们之前学过的较为契合
-
vue 2
-
element-ui 2
-
vue-router 3
-
vuex 3
-
axios
安装
git clone https://gitee.com/panjiachen/vue-element-admin.git client-action cd client-action git branch -a git checkout -b i18n remotes/origin/i18n git config --global url."https://".insteadOf git:// npm install npm run dev
-
需要切换分支到 i18n，否则不支持国际化（中文）功能
-
npm install 要多试几次，因为中间会连接 gitbub 下载一些依赖，网络不稳定会导致失败
-
npm run dev 运行后回自动打开浏览器，使用的端口是 9527
后端路径
开发环境下执行下面命令
npm run dev
-
会同时启动 mock-server
在开发环境下，后端访问路径起始路径配置在文件 .env.development 中
VUE_APP_BASE_API = '/dev-api'
-
默认向后台的请求都发给
http://localhost:9527/dev-api的 mock-server 获得的都是模拟数据 -
需要跟真实后台联调时，可以改动以上地址为
VUE_APP_BASE_API = 'http://localhost:8080/api'
发送请求的 axios 工具被封装在 src/utils/request.js 中
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
// ...
原有代码的 URI 路径都是这样的：
/vue-element-admin/user/login /vue-element-admin/user/info /vue-element-admin/user/logout ...
如果觉得不爽，可以来一个全局替换
/user/login /user/info /user/logout ...
token 的请求头修改一下，在 src/utils/request.js 中
...
service.interceptors.request.use(
config => {
// do something before request is sent
if (store.getters.token) {
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
config.headers['Authorization'] = getToken()
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
...
登录流程
1. src/views/login/index.vue
<script>
import { validUsername } from '@/utils/validate'
import LangSelect from '@/components/LangSelect'
import SocialSign from './components/SocialSignin'
export default {
// ...
methods: {
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
this.$store.dispatch('user/login', this.loginForm)
.then(() => {
this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
this.loading = false
})
.catch(() => {
this.loading = false
})
} else {
console.log('error submit!!')
return false
}
})
}
// ...
}
}
</script>
这里调用了 store 的 actions，user/login
-
因为是异步调用，因此只能用 actions
-
登录成功会优先跳转至 this.redirect 路径、否则跳转至 /
-
/ 查看
src/router/index.js的路由表可知，会重定向至 /dashboard
2. src/store/modules/user.js
import { login, logout, getInfo } from '@/api/user'
// ...
const actions = {
// user login
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password }).then(response => {
const { data } = response
commit('SET_TOKEN', data.token)
setToken(data.token)
resolve()
}).catch(error => {
reject(error)
})
})
}
// ...
}
-
发请求用了
src/api/user.js，请求成功使用 commit 将 token 存入 mutations，同时往 cookie 存储了一份 -
这里的 response 其实是真正的 response.data，见后面的说明
-
评价
-
向 cookie 或 sessionStorage 存储 token 即可，token 无需做成响应式，不必放入 store
-
作者使用了 Promise API，其实可以改变为 await 方式，提高可读性
-
3. src/api/user.js
import request from '@/utils/request'
export function login(data) {
return request({
url: '/user/login',
method: 'post',
data
})
}
// ...
-
其中 request 相当于我们之前封装的 myaxios
4. src/utils/request.js
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
// ...
service.interceptors.response.use(
// ...
response => {
const res = response.data
if (res.code !== 20000) {
// ...
} else {
return res
}
},
error => {
// ...
}
)
export default service
-
其中响应拦截器发现响应正确，返回 resp.data 这样，其它处代码解构时少了一层 data
5. src/permission.js
登录成功后，只是获得了 token，还未获取用户信息，获取用户信息是在路由跳转的 beforeEach 里做的
登录页RouterStoreTomcatlogin(username,password)login(username,password)token存储 token跳转至 /beforeEach getInfo(token)getInfo(token)name,avatar,roles等存储用户信息根据roles动态生成路由登录页RouterStoreTomcat
关键代码
import router from './router'
// ...
router.beforeEach(async(to, from, next) => {
// ...
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
// ...
} else {
// ...
const { roles } = await store.dispatch('user/getInfo')
// ...
}
} else {
// ...
}
})
-
登录后跳转至 / 之前进入这里的 beforeEach 方法，方法内主要做两件事
-
一是调用 actions 方法获取用户角色，见 6
-
二是根据用户角色，动态生成路由，见 7
-
6. src/store/modules/user.js
这里用其中 getInfo 方法获取用户信息，其中角色返回给 beforeEach
import { login, logout, getInfo } from '@/api/user'
// ...
const actions = {
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
const { data } = response
if (!data) {
reject('Verification failed, please Login again.')
}
const { roles, name, avatar, introduction } = data
if (!roles || roles.length <= 0) {
reject('getInfo: roles must be a non-null array!')
}
commit('SET_ROLES', roles)
commit('SET_NAME', name)
commit('SET_AVATAR', avatar)
commit('SET_INTRODUCTION', introduction)
resolve(data)
}).catch(error => {
reject(error)
})
})
}
}
7. src/router/index.js
路由表中路由分成两部分，静态路由与动态路由
export const constantRoutes = [
// ...
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [
{
path: 'dashboard',
component: () => import('@/views/dashboard/index'),
name: 'Dashboard',
meta: { title: 'dashboard', icon: 'dashboard', affix: true }
}
]
}
// ...
]
-
其中 hidden: true 的路由只做路由跳转，不会在左侧导航菜单展示
动态路由
export const asyncRoutes = [
{
path: '/permission',
component: Layout,
redirect: '/permission/page',
alwaysShow: true, // will always show the root menu
name: 'Permission',
meta: {
title: 'permission',
icon: 'lock',
roles: ['admin', 'editor'] // you can set roles in root nav
},
children: [
{
path: 'page',
component: () => import('@/views/permission/page'),
name: 'PagePermission',
meta: {
title: 'pagePermission',
roles: ['admin'] // or you can only set roles in sub nav
}
},
{
path: 'directive',
component: () => import('@/views/permission/directive'),
name: 'DirectivePermission',
meta: {
title: 'directivePermission'
// if do not set roles, means: this page does not require permission
}
},
{
path: 'role',
component: () => import('@/views/permission/role'),
name: 'RolePermission',
meta: {
title: 'rolePermission',
roles: ['admin']
}
}
]
},
{
path: '/icon',
component: Layout,
children: [
{
path: 'index',
component: () => import('@/views/icons/index'),
name: 'Icons',
meta: { title: 'icons', icon: 'icon', noCache: true, roles: ['admin'] }
}
]
}
// ...
}
-
动态路由中关联了角色信息，根据用户的角色决定那些路由可用，但这样做的缺点是把角色和路由绑定死了
8. src/layout/index.vue
它对应的是我们之前介绍的 Container.vue 完成主页布局的，路由路径是 /
其中又由多部分组成，其中固定不变的是
-
侧边栏
-
导航栏
-
标签栏
-
设置
变化的是中间的 dashboard 部分（AppMain），它由 router-view 配合子路由切换显示
-
进入 / 后，就会 redirect 重定向到 /dashboard 子路由
-
进入首页后，会有一个
/api/transaction/list的后台请求报 404，作为练习，把它补充完整
第三方登录
8前端(9527)后端(8080)gitee打开新窗口, 请求 /oauth/authorize认证通过重定向 redirect uri请求 /oauth/token返回 access_token(gitee)请求 /api/v5/user生成 token(8080)新窗口将 token(8080) 发送给老窗口(9527)8前端(9527)后端(8080)gitee
-
9527 打开新窗口，请求
https://gitee.com/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=code -
gitee 认证通过，重定向至 8080，并携带 code
-
8080 发送请求
https://gitee.com/oauth/token携带 client_id、client_secret、code，gitee 返回 access_token 给 8080-
这时走的是 https 协议，并且不经过浏览器，能够保证数据传输的安全性
-
重定向到 8080 时，如果被有心人拿到了 code，也没事，因为接下来会把 client_secret 发给 gitee 验证（client_secret 应当只存在 8080），只要 client_secret 不泄露，就可以保证安全
-
如果改成前端拿 code 换 access_token，那就意味着 access_token 得保存在前端，所有保存在前端的都有风险
-
-
8080 可以访问 gitee 的 api 了，拿到用户信息，存入数据库，返回 8080 的 token
-
8080 可以通过 window.opener.postMessage 把 token 给 9527 的老窗口
-
这里又会涉及到跨域，不过 9527 与 8080 直接存在信任关系，设置一下就好
-
-
9527 再走之前的逻辑就可以了，在 router 的 beforeEach 方法里，用 8080 token 换用户信息
增删改查
首先，在 api 里添加与后端交互的代码：src/api/student.js
import axios from '@/utils/request'
export function all() {
return axios({
url: '/students',
method: 'get'
})
}
export function deleteById(id) {
return axios({
url: `/students/${id}`,
method: 'delete'
})
}
export function update(id, dto) {
return axios({
url: `/students/${id}`,
method: 'put',
data: dto
})
}
export function insert(dto) {
return axios({
url: `/students`,
method: 'post',
data: dto
})
}
然后，添加新的路由：src/router/index.js
export const asyncRoutes = [
// ...
{
path: '/student',
component: Layout,
children: [
{
path: 'index',
component: () => import('@/views/student/index'),
meta: { title: '学生管理', icon: 'el-icon-s-help', roles: ['admin'] }
}
]
},
// ...
]
-
注意 title 这里没有考虑国际化
最后，添加新的视图界面：src/views/student/index.vue
<template>
<div>
<el-table :data="students">
<el-table-column label="编号" prop="id"></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="性别" prop="sex"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button @click="handleUpdate(scope.row)" type="text" size="small">修改</el-button>
<el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog width="22%" :visible.sync="updateDialogVisible">
<el-form :model="updateForm">
<el-form-item label="编号">
<el-input size="mini" :readonly="true" v-model="updateForm.id"></el-input>
</el-form-item>
<el-form-item label="姓名">
<el-input size="mini" v-model="updateForm.name"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select size="mini" v-model="updateForm.sex">
<el-option value="男"></el-option>
<el-option value="女"></el-option>
</el-select>
</el-form-item>
<el-form-item label="年龄">
<el-input size="mini" v-model="updateForm.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" @click="confirmUpdate()">确定</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import { all, deleteById, update, insert } from '@/api/student'
const options = {
mounted() {
this.all()
},
data() {
return {
students: [],
updateDialogVisible: false,
updateForm: {
id: 0,
name: '',
sex: '男',
age: 0
}
}
},
methods: {
async confirmUpdate() {
await update(this.updateForm.id, this.updateForm)
this.updateDialogVisible = false
this.all()
},
handleUpdate(row) { // {id, name, sex, age}
this.updateDialogVisible = true
this.updateForm = { ...row }
// this.updateForm = row // 错误写法，不能让他俩指向同一个对象
},
async handleDelete(row) {
try {
await this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
await deleteById(row.id)
this.all()
} catch (e) {
console.log('取消删除')
}
},
async all() {
const { data } = await all()
this.students = data
}
}
}
export default options
</script>
<style scoped>
.el-input,
.el-select {
width: 180px;
}
</style>
-
其中 handleUpdate 和 handleDelete 接收的参数，都是代表了当前行的学生对象
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
