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. Codeforces 1037E Trips

    原题 题目大意: 有\(n\)个人,起初他们都不是朋友.总共有\(m\)天,每天会有两个人成为朋友.他们计划在晚上出去旅游,对于一个人,有如下两种情况: 1.要么他不出去旅游 2.要么有至少\(k\) ...

  2. Springboot 5.Springboot 返回cookies信息的post接口开发

    首先创建一个类,类里面首先登陆获取到cookie,然后带着cookie去发送请求 package com.course.server; import com.course.bean.User; imp ...

  3. SQL中GROUP BY用法示例(转)

    工作中又用到了写SQL 好多年不用了 再拿过来温习下: 不觉豁然开朗 概述 GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Exce ...

  4. usb输入子系统键盘(四)

    目录 usb输入子系统键盘 设计思路 内核的上报代码 完整代码 title: usb输入子系统键盘 tags: linux date: 2018/12/20/ 17:05:08 toc: true - ...

  5. CMDB服务器管理系统【s5day90】:创建资产更新服务器硬盘信息

    1.创建硬件资产信息 import json from django.shortcuts import render,HttpResponse from django.views.decorators ...

  6. Java(4)switch选择结构

    一.switch结构(开关语句)的语法 switch(表达式 ){--->类型为int.char case  常量1 :--->case 结构可以有多个 //语句块1 break;---& ...

  7. 入门嵌入式选择2440?树莓派?STM32?4412开发板?

    如果了解一下当前IT和物联网发展的形势,就会发现Android工程师越来越受欢迎,相比之下单纯的Linux工程师却逊色不少,当然,Android系统的内核也是Linux的,Linux和Android作 ...

  8. Linux常用命令总结-软件测试面试专用

  9. pythonのsimple_tag

    当我们需要在页面种直接调用py文件中的某些方法时,我们就要用到simple_tag.具体步骤如下: 1.在某个app下创建templatetags文件夹,切记该名称是不可以改变的. 2.在该文件夹下创 ...

  10. PHP 【五】

    函数 如要在页面加载时执行脚本,可以把它放到函数里 函数是通过调用函数来执行的 可在页面的任何位置调用函数 <?phpfunction functionName(){    // 要执行的代码} ...