专栏首页前端杂谈vue-cli项目中怎么mock数据

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 请求了

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • cookie方法封装及cookie缺点分析

    用户1741436
  • vue使用Axios做ajax请求

    用户1741436
  • 让你的JS代码更具可读性

    用户1741436
  • Http请求方法和响应状态码整理

    一个HTTP请求报文由请求行(request line)、请求头部(header)、空行和请求数据4个部分组成,格式如下: ? 可见请求行由请求方法字段、U...

    wangxl
  • 浏览器访问常见状态码

    作者:二璇妹妹 链接:http://www.jianshu.com/p/999656b86126 來源:简书

    小小鱼儿小小林
  • 红烧嗨鸟

    用户1907613
  • (译)Objective-C 类属性

    翻译自:Objective-C Class Properties 译者:Haley_Wong

    Haley_Wong
  • 关于VMAF,内容感知编码和无参指标的思考

    原标题:Thoughts around VMAF, Content-Aware Encoding and No-Reference metrics

    用户1324186
  • 56、合并区间 (Merge Intervals)

    yukong
  • 系统架构师论文-改进Web服务器性能的有关技术

    一个大中型的图书馆信息系统涉及到许多方面的技术与方案,本文着重讨论与Web服务器性能有关的一些内容。 本人有幸作为项目负责人之一参与了某大型图书馆数字化信息系...

    cwl_java

扫码关注云+社区

领取腾讯云代金券