建立一個單獨的js檔案，用於啟動node服務。

npm install express安裝依賴

npm install express

app.js檔案

const express = require("express");

const bodyParser = require("body-parser");

const app = express();

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: true }))

app.listen(3000, () => console.log("server on http://localhost:3000"))


 
//定義方法
app.get('/getZsgcMsg', function (req, res) {
    res.json([{
        word: '問心無愧',
        name: '張三',
        id: '1'
    }, {
        word: '捫心自問',
        name: '李四',
        id: '2'
    }, {
        word: '自言自語',
        name: '王小虎',
        id: '3'
    }, {
        word: '牛氣沖天',
        name: 
 
'王三',
        id: '4'
    }, {
        word: '臥虎藏龍',
        name: '高小',
        id: '5'
    }, {
        word: '笑裡藏刀',
        name: '高小三',
        id: '6'
    },
    {
        word: '坐井觀天',
        name: '啦三啦',
        id: '7'
    }])
});
// 搜尋
app.post('/search', function (req, res) {
    console.log(req.body);
    res.json(req.body)
});
 
// 新增
app.post('/add', function (req, res ) {
    console.log('req.body', req.body)
    res.json(req.body)
});
// 刪除
app.delete('/delete/:id', function (req, res) {
    console.log('req.params.id', req.params.id)
　　//刪除接收引數為req.params.id，形式與其他不同，使用時用/拼接

res.json(req.params.id) }); // 修改 app.put('/update', function (req, res) { console.log('req.body', req.body) res.json(req.body) });

選中目錄，node app.js啟動服務

正常使用介面

api.js檔案

import http from './http'


//獲取列表
function getTableDataList() {
    return http.get('/course-api/getZsgcMsg')
}


//新增
function addTableDataList(row) {
    let urlParams = new URLSearchParams()
    urlParams.append('row', row)
    return http.post('/course-api/add',urlParams)
}

//查詢
function searchTableDataList(likeWord) {
    let urlParams = new URLSearchParams()
    urlParams.append('likeWord', likeWord)
    return http.post('/course-api/search', urlParams)
}

//刪除
function deleteTableDataList(id) {
    return http.delete(`/course-api/delete/${id}`)
}

//修改
function updateTableDataList(row) {
    let urlParams = new URLSearchParams()
    urlParams.append('row', row)
    return http.put('/course-api/update', urlParams)
}

//匯出
export {
    getTableDataList,
    addTableDataList,
    searchTableDataList,
    deleteTableDataList, 
    updateTableDataList
}

使用（呼叫）

增加

    async confirm() {
      try {
          const row = {
            name: this.name, word: this.region
          }
          //row可以分開傳值，不需要改成json格式，修改一樣
          let data = await addTableDataList(JSON.stringify(row))
          if(data.status == 200){
            console.log(data)
          }
        }
      }
      catch (e) {
        console.log(e)
      }
    },

刪除

async deleteList(id){
      try {
        let data = await deleteTableDataList(id)
        if(data.status == 200){
          console.log(data);
        } 
      }
      catch(e){
        console.log(e);
      }
    },

修改

    // 修改
    async updateList(id){
      let msg = {
        id:id,
        name:this.modifyName,
        word:this.modifyRegion
      }
      try{
        let data = await updateTableDataList(JSON.stringify(msg))
        if(data.status == 200){
          console.log(data);
        }
      }catch(e){
        console.log(e);
      }
    },

查詢

    //搜尋
    async search(){
      try{
        let likeWord = this.input
        let data = await searchTableDataList(likeWord)
        if(data.status == 200){
          console.log(data);
        }
      }catch(e){
        console.log(e);
      }
    },

// 封裝axios

// 對http請求進行封裝
import axios from 'axios'

// 使用自定義的配置檔案傳送請求
const instance = axios.create({
    baseURL: '',
    timeout: 100000,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        // 'custome-header':'tianliangjiaoyu'
    }
});
// 新增請求攔截器
instance.interceptors.request.use(function (config) {

    // 在傳送請求之前做些什麼
    return config;
}, function (error) {
    // 對請求錯誤做些什麼
    return Promise.reject(error);
});

// 新增響應攔截器
instance.interceptors.response.use(function (response) {
    instance// 對響應資料做點什麼

    // eslint-disable-next-line no-debugger
    // debugger

    if (response.status === 200) {
        return response;
    } else {
        console.error("請求錯誤")
        console.error(response)
    }
    return response;
}, function (error) {
    // 對響應錯誤做點什麼
    return Promise.reject(error);
});

export default instance

vue.config.js檔案，配置代理解決跨域問題

module.exports = {
    configureWebpack: {
        // other webpack options to merge in ...
    },
    // devServer Options don't belong into `configureWebpack`
    devServer: {
        proxy: {
            //代理名稱
            '/course-api': {     //這裡最好有一個 /
                target: 'http://localhost:3000',  // 後臺介面域名
                changeOrigin: true,  //是否跨域
                //路徑重寫
                pathRewrite: {
                    '^/course-api': ''
                }
            },
        },
        // public: '192.168.0.246:8080',
        hot: true,
        // disableHostCheck: true,
    }
};