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": "★★★★★★"}

参考文档:


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 属性,解决一些错误。

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

基础知识-Mockjs进行数据模拟的更多相关文章

  1. SpringMVC(一) 基础知识+入门案例

    SpringMVC基础知识 1.什么是Springmvc 2.springmvc 框架的原理(必须掌握) 前端控制器.处理器映射器.处理器适配器.视图解析器 3.SpringMVC 入门程序 目的:对 ...

  2. .NET面试题系列[1] - .NET框架基础知识(1)

    很明显,CLS是CTS的一个子集,而且是最小的子集. - 张子阳 .NET框架基础知识(1) 参考资料: http://www.tracefact.net/CLR-and-Framework/DotN ...

  3. RabbitMQ基础知识

    RabbitMQ基础知识 一.背景 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然 ...

  4. Java基础知识(壹)

    写在前面的话 这篇博客,是很早之前自己的学习Java基础知识的,所记录的内容,仅仅是当时学习的一个总结随笔.现在分享出来,希望能帮助大家,如有不足的,希望大家支出. 后续会继续分享基础知识手记.希望能 ...

  5. selenium自动化基础知识

    什么是自动化测试? 自动化测试分为:功能自动化和性能自动化 功能自动化即使用计算机通过编码的方式来替代手工测试,完成一些重复性比较高的测试,解放测试人员的测试压力.同时,如果系统有不份模块更改后,只要 ...

  6. [SQL] SQL 基础知识梳理(一)- 数据库与 SQL

    SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...

  7. [SQL] SQL 基础知识梳理(二) - 查询基础

    SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序 这是<SQL 基础知识梳理( ...

  8. [SQL] SQL 基础知识梳理(三) - 聚合和排序

    SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序 这是<SQL 基础知识梳理 ...

  9. [SQL] SQL 基础知识梳理(四) - 数据更新

    SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...

随机推荐

  1. 爬虫保存cookies时重要的两个参数(ignore_discard和ignore_expires)的作用

    两个参数的作用: 官方的解释: ignore_discard: save even cookies set to be discarded. ignore_expires: save even coo ...

  2. MySQL_关于索引空间的的一些记录

    一.清理普通索引占用的空间 问:对表中存在的k列(非主键)的普通索引执行以下重建操作,有什么影响? alter table T drop index k; alter table T add inde ...

  3. saltstack主机管理项目:今日总结(六)

    一.总目录 二.具体代码 salt #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:luoahong import os,sys if __ ...

  4. 第十四节: EF的三种模式(四) 之 原生正宗的 CodeFirst模式的默认约定

    一. 简介 1. 正宗的CodeFirst模式是不含有edmx模型,需要手动创建实体.创建EF上下文,然后生成通过代码来自动映射生成数据库. 2. 旨在:忘记SQL.忘记数据库. 3. 三类配置:On ...

  5. Quartz C#使用

    参考:https://www.cnblogs.com/lazyInsects/p/8075487.htmlQuartz是一款比较好用的定时任务执行工具类,虽然我们平时也可以自己写代码实现定时执行,但是 ...

  6. [物理学与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 ...

  7. js检测移动设备并跳转到相关适应页面。

    PS:网页自适应的方式有多种.有通过CSS样式表来实现自适应(主流),也有通过显示不同的页面来实现的方式. 下面代码是记录通过判断设备特征来跳转到相关的页面的方法. 实现要求: 当手机,平板访问 a. ...

  8. burp Suite 模块Authz 使用方法

    这个模块是朋友告诉我的,然后进行了研究使用方法. 以下为个人理解,如有错误感谢各位纠正. 0x00 安装Authz Extender > BApp Store > Authz > i ...

  9. Mongodb注入

    0x01 Brief Description 作为nosql(not only sql)数据库的一种,mongodb很强大,很多企业也在用到.相对于sql数据库,nosql数据库有以下优点:简单便捷. ...

  10. 基于STM32F1的时钟芯片DS1302驱动

    目录 DS1302.h源代码 DS1302.c源代码 DS1302.h源代码 /** ********************************************************* ...