node连接mysql生成接口，vue通过接口实现数据的增删改查（二）

因为个人问题，耽误了文章的更新，实在抱歉。

本篇继续上篇，上篇讲述了如何写接口，本篇讲解如何调用接口。

在vue中，请求接口使用axios，类似于js中的ajax。axios请求分get和post，简单讲解一下用法。

这里提供一下数据，有需要的小伙伴复制使用

axios_demo.sql

 

 

一、数据的请求方式：

GET请求：

1 axios.get('接口地址').then(res =>{
2 　　let data = res.data; // 接口读到的数据(获取方式并不固定)
3 }).catach(err =>{
4 　　console.log(err);
5 })

POST请求：

 1 this.$axios.post(
 2   '接口地址',
 3   {
 4     '接口参数'
 5   }
 6 ).then(res => {
 7   console.log('请求成功')
 8 }).catch(err =>{
 9   console.log('请求失败');
10 })

上篇讲到，我们已生成接口并请求成功，所以现在开始请求接口。接口为：http://localhost:3000/api/Stu/showStu。如图1所示。

图1  请求信息图

 界面如图2所示

图2 学生信息图

代码如下：

1 // 查询全部数据
2     showStu () {
3       let data = []
4       this.$axios.get(this.IP+'showStu').then(res => {
5         data = res.data
6         this.showData = data.sort((a, b) => a.stu_Id - b.stu_Id) // id升序排列
7       })
8     },

获取到数据了，接下来就是对数据的增删改查了，第一步对数据进行添加

二、数据的操作：

前提：如果小伙伴看完第一章，知道接口的制作后，可进行下面阅读，不然会云里雾里的。

2.1、数据的添加：

 原理简介：点击“添加”按钮，跳出弹窗，输入数据，点击“确定”，如果数据不为空，则调用 “添加数据” 的接口，数据添加成功，反之提醒数据不能为空。

图3 调用添加数据图

　代码如下：

 

2.2、数据的删除：

 原理简介：删除数据时，根据id进行删除，所以调用接口时，只需要传入id就行。如图4调用删除数据接口图所示

图4 调用删除数据接口图

 代码如下：

 

2.3、数据的修改：

 原理简介：修改数据时，选中该行，点击修改时将数据传给弹窗，修改完成后点击确定按钮，从而调用修改数据的接口。如图5调用修改数据接口图所示

图5 调用修改数据接口图 

  代码如下：

 

以上就说了增删改查4个接口的调用，调用查询接口时，涉及关键字高亮，所以就不在这里展开了，具体代码感兴趣的朋友可以点赞向我获取