node連接mysql生成接口，vue通過接口實現數據的增刪改查（二）

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

本篇繼續上篇，上篇講述了如何寫接口，本篇講解如何調用接口。

在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請求：

axios.get('接口地址').then(res =>{
　　let data = res.data; // 接口讀到的數據(獲取方式並不固定)
}).catach(err =>{
　　console.log(err);
})

POST請求：

this.$axios.post(
  '接口地址',
  {
    '接口參數'
  }
).then(res => {
  console.log('請求成功')
}).catch(err =>{
  console.log('請求失敗');
})

上篇講到，我們已生成接口並請求成功，所以現在開始請求接口。接口為：http://localhost:3000/api/Stu/showStu。如圖1所示。

圖1  請求信息圖

 界面如圖2所示

圖2 學生信息圖

代碼如下：

// 查詢全部數據
    showStu () {
      let data = []
      this.$axios.get(this.IP+'showStu').then(res => {
        data = res.data
        this.showData = data.sort((a, b) => a.stu_Id - b.stu_Id) // id升序排列
      })
    },

獲取到數據了，接下來就是對數據的增刪改查了，第一步對數據進行添加

二、數據的操作：

前提：如果小伙伴看完第一章，知道接口的制作后，可進行下面閱讀，不然會雲里霧里的。

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 調用刪除數據接口圖

 代碼如下：

// 刪除前的判斷，根據confirm的確認和取消，如果點擊確認，則把id傳給delStu()
      isDel(e) {
        let res = confirm("確認刪除嗎？");
        if (res == true) {
          this.popstu_Id = e
          this.delStu(e)
        } else {}
      },

      // 刪除數據，通過isDel()傳過來id進行刪除
      delStu(e) {
        this.visible = false
        const stu_Id = e
        this.$axios
          .post(
            this.IP + 'delStu', {
              stu_Id: stu_Id
            }
          )
          .then(response => {
            this.showStu()
          })
      },

2.3、數據的修改：

 原理簡介：修改數據時，選中該行，點擊修改時將數據傳給彈窗，修改完成后點擊確定按鈕，從而調用修改數據的接口。如圖5調用修改數據接口圖所示

圖5 調用修改數據接口圖 

  代碼如下：

// 臨時存儲修改的值，傳到彈出層，供 updateStu()調用
      toData(e) {
        this.showUpdate = true
        this.popstu_Id = e.stu_Id
        this.popstu_name = e.stu_name
        this.popstu_sex = e.stu_sex
        this.popstu_college = e.stu_college
        this.popstu_class = e.stu_class
      },

      // 修改數據，在彈出層調用toData()里的數據
      updateStu() {
        this.$axios.post(
            this.IP + 'updateStu', {
              stu_Id: this.popstu_Id,
              stu_name: this.popstu_name,
              stu_sex: this.popstu_sex,
              stu_college: this.popstu_college,
              stu_class: this.popstu_class
            }
          )
          .then(response => {
            this.showStu()
          })
        this.showUpdate = false
      },

以上就說了增刪改查4個接口的調用，調用查詢接口時，涉及關鍵字高亮，所以就不在這里展開了，具體代碼感興趣的朋友可以點贊向我獲取

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

需要代碼的小伙伴點贊后向我私聊哦