第2章前端Web基础（js、vue+Ajax）

一、JavaScript课程介绍

JavaScript（简称：Js）是一门跨平台、面向对象的脚本语言，是用来控制网页行为 ，实现页面的交互效果。
Javascript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。
组成:
- ECMAScript：规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。
- BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。
- DOM：文档对象模型 ，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
ECMA:ECMA国际(前身为欧洲计算机制造商协会)，制定了标准化的脚本程序设计语言 ECMAScript，这种语言得到广泛应用。
而JavaScript是遵守ECMAScript的标准的(ES2024是最新版本)

二、核心语法

1、引入方式

（1）内部脚本

将JS代码定义在HTML页面中

JavaScript代码必须位于<script></script>标签之间

在HTML文档中，可以在任意地方，放置任意数量的<script>

一般会把脚本置于**<body>元素的底部**，可改善显示速度

javascript 复制代码

<body>
    <!-- 页面内容 -->
    
    <script>
        alter('Hello World');
    </script>
</body>

（2）外部脚本

将JS代码定义在外部JS文件 中，然后引入到HTML页面中

javascript 复制代码

alter('Hello World');
<script src = "js/demo.js"></script>

2、变量和常量

JS中用let关键字 来声明变量（弱类型语言，变量可以存放不同类型的值）。

变量名需要遵循如下规则：

只能用字母、数字、下划线（_）、美元符号（$）组成，且数字不能开头
变量名严格区分大小写，如Name和NAME是不同的变量
不能使用关键字，如：let、var、if、for等

JS中用CONST关键字来声明常量。

一旦声明，常量的值就不能改变（不可以重新赋值）。

javascript 复制代码

<script>
    //常量
    const PI=3.14;
    PI=3.5;
    console.log(PI);
</script>

3、输出语句

javascript 复制代码

<script>
    //变量
    let A=20;
    a="Hello";
    alert(a);//弹出框
    const.log(a);//输出到控制台
    document.write(a);//输出到body
</script>

window.alert():弹出警告框【使用频次较高】

console.log():写入浏览器控制台【使用频次较高】

document.write():向HTML的body内输出内容

4、数据类型

javascript的数据类型分为：

基本数据类型和引用数据类型（对象）。

(1)基本数据类型

number：数字（整数、小数、NaN(Not a Number))

boolean:布尔。true，false

null：对象为空。javascript是大小写敏感的，因此null、Null、NULL是完全不同的

undefined:当声明的变量未初始化时，该变量的默认值是undefined

string：字符串，单引号、双引号、反引号皆可，推荐使用单引号

使用typeof运算符可以获取数据类型：

javascript 复制代码

<script>
    let a = 20;
    alert(typeof a);//获取数据类型
</script>

(2）模板字符串语法

``（反引号，英文输入模式下按键盘的TAB键上方波浪线~那个键）

内容拼接变量时，使用${}包住变量

javascript 复制代码

<script>
    let name = 'Tom';
    let age = 18;
    console.log('大家好，我是新入职的'+name+'，今年'+age+'岁了，请多多关照'）;
    console.log(`大家好，我是新入职的${name}，今年${age}岁了，请多多关照`）;
</script>

5、函数

介绍：函数（function）是被设计用来执行特定任务的代码块，方便程序的封装复用。

（1）具名函数

定义：JavaScript中的函数通过function关键字进行定义，语法为：

javascript 复制代码

function functionName(参数1，参数2···){
    //要执行的代码
}
function add(a,b){
    return a + b;
}
let result = add(10,20);
alert(result);

注意：由于JS是弱类型语言，形参、返回值都不需要指定类型。在调用函数时，实参个数与形参个数可以不一致，但是建议一致。

（2）匿名函数

匿名函数是指一种没有名称的函数，可以通过两种方式定义：函数表达式 和 箭头函数。

javascript 复制代码

//函数表达式
let add = function(a,b){
    return a + b;
}
//箭头函数
let add = (a,b) => {
    return a + b;
}

匿名函数定义后，可以通过变量名直接调用。

javascript 复制代码

let result = add(10,20);
alert(result);

5、自定义对象

javascript 复制代码

let 对象名 = {
    属性名1: 属性值1,
    属性名2: 属性值2,
    属性名3: 属性值3,
    方法名: function (形参列表) {}
}

let user = {
    name: 'Tom',
    age: 20,
    gender: '男',
    sing: function () {
        alert('悠悠的唱着最炫的民族风')
    }
}

let user = {
    name: 'Tom',
    age: 20,
    gender: '男',
    sing() {
        alert('悠悠的唱着最炫的民族风')
    }
}

javascript 复制代码

对象名.属性名;
对象名.方法名();

console.log(user.name);
user.sing();

定义对象时尽量不要使用箭头函数，this指向父级Windows

6、JSON

概念：JavaScript Object Notation，JavaScript对象标记法 (JS对象标记法书写的文本 ) 。

由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

两个方法

javascript 复制代码

<script>
        //3. JSON - JS对象标记法
        let person = {
            name: 'itcast',
            age: 18,
            gender: '男'
        }
    alert(JSON.stringify(person)); //js对象 --> json字符串

    let personJson = '{"name": "heima", "age": 18}';
    alert(JSON.parse(personJson).name);
  </script>

1．JSON格式特点?

json格式的文本所有的key必须使用双引号引起来

2．JSON对象的两个方法?

JSON.parse: 将json字符串转为js对象

JSON.stringify: 将js对象转为json字符串

7、DOM

DOM操作核心思想：将网页中所有的元素当做对象来处理。（标签的所有属性在该对象上都可以找到）

操作步骤：

获取要操作的DOM元素对象

操作DOM对象的属性或方法（查文档或AI)

获取DOM对象

根据CSS选择器 来获取DOM元素，获取匹配到的第一个元素：document.querySelector('选择器')

根据CSS选择器 来获取DOM元素，获取匹配到的所有元素：document.querySelectorAll(选择器)

注意：得到的是一个NodeList节点集合 ，是一个伪数组（有长度、有索引的数组）

案例：

javascript 复制代码

<body>

  <h1 id="title1">11111</h1>
  <h1>22222</h1>
  <h1>33333</h1>

  <script>
    //1. 修改第一个h1标签中的文本内容
    //1.1 获取DOM对象
    // let h1 = document.querySelector('#title1');
    //let h1 = document.querySelector('h1'); // 获取第一个h1标签

    let hs = document.querySelectorAll('h1');

    //1.2 调用DOM对象中属性或方法
    //修改h1的第0号元素的内容
    hs[0].innerHTML = '修改后的文本内容';
  </script>
</body>

三、事件监听

什么是事件？什么是事件监听？

事件：HTML事件是发生在HTML元素上的"事情"。比如：按钮被点击、鼠标移动到元素上、按下键盘按键

事件监听：JavaScript可以在事件触发时，就立即调用一个函数做出响应，也称为事件绑定或注册事件。

1、语法

语法：事件源.addEventListener(事件类型，事件触发执行的函数);

事件监听三要素

事件源：哪个dom元素触发了事件，要获取dom元素

事件类型：用什么方式触发，比如：鼠标单击click

事件触发执行的函数：要做什么事

javascript 复制代码

<body>
  
  <input type="button" id="btn1" value="点我一下试试1">
  <input type="button" id="btn2" value="点我一下试试2">

  <script>
    //事件监听 - addEventListener (可以多次绑定同一事件)
    document.querySelector('#btn1').addEventListener('click', () => {
      console.log('试试就试试~~');
    });
    document.querySelector('#btn1').addEventListener('click', () => {
      console.log('试试就试试22~~');
    });

    //事件绑定-早期写法 - onclick (如果多次绑定同一事件, 覆盖) - 了解
    document.querySelector('#btn2').onclick =  () => {
      console.log('试试就试试~~');
    }
    document.querySelector('#btn2').onclick =  () => {
      console.log('试试就试试22~~');
    }
  </script>
</body>

区别：on方式会被覆盖，addEventListener方式可以绑定多次，拥有更多特性，推荐使用

2、常见事件

javascript 复制代码

<script>
    //通过JS为上述的表格中数据行添加事件监听, 实现鼠标进入后, 背景色#f2e2e2; 鼠标离开后, 背景色需要设置为#fff; (JS新版本的语法)
    // 1. 获取所有的tr标签
    let trs = document.querySelectorAll('tr');

    // 2. 为每一个tr标签添加事件监听
    for(let i = 0; i < trs.length; i++){
        trs[i].addEventListener('mouseenter', function(){ // mouseenter 鼠标进入
            trs[i].style.backgroundColor = '#f2e2e2';
        });
            
        trs[i].addEventListener('mouseleave', function(){ // mouseleave 鼠标离开
            trs[i].style.backgroundColor = '#fff';
        })
    }
</script>

click：鼠标点击

mouseenter: 鼠标移入

mouseleave: 鼠标移出

keydown：键盘按下触发

keyup: 键盘抬起触发

focus：获得焦点触发

blur: 失去焦点触发

input：用户输入时触发

submit: 表单提交时触发

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-常见事件</title>
</head>

<body>
    <form action="" style="text-align: center;">
        <input type="text" name="username" id="username">
        <input type="text" name="age" id="age">
        <input id="b1" type="submit" value="提交">
        <input id="b2" type="button" value="单击事件">
    </form>

    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr>
        <tr align="center" id="last">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
    </table>

    
    <script>
        //click: 鼠标点击事件
        document.querySelector('#b2').addEventListener('click', () => {
            console.log("我被点击了...");
        })

        //mouseenter: 鼠标移入
        document.querySelector('#last').addEventListener('mouseenter', () => {
            console.log("鼠标移入了...");
        })

        //mouseleave: 鼠标移出
        document.querySelector('#last').addEventListener('mouseleave', () => {
            console.log("鼠标移出了...");
        })

        //keydown: 某个键盘的键被按下
        document.querySelector('#username').addEventListener('keydown', () => {
            console.log("键盘被按下了...");
        })

        //keyup: 某个键盘的键被抬起
        document.querySelector('#username').addEventListener('keyup', () => {
            console.log("键盘被抬起了...");
        })

        //blur: 失去焦点事件
        document.querySelector('#age').addEventListener('blur', () => {
            console.log("失去焦点...");
        })

        //focus: 元素获得焦点
        document.querySelector('#age').addEventListener('focus', () => {
            console.log("获得焦点...");
        })

        //input: 用户输入时触发
        document.querySelector('#age').addEventListener('input', () => {
            console.log("用户输入时触发...");
        })

        //submit: 提交表单事件
        document.querySelector('form').addEventListener('submit', () => {
            alert("表单被提交了...");
        })
    </script>
</body>

</html>

3、常见事件（优化-JS模块化）

新建utils.js包，工具包

javascript 复制代码

export function printLog(msg){//暴露出去
  console.log(msg);
}

新建eventDemo.js包，抽取到js文件中

javascript 复制代码

import { printLog } from "./utils.js";

//click: 鼠标点击事件
document.querySelector('#b2').addEventListener('click', () => {
    printLog("我被点击了...");
})

//mouseenter: 鼠标移入
document.querySelector('#last').addEventListener('mouseenter', () => {
    printLog("鼠标移入了...");
})

//mouseleave: 鼠标移出
document.querySelector('#last').addEventListener('mouseleave', () => {
    printLog("鼠标移出了...");
})

//keydown: 某个键盘的键被按下
document.querySelector('#username').addEventListener('keydown', () => {
    printLog("键盘被按下了...");
})

//keyup: 某个键盘的键被抬起
document.querySelector('#username').addEventListener('keyup', () => {
    printLog("键盘被抬起了...");
})

//blur: 失去焦点事件
document.querySelector('#age').addEventListener('blur', () => {
    printLog("失去焦点...");
})

//focus: 元素获得焦点
document.querySelector('#age').addEventListener('focus', () => {
    printLog("获得焦点...");
})

//input: 用户输入时触发
document.querySelector('#age').addEventListener('input', () => {
  printLog("用户输入时触发...");
})

//submit: 提交表单事件
document.querySelector('form').addEventListener('submit', () => {
    alert("表单被提交了...");
})

原html中

javascript 复制代码

    <!-- type="module" 模块化JS -->
    <script src="./js/eventDemo.js" type="module"></script>

四、Vue介绍

Vue是一款用于构建用户界面 的渐进式的JavaScript框架。

官方：Vue.js - 渐进式 JavaScript 框架 | Vue.js

框架：就是一套完整的项目解决方案，用于快速构建项目。

优点：大大提升前端项目的开发效率。

缺点：需要理解记忆框架的使用规则。（参照官网）

五、Vue快速入门

准备
- 引入Vue模块（官方提供）
- 创建Vue程序的应用实例，控制视图的元素
- 准备元素(div)，被Vue控制
数据驱动视图
- 准备数据
- 通过插值表达式渲染页面

javascript 复制代码

<body>
  
  <div id="app">
    <!-- 通过插值表达式渲染页面 -->
    <h1>{{message}}</h1>
    <h1>{{count}}</h1>
  </div>
  

  <script type="module">//说明是引入的是模块化的js
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';//引入Vue模块（官方提供）

    createApp({//创建Vue程序的应用实例，控制视图的元素
      data() {//准备数据
        return {
          message: 'Hello Vue',
          count: 100
        }
      }
    }).mount('#app');//准备元素(div)，被Vue控制
  </script>
</body>

六、Vue常用指令

指令：HTML标签上带有v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。

展示：

1、-v-for

作用：列表渲染，遍历容器的元素或者对象的属性

语法：

javascript 复制代码

<tr v-for="(item,index) in items":key="item.id"> {item}}</tr>

参数说明：

items为遍历的数组
item为遍历出来的元素
index为索引/下标，从0开始；可以省略，省略index语法：v-for="item in items"

key:

作用：给元素添加的唯一标识 ，便于vue进行列表项的正确排序复用，提升渲染性能
推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）

注意：遍历的数组，必须在data中定义 ；要想让哪个标签 循环展示多次 ，就在哪个标签上使用v-for指令。

在script标签里面引入Vue，并创建data

javascript 复制代码

   <script type="module">
      import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

      createApp({
        data() {
          return {
            searchForm: { //封装用户输入的查询条件
                name: '',
                gender: '',
                job: ''
            },
            empList: [
              { "id": 1,
                "name": "谢逊",
                "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg",
                "gender": 1,
                "job": "1",
                "entrydate": "2023-06-09",
                "updatetime": "2024-09-30T14:59:38"
              },
              {
                "id": 2,
                "name": "韦一笑",
                "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg",
                "gender": 1,
                "job": "1",
                "entrydate": "2020-05-09",
                "updatetime": "2024-09-01T00:00:00"
              },
              {
                "id": 3,
                "name": "黛绮丝",
                "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg",
                "gender": 2,
                "job": "2",
                "entrydate": "2021-06-01",
                "updatetime": "2024-09-01T00:00:00"
              }
            ]
          }
        },

在<tbody>的<tr>标签里面写入v-for指令，并循环遍历渲染展示表格内容

javascript 复制代码

<!-- 表格主体内容 -->
<tbody>
    <tr v-for="(e, index) in empList" :key="e.id">
        <td>{{index + 1}}</td>
        <td>{{e.name}}</td>
        <td>{{e.gender == 1?'男' : '女'}}</td>

        <!-- 插值表达式{{}}是不能出现在标签内部 -->
        <td><img class="avatar"  v-bind:src="e.image" :alt="e.name"></td>

        <!-- v-if: 控制元素的显示与隐藏 -->
        <td>
            <span v-if="e.job == 1">班主任</span>
            <span v-else-if="e.job == 2">讲师</span>
            <span v-else-if="e.job == 3">学工主管</span>
            <span v-else-if="e.job == 4">教研主管</span>
            <span v-else-if="e.job == 5">咨询师</span>
            <span v-else>其他</span>
        </td>

        <!-- v-show: 控制元素的显示与隐藏 -->
        <!-- <td>
<span v-show="e.job == 1">班主任</span>
<span v-show="e.job == 2">讲师</span>
<span v-show="e.job == 3">学工主管</span>
<span v-show="e.job == 4">教研主管</span>
<span v-show="e.job == 5">咨询师</span>
</td> -->

        <td>{{e.entrydate}}</td>
        <td>{{e.updatetime}}</td>
        <td class="action-buttons">
            <button type="button">编辑</button>
            <button type="button">删除</button>
        </td>
    </tr>
</tbody>

2、-v-bind

作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。

语法：v-bind:属性名="属性值"

javascript 复制代码

<img v-bind:src="item.image"width="30px">

简化：:属性名="属性值"

javascript 复制代码

<img :src="item.image"width="30px">

注意：动态的为标签的属性 绑定值，不能使用插值表达式 ，得使用v-bind指令 。且绑定的数据，必须在data中定义。

将img标签的插值表达式改为v-bind形式

javascript 复制代码

<td><img class="{{avatar}}" src="{{e.image}}" alt="{{e.name}}"></td>
<!--改为-->
<td><img class="avatar"  v-bind:src="e.image" :alt="e.name"></td>

3、-v-if与-v-show

作用：这两类指令，都是用来控制元素的显示与隐藏的

v-if

语法：v-if="表达式"，表达式值为true，显示；false，隐藏
原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
场景：要么显示，要么不显示，不频繁切换的场景
其它：可以配合v-else-if/v-else进行链式调用条件判断

v-show

语法：v-show="表达式"，表达式值为true，显示；false，隐藏
原理：基于CSS样式display来控制显示与隐藏
场景：频繁切换显示隐藏的场景

注意：v-else-if必须出现在v-if之后，可以出现多个；v-else必须出现在v-if/v-else-if之后。

html 复制代码

<!-- v-if: 控制元素的显示与隐藏 -->
<!-- 当元素不频繁展示和隐藏时，使用v-if -->
<td>
    <span v-if="e.job == 1">班主任</span>
    <span v-else-if="e.job == 2">讲师</span>
    <span v-else-if="e.job == 3">学工主管</span>
    <span v-else-if="e.job == 4">教研主管</span>
    <span v-else-if="e.job == 5">咨询师</span>
    <span v-else>其他</span>
</td>

<!-- v-show: 控制元素的显示与隐藏 -->
<!-- 当元素频繁展示和隐藏时，使用v-show -->
<!-- <td>
    <span v-show="e.job == 1">班主任</span>
    <span v-show="e.job == 2">讲师</span>
    <span v-show="e.job == 3">学工主管</span>
    <span v-show="e.job == 4">教研主管</span>
    <span v-show="e.job == 5">咨询师</span>
</td> -->

实际上，v-if只会渲染使用到的元素，v-show会渲染所有元素，使用display展示或隐藏

我们在控制台可以看到这样的

4、-v-model与-v-on

作用：在表单元素 上使用，双向数据绑定。可以方便的获取或设置表单项数据

双向数据绑定：数据模型和视图的数据发生变化会互相影响

语法：v-model="变量名"

注意：v-model中绑定的变量，必须在data中定义。

封装用户输入的查询条件：

在data的返回值处，emplist的平级处

javascript 复制代码

searchForm: { //封装用户输入的查询条件
                name: '',
                gender: '',
                job: ''
            },

渲染搜索表单：

javascript 复制代码

<form class="search-form">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" v-model="searchForm.name" placeholder="请输入姓名">

    <label for="gender">性别：</label>
    <select id="gender" name="gender" v-model="searchForm.gender">
        <option value=""></option>
        <option value="1">男</option>
        <option value="2">女</option>
    </select>

    <label for="position">职位：</label>
    <select id="position" name="position" v-model="searchForm.job">
        <option value=""></option>
        <option value="1">班主任</option>
        <option value="2">讲师</option>
        <option value="3">学工主管</option>
        <option value="4">教研主管</option>
        <option value="5">咨询师</option>
    </select>

    <button type="button" v-on:click="search">查询</button>
    <button type="button" @click="clear">清空</button>
</form>

查询的操作

javascript 复制代码

    <button type="button" v-on:click="search">查询</button>
    <button type="button" @click="clear">清空</button>

查询的方法：在data平级处

javascript 复制代码

methods: {
            search(){
                //将搜索条件, 输出到控制台
                //this代表当前Vue应用实例，获取其searchForm属性
                console.log(this.searchForm);
            },
            clear(){
                //清空表单项数据
                this.searchForm = {name:'', gender:'', job:''}
            }
        },

七、Ajax入门

1、Ajax

介绍：Asynchronous JavaScript And XML，异步JavaScript和XML。

作用：

数据交换：通过Ajax可以给服务器发送请求 ，并获取服务器响应的数据。
异步交互：可以在不重新加载整个页面 的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

XML:（英语：Extensible Markup Language）可扩展标记语言，本质是一种数据格式，可以用来存储复杂的数据结构。

同步和异步：

2、Axios

介绍：Axios对原生的Ajax进行了封装，简化书写，快速开发。

官网：Axios中文文档 | Axios中文网

（1）普通请求方式

步骤：

引入Axios的js文件（参照官网）

使用Axios发送请求，并获取响应结果

method：请求方式，GET/POST

url：请求路径

data：请求数据(POST)

params:发送请求时携带的url参数如：...?key=val

axios发送GET请求和POST请求

javascript 复制代码

<body>
    
    <input type="button" value="获取数据GET" id="btnGet">
    <input type="button" value="操作数据POST" id="btnPost">

    <script src="js/axios.js"></script>
    <script>
        //发送GET请求
        document.querySelector('#btnGet').addEventListener('click', () => {
            //axios发起异步请求
            axios({
                url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
                method: 'GET'
            }).then((result) => { //成功回调函数
                console.log(result.data);
            }).catch((err) => { //失败回调函数
                console.log(err);
            })
        })
        
        //发送POST请求
        document.querySelector('#btnPost').addEventListener('click', () => {
            //axios发起异步请求
            axios({
                url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
                method: 'POST',
                data: 'id=1' //POST请求方式 , 请求体
            }).then((result) => { //成功回调函数
                console.log(result.data);
            }).catch((err) => { //失败回调函数
                console.log(err);
            })
        })
    </script>
</body>

（2）请求方式别名（推荐）

格式：axios.请求方式( url $,data \[ ,config$ ])

javascript 复制代码

<body>
    
    <input type="button" value="获取数据GET" id="btnGet">
    <input type="button" value="操作数据POST" id="btnPost">

    <script src="js/axios.js"></script>
    <script>
        //发送GET请求
        document.querySelector('#btnGet').addEventListener('click', () => {
            // get方法.thenc快捷生成回调函数
            axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) => {
                console.log(result.data);
            });
            // 先输出===，再输出结果
            console.log('==========================');
        })
        
        //发送POST请求
        document.querySelector('#btnPost').addEventListener('click', () => {
            axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update', 'id=1').then((result) => {
                console.log(result.data);
            });
        })
    </script>
</body>

只是换了一个写法方式，具体区别如下：

javascript 复制代码

//axios发起异步请求
axios({
    url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
    method: 'GET'
}).then((result) => { //成功回调函数
    console.log(result.data);
}).catch((err) => { //失败回调函数
    console.log(err);
})


// get方法.thenc快捷生成回调函数
axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) => {
    console.log(result.data);
});

javascript 复制代码

//axios发起异步请求
axios({
    url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
    method: 'POST',
    data: 'id=1' //POST请求方式 , 请求体
}).then((result) => { //成功回调函数
    console.log(result.data);
}).catch((err) => { //失败回调函数
    console.log(err);
})

axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update', 'id=1').then((result) => {
    console.log(result.data);
});

八、Ajax案例-动态加载数据

重点关注方法methods，使用async/await，将异步函数转为同步函数。

这样可读性强，便于维护

注意：await关键字只在async函数内有效，await关键字取代then函数，等待获取到请求成功的结果值。

javascript 复制代码

<script src="js/axios.js"></script>
<script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

createApp({
    data() {
        return {
            searchForm: { //封装用户输入的查询条件
                name: '',
                gender: '',
                job: ''
            },
            empList: []
        }
    },
    //方法
    methods: {
        async search(){
            // 发送ajax请求，获取数据
            // axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`).then((result) => {
            //     this.empList = result.data.data;
            // })
            // console.log('===========================');

            // 使用async/await，将异步函数转为同步函数
            let result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);
            this.empList = result.data.data;
        },
        clear(){
            //清空表单项数据
            this.searchForm = {name:'', gender:'', job:''}
            this.search()
        }
    },
    //钩子函数
    mounted(){
        //页面加载完成之后，发送ajax请求，获取数据。使页面加载完毕后就有数据看
        this.search()
    }
}).mount('#container')
</script>

九、Ajax案例-页面加载前查询（Vue生命周期）

Vue生命周期

生命周期：指一个对象从创建到销毁的整个过程。

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

生命周期的每个阶段

当页面加载完成之后，发送ajax请求，获取数据。使页面加载完毕后就有数据看

在data、methods平级的位置创建钩子函数

只需记住这一个生命周期函数即可

javascript 复制代码

mounted() {
          //页面加载完成之后，发送ajax请求，获取数据。使页面加载完毕后就有数据看
          this.search();
        },

第2章 前端Web基础（js、vue+Ajax）

一、JavaScript课程介绍

二、核心语法

1、引入方式

（1）内部脚本

（2）外部脚本

2、变量和常量

3、输出语句

4、数据类型

(1)基本数据类型

(2）模板字符串语法

5、函数

（1）具名函数

（2）匿名函数

5、自定义对象

6、JSON

7、DOM

三、事件监听

1、语法

2、常见事件

3、常见事件（优化-JS模块化）

四、Vue介绍

五、Vue快速入门

六、Vue常用指令

1、-v-for

2、-v-bind

3、-v-if与-v-show

4、-v-model与-v-on

七、Ajax入门

1、Ajax

2、Axios

（1）普通请求方式

（2）请求方式别名（推荐）

八、Ajax案例-动态加载数据

九、Ajax案例-页面加载前查询（Vue生命周期）

第2章前端Web基础（js、vue+Ajax）