Vue mockjs编写假数据并请求获取实现流程

当后端并未编写后台json数据，但是前端又要使用数据进行页面的编写，这是便可用mockjs编写一个假的数据源，发送ajax请求并获取数据

1.使用命令行下载mockjs

npm install mockjs --save-dev

2.在src文件目录下新建一个mock文件夹

3.在新增的mock文件夹下新建一个json文件，例：list.json 和一个mockServe.js文件

list.json文件如下

[
    {
        "date": '2016-05-02',
        "name": '王小虎',
        "address": '上海市普陀区金沙江路 1518 弄'
    },
    {
        "date": '2016-05-02',
        "name": '王小虎',
        "address": '上海市普陀区金沙江路 1518 弄'
    },
    {
        "date": '2016-05-02',
        "name": '王小虎',
        "address": '上海市普陀区金沙江路 1518 弄'
    },
    {
        "date": '2016-05-02',
        "name": '王小虎',
        "address": '上海市普陀区金沙江路 1518 弄'
    },
]

4.mockServe.js如下

// 先引入mockjs模块
import Mock from 'mockjs';
// 引入你编写json所在文件的路径
import list from './list.json';
// 模拟数据返回
Mock.mock("/mock/list", {
    code: 200,
    data: list
});

5.把mockServe.js文件引入到src文件夹下的main.js入口文件钟

import '@/mock/mockServe'

6.在src目录下的api文件夹中新建一个mockAjax.js文件

// 对于axios进行二次封装
import axios from 'axios';
// 1.利用axios对象的方法create，去创建一个axios实例
// 2.request就是axios，只不过稍微配置一下
const request = axios.create({
    // 配置对象
    // 基础路径：发请求的时候，路径中会出现mock
    baseURL:"/mock",
    // 代表请求超时的时间
    timeout:5000
})
//请求拦截器----在项目中发请求（请求没有发出去）可以做一些事情
request.interceptors.request.use((config) => {
    return config;
  });
  //响应拦截器----当服务器手动请求之后，做出响应（相应成功）会执行的
  request.interceptors.response.use((res) => {
      //相应成功做的事情
      return res.data;
    },
    (err) => {
      alert("服务器响应数据失败");
    }
  );
// 对外暴露
export default request;

7.在src目录下的api文件夹中新建一个index.js文件

import mockRequest from './mockAjax'
export const reqGetList = () => mockRequest({url:'/list',methods:'get'})

8.在相应要发送请求的页面编写请求代码

import {reqGetList} from '@/api/index.js
mouted(){
    reqGetList().then(res=>{
        console.log(res)
    })
}

经过以上步骤，便可在页面中请求到相对应的假数据

也可将api文件在入口文件统一管理

在main.js中

// 任意组件可以使用API相关的接口
import * as API from '@/api'
Vue.prototype.api = API;

然后在相应请求的页面中发送请求的代码为

this.api.reqGetList().then(res=>{
	this.dataList = res.data;
})

到此这篇关于Vue mockjs编写假数据并请求获取实现流程的文章就介绍到这了,更多相关Vue mockjs编写数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue之使用mockjs生成模拟数据案例详解

    Vue之使用mockjs生成模拟数据案例详解

    目录 在项目中安装mockjs 在Vue项目中使用mockjs的基本流程 Mock语法规范 数据模板定义规范(Data Template Definition,DTD) 数据占位符定义规范(Data Placeholder Definition,DPD) Mock.mock() Mock.Random() 在项目中安装mockjs 在项目目录下执行以下安装命令 npm install mockjs --save 在Vue项目中使用mockjs的基本流程 安装完成后,在项目src/utils目录下

  • Vue+Mockjs模拟curd接口请求的示例详解

    在前后端分离的项目中常常会遇到当前端页面开发完成但是后端接口还没好,暂不支持联调的情况下,一般我们会用到mock数据这边简单说一下最常见且经常会遇到的curd接口模拟注:这边可以和后端先约定好接口路径以及入参返参的字段,避免二次修改 1.安装依赖,新建js文件,在文件中导入mock.js,模拟列表数据 yarn add mockjs const Mock = require("mockjs") const list = [] const length = 18 for (let i =

  • vue+mockjs模拟数据实现前后端分离开发的实例代码

    vue+mockjs模拟数据实现前后端分离开发的实例代码

    本文介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码,分享给大家,也给自己留个笔记. 在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 等等优点. 总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接口返回

  • vue-cli项目中使用Mockjs详解

    vue-cli项目中使用Mockjs详解

    背景 前端在早期jQuery时代时,前端功能和后端工程基本上都是合在一起,典型的就是常见的maven工程下面的webapp目录包含前端各类静态资源文件. 这个时候,我们总是会遇到这些问题: 老大,接口文档还没输出,我的好多活干不下去啊! 后端小哥,接口写好了没,我要测试啊! 测试时间不够啊,就要发版了,今天难道我有看明天的太阳升起? 诸如种种,就是一句话:劳资,再也不要指望你们了! node出现之后,准确的说是前后端分离之后,前端迫切需要一种机制,不在需要依赖后端接口开发.经过这几年的发展,有好

  • 利用vue + koa2 + mockjs模拟数据的方法教程

    前言 首先说一下这是本人第一次分享东西第一次写,写的不好或者有错误的请大家多包涵支出错误共同进步,好了,话不多说了,来一起看看详细的介绍吧. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 等等优点. 第一步 安装vue-cli项目 不多说网上一大把 需要的朋友们参考这篇文章:http://www.jb51.net/article/118987.htm ,介绍的非常详细.

  • vue中使用mockjs配置和使用方式

    vue中使用mockjs配置和使用方式

    目录 mockjs配置和使用方式 需求 步骤 mock使用及mock无侵入的解决 什么是mock? 为什么要用到mock? 如何使用mock? mock无侵入式配置 mockjs配置和使用方式 需求 在前后端分离的开发中,需要前后端同时开发,但是在后端完成前,暂时是没有数据返回给前端使用的,如果先写静态后面再改,就有重复工作的内耗存在. 所以我们需要一种简单快速的模拟数据的模块,本文选的是mockjs. 步骤 1.安装mockjs npm install mockjs 2.在项目的src文件夹下

  • 在Vue中使用mockjs代码实例

    前言 前后端分离的开发模式,前端需要向后端请求数据(ajax请求),但实际开发过程中,前后端会约定一份接口文档,但前后端开发进度并不一致,当后端没有完善接口功能时,前端需要在本地模拟数据返回,此时需要使用到mockjs. 安装 npm install mockjs --save-dev 目录结构 配置 1.api下的config.js:配置axios的拦截处理 import axios from 'axios' // 创建一个axios实例 const service = axios.creat

  • mockjs+vue页面直接展示数据的方法

    最近想往数据库里导一些数据,同事推荐了mock,了解一下觉得不错,现将在vue用的mock贴上来 写在前默认看此文的盆友都是有vue基础的哟~~ 一.导读 将 mockjs 的数据直接展示在 vue 页面上 mockjs官网链接 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 等等优点. 二.安装mockJS //安装mockJS npm install mockjs 不

  • 详解在vue-cli项目下简单使用mockjs模拟数据

    为什么要用mockjs 实际开发中,前后端分离,前端需要后端的接口去完成页面的渲染,但是并不能等到后端成员写完接口再开始进行测试.大部分情况下,前后端需要同时进行开发.因此便需要mockjs制造随机数据来进行后端接口模拟. 看了官方文档之后一脸懵逼,这些都是什么鬼?????因此总结了一篇文章,来介绍mockjs的简单使用. 首先搭建一个vue项目 不介绍了 安装mockjs npm install mockjs --save-dev 启动项目 npm run dev 创建mock.js文件 在s

  • Vue mockjs编写假数据并请求获取实现流程

    当后端并未编写后台json数据,但是前端又要使用数据进行页面的编写,这是便可用mockjs编写一个假的数据源,发送ajax请求并获取数据 1.使用命令行下载mockjs npm install mockjs --save-dev 2.在src文件目录下新建一个mock文件夹 3.在新增的mock文件夹下新建一个json文件,例:list.json 和一个mockServe.js文件 list.json文件如下 [ { "date": '2016-05-02', "name&q

  • Vue openLayers实现图层数据切换与加载流程详解

    Vue openLayers实现图层数据切换与加载流程详解

    目录 openlayers介绍 一.实现效果预览 二.代码实现 openlayers介绍 OpenLayers是一个用于开发WebGIS客户端的JavaScript包.OpenLayers 支持的地图来源包括Google Maps.Yahoo. Map.微软Virtual Earth 等,用户还可以用简单的图片地图作为背景图,与其他的图层在OpenLayers 中进行叠加,在这一方面OpenLayers提供了非常多的选择.OpenLayers采用面向对象方式开发. OpenLayers 是一个专

  • vue项目及axios请求获取数据方式

    目录 一.首先导入用到的组件和axios 二.在data中将要用到的数据给一个初始值,为空 三.在methods中写方法,发送axios获取数据 四.传递数据 五.封装 axios axios拦截器 一般vue项目中 一个页面是由多个组件组成的,各个组建的数据都是统一在主界面的组件中发送axios请求获取,这样极大地提高了性能. 一.首先导入用到的组件和axios import HomeHeader from './components/Header' import HomeSwiper fro

  • vue+vuecli+webpack中使用mockjs模拟后端数据的示例

    vue+vuecli+webpack中使用mockjs模拟后端数据的示例

    前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTML模板生成模拟数据. 拦截并模拟 ajax 请求. 语法规范 Mock.js 的语法规范包括两部分: 1.数据模板定义规范(Data Template Definition,DTD) 2.数据占位符定义规范(Data Placeholder Definition,DPD) 数据模板定义规范 DTD

  • vue2.5.2使用http请求获取静态json数据的实例代码

    1.配置 build/webpack.dev.conf.js // 获取静态json数据 const express = require('express') const app = express() const apiServer = express() const bodyParser = require('body-parser') apiServer.use(bodyParser.urlencoded({ extended: true })) apiServer.use(bodyPar

  • VUE:vuex 用户登录信息的数据写入与获取方式

    整体思路: 前台获取用户数据,向后台发送post请求,验证成功后 前台接受数据,改变用户登录状态 将登录状态及用户数据写入到state中 这样多个页面就可以直接使用this.$store.getters.getuname调用state中的用户信息 1. 向后台发送请求,若成功返回用户名,密码,使用 this.$store.dispatch('setLogin', true);将数据写入到state中 页面:login.vue 代码: this.loginData = await getUserI

  • 基于jstree使用AJAX请求获取数据形成树

    概述: 一般情况下都是通过ajax进行请求获取数据.boostrap+ajax 1.代码 //权限分配 $('#authority').click(function() { $("#jstree").jstree({ "core" : { "themes" : { "responsive": false }, // so that create works "check_callback" : true,

  • jQuery使用ajax跨域请求获取数据

    跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作,所以跨域能力也算是前端工程师的基本功之一. var webMethod = "http://localhost:54473/Service1.asmx/HelloWorld"; jQuery.support.cors = true; //之前没有加这句老是提示no tr

随机推荐