vue 项目中使用mock假数据实现前后端分离

也是查了很多的资料，整理出来。实现了前后端的分离，用到的技术vue-cli，webpack，node，json-server。首先全局安装json-server

 cnpm i json-server -g

安装好之后，修改配置文件，config-->index.js-->proxyTable

 proxyTable: {
       '/api/': {
         target: 'http://localhost:3000',
         changeOrigin: true,
         secure: false,
         pathRewrite: {
           '^/api/': ''
         }
       }
     },

在目录下建立一个mock文件夹  “项目名”-->根目录-->mock

目录的结构如图：

data里面的数据格式如下

{
  "data":{
    "data":"world",
    "status":0,
    "msg":"success"
  }
 
}

我们的请求地址和所需要的json数据不只是一个所以要分开书写，便于维护， 要建立一个server.js   详细的可见 https://github.com/thierryxing/Falcon/tree/master/mock

 const jsonServer = require('json-server');
 const server = jsonServer.create();
 
 // Support middleware
 const middleware = jsonServer.defaults();
 server.use(middleware);
 
 // 支持加载多个db文件
 const _ = require('underscore');
 const path = require('path');
 const fs = require('fs');
 const mockDir = path.join(__dirname, 'data');
 const base = {};
 const files = fs.readdirSync(mockDir);
 files.forEach((file) => {
   _.extend(base, require(path.resolve(mockDir, file)))
 });
 const router = jsonServer.router(base);
 
 // 处理登录逻辑
 server.post('/account/login', (req, res) => {
   let db = router.db // lowdb instance
   let data = db.get('login').value()
   res.jsonp({
     data: data,
     status: {
       code:0,
       msg:'success'
     },
     message: ''
   })
 })
 // 处理登出逻辑
 server.post('/account/logout', (req, res) => {
   let db = router.db
   let data = db.get('logout').value()
   res.jsonp({
     data: data,
     status: 0,
     message: ''
   })
 })
 
 server.use(router)
 
 // 返回自定义格式数据
 router.render = (req, res) => {
   res.jsonp({
     data: res.locals.data,
     status: 0,
     message: ''
   })
 }
 
 server.listen(3000, () => {
   console.log('JSON Server is running')
 })

最后修改package.json文件package.json-->scripts

 "scripts": {
     "dev": "node build/dev-server.js",
     "start": "node build/dev-server.js",
     "build": "node build/build.js",
     "mock": "node mock/server.js",
     "mockdev": "npm run mock & npm run dev"
   },

启动项目

npm run mockdev

最后在页面中发出请求 ，我这里使用的axios 在vue 中配置下

import axios from 'axios';
Vue.prototype.$http = axios;

页面的请求函数

this.$http.get('/api/data').then((res)=>{
           console.log(res)
      })