在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 计算图片加载数量的代码
Jan 01 Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
vue-router 中 meta的用法详解
Nov 01 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--用万网的接口实现域名查询功能
2012/12/13 PHP
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
Python编程中的for循环语句学习教程
2015/10/14 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
python机器学习之决策树分类详解
2017/12/20 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
pygame实现成语填空游戏
2019/10/29 Python
Python中如何添加自定义模块
2020/06/09 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
婚礼司仪主持词
2014/03/14 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
党员年度个人总结
2015/02/14 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
《法国号》教学反思
2016/02/22 职场文书
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript