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

作者:daydreammoon 时间:2024-05-29 22:46:38 

前言

注意:网上很多教程说需要在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

来源:https://www.jianshu.com/p/20018549fe93

标签:vue-cli,mock数据
0
投稿

猜你喜欢

  • Python 递归式实现二叉树前序,中序,后序遍历

    2022-09-22 17:38:32
  • 全面了解Python环境配置及项目建立

    2023-11-03 18:40:44
  • SQL Server中通过reverse取某个最后一次出现的符号后面的内容(字符串反转)

    2024-01-23 14:19:39
  • Python+Selenium实现一键摸鱼&采集数据

    2021-08-22 01:05:41
  • python中的classmethod与staticmethod

    2021-07-14 00:43:29
  • Python EOL while scanning string literal问题解决方法

    2021-01-20 23:58:38
  • Python ftp上传文件

    2023-10-01 06:35:34
  • 深入理解ES6的迭代器与生成器

    2024-04-29 13:36:18
  • Python如何使用print()函数输出格式化字符串

    2021-03-09 22:43:41
  • Python中re模块:匹配开头/结尾(^/$)

    2021-08-31 02:29:13
  • golang实现跨域访问的方法

    2024-02-15 18:33:31
  • ORACLE常用数值函数、转换函数、字符串函数

    2009-11-21 09:31:00
  • XMLHTTP中setRequestHeader的参数问题

    2008-09-30 10:48:00
  • pandas创建新Dataframe并添加多行的实例

    2021-06-21 07:11:48
  • Python面向对象程序设计之私有属性及私有方法示例

    2023-11-21 06:29:04
  • 用asp给网站添加rss聚合功能

    2007-11-05 19:08:00
  • Python FastAPI 多参数传递的示例详解

    2023-07-03 01:21:05
  • Python Logging 日志记录入门学习

    2022-05-17 14:48:39
  • pycharm激活码快速激活及使用步骤

    2022-05-09 01:31:29
  • SQL Server中单引号的两种处理技巧

    2008-05-23 13:30:00
  • asp之家 网络编程 m.aspxhome.com