微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

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

rush: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 进行请求

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

请求成功,获取到数据

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

rush:js;"> apiRoutes.post('/seller',res){ res.send({ appData }); });

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

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

原文地址:https://www.jb51.cc/vue/36082.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐