在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 相关文章推荐
JTrackBar水平拖动效果
Jul 15 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
JS写滑稽笑脸运动效果
May 28 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 arsort 数组降序排序详细介绍
2016/11/17 PHP
jquery 新浪网易的评论块制作
2010/07/01 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
js实现简易计算器功能
2019/10/18 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
2014信息公开实施方案
2014/02/22 职场文书
学习演讲稿范文
2014/05/10 职场文书
英语教师自荐信
2014/05/26 职场文书
2014年班务工作总结
2014/12/02 职场文书
事业单位个人总结
2015/02/12 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
JS实现数组去重的11种方法总结
2022/04/04 Javascript