在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 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
js模拟微博发布消息
Feb 23 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
May 13 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 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函数utf8转gb2312编码
2006/12/21 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
js同源策略详解
2015/05/21 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
浅谈Vue的响应式原理
2019/05/30 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
Python绘制3D图形
2018/05/03 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
正隆泰信息技术有限公司上机题
2012/06/14 面试题
事业单位公务员的职业生涯规划
2014/01/15 职场文书
商务英语广告词大全
2014/03/18 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
初一年级组工作总结
2015/08/12 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers