先後端分離

先後端分離數據模擬方法：
1.本身建立json文件，使用get請求方式訪問數據
優勢：方便，快捷
缺點：只能存在get請求
2.項目中集成服務器，模擬各類接口
優勢：模擬真實線上環境
缺點：增長開發成本
3.直接使用線上數據（重構使用）
優勢：真實
缺點：不必定每一個項目都存在
4.數據模擬庫mock.js 

mockjs的使用http://mockjs.com/

個人環境是webpack+npm+vue，首先就用npm安裝mockjs，安裝命令是 npm install  --save-dev mockjs，使用淘寶鏡像也是能夠的，就是使用cnpm替換npm，同樣的效果，mockjs官網：http://mockjs.com/

安裝好mockjs後，在main.js裏引入mockjs

require('./mock.js')

而後在src文件夾下新建一個js文件，裏面寫mockjs的規則

// 引入mockjs
const Mock = require('mockjs');
// 獲取 mock.Random 對象
const Random = Mock.Random;
// mock一組數據
const productData = function() {
let Data = [];
for (let i = 0; i < 100; i++) {
let data = {
name: Random.cname(), // Random.cname() 隨機生成一個常見的中文姓名
date: Random.date() // Random.date()指示生成的日期字符串的格式,默認爲yyyy-MM-dd
}
Data.push(data)
}

return {
Data: Data
}
}

// Mock.mock( url, post/get , 返回的數據)；
Mock.mock('/user/login', 'post', productData );

而後再請求數據的頁面調用

getUser(){
        axios.post("/user/login").then(res=>{
          console.log(res);
        }).catch(res=>{
          console.log("err")
        });
}

在控制檯裏就能夠看到請求返回的數據了

若是是使用vue+vuex+axios作交互，須要返回相應的數據，若是從一開始的登陸就作了權限，那麼接口的baseURI就寫成空（「」），api裏寫請求的地址，接口要從登陸開始一路作下去，經過判斷返回碼來寫的攔截器最好停掉，想一想仍是挺麻煩的，不如仍是等後端寫接口吧。或者只是想測個別的接口，能夠用上面的axios方式進行交互，須要在當前頁面引入axiosjs，在後端寫好後再進行相應的修改，修改量較小。整體來講，mockjs適合作數據的交互（這個數據包括基本數據，圖片，日期，地址等），不適合作有權限的，畢竟造一遍這樣的權限數據也是挺麻煩的，若後端的接口與你造的不同，後面要作的修改就多了。由於mockjs原理是直接攔截你的請求，而後返回數據。
---------------------
做者：lx_1024
來源：CSDN
原文：https://blog.csdn.net/lx_1024/article/details/79083715
版權聲明：本文爲博主原創文章，轉載請附上博文連接！