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

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

1 cnpm i json-server -g

View Code

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

 1 proxyTable: {
 2       '/api/': {
 3         target: 'http://localhost:3000',
 4         changeOrigin: true,
 5         secure: false,
 6         pathRewrite: {
 7           '^/api/': ''
 8         }
 9       }
10     },

View Code

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

目录的结构如图：

data里面的数据格式如下

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

}

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

 1 const jsonServer = require('json-server');
 2 const server = jsonServer.create();
 3 
 4 // Support middleware
 5 const middleware = jsonServer.defaults();
 6 server.use(middleware);
 7 
 8 // 支持加载多个db文件
 9 const _ = require('underscore');
10 const path = require('path');
11 const fs = require('fs');
12 const mockDir = path.join(__dirname, 'data');
13 const base = {};
14 const files = fs.readdirSync(mockDir);
15 files.forEach((file) => {
16   _.extend(base, require(path.resolve(mockDir, file)))
17 });
18 const router = jsonServer.router(base);
19 
20 // 处理登录逻辑
21 server.post('/account/login', (req, res) => {
22   let db = router.db // lowdb instance
23   let data = db.get('login').value()
24   res.jsonp({
25     data: data,
26     status: {
27       code:0,
28       msg:'success'
29     },
30     message: ''
31   })
32 })
33 // 处理登出逻辑
34 server.post('/account/logout', (req, res) => {
35   let db = router.db
36   let data = db.get('logout').value()
37   res.jsonp({
38     data: data,
39     status: 0,
40     message: ''
41   })
42 })
43 
44 server.use(router)
45 
46 // 返回自定义格式数据
47 router.render = (req, res) => {
48   res.jsonp({
49     data: res.locals.data,
50     status: 0,
51     message: ''
52   })
53 }
54 
55 server.listen(3000, () => {
56   console.log('JSON Server is running')
57 })

View Code

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

1 "scripts": {
2     "dev": "node build/dev-server.js",
3     "start": "node build/dev-server.js",
4     "build": "node build/build.js",
5     "mock": "node mock/server.js",
6     "mockdev": "npm run mock & npm run dev"
7   },

View Code

启动项目

npm run mockdev

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

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

页面的请求函数

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

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

推荐阅读