基础知识-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 属性，解决一些错误。

如有错误, 请留言区反馈, 谢谢.