在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 相关文章推荐
Jquery解析json字符串及json数组的方法
May 29 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
JavaScript的function函数详细介绍
Nov 20 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学习之流程控制实现代码
2011/06/09 PHP
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
取得传值的函数
2006/10/27 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
vue移动端使用canvas签名的实现
2020/01/15 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
使用Python编写Linux系统守护进程实例
2015/02/03 Python
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
python实现Virginia无密钥解密
2019/03/20 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
《守株待兔》教学反思
2014/03/01 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
护士求职信
2014/07/05 职场文书
中班教师个人总结
2015/02/05 职场文书
通知书大全
2015/04/27 职场文书
义卖募捐活动总结
2015/05/09 职场文书
军训通讯稿范文
2015/07/18 职场文书
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏