基础知识-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 基础知识梳理( ...
随机推荐
- 爬虫保存cookies时重要的两个参数(ignore_discard和ignore_expires)的作用
两个参数的作用: 官方的解释: ignore_discard: save even cookies set to be discarded. ignore_expires: save even coo ...
- MySQL_关于索引空间的的一些记录
一.清理普通索引占用的空间 问:对表中存在的k列(非主键)的普通索引执行以下重建操作,有什么影响? alter table T drop index k; alter table T add inde ...
- saltstack主机管理项目:今日总结(六)
一.总目录 二.具体代码 salt #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:luoahong import os,sys if __ ...
- 第十四节: EF的三种模式(四) 之 原生正宗的 CodeFirst模式的默认约定
一. 简介 1. 正宗的CodeFirst模式是不含有edmx模型,需要手动创建实体.创建EF上下文,然后生成通过代码来自动映射生成数据库. 2. 旨在:忘记SQL.忘记数据库. 3. 三类配置:On ...
- Quartz C#使用
参考:https://www.cnblogs.com/lazyInsects/p/8075487.htmlQuartz是一款比较好用的定时任务执行工具类,虽然我们平时也可以自己写代码实现定时执行,但是 ...
- [物理学与PDEs]第2章第5节 一维流体力学方程组的 Lagrange 形式 5.2 Lagrange 坐标
1. Lagrange 坐标 $$\beex \bea &\quad 0=\int_\Omega\cfrac{\p \rho}{\p t}+\cfrac{\p}{\p x}(\rho u)\r ...
- js检测移动设备并跳转到相关适应页面。
PS:网页自适应的方式有多种.有通过CSS样式表来实现自适应(主流),也有通过显示不同的页面来实现的方式. 下面代码是记录通过判断设备特征来跳转到相关的页面的方法. 实现要求: 当手机,平板访问 a. ...
- burp Suite 模块Authz 使用方法
这个模块是朋友告诉我的,然后进行了研究使用方法. 以下为个人理解,如有错误感谢各位纠正. 0x00 安装Authz Extender > BApp Store > Authz > i ...
- Mongodb注入
0x01 Brief Description 作为nosql(not only sql)数据库的一种,mongodb很强大,很多企业也在用到.相对于sql数据库,nosql数据库有以下优点:简单便捷. ...
- 基于STM32F1的时钟芯片DS1302驱动
目录 DS1302.h源代码 DS1302.c源代码 DS1302.h源代码 /** ********************************************************* ...