在线商城项目03-启用mock服务

简介

对于前后端分离的开发,在后台接口还未就绪时,前端需要使用mock数据进行开发。最容易想到的办法,当然是把mock数据写在页面里,但是这会让我们的页面代码很臃肿,而且也不能还原请求和响应的场景。所以,我们需要在本地启用一个服务器,用来返回mock数据。本篇将会介绍常用的几种mock服务开启办法,大家根据需要自行选择。

首先,我们肯定要引入mock数据。在根目录下新建mock文件夹用来存放我们的mock数据,如下图:

goods.json内容如下:

{
  "status": "0",
  "msg": "",
  "result": [
    {
      "productId": "10001",
      "productName": "小米6",
      "salePrice": "2499",
      "productImage": "mi6.jpg"
    },
    {
      "productId": "10002",
      "productName": "小米笔记本",
      "salePrice": "3999",
      "productImage": "note.jpg"
    },
    {
      "productId": "10003",
      "productName": "小米6",
      "salePrice": "2499",
      "productImage": "mi6.jpg"
    },
    {
      "productId": "10004",
      "productName": "小米6",
      "salePrice": "2499",
      "productImage": "1.jpg"
    },
    {
      "productId": "10005",
      "productName": "小米6",
      "salePrice": "2499",
      "productImage": "2.jpg"
    },
    {
      "productId": "10006",
      "productName": "小米6",
      "salePrice": "2499",
      "productImage": "3.jpg"
    },
    {
      "productId": "10007",
      "productName": "小米6",
      "salePrice": "2499",
      "productImage": "4.jpg"
    },
    {
      "productId": "10008",
      "productName": "小米6",
      "salePrice": "2499",
      "productImage": "5.jpg"
    }
  ]
}

然后,我们开启服务器,允许我们访问该mock数据。

方法1 MAC下可以直接使用apache

apache相关命令如下:

开启apache: sudo apachectl start

重启apache: sudo apachectl restart

关闭apache: sudo apachectl stop

服务python -m SimpleHTTPServer [port]

所以我们只需要开启apache,然后进入需要开启服务器的目录,运行如下命令:

python -m SimpleHTTPServer 8888

即可,端口号可根据你自己的需要来指定。假设我们现在在根目录开启服务,在浏览器输入

http://localhost:8888/mock/goods.json

会有:

访问成功。

方法2 使用http-server开启服务

原理上,和apache相同,都是进入指定目录开启服务,所选工具不一样而已。我们可以全局或者在项目中使用npm安装http-server,然后进入指定目录开启服务。这里假设是在全局安装,步骤如下:

npm install http-server -g

进入项目根目录:

http-server -p 8888

方法3 使用express

我们同样可以使用express自己新开一个服务器,但是这没有太大的必要,vue-cli构建的build文件夹下以前有一个dev-server.js,但是现在已经没有了,如果需要mock数据我们可以直接在webpack.dev.conf.js中进行修改。 最简单的办法如下,添加如下代码:

const express = require('express')
const app = express()

var goodsData = require('../mock/goods.json')
var apiRoutes = express.Router()
app.use('/mock', apiRoutes)

然后在该文件的devServer对象中添加如下代码:

    before(app) {
      app.get('/mock/goods', (req, res) => {
        res.json(goodsData)
      })
    }

如果你没看懂,不要紧,文末我会放出文件的整体代码。 好的,现在试着重新run以下代码。访问http://localhost:8086/mock/goods

成功。

方法3的优化

好的,目前来看,方法3是最不错的,因为你可以指定mock请求的路径,比如mock/goods或者api/goods,可以对返回做额外的处理,比如

res.json({
  code: '000',
  data: goodsData
})

可是,还是有一点不方便。如果现在项目中有其他人也建立了自己的mock数据,难道每个人都需要在这个文件中新增一段代码吗?那么这个代码的体积和维护难度将大大增加。这里我有个思路,就是直接遍历mock文件夹,将所有的文件数据放进一个mock数组,根据需要返回。 webpack.dev.conf.js需要进行如下修改:

const fs = require('fs')

var mockData = {}
var mockFiles = fs.readdirSync(path.resolve(__dirname, '../mock'))
mockFiles.forEach(function (val) {
  mockData[val.split('.')[0]] = require('../mock/' + val)
})

devServer{
    ...
    before(app) {
      app.get(/\/mock\/(\w+)/, (req, res) => {
        res.json(mockData[RegExp.$1])
      })
    }
}

这里我是用的正则,因为直接在before(app)里写函数方法没有运行,所以我猜想此处是根据正则进行匹配和回调,当然,我的正则水平很一般,有大神的话可以自己写一个。 我们来验证一下,复制一份goods.json命名为goods2.json,然后重新run以下代码,分别访问这两个路径如下:

成功访问到了mock下的隔文件。不过其实这样也并不是很好,因为有些mock数据没有使用的情况下也会构建,拖慢性能。这里有两个办法,一个是即使清理已经废弃的mock数据,第二就是新添一个mock数据的配置表,只有配置表指定的数据我们才去mock。这里我就不详述方法了。

webpack.dev.conf.js代码如下:

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const fs = require('fs')
const express = require('express')
const app = express()

// var goodsData = require('../mock/goods.json')

var mockData = {}
var mockFiles = fs.readdirSync(path.resolve(__dirname, '../mock'))
mockFiles.forEach(function (val) {
  mockData[val.split('.')[0]] = require('../mock/' + val)
})

var apiRoutes = express.Router()
app.use('/mock', apiRoutes)

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    },
    // before(app) {
    //   app.get('/mock/goods', (req, res) => {
    //     res.json(goodsData)
    //   })
    // }
    before(app) {
      app.get(/\/mock\/(\w+)/, (req, res) => {
        res.json(mockData[RegExp.$1])
      })
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})

总结

另外,大家还可以用json-server,或者自己编写一个服务器,其实目的不过是返回一个假数据,不管怎样实现都是可以的,看实际项目中怎么方便。你甚至还可以使用mock.js来模拟随机数据等。就不一一列举了。

然后我们提交代码

git status
git diff
git add .
git commit -am 'add mock data and mock server'
git push

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员与猫

JSON Patch

1496
来自专栏逸鹏说道

NET跨平台:在Ubuntu下搭建ASP.NET 5开发环境

0x00 写在前面的废话 年底这段时间实在太忙了,各种事情都凑在这个时候,没时间去学习自己感兴趣的东西,所以博客也好就没写了。最近工作上有个小功能要做成Web应...

3123
来自专栏bboysoul

信息收集工具(Th3inspector Tool)安装使用体验

https://github.com/Moham3dRiahi/Th3inspector

1243
来自专栏jeremy的技术点滴

研究Open vSwitch

6265
来自专栏代码GG之家

ANR 原理与实战技巧

? 00 手机用用,就卡卡卡。莫名其妙的出现一堆程序无响应,欲哭无泪。这是为什么呢?因为你用的android手机。 android手机,为了...

5687
来自专栏SDNLAB

SDN私享汇(十三):DCFabirc控制器实现高级OpenStack网络功能

DCFabirc的主要特性和基于DCFabric的OpenStack网络的高性能优势。DCFabric的最新版本“秦”在峰会上正式发布,新版本主要在多线程优化、...

2682
来自专栏Theo Tsao

Ionic3学习笔记(十三)HttpClient 实现 HTTP 请求以及踩过的一些坑

当然是基于这篇古老的文章啦 ==> http://www.jianshu.com/p/9855610eb1d4 因为是2015年的文章,已经时隔2年多,很难确保...

5361
来自专栏转载gongluck的CSDN博客

UNPv13:#附录A#IPv4、IPv6、ICMPv4和ICMPv6

IPv4首部 IP层提供无连接不可靠的数据报递送服务。它会尽最大努力把IP数据报递送到指定的目的地,然而并不保证它们一定到达,也不保证它们的到达顺序与发...

3356
来自专栏黑泽君的专栏

网络通信的三要素

7155
来自专栏上善若水

014android初级篇之基于GraphView绘制统计图表

在android的开发过程中,需要使用图表,图表有第三方的插件实现了该功能。目前有很多类似的功能插件,比如achartengine, Graphview等等。G...

2986

扫码关注云+社区

领取腾讯云代金券