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

作者:wolfSoul 时间:2024-05-09 15:25:26 

在vue项目中, mock数据可以使用 node 的 express模块搭建服务

1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件

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

2.在build目录下的 dev-server.js的文件作如下更改


var appData = require('../test/data.json')
// 获取数据
var apiRoutes = express.Router();

//get请求
apiRoutes.get('/seller',function(req,res){
res.send({
 appData
});
});

app.use('/api',apiRoutes);

3. 在.vue做请求, 就可以成功获取data.json的数据了, 下面使用 axios 进行请求


axios.get('/api/seller',{
    params: {
     ID: 12345
    }
  })
   .then(function (response) {
    console.log(response);
   })
   .catch(function (error) {
    console.log(error);
   });

请求成功, 获取到数据

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

4. 如过要做post请求, 需要对 dev-server.js 文件做对应的修改


apiRoutes.post('/seller',function(req,res){
res.send({
 appData
});
});

这样就可以在vue 项目中进行模拟 ajax 请求了

来源:http://www.cnblogs.com/yuqing6/p/6953837.html

标签:vue,cli,mock
0
投稿

猜你喜欢

  • DjangoRestFramework 使用 simpleJWT 登陆认证完整记录

    2021-03-29 18:34:12
  • python的简单web框架flask快速实现详解

    2023-03-10 08:26:36
  • python中的json模块常用方法汇总

    2022-02-27 01:35:09
  • pygame学习笔记(5):游戏精灵

    2021-10-13 18:29:56
  • vue-element-admin 登陆及目录权限控制的实现

    2024-04-28 09:26:29
  • SQL的substring_index()用法实例(MySQL字符串截取)

    2024-01-27 19:30:19
  • 微信小程序自定义支持图片的弹窗

    2024-04-16 10:31:25
  • 空行不空格式排版组织原理

    2010-05-03 14:46:00
  • Mysql启动的方式(四种)

    2024-01-28 02:38:53
  • Python格式化输出--%s,%d,%f的代码解析

    2022-10-31 06:26:44
  • 解决py2exe打包后,总是多显示一个DOS黑色窗口的问题

    2022-05-22 21:51:51
  • MySQL索引优化实例分析

    2024-01-26 18:34:27
  • numpy中的ndarray方法和属性详解

    2021-04-17 10:19:04
  • Python 海象运算符( :=)的三种用法

    2023-08-25 02:46:08
  • 快速解决Golang Map 并发读写安全的问题

    2024-04-30 10:03:46
  • 全屏flash的尺寸分析

    2009-02-11 13:22:00
  • 通过vue如何设置header

    2024-05-29 22:24:25
  • Python二分查找+字符串模板+textwrap模块,

    2023-03-12 11:12:44
  • oracle 字符串转成行

    2009-06-19 17:38:00
  • PHP使用POP3读取邮箱接收邮件的示例代码

    2024-06-05 09:44:48
  • asp之家 网络编程 m.aspxhome.com