详解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 相关文章推荐
Javascript无阻塞加载具体方式
Jun 28 Javascript
不同Jquery版本引发的问题解决
Oct 14 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
vue小白入门教程
Apr 02 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
js实现跳一跳小游戏
Jul 31 Javascript
js实现磁性吸附的示例
Oct 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
PHP开发微信支付的代码分享
2014/05/25 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
JavaScript 空位补零实现代码
2010/02/26 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
python脚本实现查找webshell的方法
2014/07/31 Python
Python中的字符串查找操作方法总结
2016/06/27 Python
python实现自动发送邮件
2018/06/20 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
python+flask实现API的方法
2018/11/21 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
药品质量检测应届生求职信
2013/11/14 职场文书
历史专业个人求职信范文
2013/12/07 职场文书
餐厅总厨求职信
2014/03/04 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
学生上课说话检讨书
2014/10/25 职场文书
2014年度安全工作总结
2014/12/04 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
亲情作文之母爱
2019/09/25 职场文书
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers