详解vue-cli项目中怎么使用mock数据


Posted in Javascript onMay 29, 2018

前言

注意:网上很多教程说需要在build目录下的dev-server.js文件中配置,但目前最新的vue-cli是没有dev-server.js这个文件的,因为已经被合并到webpack.dev.conf.js文件中,所以直接在该文件中配置即可

步骤

1、在根目录新建一个mock文件夹用于存在所有用于数据测试的.json文件

详解vue-cli项目中怎么使用mock数据

dir.png

posts.json

{
 "code": 200,
 "data": [
 {
  "id": 0,
  "title": "复联3大陆定档5月11日,全球最晚!!"
 },
 {
  "id": 1,
  "title": "蚁人2最新预告发布,首次展现量子领域!!"
 }
 ]
}

users.json

{
 "code": 200,
 "data": [
 {
  "id": 0,
  "nickname": "美国队长",
  "avatar": "url"
 },
 {
  "id": 1,
  "nickname": "惊奇队长",
  "avatar": "url"
 }
 ]
}

2、在build目录下找到webpack.dev.conf.js文件,编写以下代码

// mock code
const express = require('express')
const app = express()
const posts = require('../mock/posts.json') // 文章列表数据源
const users = require('../mock/users.json') // 用户列表数据源
const routes = express.Router()
app.use('/api', routes)

// 如果是post请求,那么将get改为post即可
devServer: {
 ...
 before(app){
 app.get('/api/posts', (req, res) => {
  res.json(posts)
 })
 app.get('/api/users', (req, res) => {
  res.json(users)
 })
 }
}

测试,浏览器输入http://localhost:8080/api/posts

详解vue-cli项目中怎么使用mock数据

posts.json

3、使用第三方http请求库axios进行ajax请求

命令行安装 npm install axios --save-dev,然后在/src/main.js使用axios

import axios from 'axios'
Vue.prototype.$http = axios

模拟请求代码(users同理)

created() {
 this.$http.get("http://localhost:8080/api/posts").then(res => {
 console.log(res.data)
 })
}

详解vue-cli项目中怎么使用mock数据

mock.png

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用jQuery简化JavaScript开发分析
Feb 19 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
js字符编码函数区别分析
Dec 28 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
微信小程序自定义联系人弹窗
May 26 Javascript
js统计页面上每个标签的数量实例代码
May 29 #Javascript
浅谈React的最大亮点之虚拟DOM
May 29 #Javascript
深入理解Vue Computed计算属性原理
May 29 #Javascript
javascript、php关键字搜索函数的使用方法
May 29 #Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 #Javascript
Vue 组件传值几种常用方法【总结】
May 28 #Javascript
讲解vue-router之命名路由和命名视图
May 28 #Javascript
You might like
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
载入进度条 效果
2006/07/08 Javascript
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
Python类的专用方法实例分析
2015/01/09 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
python删除文本中行数标签的方法
2018/05/31 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
python热力图实现简单方法
2021/01/29 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
安全大检查反思材料
2014/01/31 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
《要下雨了》教学反思
2014/02/17 职场文书
工作态度检讨书范文
2015/05/06 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
2016年会开场白台词
2015/06/01 职场文书
导游词之桂林
2019/08/20 职场文书