精华内容
下载资源
问答
  • Vue使用Mock拦截

    千次阅读 2019-12-19 12:23:38
    Vue使用Mock拦截 // 注意:本文适用 VUE状态机的情况下使用 axios 发送请求,其他情况暂未测试 一、在vue项目中安装 Mock.js npm i mockjs 二、在main.js同级目录新建mock.js文件 三、在main.js文件中引入刚刚新建...

    Vue使用Mock拦截

    // 注意:本文适用 VUE状态机的情况下使用 axios 发送请求,其他情况暂未测试
    
    一、在vue项目中安装 Mock.js
    npm i mockjs 
    
    二、在main.js同级目录新建mock.js文件
    三、在main.js文件中引入刚刚新建的mock.js文件
    require('./mock') //引入mock 拦截
    
    四、在mock.js文件中引入安装好的 mock.js功能
    const Mock = require('mockjs')
    
    五、在使用VUE状态机的情况下使用 axios 发送请求,代码示例如下
    //引入状态机
    import {createNamespacedHelpers} from 'vuex'; //引入仓库中的数据必做的  引入vueX
    const {mapGetters, mapMutations, mapState, mapActions} = createNamespacedHelpers('testStore'); // testStore 仓库名称
    
    //使用 仓库中的事件
    methods: {
           ...mapActions(['testRequest']), //引入请求方法
           // mockBtn 为HTML中的事件
            async mockBtn() { 
                    let data = await  this.testRequest('这是客户端传的参数');
               
             //data 请求被拦截返回的数据, 真后台一样会返回该数据
             console.log(data); 
          },
    }
    
    六、在VUE状态机中的请求, 代码示例如下
    //actions  状态机仓库中的请求对象
    actions: {
            //Mock 拦截测试
            async testRequest(context, payload){
                // console.log(payload) // payload为客户端的传值
                return await axios.post(`/api/test/mock`, { 
                    // "/api/test/mock" 为请求的接口真实情况也是如此,
                    //我们只需要在后台完成时,将main.js中的mock 引入去掉即可
                    payload 
                })
            },
        },
    
    七、在mock.js文件中拦截客户端发送的请求
    //返回数据的方法主体
    let mockTest = (msg) => {
        console.log(msg)   //msg为客户端传的值
        //输出 {url: "/api/test/mock", type: "POST", body: "{"payload":"这是客户端传的参数"}"}
        return {  
        // return 为要返回的数据,数据结构可自己定义,或用mock的方法生成,具体请参考mock官网
            testData: {
                name: '柳情',
                age: 20,
                sex: '女'
            }
        }
    }
    
    		//要拦截的请求接口   //拦截请求方式(必须匹配)    //返回数据的方法
    Mock.mock('/api/test/mock', 'post',                mockTest)
    
    八、mock拦截成功之后的返回数据,展示如下
    //返回的数据是在一个 大对象中的 data属性中, 这个data属性也是一个对象,我们要得真正的返回数据就是这个data了
    

    在这里插入图片描述

    展开全文
  • Vue使用Mock拦截 // 注意:本文适用 VUE状态机的情况下使用 axios 发送请求,其他情况暂未测试 一、在vue项目中安装 Mock.js npm i mockjs 二、在main.js同级目录新建mock.js文件 三、在main.js文件中引入刚刚新建...

    Vue使用Mock拦截

    // 注意:本文适用 VUE状态机的情况下使用 axios 发送请求,其他情况暂未测试
    

    一、在vue项目中安装 Mock.js

    npm i mockjs 
    

    二、在main.js同级目录新建mock.js文件
    三、在main.js文件中引入刚刚新建的mock.js文件

    require('./mock') //引入mock 拦截
    

    四、在mock.js文件中引入安装好的 mock.js功能

    const Mock = require('mockjs')
    

    五、在使用VUE状态机的情况下使用 axios 发送请求,代码示例如下

    //引入状态机
    import {createNamespacedHelpers} from 'vuex'; //引入仓库中的数据必做的  引入vueX
    const {mapGetters, mapMutations, mapState, mapActions} = createNamespacedHelpers('testStore'); // testStore 仓库名称
    
    //使用 仓库中的事件
    methods: {
           ...mapActions(['testRequest']), //引入请求方法
           // mockBtn 为HTML中的事件
            async mockBtn() { 
                    let data = await  this.testRequest('这是客户端传的参数');
               
             //data 请求被拦截返回的数据, 真后台一样会返回该数据
             console.log(data); 
          },
    }
    

    六、在VUE状态机中的请求, 代码示例如下

    //actions  状态机仓库中的请求对象
    actions: {
            //Mock 拦截测试
            async testRequest(context, payload){
                // console.log(payload) // payload为客户端的传值
                return await axios.post(`/api/test/mock`, { 
                    // "/api/test/mock" 为请求的接口真实情况也是如此,
                    //我们只需要在后台完成时,将main.js中的mock 引入去掉即可
                    payload 
                })
            },
        },
    

    七、在mock.js文件中拦截客户端发送的请求

    //返回数据的方法主体
    let mockTest = (msg) => {
        console.log(msg)   //msg为客户端传的值
        //输出 {url: "/api/test/mock", type: "POST", body: "{"payload":"这是客户端传的参数"}"}
        return {  
        // return 为要返回的数据,数据结构可自己定义,或用mock的方法生成,具体请参考mock官网
            testData: {
                name: '柳情',
                age: 20,
                sex: '女'
            }
        }
    }
    
    	//要拦截的请求接口   //拦截请求方式(必须匹配)    //返回数据的方法
    

    Mock.mock(’/api/test/mock’, ‘post’, mockTest)

    八、mock拦截成功之后的返回数据,展示如下

    //返回的数据是在一个 大对象中的 data属性中, 这个data属性也是一个对象,我们要得真正的返回数据就是这个data了
    
    展开全文
  • vue取消mock,真机调试

    万次阅读 2018-12-13 17:11:58
    **取消mock数据,更换真实接口数据** 打开config下面的index.js,下面的proxyTable target:“http:192.168.1.1XX ”改为后台地址 去掉pathRewrite **真机调试** ipconfig(ifconfig)获取ip package.json 添加--...
    **取消mock数据,更换真实接口数据**
    打开config下面的index.js,下面的proxyTable
    target:“http:192.168.1.1XX ”改为后台地址
    去掉pathRewrite
    
    **真机调试**
    ipconfig(ifconfig)获取ip
    package.json 
    添加--host 0.0.0.0(支持ip地址访问)
    dev:"webpack-dev-server --host 0.0.0.0" --inlinr --progress
    重启服务器npm run dev/start
    npm install babel-polyfill --save//如果浏览器没有promise,会自动添加es6的新特性
    main.js引入
    import ‘babel-polyfill’ 所有的浏览器都可以支持,用来兼容浏览器,避免出现白屏的情况
    
    展开全文
  • 文章目录前言需要修改的文件1、/src/main.js2、.... 记录一下去掉mock数据,用自己接口登录 需要修改的文件 1、/src/main.js 代码如下: 注释掉 // if (process.env.NODE_ENV === 'production') { // const { mockXHR


    前言

    记录一下去掉mock数据,用自己接口登录


    需要修改的文件

    1、/src/main.js

    代码如下:

    注释掉

    // if (process.env.NODE_ENV === 'production') {
    //   const { mockXHR } = require('../mock')
    //   mockXHR()
    // }
    
    

    2、.env.development

    代码如下:

    在这里插入图片描述
    修改为需要请求的地址(此处IP为后端IP)


    3、vue.config.js

    代码如下:

     devServer: {
        port: port,
        open: true,
        proxy: {
          '/msd': {
            target: 'http://192.168.0.106:8763', // 后台接口域名
            changeOrigin: true // 是否跨域
          }
        },
        overlay: {
          warnings: true,
          errors: true
        }
        // after: require('./mock/mock-server.js')
      },
    

    配置代理地址,注释掉after这一行


    4、src/api/user.js

     export function login(data) {
      return request({
        url: '/admin/login',
        method: 'post',
        data
      })
    }
    
    

    URL修改为后端接口


    5、src/store/modules/user.js

    根据接口的参数和返回结果,修改vuex中的login和getinfo的参数

    配置代理地址,注释掉after这一行


    6、src/utils/request.js

    在这里插入图片描述
    此处的code要和后端的code对应,模板原本的mock数据为2000,后端接口的默认为200,不修改就请求不到接口数据,同理错误码也需和后端接口的错误码对应


    展开全文
  • vue中使用mock(常用方式)前言1. 新建vue项目2. 安装mock插件3. 在src下新建mock目录4. 安装axios插件功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一...
  • MockMock 介绍搭建测试项目mock.js 模拟数据的基础使用方式Vue 项目中使用 mock.js 拦截数据后端接口写好后,mock.js 的移除处理 写下博客用于自我复习、总结。 如有错误之处,请各位大佬指出。 学习资料来源于:...
  • 对于新手来说的第一个难点就是对接自己的接口,取消项目本身的mock数据了,毕竟使用这个就是要使用自己的后台数据了 以下是自己使用过程中的一些信息点的记录,主要介绍请求跨域请求自己的接口 0. 首先不用说就是...
  • vue中使用Mock模拟数据

    千次阅读 2020-07-23 17:08:38
    A:在做开发时,后端程序没有配齐,前端人员在做vue开发时,需要自己先模拟接口,模拟数据,等到后端数据配齐,提供好接口后,将项目中的接口换一下即可 一、本地加载请求静态json文件的形式 在 Public 文件夹下...
  • const TokenKey = 'vue_admin_template_token' const myStorage = window.localStorage export function getToken() { if (myStorage) { return localStorage.getItem(TokenKey) } else { return sessionStora
  • 0.首先需要会在vue项目中安装mockjs以及简单的mockjs语法 1.目录分为api和mock: 在api.js中封装代理函数 在mock/data/user.js中进行mock,这里模拟的是一组用户数据 在mock/mock.js中配置请求模拟调试器 两个...
  • 一、在build/webpack.dev.conf.js下: 1、在顶端'use strict'下添加,新加入的配置项如下: ...注意:如果你的浏览器默认是:http://localhost:8080/#/,可以在route路由中配置如下选项,会去掉/#/:
  • Vue+Ant Design Vue+Mockjs----mock

    千次阅读 2019-12-10 21:34:50
    Mock 文章目录Mockmock 介绍目的优点缺点comment安装mock 实现 mock 介绍 mockjs官方使用文档 目的 方便生成随机数据,拦截Ajax请求。   偶尔会写一些前端的项目,参考一些比较知名的UI框架,里面很多例子都会把...
  • 最新的vue-webpack-template 中已经去掉了dev-server.js 但是要进行模拟后台数据的,如何模拟本地数据操作?解决方法:dev-server.js 改用webpack-dev-conf.js代替。 新版webpack.dev.conf.js配置如下: 在const ...
  • 开发环境走mock-server 在开发环境中,vue-config-js我们配置代理的时候开了一个叫 before: require('./mock/mock-server.js')或 bafter: require('./mock/mock-server.js') 所以会走mock-server 但是当我们请求...
  • 怎么移除或关闭ant design pro for vue框架中的mock
  • { warnings: false, errors: true }/*, before: require('./mock/mock-server.js')*/ }, api/user.js import request from '@/utils/request' export function login(data) { return request({ url: '/user/login',...
  • vue-admin-template改掉mock数据

    千次阅读 2019-10-17 10:38:48
    基础的框架 :https://github.com/PanJiaChen/vue-admin-template 全框架:...vue-admin-template里面有 参阅文档:https://panjiachen.github.io/vue-element-admin-site/guide/ess...
  • 想要去掉moke,需要做一下几步, 1.修改.env.development,将base api修改为本地的 # just a flag ENV = 'development' # base api //VUE_APP_BASE_API = '/dev-api' VUE_APP_BASE_API = 'http://127.0.0.1' 2....
  • 最新的vue-webpack-template 中已经去掉了dev-server.js 但是要进行模拟后台数据的,如何模拟本地数据操作?解决方法:dev-server.js 改用webpack-dev-conf.js代替。 新版webpack.dev.conf.js配置如下: 在const ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 997
精华内容 398
关键字:

vue去掉mock

vue 订阅