vue+mock.js实现前后端分离

之前都是介绍在普通项目中使用mock.js,那么本次就来介绍一下在vue中使用mock.js实现前后端分离。

安装:

npm install mockjs

这里先写个小案例介绍一下具体使用,写法不规范,仅供参考。

然后案例讲完后我们讲具体的规范使用

那么一起来看看这个案例吧:

<script>
 import Mock from "mockjs"
 export default {
  name: "FunctionsDbSource",
  methods:{
   // 接口测试
   init(){
    // 请求后端数据,查询数据源
    this.axios({
     method: "get",
     url:`${this.baseURL}/GetAll`,
     headers: {
      Account: "Admin",
      Password:"888888"
     }
    })
    .then((response)=> {
     console.log(response);
    })
    .catch((error)=> {
     console.log(error);
    });
   }
  },
  created(){
   Mock.mock(`${this.baseURL}/GetAll`, {
    'users|5': [ {
     'name': '@cname', //中文名称
     'age|1-100': 100, //100以内随机整数
     'birthday': '@date("yyyy-MM-dd")', //日期
     'city': '@city(true)' //中国城市
    }]
   });
   this.init();
  }
 }
</script>

首先引入了mock.js,然后定义了一个方法,用axios请求后台数据,在创建后调用此方法,然后我在创建后使用mock.js拦截请求,模拟数据(这里我模拟的是一个5位长度的users数组),只要mock的url地址和请求的地址相同,就会自动拦截请求。

我们打印了一下请求的结果response:

大家可以看到,和后端返回的数据格式一致,只是里面内容是我们自己模拟的,所以,只要提前和后端商量好数据格式,我们自己进行模拟数据,完成界面得渲染,等到后端写好数据接口,到时候只要把mock部分删除,就是我们自己想要的结果了。

但是每个请求都这样在vue页面中去写mock,后期删除起来也不方便,可维护性低,高耦合,所以我们这里就涉及到规范的写法。

1、安装:

npm install mockjs

2、手动新建mock.js文件(当然新建文件夹把它抽离出来也是可以的)

内容如下(根据实际需求更改):

import Mock from 'mockjs' // 引入mockjs

let data = 'users|5': [ {
   'name': '@cname', //中文名称
   'age|1-100': 100, //100以内随机整数
   'birthday': '@date("yyyy-MM-dd")', //日期
   'city': '@city(true)' //中国城市
  }]

Mock.mock('/data/index', 'get', data) // 根据数据模板生成模拟数据

3、main.js中引入(注意自己js文件的路径)

// 引入mock
require('./mock.js');

4、页面中使用:

<script>
 import Mock from "mockjs"
 export default {
  name: "FunctionsDbSource",
  methods:{
   // 接口测试
   init(){
    // 请求后端数据,查询数据源
    this.axios({
     method: "get",
     url:"data/index",
    })
    .then((response)=> {
     console.log(response);
    })
    .catch((error)=> {
     console.log(error);
    });
   }
  },
  created(){
   this.init();
  }
 }
</script>

以此我们就完成了抽离mock.js,之后只要往mock的js文件中添加请求即可,后续只要等后端接口写好,把main.js中的引入mock.js注释(删除)即可。

还有一种更直接的方法,因为mock只是我们生产环境需要的东西,当我们发布上线肯定不需要这部分请求,都会换成实际请求地址和数据,所以直接把mock.js配置到生产环境,上线部署打包不打包这部分即可,就和vue中的代理部分,上线是不会打包这部分的一样。

感兴趣的童鞋可以自己去研究研究哈。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2019-07-22

vue+axios+mock.js环境搭建的方法步骤

在前后端分离开发模式下,前端项目通常在项目构建初期需要使用假数据以及相应的http请求来进行辅助开发,例如在后端接口还没开发好下,我们可以模拟http请求以及数据来进行前端的axios封装,接口设计,对http状态码处理等.前端模拟数据的方法有许多种,假如你熟悉node.js以及express框架,你可以快速地构建一个后端服务器来进行辅助开发,我本人也比较喜欢这种方式,这种方法在我日后的文章将会有介绍.如果你不熟悉node也没关系,我将一步一步教你如何在前端vue项目中使用mock.js来构建一

vue项目中mock.js的使用及基本用法

官方网址:http://mockjs.com/ mockjs是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发.我们可以使用真实的url,mockjs可以拦截ajax请求,返回设定好的数据. 使用方式 这里主要讨论在vue项目中,使用axios发送ajax请求,mock.js模拟数据的流程. vue-cli搭建项目后,安装axios和mock.js npm install -S axios npm install -D mockjs 在项目中新建mock.js文件夹,来设

vue项目中,main.js,App.vue,index.html的调用方法

如下所示: 1.main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件 2.App.vue是我们的主组件,所有页面都是在App.vue下进行切换的.其实你也可以理解为所有的路由也是App.vue的子组件.所以我将router标示为App.vue的子组件. 1.index.html文件入口 2.src放置组件和入口文件 3.node_modules为依赖的模块 4.config中配置了路径端口值等 5.build中配置了webpack的基本配置.开发环境配置.生产环境配置等

在vue项目中使用Nprogress.js进度条的方法

NProgress.js提供页面加载进度条效果,当页面打开加载时,在页面顶部会出现进度条加载动画.NProgress.js是轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中. Ajaxyy应用程序的细长进度条.灵感来自Google,YouTube和Medium. 在vue中使用nprogress.js 安装 $ bower install --save nprogress $ npm install --save nprogress 在项目中引入 在main.js中引入要使用的npro

在Vue项目中使用d3.js的实例代码

之前写一个 Demo里面 有些东西要使用d3实现一些效果 但是在很多论坛找资源都找不到可以在Vue里面使用D3.js的方法,npm 上面的D3相对来说 可以说是很不人性化了 完全没有说 在webpack上怎么使用D3.js 最后折腾很久 看到某位外国大佬 看他的案例 成功的实现了在Vue项目里面实现D3的使用 首先安装 npm install d3 --save-dev 以防万一,然后看package.json 安装完成 在我们开始之前,让我们渲染一个Vue组件,它使用常规的D3 DOM操作呈现

在Vue项目中使用jsencrypt.js对数据进行加密传输的方法

项目需求中需要对用户登录时的密码进行加密,在网上查询些许文章后,最终与后端协商使用jsencrypt.js. jsencrypt.js的github地址: https://github.com/travist/js... 使用yarn安装至Vue项目 yarn add jsencrypt --dep 或者使用npm npm install jsencrypt --dep 引入jsencrypt import { JSEncrypt } from 'jsencrypt' 可封装为全局混合,便于调用

vue项目中 使用 pako.js 解密 gzip加密字符串的代码详解

前言 今天跟后台对接一个接口,接受到一个加密的值,说是通过gzip加密过的,然后就蒙蔽了, 赶紧上百度找了一下资料,通过一篇文章(原文在底部)发现有个js库可以解密,就下载轻松解密了 实现代码 poko.js可至Github下载 https://github.com/nodeca/pako or npm install pako import pako from 'pako' // 一个是加密:window.btoa(),一个是解密:window.atob() function decode(e

vue项目中在外部js文件中直接调用vue实例的方法比如说this

一般我们都是在main.js中引入vue,然后在vue文件中直接使用this(this指向的是vue实例),但是在实际开发中,我们往往会引入外部的js文件使用this,这个this就会指向window,并不是我们期待的vue实例,那么就需要重新引入vue文件(import Vue from 'vue'),这样很麻烦.在目前项目中我使用的方法是mian.js导出vue实例,然后在需要使用的js中引入. 步骤一:main.js导出vue实例 var vue = new Vue({ el: '#app

vue 项目中使用Loading组件的示例代码

什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参数是Vue构造函数,还可以接收一个可选的参数,用于配置插件: var myplugin = { install:function(Vue, options){ ... } } 从意义上来说,正如jQuery的$.fn使jQuery有了一个庞大的生态一样,Vue的插件机制使Vue形成了一个生态系统,你

详解如何在Vue项目中导出Excel

Excel 导出 Excel 的导入导出都是依赖于js-xlsx来实现的. 在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据. 使用 由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader. 所以你先需要安装如下命令: npm install xlsx file-saver -S npm install script-loader -S -D 由于js-xlsx体积还是很大的,导出功能也不是一个非常常用的功能,所以

vue项目中使用axios上传图片等文件操作

axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 首先安装axios: 1.利用npm安装npm install axios –save 2.利用bower安装bower install axios