基础知识-Mockjs进行数据模拟
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
属性,解决一些错误。
如有错误, 请留言区反馈, 谢谢.
基础知识-Mockjs进行数据模拟的更多相关文章
- SpringMVC(一) 基础知识+入门案例
SpringMVC基础知识 1.什么是Springmvc 2.springmvc 框架的原理(必须掌握) 前端控制器.处理器映射器.处理器适配器.视图解析器 3.SpringMVC 入门程序 目的:对 ...
- .NET面试题系列[1] - .NET框架基础知识(1)
很明显,CLS是CTS的一个子集,而且是最小的子集. - 张子阳 .NET框架基础知识(1) 参考资料: http://www.tracefact.net/CLR-and-Framework/DotN ...
- RabbitMQ基础知识
RabbitMQ基础知识 一.背景 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然 ...
- Java基础知识(壹)
写在前面的话 这篇博客,是很早之前自己的学习Java基础知识的,所记录的内容,仅仅是当时学习的一个总结随笔.现在分享出来,希望能帮助大家,如有不足的,希望大家支出. 后续会继续分享基础知识手记.希望能 ...
- selenium自动化基础知识
什么是自动化测试? 自动化测试分为:功能自动化和性能自动化 功能自动化即使用计算机通过编码的方式来替代手工测试,完成一些重复性比较高的测试,解放测试人员的测试压力.同时,如果系统有不份模块更改后,只要 ...
- [SQL] SQL 基础知识梳理(一)- 数据库与 SQL
SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...
- [SQL] SQL 基础知识梳理(二) - 查询基础
SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序 这是<SQL 基础知识梳理( ...
- [SQL] SQL 基础知识梳理(三) - 聚合和排序
SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序 这是<SQL 基础知识梳理 ...
- [SQL] SQL 基础知识梳理(四) - 数据更新
SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...
随机推荐
- emwin 之 GUI_MessageBox 阻塞特性
2019-03-01 [小记] GUI_MessageBox 函数执行后必须手动点击关闭窗口,未关闭窗口前线程将阻塞在此处等待关闭窗口事件 [使用场景] 由于该函数不会产生任何消息, 所以可利用阻塞特 ...
- Java【第八篇】面向对象之高级类特性
static 关键字 当我们编写一个类时,其实就是在描述其对象的属性和行为,而并没有产生实质上的对象,只有通过new关键字才会产生出对象,这时系统才会分配内存空间给对象,其方法才可以供外部调用.我们有 ...
- apache beam ElasticSearchIO 遇到异常后job中断执行 自己定制beam IO
可以将 ElasticSearchIO.java 源码拷贝至自己的项目.改名为MyElasticSearchIO.java.自己定制实现.这时编译会遇到auto.value失败.在pom.xml中加入 ...
- vue实战记录(四)- vue实现购物车功能之过滤器的使用
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(四) GitHub:sue ...
- 【洛谷P3899】谈笑风生
题目大意:给定一棵 N 个节点的有根树,1 号节点为根节点,现给出 Q 个询问,每次询问距离 u 号节点不超过 K 的节点 b,c 为 a 与 b 的后代,求这样的三元组有多少个. 题解:学会了线段树 ...
- pytest 11 allure2生成html报告
allure是一个report框架,支持java的Junit/testng等框架,当然也可以支持python的pytest框架,也可以集成到Jenkins上展示高大上的报告界面. 环境准备 1.pyt ...
- 微信小程序之动态添加、删除指定内容(view)和获取input值
这次遇到个问题: 1. 动态的添加指定的view内容..嗯..很简单..wx:for就搞定 2. 动态添加的内容中有input,最终获取值的时候,要获取到所有input的值并且是一个数组..嗯.. 3 ...
- Hadoop基础-Hadoop的集群管理之服役和退役
Hadoop基础-Hadoop的集群管理之服役和退役 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在实际生产环境中,如果是上千万规模的集群,难免一个一个月会有那么几台服务器出点故 ...
- 老男孩Python全栈学习 S9 日常作业 003
1.有变量name = "aleX leNb" 完成如下操作: # 移除 name 变量对应的值两边的空格,并输出处理结果 # 移除name变量左边的"al"并 ...
- 关于设计项目UI界面的软件工具
关于画UI界面的软件,我在网上找了几个,今天式用这几款软件还可以 1.墨刀:国产的,这个专门画APP界面的,用起来比较简单,有免费版的,要注册才能用,提供云存储,收费版的云存储空间会多一些.网站: h ...