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)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM