基礎知識-Mockjs進行數據模擬

目錄

• 1. 目標
• 2. 創建模擬數據服務器
• 3. 安裝 mockjs, 熟悉 mockjs 語法
• 4. 設置代理，解決 vue 項目跨域問題
• 5. 設置響應頭，解決無法獲取獲取 token 和 cookie 問題
• 6. 為什么用 Express 來搭建數據模擬服務

1. 目標

目標: 模擬正常的 Ajax 數據。

目標分解:

1. 創建 nodejs + express 服務器，安裝 supervisor 熱更新插件。
2. 安裝 mockjs, 熟悉 mockjs 語法。
3. 設置代理，解決 vue 項目跨域問題。
4. 設置響應頭，解決無法獲取獲取 token 和 cookie 問題。

---

2. 創建模擬數據服務器

安裝 express

// 安裝express生成器
npm install -g express-generator
// 創建express項目
express [name]
npm i
// 實現數據熱更新
npm install -S supervisor
// 啟動服務
supervisor ./bin/www

創建一個簡單的的 api , 打開文件 /routes/index.js , 修改代碼

router.get('/api/temp', function(req, res, next) {
    var data = {
        hello: "hello word"
    }
	// 返回數據
	res.send(JSON.stringify(data));
});

// 地址: localhost:3000/api/temp
// 結果: {"hello": "hello word"}

---

3. 安裝 mockjs, 熟悉 mockjs 語法

安裝 mockjs:

npm install mockjs -S

使用 mockjs, 模擬數據。

打開 /routes/index.js

var Mock = require('mockjs');
var Random = Mock.Random;

router.get('/api/temp', function(req, res, next) {
	// mockjs 模擬數據
	var data = Mock.mock({
		"string|1-10": "★"
	})
	// 返回數據
	res.send(JSON.stringify(data, null, 4));
});

// 地址: localhost:3000/api/temp
// 結果: {"string": "★★★★★★"}

參考文檔：

• http://mockjs.com/0.1/#
• http://mockjs.com/examples.html#Basic
• 數據在線模擬：http://mockjs.com/0.1/editor.html#help

---

4. 設置代理，解決 vue 項目跨域問題

用 axios 過程中，會發現獲取的數據已經接收到，但無法獲取。控制台提示跨域問題。

在 vue 項目中，可以用 代理解決跨域問題。

1. 創建一個 vue3.0 項目。

2. 創建一個 axios 請求。

   // html
   <el-button @click='show'>el-button</el-button>
   
   // js
   methods: {
   	show: function() {
   		console.log('打印數據')
   		this.$axios.get('/api')
   			.then(function(response) {
   				console.log(response);
   			})
   			.catch(function(error) {
   				console.log(error);
   			});
   	}
   },
   

3. 創建 開發、生產、測試開發環境 配置。

   3.1. 創建 /config/ 文件夾下三個文件: dev.env.js pro.env.js uat.env.js

   const hosturl= 'http://127.0.0.1:3000';
   // 開發環境
   module.exports = {
       NODE_ENV: '"development"',
       hosturl:hosturl
   }
   

   // 生產環境
   module.exports = {
       NODE_ENV: '"production"',
       hosturl:''
   }
   

   // 測試環境
   module.exports = {
       NODE_ENV: '"test"',
       hosturl:''
   }
   

4. 配置 vue.config.js 和 package.json 文件，創建代理

   var path = require('path');
   
   const devProxy = ['/api'];  // 代理
   // const devProxy = ['/pc','/weixin','android',...];  // 代理
   var proEnv = require('./config/pro.env');  // 生產環境
   var uatEnv = require('./config/uat.env');  // 測試環境
   var devEnv = require('./config/dev.env');  // 開發環境
   const env = process.env.NODE_ENV;
   let target = '';
   
   // 默認是本地環境
   if(env==='production'){  // 生產環境
       target = proEnv.hosturl;
   }else if(env==='test'){  // 測試環境
       target = uatEnv.hosturl;
   }else{  // 開發環境
       target = devEnv.hosturl;
   }
   
   // 生成代理配置對象
   let proxyObj = {};
   devProxy.forEach((value, index) => {
       proxyObj[value] = {
           // wx: false,            // 某些情況會報錯，可以將其設置為 false
           target: target,
           changeOrigin: true,
           pathRewrite: {
               [`^${value}`]: value
           }
       };
   });
   
   module.exports = {
       lintOnSave: false, // 關閉eslint的檢查功能
       publicPath: './',      // 原來的 base_url 已廢棄，改用這個屬性
       outputDir: 'dist',
       devServer: {
           host: '0.0.0.0',
           port: 8080,
           https: false,
           hotOnly: false,
           disableHostCheck: true,
           proxy: proxyObj, // string | Object
       }
   };
   

    "scripts": {
        "dev": "vue-cli-service serve --open",
        "prod":"vue-cli-service build --mode=production",
        "test": "vue-cli-service build --mode=test" 
    }
   
   

5. 運行代碼:
   npm run dev

   // 打印結果：
       > 打印數據
   	> {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
   

---

5. 設置響應頭，解決無法獲取獲取 token 和 cookie 問題

token 問題:

在本例子中可以成功獲取 token 屬性，為了防止出現意外的情況獲取不到token，在這里將講解 token 獲取問題。

// 解決無法獲取響應頭 token 問題。
// 修改 app.js 文件,下面代碼放在路由組件注冊前。
// 路由組件 app.use('/', indexRouter);
app.all('*', function(req, res, next) {
	res.setHeader('Access-Control-Expose-Headers', 'token'); //多個屬性可用，分開
    next();
});

cookie 問題:

小伙伴們應該會發現一個問題, 用 axios 打印數據, 無法獲取響應體攜帶的 cookie 屬性。

這是由於由於瀏覽器的保護機制，具體百度 httponly。

6. 為什么用 Express 來搭建數據模擬服務

用 Express 主要原因，是為了對獲取到的請求數據進行判斷，能對請求參數進行處理，返回不同的響應數據。
具體如何如何操作數據，請閱讀 Express 中間件參考文檔。
參考地址：http://www.expressjs.com.cn/4x/api.html#req

---

錯誤修改：

1. vue-cli 3.0 配置文件 vue.config.js 修改已廢棄配置。
2. vue.config.js 修改 wx: false 屬性，解決一些錯誤。

如有錯誤, 請留言區反饋, 謝謝.