創建一個單獨的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)