本篇文章主要介绍了vue-cli项目中怎么使用mock数据 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

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

请求成功, 获取到数据

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

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

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

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

最新资讯
潮汐锁定星球的“中间地带”可能孕育生命形式

潮汐锁定星球的“中间

潮汐锁定的星球非常特殊,一侧永远是白天,另一侧永远是夜
新模型揭示地磁场变化速率比预计的快10倍

新模型揭示地磁场变化

在近期的新研究中,科学家通过模拟显示了10万年以来地磁
内测微信小商店?腾讯的电商生意,终究还是门口蹭蹭而已

内测微信小商店?腾讯的

有些热度蹭得不错,蹭着蹭着,就被别人说成了抄袭,很多游戏
Facebook下月推出音乐流媒体服务 对标YouTube

Facebook下月推出音乐

Facebook准备于下月在美国推出官方授权的音乐视频,与Yo
美国德州特拉维斯县批准为特斯拉建厂提供税收优惠

美国德州特拉维斯县批

美国德克萨斯州首府奥斯汀所在的特拉维斯县周二批准了
Windows DNS服务器曝重大安全漏洞:可能形成蠕虫攻击

Windows DNS服务器曝

这个漏洞影响所有Windows Server版本其他版Windows 10
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大