node搭建本地服务模拟接口，get/post/put/delete请求传参

创建一个单独的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.js文件）配置代理（vue.config.js文件）

// 封装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,
    }
};

 连接数据库实现简单接口：node连接数据库实现简单接口 - 从入门到如土 - 博客园 (cnblogs.com)