Vue网络请求

原创

代码天才TTT

发布于 2023-08-01 14:38:36

6790

发布于 2023-08-01 14:38:36

文章被收录于专栏：iOS资源

一、网络请求概述

1.1、简介

我们视图上的数据最终都是来源于数据库的，那就意味着项目不可避免的需要发送请求到后端，将数据获取出来并渲染到视图上。而关于发送网络请求方式有很多中，那么在Vue中该如何选择呢？

1.2、网络请求的方式

==Ajax：== 传统的Ajax是基于XMLHttpRequest(XHR)，配置和调用方式等非常混乱所以真实开发中很少直接使用，而是使用jQurey-Ajax ，也就是==原生态ajax的方式。==
==jQurey-Ajax：==在Vue的整个开发中都不需要使用jQuery了，所以我们不会为了一个网络请求，就引进jQuery`。
==Fetch：== 就是 ajax + Promise. 使用的方式和 jquery 提供的 $.ajax() 差不多
==Vue-resource：==官方在Vuel.x的时候就推出了Vue-resource，它的体积比jQuery小很多，在Vue2.0推出后，Vue的作者决定去掉Vue-resource`，并且以后再也不会更新，所以使用它对项目的开发和维护存在很大的隐患。
==axios：官方推荐使用==

1.3、axios的功能特点

基于promise，用于浏览器和node.js的http客户端
支持浏览器和node.js
支持PromiseAPI
能拦截请求和响应
自动转换JSON数据
能转换请求和响应数据

二、axios使用环境准备

2.1、使用脚手架创建项目

第一步

定位到D:\dev\project\webpack目录，打开控制台输入创建项目的命令：vue create 项名称

vue create vue-axios

第二步

选择默认配置还是自定义手动配置，这里选择【自定义手动配置】：

第三步

选择项目需要的功能，此处选择默认即可，什么都不用装。

第四步

选择如何存放配置，这里选择第二个：

第五步

等待创建项目，稍等一会儿之后，就创建完成了。

第六步

打开D:\dev\project\webpack\vue_axios目录，定位到vue_axios目录，输入命令：npm run serve

第七步

在浏览器上输入地址：http://localhost:8080，即可打开Vue的网页说明安装成功。

2.2、把项目整理一下

说明：使用脚手架创建好项目之后，会自动生成一些额外的代码，为了看起来更加清爽，删除掉一些不必要的内容。

2.2.1、HelloWorld.vue删除

把`components`文件夹下的`HelloWorld.vue`删除。

2.2.2、App.vue改写

把`App.vue`中原有的内容全部删掉，改写成自己的内容。代码如下：

<template>
    <div>
        HelloWorld,axios
    </div>
</template>

<script>
    export default {
        name: 'App'
    }
</script>

<style>

</style>

2.2.3、运行该项目

打开`D:\dev\project\webpack\vue_axios`目录，定位到`vue_axios`目录，输入命令：`npm run serve`

浏览器地址栏中输入：`http://localhost:8080`，效果如下：

2.2.4、其他说明

对于项目中的其他文件，暂且就不改了，可以查看一下默认创建好的文件内容。

2.2.5、整个目录结构如下

三、后台环境

3.1、说明

使用SpringBoot搭建的项目环境

项目位置：`F:\书稿笔记\Vue笔记\springboot-vue`  。

项目端口号：9090

3.2、测试

浏览器地址栏输入：`http://localhost:9090/queryAll?empName=刘建伟`

四、axios入门案例

4.1、安装

定位到`D:\dev\project\webpack`目录，打开刚刚创建好的`vue-axios`文件夹，打开`cmd`输入命令：

npm install axios --save

4.2、在main.js文件中发送网络请求

打开`main.js`文件，`import`引入`axios`，并实现网络请求的发送。

import axios from "axios";
axios({
  url: "http://localhost:9090/queryAll",
  params: {
    empName: '刘建伟'
  }
}).then((resp)=>{
  console.log(resp);
})

说明：

==默认是get请求==
==有跨域请求==
==axios()函数返回值是Promise对象，所以可以then==

4.3、有跨域请求？

4.3.1、运行

浏览器地址栏输入：`http://localhost:8080`运行之后，打开浏览器控制台，就可以看到报错信息。

4.3.2、后台解决跨域问题

只需要加一个注解就可以了。

4.3.3、再次运行

五、axios处理并发请求

5.1、说明

实际工作中，经常有遇到一个页面初始需要多个请求的情况，在多个请求都完成后再执行一些逻辑。或者说：如果我们需要在两个接口同时完成后，然后在执行一些逻辑，该如何做呢？

此时就可以使用`axios.all()`方法和`axios.spread()`两个辅助函数用于处理同时发送多个请求。需要注意的是：该方法是axios的静态方法，不是axios实例的方法！

5.2、语法

axios.all([])  //数组中可以放入多个请求，返回的结果是一个数组。

axios.spread(func); // 参数是一个函数func，而func函数又接收多个参数，每个参数就是多个请求响应后的每个响应结果。

5.3、案例

打开`main.js`文件，`import`引入`axios`，并实现网络请求的发送。

import axios from "axios";

axios.all([
    axios({
        url: "http://localhost:9090/queryAll",
        params: {
            empName: '刘建伟'
        }
    }),
    axios({
        url: "http://localhost:9090/queryById?id=1"
    })
]).then((resps)=>{
  console.log(resps);
})

5.4、运行

5.5、对于响应结果的另一种写法

使用`axios.spread`实现请求展开。

打开`main.js`文件，`import`引入`axios`，并实现网络请求的发送。

import axios from "axios";

axios.all([
    axios({
        url: "http://localhost:9090/queryAll",
        params: {
            empName: '刘建伟'
        }
    }),
    axios({
        url: "http://localhost:9090/queryById?id=1"
    })
]).then(axios.spread((resp1,resp2)=>{
    console.log(resp1);
    console.log(resp2);
}))

5.6、结果演示

六、全局配置

6.1、概念

在开发中可能很多参数都是固定的，这时候我们可以进行一些抽取，可以利用`axios`做一些全局配置。比如：以下图为例，每次发送请求都是写固定不变的`http://localhost:9090`，每次这么写，很麻烦，所以我们可以对这个部分进行抽取。形成全局配置。

全局配置语法：

axios.defaults.配置项 = 值

6.2、需求

6.2.1、说明

把公共的url路径给抽取出来，形成公共配置。	代码实现：

axios.defaults.baseURL = "http://localhost:9090";

6.2.2、具体实现

在`main.js`文件中

import axios from "axios";

// 抽取公共的url配置
axios.defaults.baseURL = "http://localhost:9090";

axios.all([
    axios({
        url: "/queryAll",
        params: {
            empName: '刘建伟'
        }
    }),
    axios({
        url: "/queryById?id=1"
    })
]).then(axios.spread((resp1,resp2)=>{
    console.log(resp1);
    console.log(resp2);
}))

6.2.4、测试

6.3、需求2

6.3.1、说明

实现超时的全局配置

6.3.2、具体实现

在`main.js`文件中实现全局配置

import axios from "axios";

// 抽取公共的url配置
axios.defaults.baseURL = "http://localhost:9090";

// 抽取公共的超时配置
axios.defaults.timeout = 5000;

axios.all([
    axios({
        url: "/queryAll",
        params: {
            empName: '刘建伟'
        }
    }),
    axios({
        url: "/queryById?id=1"
    })
]).then(axios.spread((resp1,resp2)=>{
    console.log(resp1);
    console.log(resp2);
}))

七、使用axios的实例

7.1、说明

说明之前的`axios`请求都是使用的全局对象，有时候我们需要这样的场景（当然这种场景主要是应用在分布式系统里面）：

比如说有些接口的地址的域名是：http://192.168.0.123

又比如说有些接口的地址的域名是：http://192.168.1.45等等

那么此时，我们项目中的请求路径baseURL就可能就是多个了，或者说不能全局配置了。该 如何做呢？

解决方案：此时可以针对不同接口地址的域名分别使用`axios`，此时就可以创建`axios`的实例。

7.2、创建多个实例

7.2.1、说明

对于不同的接口地址域名，创建不同的`axios`实例。【说明：此处仅仅是演示，我们的接口地址还是一样的。】

7.2.2、具体实现

在`main.js`文件中去实现

import axios from "axios";

// 创建实例1--axios实例
const instance1 = axios.create({
    baseURL: "http://localhost:9090",
    timeout: 5000
});

instance1({
    url: "/queryAll",
    params: {
        empName: '刘建伟'
    }
}).then((resp)=>{
    console.log(resp);
});

// 创建实例2
const instance2 = axios.create({
    baseURL: "http://localhost:9090",
    timeout: 6000
});

instance2({
    url: "/queryById?id=3",
}).then((resp)=>{
    console.log(resp);
})

7.2.3、运行及效果

打开`D:\dev\project\webpack\vue_axios`目录，定位到`vue_axios`目录，输入命令：`npm run serve`

八、axios模块封装

8.1、说明

可以想象，之后的项目一定是多组件化的项目，那么每个组件都需要动态获取数据，也就是要发送`axios`请求，那么就意味着每个组件都会有这样的代码：

如下，在`components`目录中去创建一个组件，叫`HelloAxios.vue` ，代码如下：

<template>
    <div>
        <ul>
            <li v-for="item in persons">
                {{item.id}}--{{item.empName}}
            </li>
        </ul>
    </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "HelloAxios",
        data: function(){
            return {
                persons: []
            }
        },
        // 生命周期
        created() {
            axios({
                url: "http://localhost:9090/queryAll"
            }).then(resp=>{
                this.persons = resp.data.data;
            });
        }
    }
</script>
<style scoped>
</style>

8.2、问题解决

8.2.1、说明

对于`8.1`的说明，如果每个组件在它的声明周期函数`created`中去发送`axios`请求，虽然是可以的，但是对于将来会埋藏一个隐患，假如之后我们不再使用`axios`，那么就意味着你的每个组件都需要重新修改，显然是不可取的，针对这个问题，我们可以对`axios`进行封装。

8.2.2、第一步

在`src`目录下创建`axios`目录，并且在该目录下，创建`request.js`文件，对`axios`进行封。

import axios from "axios";

// get请求
let get = function(url,params){
    let instance = axios.create({
        baseURL: "http://localhost:9090",
        timeout: 6000
    });
    return instance({
        url,
        params
    });
}

// post请求
let post = function (config) {
    // 省略
}

export {
    get,
    post
};

8.2.3、第二步：在HelloAxios组件中去使用封装好的模块

<template>
    <div>
        <ul>
            <li v-for="item in persons">
                {{item.id}}--{{item.empName}}
            </li>
        </ul>
    </div>
</template>

<script>
    import {get} from "../axios/request";

    export default {
        name: "HelloAxios",
        data: function(){
            return {
                persons: []
            }
        },
        // 生命周期
        created() {
            let params = {empName: '刘建伟'};
            get("/queryAll",params).then(resp=>{
                console.log(resp);
            })
        }
    }
</script>

<style scoped>
</style>

8.2.4、第三步

在`App.vue`组件中去引用`HelloAxios.vue`组件。

<template>
  <div>
      HelloWorld,axios
      <hello-axios></hello-axios>
  </div>
</template>

<script>
    import HelloAxios from "./components/HelloAxios";
    export default {
        name: 'App',
        components: {HelloAxios},
        HelloAxios
    }
</script>

<style>
</style>

8.2.5、运行及效果

打开`D:\dev\project\webpack\vue_axios`目录，定位到`vue_axios`目录，输入命令：`npm run serve`

九、拦截器

9.1、概述

axios里面可以设置拦截器 ，可以在我们正式请求发送之前或者响应之后做一些事情。比如说，在请求发送之前，设置`Headers`信息；在请求发送之前，判断用户是否携带`Token`等。换句话说，使用拦截器可以在我们真正要做业务处理的时候，前置的做一些事情，或者业务处理完毕之后，后置的做一些事情。

9.2、拦截器分类

请求拦截器

instance.interceptors.request.use(function(config){

  // 请求成功之前

},function(error){

  // 请求失败之前

});

响应拦截器

instance.interceptors.response.use(function(config){

  // 响应成功之后

},function(error){

  // 响应失败之后

});

9.3、案例：Token认证方式

9.3.1、需求

我们去完成某些业务功能的时候，有时候用户必须是已经登录的状态，比如说查看用户的订单，购物车等信息。系统如何知道当前用户是否已经是登录状态的呢？一般来说，使用的是Token机制。当用户要去访问功能的时候，必须携带Token，比如说，形如是这样的：`http://localhost:8080/shop?token=abc12ytx`  。那么问题来了，如果每个请求都要求加上Token，难道我们每次都人工的拼接吗？显然是太麻烦了，此时**==拦截器就派上用场了，使用拦截器使Token自动增加。==**

9.3.2、代码模拟实现

在`src/axios`目录下，打开`request.js`文件，模拟实现`Token`的使用。

import axios from "axios";

// get请求
let get = function(url,params){
    let instance = axios.create({
        baseURL: "http://localhost:9090"
    });
    instance.interceptors.request.use(function(config){

        // 再发送请求之前获取localStorage是否存储了Token
        let token = localStorage.getItem("token");
        if (token){
            // 如果Token存在,则在请求中添加Token参数
            config.headers['Authorization'] = token;
        }
        return config;
    },function(error){
        console.log(error);
    });

    return instance({
        url,
        params
    });
}

// post请求
let post = function (config) {
    // 省略
}

export {
    get,
    post
};

十、发送GET请求

10.1、情况一：不传递参数

10.1.1、代码实现

打开`main.js`文件，实现发送GET请求。

import axios from "axios";

axios.get("http://localhost:9090/queryAllNoParams")
     .then(resp=>{
       console.log("==");
       console.log(resp.data);
       console.log("--");
     });

10.1.2、后端

@RequestMapping("/queryAllNoParams")
@ResponseBody
public ResponseResult queryAllNoParams(){
    List<Employee> employees = employeeMapper.selectAll(null);

    ResponseResult result = new ResponseResult();
    result.setCode(200);
    result.setMessage("success");
    result.setData(employees);

    return result;
}

10.2、情况二：传递参数

10.2.1、方式一：url路径后直接拼接

10.2.1.1、代码实现

import axios from "axios";

axios.get("http://localhost:9090/queryById?id=2")
     .then(resp=>{
       console.log(resp.data);
     });

10.2.1.2、后端

@RequestMapping("/queryById")
@ResponseBody
public ResponseResult queryById(Integer id){
    Employee employee = employeeMapper.selectById(id);

    ResponseResult result = new ResponseResult();
    result.setCode(200);
    result.setMessage("success");
    result.setData(employee);

    return result;
}

10.2.2、方式二：restful方式

10.2.2.1、代码实现

import axios from "axios";

axios.get("http://localhost:9090/queryByIdForRestful/2")
     .then(resp=>{
       console.log(resp.data);
     });

10.2.2.2、后端

@RequestMapping("/queryByIdForRestful/{id}")
@ResponseBody
public ResponseResult queryByIdForRestful(@PathVariable("id") Integer id){
    Employee employee = employeeMapper.selectById(id);

    ResponseResult result = new ResponseResult();
    result.setCode(200);
    result.setMessage("success");
    result.setData(employee);

    return result;
}

10.2.3、方式三：params对象

10.2.3.1、代码实现

import axios from "axios";

axios.get("http://localhost:9090/queryById",{
              params: {
                  id: 2
              }
         })
     .then(resp=>{
       console.log("=###");
       console.log(resp.data);
       console.log("--");
});

10.2.3.2、后端

@RequestMapping("/queryById")
@ResponseBody
public ResponseResult queryById(Integer id){
    Employee employee = employeeMapper.selectById(id);

    ResponseResult result = new ResponseResult();
    result.setCode(200);
    result.setMessage("success");
    result.setData(employee);

    return result;
}

十一、发送POST请求

11.1、传递参数方式一

11.1.1、代码实现

import axios from "axios";

// 直接传递对象
axios.post("http://localhost:9090/save",{
             "empName": '小王',
             "email": 'wang@163.com'
          })
     .then(resp=>{
       console.log(resp.data);
     });

11.1.2、后端

@RequestMapping("/save")
@ResponseBody
public Employee save(@RequestBody Employee employee){		// @RequestBody不能丢

    System.out.println(employee.getEmpName());
    System.out.println(employee.getEmail());

    return employee;
}

11.1.3、总结

**==直接传递对象的话，axios会自动把参数封装成json对象进行传递。==**

11.2、传递参数方式二：使用URLSearchParams

11.2.1、代码实现

let params = new URLSearchParams();
params.append("empName" , "小红");
params.append("email" , 'hong@126.com');

axios.post("http://localhost:9090/add",params)
     .then(resp=>{
       console.log(resp.data);
     });

11.2.2、后端

@RequestMapping("/add")
@ResponseBody
public Employee add(Employee employee){

    System.out.println(employee.getEmpName());
    System.out.println(employee.getEmail());

    return employee;
}

11.2.3、总结

**==使用URLSearchParams传递，其实本质就是和表单提交是一样的，采用的是application/x-www-form-urlencode。==**

十二、async和await用法

11.1、说明

async和await是ES7引入的新的语法，目的是可以更加方便的进行异步编程。
async作为一个关键字放到函数前面

任何一个async函数都会隐式返回一个promise实例对象。

await关键字只能在使用async定义的函数中使用
await后面可以直接跟一个 Promise实例对象，await可以得到异步的结果(then)
async/await 让异步代码看起来、表现起来更像同步代码

11.2、代码改造方式一

import axios from "axios";

async function queryData(){
    let resp = await axios.get("http://localhost:9090/queryAllNoParams");
    console.log(resp.data);
}

queryData();

11.3、代码改造方式二

import axios from "axios";

async function queryData(){
    let resp = await axios.get("http://localhost:9090/queryAllNoParams");
    return resp;
}

queryData().then(resp=>{
  console.log(resp);
});

十三、员工管理案例

13.1、说明

还是借助于之前创建好的`vue-axios`项目，把之前的代码全部清空，保留一个最干净的项目。

13.2、实现员工列表功能

13.2.1、创建员工组件

在`src`目录下新建`components`文件夹，在该文件夹下新建`ShowEmployeeList.vue`，代码如下：

<template>
    <div>
        <table border="1px">
            <tr>
                <td>id</td><td>员工姓名</td><td>邮箱</td><td>性别</td><td>操作</td>
            </tr>
            <tr v-for="emp in employees">
                <td>{{emp.id}}</td>
                <td>{{emp.empName}}</td>
                <td>{{emp.email}}</td>
                <td>{{emp.sex}}</td>
                <td>
                    <a href="">删除</a>&nbsp;|&nbsp;
                    <a href="">修改</a>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
  	// 1、导入axios
    import axios from "axios";
  
    export default {
        name: "ShowEmployeeList",
        data: function(){
            return {employees: []}
        },
      	
      	// 2、生命周期函数
        mounted() {
          	// 3、发送get请求，获取员工列表数据
            axios.get("http://localhost:9090/queryAll").then(resp=>{
                if (resp && resp.data){
                    console.log(resp.data.data);
                    this.employees = resp.data.data;
                }
            });
        }
    }
</script>

<style scoped>
</style>

13.2.2、应用组件

在`App.vue`组件中去应用组件，代码如下：

<template>
  <div>
      <show-employee-list></show-employee-list>
  </div>
</template>

<script>
    import ShowEmployeeList from "./components/ShowEmployeeList";
    export default {
        name: 'App',
        components: {
            ShowEmployeeList
        }
    }
</script>

<style>
</style>

13.2.3、运行效果

打开`D:\dev\project\webpack\vue_axios`目录，定位到`vue_axios`目录，输入命令：`npm run serve`。

13.2.4、访问请求优化

思路：采用`async`和`await`实现代码优化。打开`ShowEmployeeList.vue`组件，代码如下：

<template>
    <div>
        <table border="1px">
            <tr>
                <td>id</td><td>员工姓名</td><td>邮箱</td><td>性别</td><td>操作</td>
            </tr>
            <tr v-for="emp in employees">
                <td>{{emp.id}}</td>
                <td>{{emp.empName}}</td>
                <td>{{emp.email}}</td>
                <td>{{emp.sex}}</td>
                <td>
                    <a href="">删除</a>&nbsp;|&nbsp;
                    <a href="">修改</a>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
    import axios from "axios";
    export default {
        name: "ShowEmployeeList",
        data: function(){
            return {employees: []}
        },
        methods: {
            async queryAll(){
                let resp = await axios.get("http://localhost:9090/queryAll");
                this.employees = resp.data.data;
            }
        },
        mounted() {
            this.queryAll();
        }
    }
</script>

<style scoped>
</style>

13.3、实现员工添加功能

13.3.1、新增input框并实现双向绑定

姓名：<input type="text" v-model="empName"><br/>
邮箱：<input type="text" v-model="email"><br/>
性别：<input type="text" v-model="sex"><br/>
<button @click="add">添加员工</button>

data: function(){
     return {
         employees: [],
         empName: "",
         email: "",
         sex: ""
     }
}

13.3.2、实现保存功能

13.3.2.1、写法一

methods: {
    add(){
        axios.post("http://localhost:9090/save",{
            empName: this.empName,
            email: this.email,
            sex: this.sex
        }).then(resp=>{
           // 添加成功，则再去查询一个列表数据
           this.queryAll();
        });
    }
}

13.3.2.2、写法二

methods: {
    async add(){
        // 发送请求
        await axios.post("http://localhost:9090/save",{
            empName: this.empName,
            email: this.email,
            sex: this.sex
        })
        // 查询列表数据
        this.queryAll();
    }
}

13.3.3、完整代码如下

打开`ShowEmployeeList.vue`组件，完整代码如下：

<template>
    <div>

        姓名：<input type="text" v-model="empName"><br/>
        邮箱：<input type="text" v-model="email"><br/>
        性别：<input type="text" v-model="sex"><br/>
        <button @click="add">添加员工</button>

        <table border="1px">
            <tr>
                <td>id</td><td>员工姓名</td><td>邮箱</td><td>性别</td><td>操作</td>
            </tr>
            <tr v-for="emp in employees">
                <td>{{emp.id}}</td>
                <td>{{emp.empName}}</td>
                <td>{{emp.email}}</td>
                <td>{{emp.sex}}</td>
                <td>
                    <a href="">删除</a>&nbsp;|&nbsp;
                    <a href="">修改</a>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
    import axios from "axios";
    export default {
        name: "ShowEmployeeList",
        data: function(){
            return {
                employees: [],
                empName: "",
                email: "",
                sex: ""
            }
        },
        methods: {
            async add(){
                // 发送请求
                await axios.post("http://localhost:9090/save",{
                    empName: this.empName,
                    email: this.email,
                    sex: this.sex
                })
                // 查询列表数据
                this.queryAll();
            },
            async queryAll(){
                let resp = await axios.get("http://localhost:9090/queryAll");
                this.employees = resp.data.data;
            }
        },
        mounted() {
            this.queryAll();
        }
    }
</script>

<style scoped>
</style>

13.3.4、运行效果演示

打开D:\dev\project\webpack\vue_axios目录，定位到vue_axios目录，输入命令：npm run serve。

13.4、添加员工同时判断是否存在相同的员工名

13.4.1、定义一个变量动态判断添加按钮是否可用

data: function(){
   	return {
        employees: [],
        empName: "",
        email: "",
        sex: "",
        isAdd: true // 该变量是判断添加按钮是否可用
    }
}

13.4.2、设置监听器，去监听员工姓名

watch: {
    async empName(value){
        let resp = await axios.get("http://localhost:9090/validateEmpNameIsExists",{
            params: {
                empName: value
            }
        });
        if (resp.data){
            // 为true,则表示存在，
            this.isAdd = true;
        }else{
            this.isAdd = false;
        }
    }
}

13.4.3、完整代码

打开`ShowEmployeeList.vue`组件，完整代码如下：

<template>
    <div>

        姓名：<input type="text" v-model="empName"><br/>
        邮箱：<input type="text" v-model="email"><br/>
        性别：<input type="text" v-model="sex"><br/>
        <button @click="add" :disabled="isAdd">添加员工</button>

        <table border="1px">
            <tr>
                <td>id</td><td>员工姓名</td><td>邮箱</td><td>性别</td><td>操作</td>
            </tr>
            <tr v-for="emp in employees">
                <td>{{emp.id}}</td>
                <td>{{emp.empName}}</td>
                <td>{{emp.email}}</td>
                <td>{{emp.sex}}</td>
                <td>
                    <a href="">删除</a>&nbsp;|&nbsp;
                    <a href="">修改</a>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
    import axios from "axios";
    export default {
        name: "ShowEmployeeList",
        data: function(){
            return {
                employees: [],
                empName: "",
                email: "",
                sex: "",
                isAdd: true
            }
        },
        watch: {
            async empName(value){
                let resp = await axios.get("http://localhost:9090/validateEmpNameIsExists",{
                    params: {
                        empName: value
                    }
                });
                if (resp.data){
                    // 为true,则表示存在，
                    this.isAdd = true;
                }else{
                    this.isAdd = false;
                }
            }
        },
        methods: {
            async add(){
                // 发送请求
                await axios.post("http://localhost:9090/save",{
                    empName: this.empName,
                    email: this.email,
                    sex: this.sex
                })
                // 查询列表数据
                this.queryAll();
            },
            async queryAll(){
                let resp = await axios.get("http://localhost:9090/queryAll");
                this.employees = resp.data.data;
            }
        },
        mounted() {
            this.queryAll();
        }
    }
</script>

<style scoped>
</style>

13.5、编辑员工信息

13.5.1、数据回显

新增id

id：<input type="text" v-model="id">

为修改超链接添加事件

事件代码如下：

methods: {

          async toEditUI(id){

              let resp = await axios.get("http://localhost:9090/queryById?id="+id);

              let emp = resp.data.data;

              this.empName = emp.empName;

              this.email = emp.email;

              this.sex = emp.sex;

              this.id = id;

}

13.5.2、数据修改

新增一个修改员工按钮

修改

methods: {

  async update(){

      await axios.post("http://localhost:9090/update",{

          empName: this.empName,

          email: this.email,

          sex: this.sex,

          id: this.id

});

      // 再次查询全部数据

      this.queryAll();

}

13.5.3、完整代码如下

<template>
    <div>

        id：<input type="text" v-model="id"><br/>
        姓名：<input type="text" v-model="empName"><br/>
        邮箱：<input type="text" v-model="email"><br/>
        性别：<input type="text" v-model="sex"><br/>
        <button @click="add" :disabled="isAdd">添加员工</button>
        <button @click="update">修改员工</button>

        <table border="1px">
            <tr>
                <td>id</td><td>员工姓名</td><td>邮箱</td><td>性别</td><td>操作</td>
            </tr>
            <tr v-for="emp in employees">
                <td>{{emp.id}}</td>
                <td>{{emp.empName}}</td>
                <td>{{emp.email}}</td>
                <td>{{emp.sex}}</td>
                <td>
                    <a href="">删除</a>&nbsp;|&nbsp;
                    <a href="" @click.prevent="toEditUI(emp.id)">修改</a>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
    import axios from "axios";
    export default {
        name: "ShowEmployeeList",
        data: function(){
            return {
                employees: [],
                empName: "",
                email: "",
                sex: "",
                id: "",
                isAdd: true
            }
        },
        watch: {
            async empName(value){
                let resp = await axios.get("http://localhost:9090/validateEmpNameIsExists",{
                    params: {
                        empName: value
                    }
                });
                if (resp.data){
                    // 为true,则表示存在，
                    this.isAdd = true;
                }else{
                    this.isAdd = false;
                }
            }
        },
        methods: {
            async update(){
                await axios.post("http://localhost:9090/update",{
                    empName: this.empName,
                    email: this.email,
                    sex: this.sex,
                    id: this.id
                });
                // 再次查询全部数据
                this.queryAll();
            },
            async toEditUI(id){
                let resp = await axios.get("http://localhost:9090/queryById?id="+id);
                let emp = resp.data.data;
                this.empName = emp.empName;
                this.email = emp.email;
                this.sex = emp.sex;
                this.id = id;
            },
            async add(){
                // 发送请求
                await axios.post("http://localhost:9090/save",{
                    empName: this.empName,
                    email: this.email,
                    sex: this.sex
                })
                // 查询列表数据
                this.queryAll();
            },
            async queryAll(){
                let resp = await axios.get("http://localhost:9090/queryAll");
                this.employees = resp.data.data;
            }
        },
        mounted() {
            this.queryAll();
        }
    }
</script>

<style scoped>
</style>

13.5.4、运行效果如下

打开D:\dev\project\webpack\vue_axios目录，定位到vue_axios目录，输入命令：npm run serve。

13.6、删除员工

13.6.1、为删除超链接绑定事件

<a href="" @click.prevent="deleteById(emp.id)">删除</a>

13.6.2、实现deleteById事件

methods: {
    async deleteById(id){
        await axios.get("http://localhost:9090/deleteById",{
            params: {
                id: id
            }
        });
        // 再次查询
        this.queryAll();
    }
}

13.6.3、完整代码

<template>
    <div>

        id：<input type="text" v-model="id"><br/>
        姓名：<input type="text" v-model="empName"><br/>
        邮箱：<input type="text" v-model="email"><br/>
        性别：<input type="text" v-model="sex"><br/>
        <button @click="add" :disabled="isAdd">添加员工</button>
        <button @click="update">修改员工</button>

        <table border="1px">
            <tr>
                <td>id</td><td>员工姓名</td><td>邮箱</td><td>性别</td><td>操作</td>
            </tr>
            <tr v-for="emp in employees">
                <td>{{emp.id}}</td>
                <td>{{emp.empName}}</td>
                <td>{{emp.email}}</td>
                <td>{{emp.sex}}</td>
                <td>
                    <a href="" @click.prevent="deleteById(emp.id)">删除</a>&nbsp;|&nbsp;
                    <a href="" @click.prevent="toEditUI(emp.id)">修改</a>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
    import axios from "axios";
    export default {
        name: "ShowEmployeeList",
        data: function(){
            return {
                employees: [],
                empName: "",
                email: "",
                sex: "",
                id: "",
                isAdd: true
            }
        },
        watch: {
            async empName(value){
                let resp = await axios.get("http://localhost:9090/validateEmpNameIsExists",{
                    params: {
                        empName: value
                    }
                });
                if (resp.data){
                    // 为true,则表示存在，
                    this.isAdd = true;
                }else{
                    this.isAdd = false;
                }
            }
        },
        methods: {
            async deleteById(id){
                await axios.get("http://localhost:9090/deleteById",{
                    params: {
                        id: id
                    }
                });
                // 再次查询
                this.queryAll();
            },
            async update(){
                await axios.post("http://localhost:9090/update",{
                    empName: this.empName,
                    email: this.email,
                    sex: this.sex,
                    id: this.id
                });
                // 再次查询全部数据
                this.queryAll();
            },
            async toEditUI(id){
                let resp = await axios.get("http://localhost:9090/queryById?id="+id);
                let emp = resp.data.data;
                this.empName = emp.empName;
                this.email = emp.email;
                this.sex = emp.sex;
                this.id = id;
            },
            async add(){
                // 发送请求
                await axios.post("http://localhost:9090/save",{
                    empName: this.empName,
                    email: this.email,
                    sex: this.sex
                })
                // 查询列表数据
                this.queryAll();
            },
            async queryAll(){
                let resp = await axios.get("http://localhost:9090/queryAll");
                this.employees = resp.data.data;
            }
        },
        mounted() {
            this.queryAll();
        }
    }
</script>

<style scoped>
</style>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js

网络安全

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js

网络安全