前言：

項目開發中，影響項目進程的常常是由于在前后端數據交互的開發流程中停滯，前端完成靜態頁面的開發后，后端遲遲未給到接口。而現在，我們就可以通過根據后端接口字段，建立一個REST風格的API接口，進而實現調用數據實現前端的獨立開發。

// json-server:post請求一般為新增內容，獲取數據用get // 如果需要用到post可以用express+fs請求本地文件

方法1：

第一步：安裝：命令行中輸入 cnpm install json-server --save

第二步：找到build/webpack.dev.conf.js并在const portfinder = require('portfinder')這一行下面添加如下配置

? ? ? ? ? ? ? const express = require('express') //node.js的內置框架
const app = express()//請求server
var appData = require('../static/json-moni/jiekou1.json')//加載本地數據文件

var suibian= appData.suibian//獲取對應的本地數據并賦值給變量

var suibian2= appData.suibian2//獲取對應的本地數據并賦值給變量

var apiRoutes = express.Router()//express框架的router函數
app.use('/api', apiRoutes)//通過路由請求數據

?

第三步：設置get請求：在build/webpack.dev.conf.js下找到devServer并在watchOptions: {
? ? ? poll: config.dev.poll,
? ? },后面添加如下配置：

before(app) {
? ? ? app.get('api/suibian', (req, res) => {
? ? ? ? res.json({
? ? ? ? ? errno: 0,
? ? ? ? ? data: suibian
? ? ? ? })//接口返回json數據，上面配置的數據seller就賦值給data請求后調用

? ? ? }),

app.get('api/suibian2', (req, res) => {
? ? ? ? res.json({
? ? ? ? ? errno: 0,
? ? ? ? ? data: suibian2
? ? ? ? })//接口返回json數據，上面配置的數據seller就賦值給data請求后調用

? ? ? })

? ? }

?

方法2：

//首先var appData = require('../data.json')//加載本地數據文件 var seller = appData.seller//獲取對應的本地數據 var goods = appData.goods var ratings = appData.ratings //然后找到devServer,在里面添加 before(app) { app.get('/api/seller', (req, res) => { res.json({ errno: 0, data: seller })//接口返回json數據，上面配置的數據seller就賦值給data請求后調用 }), app.get('/api/goods', (req, res) => { res.json({ errno: 0, data: goods }) }), app.get('/api/ratings', (req, res) => { res.json({ errno: 0, data: ratings }) }) }
所有的修改配置都需要重新啟動運行命令的：npm run dev才能生效（切記 ），還有data.json數據也不能少，就放在跟目錄下跟index.html同級;data.json的部分數據

?

轉載于:https://www.cnblogs.com/GuGuT3T/p/8799231.html

總結

以上是生活随笔為你收集整理的json-server模拟后台接口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。