基础知识-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 基础知识梳理( ...
随机推荐
- Codeforces 1037E Trips
原题 题目大意: 有\(n\)个人,起初他们都不是朋友.总共有\(m\)天,每天会有两个人成为朋友.他们计划在晚上出去旅游,对于一个人,有如下两种情况: 1.要么他不出去旅游 2.要么有至少\(k\) ...
- Springboot 5.Springboot 返回cookies信息的post接口开发
首先创建一个类,类里面首先登陆获取到cookie,然后带着cookie去发送请求 package com.course.server; import com.course.bean.User; imp ...
- SQL中GROUP BY用法示例(转)
工作中又用到了写SQL 好多年不用了 再拿过来温习下: 不觉豁然开朗 概述 GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Exce ...
- usb输入子系统键盘(四)
目录 usb输入子系统键盘 设计思路 内核的上报代码 完整代码 title: usb输入子系统键盘 tags: linux date: 2018/12/20/ 17:05:08 toc: true - ...
- CMDB服务器管理系统【s5day90】:创建资产更新服务器硬盘信息
1.创建硬件资产信息 import json from django.shortcuts import render,HttpResponse from django.views.decorators ...
- Java(4)switch选择结构
一.switch结构(开关语句)的语法 switch(表达式 ){--->类型为int.char case 常量1 :--->case 结构可以有多个 //语句块1 break;---& ...
- 入门嵌入式选择2440?树莓派?STM32?4412开发板?
如果了解一下当前IT和物联网发展的形势,就会发现Android工程师越来越受欢迎,相比之下单纯的Linux工程师却逊色不少,当然,Android系统的内核也是Linux的,Linux和Android作 ...
- Linux常用命令总结-软件测试面试专用
- pythonのsimple_tag
当我们需要在页面种直接调用py文件中的某些方法时,我们就要用到simple_tag.具体步骤如下: 1.在某个app下创建templatetags文件夹,切记该名称是不可以改变的. 2.在该文件夹下创 ...
- PHP 【五】
函数 如要在页面加载时执行脚本,可以把它放到函数里 函数是通过调用函数来执行的 可在页面的任何位置调用函数 <?phpfunction functionName(){ // 要执行的代码} ...