精华内容
下载资源
问答
  • Vue项目实战:Mock设置

    2020-03-22 20:01:56
    Mock设置 作用: 开发阶段,为了高效率,需要提前Mock 减少代码冗余,灵活插拔 减少沟通,减少接口联调时间 mock设置三种方式: 本地创建json 集成Mock API easy-mock平台 (1)本地加载请求静态json文件: 在...

    Mock设置

    作用:

    • 开发阶段,为了高效率,需要提前Mock
    • 减少代码冗余,灵活插拔
    • 减少沟通,减少接口联调时间

    mock设置三种方式:

    • 本地创建json
    • 集成Mock API
    • easy-mock平台

    (1)本地加载请求静态json文件

    • 在public下创建文件夹mock,mock里创建文件夹user,user里添加文件login.json:
    {
        "status": 0,
        "data": {
            "id": 12,
            "username": "admin",
            "email": "...",
            "phone": null,
            "role": 0,
            "createTime": 123,
            "updataTime":456
        }
    }
    
    • 在App.vue中:
    export default {
      name: 'App',
      components: {
      },
      data() {
        return { 
          res: {}
        }
      },
      mounted() {
       this.axios.get('/mock/user/login.json').then((res) => {
         this.res = res
       }) 
      }
    }
    
    • 在main.js中将以下注释掉内容:
    //import env from './env'
    //axios.defaults.baseURL = '/api';
    //axios.default.baseURL = env.baseURL;
    

    这种方式虽然简单,但是请求的地址并不是真正的地址,但接口联调对接时,就需要改代码。

    (2)本地集成mock.js实现数据mock:

    • 先安装mock.js

    npm i mockjs --save-dev

    • 安装完,在main.js中加入:
    //mock开关
    const mock = true;
    if (mock) {
        require('./mock/api')
    }
    axios.defaults.baseURL = '/api';
    
    
    • 在src文件夹建一个mock文件夹,在改文件夹中新建api.js文件:
    import Mock from 'mockjs'
    Mock.mock('/api/user/login', {
        "status": 0,
        "data": {
            "id": 12,
            "username": "admin",
            "email": "...",
            "phone": null,
            "role": 0,
            "createTime": 123,
            "updataTime":456
        }
    })
    
    • 在App.vue中,修改:
    export default {
      name: 'App',
      components: {
      },
      data() {
        return { 
          res: {}
        }
      },
      mounted() {
       this.axios.get('/user/login').then((res) => {
         this.res = res
       }) 
      }
    }
    

    (3)easy-mock平台

    • 在Easy Mock官网上创建好项目。(创建过程中将 项目基础URL可随便取)

    • 在main.js中修改:

    //mock开关
    const mock = false;
    if (mock) {
        require('./mock/api')
    }
    axios.defaults.baseURL = '...为Easy Mock上生成的base URL地址';
    
    • 在Easy Mock官网创建接口,URL和数据都设置为自己需要的。
    展开全文
  • Vue&Mock设置

    2020-10-08 02:44:53
    Vue&Mock设置

    前端跨域解决方案:https://yuanyu.blog.csdn.net/article/details/108948464 

    1. 开发阶段,为了高效率,需要提前Mock
    2. 减少代码冗余、灵活插拔
    3. 减少沟通、减少接口联调时间
    npm i axios --save

    1 本地创建json

    本地创建json文件无法无缝切换到开发环境,应为json文件是写死了的

    public/mock/user/userInfo.json

    测试


    2 easy-mock平台

    easy-mock不稳定,如果能自己搭建使用这种方式时最好的,不建议使用线上的这个

    // src/util/httpRequest.js
    import axios from 'axios'
    const http = axios.create({
        timeout: 8000,
    })
    // 后期只需要该这里就可以无缝切换到线上地址了
    http.defaults.baseURL = 'https://easy-mock.com/mock/5f7e075546477f19b2848a6d/api';
    http.defaults.timeout = 8000
    export default http
    
    <!--
      src/App.vue
    -->
    <template>
      <div id="app">
        {{userInfo}}
      </div>
    </template>
    <script>
    import http from "./util/httpRequest";
    export default {
      name: 'App',
      data() {
        return {
          userInfo: {}
        }
      },
      mounted() {
        // 通过easy-mock平台实现数据mock
        http.get('/user/details').then(({data}) => {
          this.userInfo = data.data
        })
      }
    }
    </script>
    <style>
    </style>
    


    3 集成Mock API

    Mock API有个特点,控制台是查看不到请求的,应为在请求在发出去之前就被拦截了

    1. https://www.npmjs.com/package/mockjs
    2. http://mockjs.com/
    3. https://github.com/nuysoft/Mock/wiki
    npm install mockjs --save

    // src/mock/api.js
    import Mock from 'mockjs'
    Mock.mock('/api/user/details',{
        "status": 0,
        "data": {
            "id|1001-11000": 0,
            "username": "@cname",
            "email": "admin@51purse.com",
            "phone": null,
            "role": 0,
            "createTime": 1479048325000,
            "updateTime": 1479048325000
        }
    })
    
    // src/util/httpRequest.js
    import axios from 'axios'
    // mock开关
    const mock = true
    if (mock) {
        // 记得不要用import,import是预编译,require是需要执行到这里才会加载,不然永远都会拦截
        require('../mock/api')
    }
    const http = axios.create({
        timeout: 8000,
    })
    http.defaults.baseURL = '/api';
    http.defaults.timeout = 8000
    export default http
    
    <!--
      src/App.vue
    -->
    <template>
      <div id="app">
        {{userInfo}}
      </div>
    </template>
    <script>
    import http from "./util/httpRequest";
    export default {
      name: 'App',
      data() {
        return {
          userInfo: {}
        }
      },
      mounted() {
        // 本地集成mockjs实现数据mock
        // 注意控制台看不到发送请求,发请求前就被拦截了
        http.get('/user/details').then(({data}) => {
          this.userInfo = data.data
        })
      }
    }
    </script>
    
    

    展开全文
  • 本地开发Mock设置

    2020-04-15 19:55:38
    mock设置的方法: 本地创建json easy-mock平台 集成Mock API 本地创建json: 特点:虽然简单但是当请求真正的接口时,需要修改代码(真实接口并不是在mock中) easy-mock: 特点:代码改动较少,但是easy-...

    moke 的优点:

    1. 开发阶段,为了高效率,需要提前Mock
    2. 减少代码冗余、灵活插拔
    3. 减少沟通,减少联调时间

    mock设置的方法:

    1. 本地创建json
    2. easy-mock平台
    3. 集成Mock API

    本地创建json:

        //本地加载请求静态json文件形式,直接请求如下
        // this.axios.get('/mock/user/login.json').then((res)=>{
        //   this.res=res;
        // })

    特点:虽然简单但是当请求真正的接口时,需要修改代码(真实接口并不是在mock中)

    easy-mock:

    特点:代码改动较少,但是easy-mock网站非常容易垮掉,一旦出问题,那整个项目都不行了

    本地继承mockjs实现mock数据:

    mockjs是用js实现的插件库,可以拦截数据拦截请求,返回数据。但实际并未发生真正的请求,即只是代码层面的拦截后直接返回。

    import Mock from 'mockjs';
    Mock.mock('/api/user/login',{
      "status": 0,
      "data": {
        "id": 12,
        "username": "admin",
        "email": "admin@51purse.com",
        "phone": null,
        "role": 0,
        "createTime": 1479048325000,
        "updateTime": 1479048325000
      }
    })

    在main.js中引入:

    //根据前端的跨域方式做调整/a/b :/api/a/b=>/a/b
    axios.defaults.baseURL='/api';
    axios.defaults.timeout=8000;
    
    //mock开关
    const mock = true;
    if(mock){
      require('./mock/api')
    }

    备注:import和require的区别

    import:预编译加载
    requre:从上到下去执行时才加载

     

    展开全文
  • Vue笔记——项目设置mock数据

    千次阅读 2018-12-02 19:41:17
    这个时候我们就需要在Vue项目设置一些假数据,即mock数据。 配置完成之后,我们就可以像请求后台数据一样,通过一个特定的url来获取到我们需要的mock数据,比如:/api/goods、/api/ratings 等。 今天就跟大家分享一...

    一、情景设定

    我们在使用Vue写前端项目的时候,可能会需要后端传回来的数据来进行测试。但是有的时候我们没有后端的环境,不能获取到我们想要的数据。这个时候我们就需要在Vue项目中设置一些假数据,即mock数据。

    配置完成之后,我们就可以像请求后台数据一样,通过一个特定的url来获取到我们需要的mock数据,比如:/api/goods/api/ratings 等。

    今天就跟大家分享如何在自己的Vue项目中设置mock数据。需要注意的是,我现在使用的是Vue2.x版本,不过我想Vue3.x版本应该也是大同小异。

    二、准备工作

    首先我们应该在本地准备我们需要的mock数据,一般情况下是一些json数据,我们将这些json数据放在一个 data.json 文件中,然后将这个文件放在项目主目录下即可。如果你没有准备,可以直接点击 进行下载

    除此之外我们就不需要额外准备其他的数据了,我们设置mock数据,主要是依靠webpack给我们自动安装的express组件,而且设置这些数据的时候,只需要在 build 文件夹下的 webpack.dev.conf.js 文件中。

    三、具体配置

    我们首先应该引入 express组件data.json 数据文件,具体代码如下:

    const express = require('express')
    const app = express()
    const apiRoutes = express.Router()
    
    let appDate = require('../data.json')
    let seller = appDate.seller
    let goods = appDate.goods
    let ratings = appDate.ratings
    
    app.use('api', apiRoutes)
    

    完成上面的工作之后,我们找到 devServer 这个对象

    给这个对象新增一个方法,具体的代码如下:

    before(app) {
      app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0,
          data: seller
        })
      }),
      app.get('/api/goods', (req, res) => {
        res.json({
          errno: 0,
          data: goods
        })
      }),
      app.get('/api/ratings', (req, res) => {
        res.json({
          errno: 0,
          data: ratings
        })
      })
    }
    

    这里对上面的代码做一些解释:我们新建了三条mock数据,分别通过 /api/seller/api/goods/api/ratings 来获取,返回的结果是包含errnodatajson对象,如果如果你还想让这些mock数据返回更多的东西,可以在errnodata之后添加新的属性。

    例如你想通过 /api/seller 返回message:"这些是商家数据"这条信息,可以这样改写:

    before(app) {
      app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0,
          data: seller
          message: "这些是商家数据"
        })
      })
    

    四、获取数据

    如此一来,使用npm run dev来重启我们的Vue项目(注意这里一定要重新启动,修改这些配置不会触发热加载),然后通过我们配置的api来获取mock数据。

    展开全文
  • vue设置mock

    2018-12-06 17:39:26
    转载:Vue笔记——项目设置mock数据 Vue笔记——项目设置mock数据 2018年12月02日 19:41:17 fengzhenzhen8023 阅读数:236 &...
  • 设置Mock的三种方案Mock设置(模拟数据)使用JSON文件使用easy-mock使用本地集成Mockjs API Mock设置(模拟数据) Mock的项目实战:从0独立开发企业级电商系统 为什么要用Mock? 开发阶段,为了高效率,需要提前...
  • googletest mock设置 编译器选项 vs下

    千次阅读 2016-04-23 10:30:03
    mock则是模拟一种外部接口,让他提供特定情况下的返回值。粗以为是一种定义好的大型宏替换。 vs编译选项 /MD /mt m为多线程或许是multithread,d为ddl 、/MDd 为debug版本,没有d为release版本。release会有优化。...
  • MockMock 介绍搭建测试项目mock.js 模拟数据的基础使用方式Vue 项目中使用 mock.js 拦截数据后端接口写好后,mock.js 的移除处理 写下博客用于自我复习、总结。 如有错误之处,请各位大佬指出。 学习资料来源于:...
  • Vue项目中如何使用Mock

    2021-06-30 15:38:39
    Vue项目中如何使用Mock 当后端还未写完接口,但前端已经写完页面,这时候就可以与你的后端人员约定好接口字段,然后自己使用mock来模拟后台返回数据。 使用步骤 首先在Vue项目中安装 mockjs // 没有项目的 直接 vue...
  • 企业应该采取文档优先的方法来开发API。虽然测试驱动的开发强调编写设计良好的代码,但文档驱动的开发考虑了API的可用性。...在缺少API的情况下,团队应尽早使用MockAPI来验证文档以及后续的实现和集成。顾名思
  • react项目中配置mock数据

    千次阅读 2019-09-04 15:21:20
    最近在项目中需要数据测试,为了方便,直接引入mockjs。 首先使用npm安装mockjs, npm install mockjs 然后在api文件夹中创建index.ts文件,数据随便填,可以参考mock.js,内容如下: 其中index.ts配置 var ...
  • Mock在Vue项目中的使用(详解)1.Mock介绍2.Mock的使用 1.Mock介绍 生成随机数据,拦截 Ajax 请求 不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。 这是Mock官网给出的介绍,简单明了的说出了...
  • $ dva new dva-quickstart 这会创建 dva-quickstart 目录,包含项目初始化目录和文件,并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能。 然后我们 cd 进入 dva-quickstart 目录,并启动开发...
  • Vue项目中使用mock

    2020-07-05 11:15:16
    概念: mock是一个模拟数据生成器,旨在帮助前端独立于后端进行开发,帮助编写单元测试。 mock有如下功能: 根据数据模板生成模板数据 模拟ajax请求,生成请求数据 基于html模板生成模拟数据 安装...
  • mock

    2018-09-25 17:26:02
     1.2 为什么需要Mock  1.3 Stub和Mock异同  1.4 Mockito资源  1.5 使用场景 2 使用Mockito   2.1 验证行为  2.2 模拟我们所期望的结果  2.3 RETURNS_SMART_NULLS和RETURNS_DEEP_STUBS  2.4 模拟...
  • 项目中使用mock数据

    2019-03-25 23:52:44
    一 在安装mockjs和axios 命令行中分别输入以下...二 在src文件夹下创建mock文件夹,存放mock数据 mock文件夹下一定要创建index.js文件,然后再在main.js中引入 main.js import './mock' mock文件夹下的index.js ...
  • vue项目中使用mock

    2019-09-23 16:16:05
    1、src下新建mock文件夹,mock文件夹下新建response目录 ,造后台接口数据,输出getUserInfo import Mock from ‘mockjs’ const Random = Mock.Random export const getUserInfo = (options) => { const userInfo...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,648
精华内容 7,859
关键字:

mock设置项目