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 条评论
登录 后参与评论

相关文章

来自专栏openshift持续集成

openshift镜像构建-s2i环境变量设置

源码构建的时候我们可以在应用程序内设置环境变量的值(每行一个),方法是在源码库的.s2i / environment文件中指定它们。这个文件中指定的环境变量在构...

4977
来自专栏DeveWork

记录一个在Mac OS X 中本地安装Ghost 的报错问题

新买的Macbook Air 升级了最新版的OS X 10.10 Yosemite,昨天在本地安装Ghost 的时候出现了问题,在这里做一个记录。 安装node...

2389
来自专栏程序员同行者

构建NTP时间服务器

2402
来自专栏乐沙弥的世界

Virtual Box下安装Oracle Linux 6.3

      Oracle Linux 6.3已经发布快2年了,其功能有很大的提升,增强了KVM,文件卷的在线resizing,LVM支持 raid4, 5, 6...

692
来自专栏大魏分享(微信公众号:david-share)

红帽技术干货速递系列之1:RHV4实验环境快速部署指南

大卫说: 本文是大卫同事马林根据实验完成的RHV4.0 step by step的安装步骤。这对于我们在PoC环境中部署RHV有很大的帮助。大卫也欢迎读者朋友们...

3834
来自专栏遊俠扎彪

如何让你的程序支持管道输入

其实很简单,管道是通过stdin和stdout来传给程序的。

2500
来自专栏java沉淀

用自己的电脑做网站服务器,实现外网访问

网站服务器其实就是一台大型的电脑主机,我们也可以将自己家的电脑主机去做成一台用于存放网站的网站小型服务器供别人访问。那么如何用自己的电脑去做网站服务器呢?由于...

8.1K8
来自专栏张伟博客

linux安装一键安装phpstudy web环境

9597
来自专栏流柯技术学院

windows / linux系统中,端口被占用解决方法

一、在windows操作系统中,查询端口占用和清除端口占用的程序 提升权限后用:netstat -b 或用 1、查询端口占用的进程ID          ...

4872
来自专栏运维小白

Linux基础(day50)

12.10 Nginx访问日志 Nginx访问日志目录概要 日志格式 vim /usr/local/nginx/conf/nginx.conf //搜索log_...

2149

扫码关注云+社区

领取腾讯云代金券