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

 更新时间:2018年05月29日 10:05:42   作者:daydreammoon  
这篇文章主要介绍了vue-cli项目中怎么使用mock数据,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

前言

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

步骤

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

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

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)
 })
}

mock.png

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

相关文章

  • vue项目实现下载zip压缩包

    vue项目实现下载zip压缩包

    这篇文章主要介绍了vue项目实现下载zip压缩包方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • antd vue 表格rowSelection选择框功能的使用方式

    antd vue 表格rowSelection选择框功能的使用方式

    这篇文章主要介绍了antd vue 表格rowSelection选择框功能的使用方式,具有很好的参考价值,希望对大家有所帮助。以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
    2022-12-12
  • vue实现数字动态翻牌器

    vue实现数字动态翻牌器

    这篇文章主要为大家详细介绍了vue实现数字动态翻牌器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue2.0 axios前后端数据处理实例代码

    vue2.0 axios前后端数据处理实例代码

    本篇文章主要介绍了vue2.0 axios前后端数据处理实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue组件生命周期详解

    vue组件生命周期详解

    这篇文章主要为大家详细介绍了vue组件生命周期,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • vue实现侧边定位栏

    vue实现侧边定位栏

    这篇文章主要为大家详细介绍了vue实现侧边定位栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 解决vue中post方式提交数据后台无法接收的问题

    解决vue中post方式提交数据后台无法接收的问题

    今天小编就为大家分享一篇解决vue中post方式提交数据后台无法接收的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 解决vue页面DOM操作不生效的问题

    解决vue页面DOM操作不生效的问题

    下面小编就为大家分享一篇解决vue页面DOM操作不生效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue组件(全局,局部,动态加载组件)

    vue组件(全局,局部,动态加载组件)

    组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。这篇文章主要介绍了vue组件(全局,局部,动态加载组件),需要的朋友可以参考下
    2018-09-09
  • 在vue中更换字体,本地存储字体非引用在线字体库的方法

    在vue中更换字体,本地存储字体非引用在线字体库的方法

    今天小编就为大家分享一篇在vue中更换字体,本地存储字体非引用在线字体库的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论