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 相关文章推荐
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
Vue不能观察到数组length的变化
Jun 08 Javascript
vue中添加与删除关键字搜索功能
Oct 12 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调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
深入理解python中的select模块
2017/04/23 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
django框架cookie和session用法实例详解
2019/12/10 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
JMS中Topic和Queue有什么区别
2013/05/15 面试题
个人生活学习自我评价范文
2013/11/26 职场文书
大一新生军训时的自我评价分享
2013/12/05 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
小班开学寄语
2014/04/04 职场文书
5s标语大全
2014/06/23 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
暑期社会实践证明书
2014/11/17 职场文书
投诉信范文
2015/07/02 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
快速学习Oracle触发器和游标
2021/06/30 Oracle