接口数据模拟的几种方法

  1. 方法一:直接在public 下新建的json文件可以直接获取,注意的是json文件不要提交线上,.gitignore文件

  2. 方法二:node运行js文件,使用express框架,项目代理到node运行的端口上

npm i express

router.js

const express = require(“express”)
const router = express.Router()
router.get(/one”,res=>{res.send(“api—one”)})
router.get(/two/three”,res=>{res.send(require(./mock/two.json”))})
moudle.exports = router

devServer.js

const express = require(“express”)
const router = require (./router.js”)
const app = express()
app.use(/api”,router) //use 用法在请求路径有规则的改变时使用
app.get(/about”,res=>{res.send(require (./about.json))})
app.listen(3001,function (){
  console.log(“服务开启了”)
})

react项目下设置代理,src文件夹下新建setupProxy.js
npm i http-proxy-middleware
setupProxy.js

const {createProxyMiddleware} = require(“http-proxy-middleware”)
const apiProxy= createProxyMiddleware({/api”,{target:”http://192.166.28:3001}
})
moudle.exports=function (app0){app0.use(apiProxy)}

命令行:
node devServet.js
npm run start

  1. 方法三:使用mockjs库,可随机生成要的数据,但是在network 里面没有

mymock.js

important Mock from ‘mocks’
const Random = Mock.Random
const data = {
     id:‘@guid’,
     email:‘@email’,
     name:‘@cname’,
     istrue:Random.booleam,
     date:Random.date()
}
Mock.mock(/training”,”post”,data)

main.js 引入

important “mymock.js”

方法四:

你可能感兴趣的:(笔记)