快速掌握前端 专为Java程序员定制

Javascript

例子

  • 修改页面内容
    快速掌握前端 专为Java程序员定制_第1张图片

js 代码位置

<script>
	// js 代码
script>

快速掌握前端 专为Java程序员定制_第2张图片

引入 js 脚本

<script src="js脚本路径">script>

快速掌握前端 专为Java程序员定制_第3张图片
快速掌握前端 专为Java程序员定制_第4张图片

  • 注意,到了框架之后,引入方式会有不同

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 = "超链接";

String s2 = """
    超链接""";

js 就比较灵活

let s1 = '超链接';

let s2 = `超链接`;

模板字符串(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}`;

快速掌握前端 专为Java程序员定制_第5张图片

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)

要表示真正的整数,需要用 bigint,数字的结尾用 n 表示它是一个 bigint 类型

10n / 3n;			// 结果 3n, 按整数除法处理
6) boolean ⭐️
  • Truthy
  • Falsy

在 js 中,并不是 boolean 才能用于条件判断,你可以在 if 语句中使用【数字】、【字符串】… 作为判断条件

let b = 1;

if(b) { // true
    console.log("进入了");
}

快速掌握前端 专为Java程序员定制_第6张图片

这时就有一个规则,当需要条件判断时,这个值被当作 true 还是 false,当作 true 的值归类为 truthy,当作 false 的值归类为 falsy

下面值都是 falsy

  • false
  • Nullish (null, undefined)
  • 0, 0n, NaN
  • "" '' `` 即长度为零的字符串

剩余的值绝大部分都是 truthy

有几个容易被当作 falsy 实际是 truthy 的

  • "false", "0" 即字符串的 false 和 字符串的零
  • [] 空数组
  • {} 空对象
对象类型
1) Function ⭐️⭐️
定义函数
function 函数名(参数) {
    // 函数体
    return 结果;
}

function add(a, b) {
    return a + b;
}

快速掌握前端 专为Java程序员定制_第7张图片

调用函数
函数名(实参);

add(1, 2);     // 返回 3

js 中的函数调用特点:对参数的类型个数都没有限制,例如

add('a', 'b');  // 返回 ab
add(4, 5, 6);   // 返回 9, 第三个参数没有被用到, 不会报错
add(1);			// 返回 NaN, 这时 b 没有定义是 undefined, undefined 做数学运算结果就是 NaN

快速掌握前端 专为Java程序员定制_第8张图片

默认参数

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);
}

快速掌握前端 专为Java程序员定制_第9张图片

匿名函数

语法

(function (参数) {
    // 函数体
    return 结果;
})

(function(a,b){
    return a + b;
})

第一种场景:定义完毕后立刻调用

(function(a,b){
    return a + b;
})(1,2)

快速掌握前端 专为Java程序员定制_第10张图片

第二种场景:作为其它对象的方法,例如
页面有元素

<p id="p1">点我啊p>

此元素有一个 onclick 方法,会在鼠标单击这个元素后被执行,onclick 方法刚开始是 null,需要赋值后才能使用

document.getElementById("p1").onclick = (function(){
    console.log("鼠标单击了...");
});

快速掌握前端 专为Java程序员定制_第11张图片

箭头函数
(参数) => {
    // 函数体
    return 结果;
}
  • 如果没有参数,() 还是要保留
  • 如果只有一个参数,() 可以省略
  • 如果函数体内只有一行代码,{} 可以省略
  • 如果这一行代码就是结果,return 可以省略

document.getElementById("p1").onclick = () =>  console.log("aa");

快速掌握前端 专为Java程序员定制_第12张图片

函数是对象

(函数的本质是对象)

以下形式在 js 中非常常见!

  1. 可以参与赋值,例,具名函数也能参与赋值
function abc() {
    console.log("bb");
}

document.getElementById("p1").onclick = abc;

快速掌握前端 专为Java程序员定制_第13张图片

  1. 有属性、有方法,执行 console.dir(abc),输出结果如下
ƒ abc()
    arguments: null
    caller: null
    length: 0
    name: "abc"
    ➡prototype: {constructor: ƒ}
    [[FunctionLocation]]: VM1962:1
    ➡[[Prototype]]: ƒ ()
    ➡[[Scopes]]: Scopes[1]
  • 其中带有 f 标记的是方法,不带的是属性

  • 带有 ➡ 符号的可以继续展开,限于篇幅省略了

  • 带有 [[ ]] 的是内置属性,不能访问,只能查看

  • 相对重要的是 [[Prototype]][[Scopes]] 会在后面继承和作用域时讲到

  1. 可以作为方法参数
function a() {
    console.log('a')
}

function b(fn) {          // fn 将来可以是一个函数对象
    console.log('b')
    fn();                 // 调用函数对象
}

b(a)

快速掌握前端 专为Java程序员定制_第14张图片
4. 可以作为方法返回值

function c() {
    console.log("c");
    function d() {
        console.log("d");
    }
    return d;
}

c()()

快速掌握前端 专为Java程序员定制_第15张图片

函数作用域

函数可以嵌套(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();

快速掌握前端 专为Java程序员定制_第16张图片

  • 以函数为分界线划定作用域,所有函数之外是全局作用域
  • 查找变量时,由内向外查找
    • 在内层作用域找到变量,就会停止查找,不会再找外层
    • 所有作用域都找不到变量,报错
  • 作用域本质上是函数对象的属性,可以通过 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 也是隐式参数,但它与函数运行时上下文相关

例如,一个“落单”的函数

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);

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) 显示
特色:基于函数的原型继承

出于方便的原因,js 又提供了一种基于函数的原型继承

函数职责

  1. 负责创建子对象,给子对象提供属性、方法,功能上相当于构造方法

  2. 函数有个特殊的属性 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
}

那么他们的区别在哪儿呢?我总结了这么几点

  1. 本质不同
    • json 对象本质上是个字符串,它的职责是作为客户端和服务器之间传递数据的一种格式,它的属性只是样子货
    • js 对象是切切实实的对象,可以有属性方法
  2. 语法细节不同
    • 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 的类型未知,必须根据不同类型做出相应的容错处理
}

运算符与表达式

  • + - * / % **
  • += -= *= /= %= **=
  • ++ --
  • 位运算、移位运算
  • == != > >= < <=
  • === !== ⭐️
  • && || ! ⭐️
  • ?? ?. ⭐️
  • ... ⭐️
  • 解构赋值 ⭐️
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');
    }
}

Vue2

使用 vite 创建
## 创建工程
npm init vite-app 
## 进入工程目录
cd 
## 安装依赖
npm install
## 运行
npm run dev

Vue 项目结构

├─assets
├─components
├─router
├─store
└─views
  • assets - 静态资源
  • components - 可重用组件
  • router - 路由
  • store - 数据共享
  • views - 视图组件

以后还会添加

  • api - 跟后台交互,发送 fetch、xhr 请求,接收响应
  • plugins - 插件
vue大致流程

核心是create那
main.js是首先运行的文件,运行创建节点到index.html

快速掌握前端 专为Java程序员定制_第17张图片
快速掌握前端 专为Java程序员定制_第18张图片
快速掌握前端 专为Java程序员定制_第19张图片

2) Vue 组件

Vue 的组件文件以 .vue 结尾,每个组件由三部分组成






  • template 模板部分,由它生成 html 代码
  • script 代码部分,控制模板的数据来源和行为
  • style 样式部分,一般不咋关心

入口组件是 App.vue

先删除原有代码,来个 Hello, World 例子




解释

  • export default 导出组件对象,供 main.js 导入使用
  • 这个对象有一个 data 方法,返回一个对象,给 template 提供数据
  • {{}} 在 Vue 里称之为插值表达式,用来绑定 data 方法返回的对象属性,绑定的含义是数据发生变化时,页面显示会同步变化
文本插值


  • {{}} 里只能绑定一个属性,绑定多个属性需要用多个 {{}} 分别绑定
  • template 内只能有一个根元素
  • 插值内可以进行简单的表达式计算
属性绑定


  • 简写方式:可以省略 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>
        <h1>{{m1()}}h1>
    div>
template>
<script>
const options = {
    data: function () {
        return { firstName: '三', lastName: '张' };
    },
     methods: {
        m1() {
            console.log('进入了 m1')
            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);
			
			//动态请求
			//async login( ) {
			//const resp = await axios.get( " / api/menu/${this.username}
			//console. log(resp.data.data) ;
			//)


            // 6. 用请求体发数据,格式为 json
            const resp = await axios.post('/api/a5json', {
                name: '王五',
                age: 50
            });

            console.log(resp);
        }
    }
};
export default options;
script>

快速掌握前端 专为Java程序员定制_第20张图片
快速掌握前端 专为Java程序员定制_第21张图片
快速掌握前端 专为Java程序员定制_第22张图片
创建实例

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


快速掌握前端 专为Java程序员定制_第23张图片

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 时会报错

跨域问题解决

public class App implements WebMvcConfigurer {

    @Bean
    public LoginInterceptor loginInterceptor() {
        return new LoginInterceptor();
    }

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(loginInterceptor()).addPathPatterns("/api/**");
    }

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:7070")
                .allowCredentials(true);
    }

响应格式

名称 含义
data 响应体数据 ⭐️
status 状态码 ⭐️
headers 响应头
  • 200 表示响应成功
  • 400 请求数据不正确 age=abc
  • 401 身份验证没通过
  • 403 没有权限
  • 404 资源不存在
  • 405 不支持请求方式 post
  • 500 服务器内部错误

请求拦截器
类似于try,catch 异常捕获

_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);
  }
);

快速掌握前端 专为Java程序员定制_第24张图片

脚手架中必有的

上述跨域部分内容相当于一个脚手架,必须要有的
​⭐️​​⭐️​​⭐️​

import axios from 'axios'
const _axios = axios.create({
    // baseURL: 'http://localhost:8080',
    withCredentials: true
});

// 9. 拦截器
_axios.interceptors.request.use(
    function (config) {
        // 比如在这里添加统一的 headers
        config.headers = {
            Authorization: 'aaa.bbb.ccc'
        }
        return config;
    },
    function (error) {
        return Promise.reject(error);
    }
);

_axios.interceptors.response.use(
    function (response) {
        // 2xx 范围内走这里
        return response;
    },
    function (error) {
        if (error.response?.status === 400) {
            console.log('请求参数不正确');
            return Promise.resolve(400);
        } else if (error.response?.status === 401) {
            console.log('跳转至登录页面');
            return Promise.resolve(401);
        } else if (error.response?.status === 404) {
            console.log('资源未找到');
            return Promise.resolve(404);
        }
        // 超出 2xx, 比如 4xx, 5xx 走这里
        return Promise.reject(error);
    }
);

export default _axios;
条件渲染
<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>
        
        <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 属性对应一个函数,此函数会在组件挂载后(准备就绪)被调用,可以在它内部发起请求,去获取学生数据
重用组件

一般都是使用el组件库
按钮组件



  • 注意,省略了样式部分

使用组件

<template>
    <div>
        <h1>父组件h1>
        <my-button type="primary" size="small">1my-button>
        <my-button type="danger" size="middle">2my-button>
        <my-button type="success" size="large">3my-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)

快速掌握前端 专为Java程序员定制_第25张图片

测试,在自己的组件中使用 ElementUI 的组件

按钮
2) Vue-Router

vue 属于单页面应用,所谓的路由,就是根据浏览器路径不同,用不同的视图组件替换这个页面内容展示(类似于gateway)

配置路由

新建一个路由 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,内容为:


  • 样式略
  • 其中 起到占位作用,改变路径后,这个路径对应的视图组件就会占据 的位置,替换掉它之前的内容
动态导入
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 组件】中 部分的内容

<template>
    <div class="container">
        <router-view></router-view>
    </div>
</template>
  • redirect 可以用来重定向(跳转)到一个新的地址
  • path 的取值为 * 表示匹配不到其它 path 时,就会匹配它
ElementUI 布局

通常主页要做布局,下面的代码是 ElementUI 提供的【上-【左-右】】布局


路由跳转
标签式

    P1
    P2
    P3

编程式

    
    
    

jump 方法


  • 其中 this.$router 是拿到路由对象
  • push 方法根据 url 进行跳转
导航菜单

    
        
            
            菜单1
        
        子项1
        子项2
        子项3
    
    
        
            
            菜单2
        
    
    
        
            
            菜单3
        
    

  • 图标和菜单项文字建议用 包裹起来
  • 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


页面刷新,重新创建路由对象时,从 sessionStorage 里恢复路由数据

const router = new VueRouter({
  routes
})

// 从 sessionStorage 中恢复路由数据
const serverRoutes = sessionStorage.getItem('serverRoutes');
if(serverRoutes) {
  const array = JSON.parse(serverRoutes);
  addServerRoutes(array) // 动态添加路由
}
动态菜单

代码部分


菜单部分


    

  • 没有考虑递归菜单问题,认为菜单只有两级

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: {
  }
})

修改共享数据



  • mutations 方法不能直接调用,只能通过 store.commit(mutation方法名, 参数) 来间接调用

读取共享数据


mapState

每次去写 $store.state.name 这样的代码显得非常繁琐,可以用 vuex 帮我们生成计算属性



  • mapState 返回的是一个对象,对象内包含了 name() 和 age() 的这两个方法作为计算属性
  • 此对象配合 ... 展开运算符,填充入 computed 即可使用
mapMutations


  • 类似的,调用 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 的方法可以这么写



  • mapActions 会生成调用 actions 中方法的代码

  • 调用 actions 的代码内部等价于,它返回的是 Promise 对象,可以用同步或异步方式接收结果

    this.$store.dispatch('action名称', 参数)
    

Vue3

React

你可能感兴趣的:(学习笔记,前端,java,开发语言)