详解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 相关文章推荐
9个javascript语法高亮插件 推荐
Jul 18 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
JavaScript函数详解
Feb 27 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
谈谈JS中的!!
Dec 07 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 Javascript
一起深入理解js中的事件对象
Feb 06 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
php单例模式的简单实现方法
2016/06/10 PHP
PHP中Array相关函数简介
2016/07/03 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
python读写ini文件示例(python读写文件)
2014/03/25 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
Python龙贝格法求积分实例
2020/02/29 Python
python实现控制台输出颜色
2021/03/02 Python
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
产品促销活动策划书
2014/01/15 职场文书
开门红主持词
2014/04/02 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
体育教师求职信
2014/05/24 职场文书
国际金融专业自荐信
2014/07/05 职场文书
代领毕业证委托书
2014/08/02 职场文书
超市周年庆活动方案
2014/08/16 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
工作收入证明模板
2015/06/12 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
导游词之南京中山陵
2019/11/27 职场文书
python 破解加密zip文件的密码
2021/04/22 Python