前端项目mock本地数据

68 阅读 0 评论 45 点赞

我是靠谱客的博主矮小金针菇，最近开发中收集的这篇文章主要介绍前端项目mock本地数据，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

第一步，下载插件，我下载了以下几个插件
cross-env。 nodemon mockjs. klaw
第二步，在根目录新建mockSever文件夹

/**
 * Mock server
 */
const path = require('path')
const express = require('express')
const klaw = require('klaw') // 具有可读流接口的 Node.js 文件系统walker。 读取文件

const _ = require('lodash')// 工具类
const bodyParser = require('body-parser') // 解析请求参数

const methodFlag = ['$get', '$post'] // 请求方法
const mockDir = path.join(process.cwd(), 'mockSever/api') // mock的数据来源,目录结构

const routers = {

}

const mockFiles = []

let err

klaw(mockDir)
  .on('data', (file) => {
    if (path.extname(file.path) !== '.js') return
    mockFiles.push(file.path)
  })
  .on('end', () => {
    mockFiles.forEach((file) => {
      try {
        const router = require(file) // require mockServer文件夹下的文件
        // 在url相同,但methods方法不同，如（一个get、一个post）,此时如果文件名相似,容易导致请求丢失,因为Object.assign会误认为这两个mock是相同，从而合并丢失
        Object.assign(routers, router)
      } catch (error) {
        err = error
        console.log(err)
      }
    })
    server(routers)
  })

function server(routers) {
  const app = express()

  const allowCrossDomain = function(req, res, next) {
    // 允许跨域
    res.header('Access-Control-Allow-Origin', '*')
    res.header('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With')
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS')
    next()
  }
  app.use(allowCrossDomain)
  // 处理请求体
  app.use(bodyParser.json())
  app.use(bodyParser.urlencoded({ extended: false }))

  Object.keys(routers).forEach(function(api) {
    const routeHander = routers[api]
    const routerInst = new express.Router()
    if (_.isFunction(routeHander)) {
      routerInst.use(api, routeHander)
    } else if (_.isObject(routeHander)) {
      // 如果存在$get/$post
      if (methodFlag.some(it => {
        return routeHander[it]
      })) {
        methodFlag.forEach(it => {
          const method = it.toLocaleLowerCase().replace('$', '')
          if (routeHander[it]) {
            if (_.isFunction(routeHander[it])) {
              routerInst[method](api, routeHander[it])
            } else if (routeHander[it]) {
              routerInst[method](api, (req, res, next) => {
                responseTo(res, api, method, routeHander[it])
                next()
              })
            }
          }
        })
      }
    }
    app.use('/', routerInst)
  })

  if (err) {
    app.use((req, res, next) => {
      return next(err)
    })
  }
// PROXY_TARGET 这个在env.development. 配置
  app.listen(process.env.PROXY_TARGET, () => {
    console.log(`Proxy at http://localhost:${process.env.PROXY_TARGET}`)
  })
}

function responseTo(res, api, method, data) {
  console.log(`${api}  ${method}`)
  res.json(data)// 解析返回数据，以json格式返回Promise
}

第三步，在package.json中配置

    "mock": "cross-env PROXY_TARGET=4009 nodemon -w ./mockSever ./mockSever/mock-server.js"
    "start": "npm run dev & npm run mock",

第四步，在mockSever 文件夹下新建 api文件夹，把要mock的接口数据写里面，下面我写个例子

module.exports = {
  '/www/login': {
    $post: {
      code: '000000',
      resultMsg: '处理成功',
      data: {
        code: '000000'
      }
    }
  }
}