Before and after the separation, often the backend is responsible for providing data interface, the front end is responsible for data display, but often the backend interface with a delay or other reasons, the front and can’t wait for the interface into the next phase of development, so the mock data becomes important (due to the backend to force, interface to very quickly, so did not use a mock data in practical development, Mock data is often used on individual projects). Without further ado, take a look at the different ways to mock data

easy-mock

There will be a workbench after the official website registration is configured

Module. exports = {configureWebpack: {// extend WebPack devServer: {proxy: {// easyMock'/easymock': {
          target: ' https://www.easy-mock.com/mock/5c77db5ffb8a585dcd816fa4',
          changeOrigin: true,
          ws: true,
          pathRewrite: {
            '^/easymock': ' '
          }
        }
      }
    }
  }
}
Copy the code

Let mock = await this.$axios.get(‘/ API /test’)

Express is built into webpack-dev-server

Do this in vue.config.js

Module. Exports = {configureWebpack: {// extend webpack devServer: {before (app) {// app is an express app.get()'/api/test'.function (req, res) {
          res.json({
            list: [
              { text: 'node', },
              { text: 'vue',},
              { text: 'react',}]})})}}}}Copy the code

Let ret = await this.$axios.get(‘/ API /test’)

Mock

You can either install mock or register it in a static folder in main.js

if(process.env.NODE_ENV ! = ='production') {
  require('@/mock')}Copy the code

For others, configure them based on the official website

Express server

Create the server.js file

// install express const express = require()'express') const app = express() // Allow cross-domain access to the service. app.all()The '*'.function (req, res, next) {
  res.header('Access-Control-Allow-Origin'.The '*')
  res.header('Access-Control-Allow-Headers'.'Content-Type')
  res.header('Access-Control-Allow-Methods'.The '*')
  res.header('Content-Type'.'application/json; charset=utf-8')
  next()
})

app.get('/api/test'.function (req, res) {
  res.json({
    title: 'Test data',
    list: [
      { text: 'node', },
      { text: 'vue',},
      { text: 'react', }
    ]
  })
})

const server = app.listen(9082, function () {
  console.log('Express app server listening on port %d', server.address().port)
})
Copy the code

Express App server listening on port 9082 In the browser type http://localhost:9082/api/test will appear we fill in data of death, The page request let res = await this $axios. Get (‘ http://localhost:9082/api/test ‘)

yapi

Refer to Esay-Mock for details, but YAPI does not support HTTPS