基础知识-Mockjs进行数据模拟

目录

1. 目标2. 创建模拟数据服务器3. 安装 mockjs, 熟悉 mockjs 语法4. 设置代理，解决 vue 项目跨域问题5. 设置响应头，解决无法获取获取 token 和 cookie 问题6. 为什么用 Express 来搭建数据模拟服务

1. 目标

目标: 模拟正常的 Ajax 数据。

目标分解:

创建 nodejs + express 服务器，安装 supervisor 热更新插件。安装 mockjs, 熟悉 mockjs 语法。设置代理，解决 vue 项目跨域问题。设置响应头，解决无法获取获取 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 项目中，可以用 代理解决跨域问题。

创建一个 vue3.0 项目。

创建一个 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.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:'' }

配置 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" }

运行代码: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

---

错误修改：

vue-cli 3.0 配置文件 vue.config.js 修改已废弃配置。vue.config.js 修改 wx: false 属性，解决一些错误。

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

转载于:https://www.cnblogs.com/mhxs/p/10559084.html

相关资源：JAVA上百实例源码以及开源项目