mock的使用及取消,node模仿本地请求:为了解决前后端分离,用户后台没写完接口的情况下

摘要:
当拦截到匹配rurl和rtype的Ajax请求时,将根据数据模板template生成模

借鉴:https://www.jianshu.com/p/dd23a6547114

1、说到这里还有一种是配置node模拟本地请求

(1)node模拟本地请求: 补充一下

【1】首先在根目录下建一个data.json,用来存放一些返回数据,名字随便取好了
[2]在webpack.dev.conf.js文件里
    在这个const portfinder = require('portfinder')的下面
  
 1、  //模拟后台请求
const express = require('express')
const app =express()
var appData = require('../data.json')//加载本地数据文件
var seller = appData.seller//获取对应的本地数据
var goods =appData.goods
var ratings = appData.ratings//这里获取导数据的变量名自己看着定义好了
var mine =appData.mine
var apiRoutes =express.Router()
app.use('/api', apiRoutes)
//第一部分结束-----------------

2、第二部分,在devServer对象里面加
before(app){
          //模拟后台请求第二部分
            app.get('/api/seller', (req, res) =>{
                res.json({
                  errno: 0,
                  data: seller
                })//接口返回json数据,上面配置的数据seller就赋值给data请求后调用
}),
            app.get('/api/goods', (req, res) =>{
              res.json({
                errno: 0,
                data: goods
              })
            }),
            app.get('/api/ratings', (req, res) =>{
              res.json({
                errno: 0,
                data: ratings
              })
            }),
            app.get('/api/mine', (req, res) =>{
              res.json({
                errno: 0,
                data: mine
              })
            })
      }


3、然后前端页面正常请求就好了
var url = 'http://localhost:8081/api/mine';
                var data = '';
                      this.$http.get(url).then((response) =>{
                          var result =JSON.parse(response.bodyText).data.content;
                    this.tqzData =result.tqz.loops;
                    this.myOrder =result.myOrder;
                    this.tools =result.tools;
                    
                    this.$nextTick(function(){
                         that.setBgImg();//用setTimeout 200也可以获取到
})

                })

2、mock自己简单的使用

import Mock from 'mockjs'import navlist from './navlist'import login from './login'import echarts from './echarts'import table from './table'import groupList from './groupList'import getToken from './getToken'
let data =[].concat(navlist, login, echarts, table, groupList, getToken)

data.forEach(function(res){
    Mock.mock(res.path, res.data)
})

export defaultMock


例如 login.js
var data ={
    'login': '@boolean',
    'captcha': "@image('100x40', '#FFFFFF', '@word')",
    'message': '这里是登录提交后错误提示信息@increment',
    'uid': '@id',
    'name': '@cname',
    'token': '@guid'}

export default[{
    path: '/login',
    data: data
}]


页面调用这个接口
     axios({
                url: '/login',
                method: 'post',
                data: {
                    param:''}
            }).then(res =>{
                if(res.login){//把token和用户名存到  cookie里
                    commit('setToken', res.token)
                    commit('user/setName', res.name, { root: true})
                }
                resolve(res)
            })

3、查了下资料,mock的功能是拦截ajax的请求,模仿后台的接口返回数据,下面是看到别人文章觉得介绍很详细,摘录一下

(1)mock的使用  ****
//使用 Mock
let Mock = require('mockjs');
Mock.mock('http://1.json','get',{
    //属性 list 的值是一个数组,其中含有 1 到 3 个元素
    'list|1-3': [{
        //属性 sid 是一个自增数,起始值为 1,每次增 1
        'sid|+1': 1,
        //属性 userId 是一个5位的随机码
        'userId|5': '',
        //属性 sex 是一个bool值
        "sex|1-2": true,
        //属性 city对象 是对象值中2-4个的值
        "city|2-4": {
            "110000": "北京市",
            "120000": "天津市",
            "130000": "河北省",
            "140000": "山西省"},
        //属性 grade 是数组当中的一个值
        "grade|1": [
            "1年级",
            "2年级",
            "3年级"],
        //属性 guid 是唯一机器码
        'guid': '@guid',
        //属性 id 是随机id
        'id': '@id',
        //属性 title 是一个随机长度的标题
        'title': '@title()',
        //属性 paragraph 是一个随机长度的段落
        'paragraph': '@cparagraph',
        //属性 image 是一个随机图片 参数分别为size, background, text
        'image': "@image('200x100', '#4A7BF7', 'Hello')",
        //属性 address 是一个随机地址
        'address': '@county(true)',
        //属性 date 是一个yyyy-MM-dd 的随机日期
        'date': '@date("yyyy-MM-dd")',
        //属性 time 是一个 size, background, text 的随机时间
        'time': '@time("HH:mm:ss")',
        //属性 url 是一个随机的url
        'url': '@url',
        //属性 email 是一个随机email
        'email': '@email',
        //属性 ip 是一个随机ip
        'ip': '@ip',
        //属性 regexp 是一个正则表达式匹配到的值 如aA1
        'regexp': /[a-z][A-Z][0-9]/,
    }]
})

2、如何拦截ajax请求
Mock.mock( rurl, rtype, template )
 
如 Mock.mock('1.json','get',{
   'sid|+1': 1,
} )
记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,
将根据数据模板 template 生成模拟数据,并作为响应数据返回。

3、如何在后端接口完成的时候,取消mock数据
newwebpack.DefinePlugin({
       'process.env': {
            NODE_ENV: '"mock"'}
}),
process.env.NODE_ENV=='mock' && require('./mock/1.js');
process.env.NODE_ENV=='mock' && require('./mock/2.js');

根据webpack环境,在需要mock的时候,配置环境为mock,
在不需要mock的时候,只需要修改node_env 环境就可以了
无需注释代码,就可以完美解决后端接口还没完成的情况

免责声明:文章转载自《mock的使用及取消,node模仿本地请求:为了解决前后端分离,用户后台没写完接口的情况下》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇C#中,双屏/两屏/三屏/多屏跳转判断XAMPP 的安装配置(Linux 版)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

python自动化测试-D9-学习笔记之一(线程池)

# 封装 线程池import threadpoolclass MyPool(object):def __init__(self,func,size=20,data=None):#func 函数,size线程数,data数据self.func = funcself.size = sizeself.data = dataself.pool()def pool(...

C#实现局部峰值查找,功能对应Matlab中的findpeaks.m

相关算法的原理参考Ronny,地址:图像分析:投影曲线的波峰查找,这里感谢下原作者。 参照C++的代码实现,我用C#翻译了下,其实原理也很简单的,下面放相关实现代码: private double[] oneDiff(double[] data) { double[] result = new...

基于echarts的中国地图

HTML:<div style='100%x;height:600px;'></div>以下是echarts地图相关代码 dataList () {     // 初始化echarts实例     this.chinachart = echarts.init(document.getElementById('china_ma...

Android如何快速卸载apk

       在Adnroid中,直接运行ADB UNInstall无法卸载APK。害得哥每次进Settings去手工去卸载。        今天哥终于受不了,直接在DDMS里删除APK。然后再运行ADB UNINSTALL,居然成功!        所以哥马上写了三个脚本,一个是删除APK包括它下面的sqlite,share pref等,还有一个是卸载这...

阿里云CentOS搭建EasyMock​

阿里云CentOS搭建EasyMock​ 简介 Easy Mock 是一个可视化,并且能快速生成 模拟数据 的持久化服务。 特性 支持接口代理 支持快捷键操作 支持协同编辑 支持团队项目 支持 Restful 支持 Swagger 1.2 & 2.0 基于 Swagger 快速创建项目 支持显示接口入参与返回值 支持显示实体类 支持灵活性与扩...

SpringBootSecurity学习(19)前后端分离版之OAuth2.0 token的存储和管理

内存中存储token 我们来继续授权服务代码的下一个优化。现在授权服务中,token的存储是存储在内存中的,我们使用的是 InMemoryTokenStore : 图中的tokenStore方法支持很多种令牌的存储方式,来看一下: InMemoryTokenStore:这个版本的实现是被默认采用的,它可以完美的工作在单服务器上(即访问并发量压力不大的情...