vue-cli项目使用mock数据的方法(借助express)


Posted in Javascript onApril 15, 2019

前言

现如今前后端分离开发越来越普遍,前端人员写好页面后可以自己模拟一些数据进行代码测试,这样就不必等后端接口,提高了我们开发效率。今天就来分析下前端常用的mock数据的方式是如何实现的。

主体

项目是基于vue-cli的,首先必须搭建好vue项目环境。如果有同学不知道如何搭建vue项目,可以参考我的另外一篇文章。因为mock数据需要借助node.js中express框架,所以必须先在项目中安装npm install express --save

搭建完基础后,我们在src文件下创建一个mock文件,用来存放我们模拟数据。因为现在大多后台返回数据类型为json格式,所以我们在mock文件下创建一个user.json文件。

vue-cli项目使用mock数据的方法(借助express)

接下来在build文件夹下webpack.dev.conf.js文件中添加以下代码:

const express = require('express')
const app = express()
const users = require('../src/mock/user.json')
const routes = express.Router()
app.use('/api', routes)

vue-cli项目使用mock数据的方法(借助express)

然后在devServer添加:

before (app) {
   app.get('/api', (req, res) => {
    res.json(users)
   })
  }

vue-cli项目使用mock数据的方法(借助express)

完成以上两步之后,我们就可以在网页中看到我们mock的api文件了。 在地址栏输入:http://localhost:8080/api

vue-cli项目使用mock数据的方法(借助express)

最后我们只需要发送Ajax请求来获取数据就可以了

npm install axios -S

在App.vue文件中发送Ajax请求获取数据

vue-cli项目使用mock数据的方法(借助express)

最后重启项目npm run dev, 可以看到请求的数据已经显示在页面中

vue-cli项目使用mock数据的方法(借助express)

后缀

本文大体介绍了一些mock数据的使用方法,因为自己也对express框架用法不是很熟,所以在配置的时候没有具体说明每一句代码的作用,如果有同学清楚也可以留言,大家一起交流。

欢迎在GitHub上一起学习前端,分享代码以外的知识技能。

找到我:GitHub

总结

以上所述是小编给大家介绍的vue-cli项目使用mock数据的方法(借助express),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery last-child 列表最后一项的样式
Jan 22 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
微信小程序定位当前城市的方法
Jul 19 Javascript
详解vue 图片上传功能
Apr 30 Javascript
微信小程序实现吸顶特效
Jan 08 Javascript
说说Vuex的getters属性的具体用法
Apr 15 #Javascript
vue 中Virtual Dom被创建的方法
Apr 15 #Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 #jQuery
详解javascript对数组和json数组的操作
Apr 15 #Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 #Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 #Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 #Javascript
You might like
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python队列queue模块详解
2018/04/27 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
pandas DataFrame运算的实现
2020/06/14 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
钳工实习自我鉴定
2013/09/19 职场文书
平安工地建设方案
2014/05/06 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
综合办公室岗位职责
2015/04/11 职场文书
四风之害观后感
2015/06/09 职场文书