前端项目接入Mock上手

开发中后端接口没有开发完成时，前端可以使用mock.js来模拟接口进行数据交互
mock.js官网： http://mockjs.com/

一、安装相关依赖包

基于 mockjs + express 实现接口模拟

npm install mockjs express -D

二、创建mock文件夹，搭建mock环境

在 /src 目录下创建 /mock 文件夹，用于搭建mock环境及接口文件

server.js 创建mock服务

const express = require('express')
const App = express()
const Router = express.Router()
const api = require('./api')

Router.use('/', api)
App.use('/mock', Router)
App.listen(3001, ()=>{
  console.log('Mock服务启动成功');
})

/api/index.js mock模拟接口实现

const Mock = require('mockjs')
const router = require('express').Router()

router.use('/getPersonInfo', (req, res) => {
  console.log('/getPersonInfo');
  const data = Mock.mock({
    code: '200',
    'data|10-20': [{
      'id|+1': 1,
      'name': '@cname',
      'age|1-100': 100,
      'gender|1': ['male','female']
    }]
  })
  return res.json(data)
})

module.exports = router

这时在控制台执行 node ./src/mock/server.js 命令可以启动mock服务

此时在浏览器中输入 http://localhost:3001/mock/getPersonInfo 即可访问mock接口

可以将mock启动命令设置在 package.json 文件中，方便启动

"mock": "node ./src/mock/server.js"

之后就可以使用 npm run mock 来启动mock服务了

/mock/api.js 封装axios请求接口

import axios from 'axios';

const http = axios.create({
  baseURL: 'http://localhost:3001/mock',
  timeout: 1000 * 30,
})

http.interceptors.request.use(config => {
  return config
})

http.interceptors.response.use(res => {
  return res
})

export const getPersonInfo = () => http.get('/getPersonInfo')

export default http

页面中调用

import './App.css';
import { useState, useEffect } from 'react';
import { getPersonInfo } from './mock/api';
function App() {
  const [data, setData] = useState([])
  const renderData = info => {
    setData(info.data)
  }
  useEffect(async () => {
    const res = await getPersonInfo()
    renderData(res.data)
  }, [])
  return (
    <div className="App">
      {
        data.map(person => {
          const keys = Object.keys(person)
          return (
            <div key={person.id}>
              {
                keys.map((key, index) => {
                  return (
                    <span key={index}>{person[key]}----</span>
                  )
                })
              }
            </div>
          )
        })
      }
    </div>
  );
}

export default App;

页面效果
当然你可以在你项目的webpack配置文件中配置相关的代理，来在本地请求mock数据

 proxy: {
   // 本地mock地址
  '/mock/': {
    target: 'http://localhost:3001',
    secure: false,
  },
  // 后端接口地址
  '/api': {
  	target: 'http://www.xxxx.com/request',
  	secure: false,
  }
},