在vue-cli搭建的项目中增加后台mock接口的方法


Posted in Javascript onApril 26, 2018

用vue-cli搭建一个前端开发环境确实是极其方便,在写前端代码肯定也是少不了需要调用后台提供的业务接口进行前后端交互,特别在敏捷开发中,前后端都要提前确定业务接口并进行打桩,在开发过程中基本是没有现成的后台可以调用,基本上都是自己写mock进行模拟。

在vue-cli搭建的项目中,框架上用的是express的web框架,要做一个mock是很方便的。

假设前端页面上需要获取所有的新闻列表,那么就需要mock一个能够返回所有新闻列表数据的接口。

接下来就在项目中实现mock功能。

脚手架生成项目

执行命令用webpack模板生成一个名为vuestrap的项目(名字任意)

vue init webpack vue-mock-demo

在出现的各提示选项中,没什么要求,为了方便,把不用的ESLint,unit tests,e2e都关掉(这些选项都随意)。

? Project name vuestrap
? Project description A Vue.js project
? Author 省略
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

选项选完,项目也就生成了。

执行命令,安装脚手架创建的组件

npm install

创建mock

和build、config等文件夹同级创建一个mock文件夹。

为了要mock一个获取新闻列表的数据接口,我们在mock文件夹下创建一个名为“router-news.js”的文件。

其中的内容为:

var express = require('express');
var router = express.Router();

//对所有新闻的get进行mock
router.get('/all', function(req, res, next) {
 //响应mock数据
 res.json([{
  title: 'news-title-1' ,
  content: 'news-content-1'
 },
 {
  title: 'news-title-2' ,
  content: 'news-content-2'
 }]);
});

module.exports = router;

这里的完整url应该是“/mock/news/all”,在这里只写了“/all”子路径。

在build/dev-server.js文件的头部require区域,require上面写的router。

var mockRouterNews = require('../mock/router-news')

最后,调用app.use将讲url和router关联。

app.use('/mock/news', mockRouterNews)

在这里,通过将url的拆分,可以明确的把url进行处理的模块化,一种业务可以交给对应的router进行响应处理,在使用app.use关联所有的router的地方也能看得很清楚。

注意:

使用app.use关联url和router的代码一定要放在对“connect-history-api-fallback”组件的app.use前,否则关联的url会被拦截掉,不会被mock的router正确响应。

在vue-cli搭建的项目中增加后台mock接口的方法

执行

在命令行中执行命令运行项目。

npm run dev

运行后,在浏览器的地址栏中补上mock的url并访问,就能看到mock的数据了,很方便。

在vue-cli搭建的项目中增加后台mock接口的方法

代码 https://github.com/bobenut/demo-webfront/tree/master/d0007/vue-mock-demo

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

Javascript 相关文章推荐
Javascript下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
BootStrap中的表单大全
Sep 07 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
如何在vue中使用jointjs过程解析
May 29 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 #Javascript
jQuery length 和 size()区别总结
Apr 26 #jQuery
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 #Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 #Javascript
vue如何判断dom的class
Apr 26 #Javascript
vue 中filter的多种用法
Apr 26 #Javascript
vue自定义filters过滤器
Apr 26 #Javascript
You might like
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
vue mounted组件的使用
2018/06/18 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
python清除指定目录内所有文件中script的方法
2015/06/30 Python
python复制文件到指定目录的实例
2018/04/27 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
公司办公室岗位职责
2014/03/19 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
北京天坛导游词
2015/02/12 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL