因為個人問題，耽誤了文章的更新，實在抱歉。

本篇繼續上篇，上篇講述瞭如何寫介面，本篇講解如何呼叫介面。

在vue中，請求介面使用axios，類似於js中的ajax。axios請求分get和post，簡單講解一下用法。

這裡提供一下資料，有需要的小夥伴複製使用

axios_demo.sql

# Host: localhost  (Version: 5.5.53)
# Date: 2020-04-08 15:42:51
# Generator: MySQL-Front 5.3  (Build 4.234)

/*!40101 SET NAMES utf8 */;

#
# Structure for table
 
 "axios_demo"
#

CREATE TABLE `axios_demo` (
  `stu_Id` int(11) NOT NULL AUTO_INCREMENT,
  `stu_name` varchar(255) DEFAULT NULL,
  `stu_sex` varchar(255) DEFAULT NULL,
  `stu_college` varchar(255) DEFAULT NULL,
  `stu_class` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`stu_Id`)
) ENGINE=MyISAM AUTO_INCREMENT=
 
2015807108 DEFAULT CHARSET=utf8;

#
# Data for table "axios_demo"
#

INSERT INTO `axios_demo` VALUES (2015101101,'王三男','男','農學院','園林15（1）班'),(2015307101,'王思楠','男','工程學院','土木15（1）班'),(2015407101,'王沂南','男','電氣與資訊學院','計算機15（1）班'),(2015407102,'王耳女','女','電氣與資訊學院','計算機15（1）班'),(2015507121,'王五女','女','人文與生命科技學院','生技15（1）班'),(2015607101
 
,'王六女','女','會計學院','會計15（1）班'),(2015707121,'王七男','男','經濟管理學院','經管15（1）班'),(2015807102,'王八男','男','理學院','信計15（1）班'),(2015807105,'1','1','1','1'),(2015807107,'2','2','2','2');

一、資料的請求方式：

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 呼叫新增資料圖

　程式碼如下：

// 新增資料
      addStu() {
        const stu_name = this.stu_name // 雙向繫結，把輸入框裡的值傳給介面
        const stu_sex = this.stu_sex
        const stu_college = this.stu_college
        const stu_class = this.stu_class
        if (stu_name === '' && stu_sex === '' && stu_college === '' && stu_class === '') {
          alert('資料不能為空，至少填一項')
          return true
        } else {
          this.$axios.post(
            this.IP + 'addStu', {
              stu_name: stu_name,
              stu_sex: stu_sex,
              stu_college: stu_college,
              stu_class: stu_class
            }
          ).then(response => {
            this.showStu()
          })
        }
        this.showAdd = false
      }

2.2、資料的刪除：

原理簡介：刪除資料時，根據id進行刪除，所以呼叫介面時，只需要傳入id就行。如圖4呼叫刪除資料介面圖所示

圖4 呼叫刪除資料介面圖

程式碼如下：

 1 // 刪除前的判斷，根據confirm的確認和取消，如果點選確認，則把id傳給delStu()
 2       isDel(e) {
 3         let res = confirm("確認刪除嗎？");
 4         if (res == true) {
 5           this.popstu_Id = e
 6           this.delStu(e)
 7         } else {}
 8       },
 9 
10       // 刪除資料，通過isDel()傳過來id進行刪除
11       delStu(e) {
12         this.visible = false
13         const stu_Id = e
14         this.$axios
15           .post(
16             this.IP + 'delStu', {
17               stu_Id: stu_Id
18             }
19           )
20           .then(response => {
21             this.showStu()
22           })
23       },

2.3、資料的修改：

原理簡介：修改資料時，選中該行，點選修改時將資料傳給彈窗，修改完成後點選確定按鈕，從而呼叫修改資料的介面。如圖5呼叫修改資料介面圖所示

圖5 呼叫修改資料介面圖

程式碼如下：

 1 // 臨時儲存修改的值，傳到彈出層，供 updateStu()呼叫
 2       toData(e) {
 3         this.showUpdate = true
 4         this.popstu_Id = e.stu_Id
 5         this.popstu_name = e.stu_name
 6         this.popstu_sex = e.stu_sex
 7         this.popstu_college = e.stu_college
 8         this.popstu_class = e.stu_class
 9       },
10 
11       // 修改資料，在彈出層呼叫toData()裡的資料
12       updateStu() {
13         this.$axios.post(
14             this.IP + 'updateStu', {
15               stu_Id: this.popstu_Id,
16               stu_name: this.popstu_name,
17               stu_sex: this.popstu_sex,
18               stu_college: this.popstu_college,
19               stu_class: this.popstu_class
20             }
21           )
22           .then(response => {
23             this.showStu()
24           })
25         this.showUpdate = false
26       },

以上就說了增刪改查4個介面的呼叫，呼叫查詢介面時，涉及關鍵字高亮，所以就不在這裡展開了，具體程式碼感興趣的朋友可以點贊向我獲取

創作不易，一鍵三連，嘿嘿~

需要程式碼的小夥伴點贊後向我私聊哦