vue使用express mock模拟后台接口数据(新手亲试)

一、安装和命令
1.在项目中安装 express
npm install express --save (本地安装)或者
npm install express -g (全局安装)

2.全局安装nodemon ()
npm install nodemon -g

3.启动(代码配置完之后的操作):最后用nodemon server.js 替代之前的node server.js 实时更新 server.js
切换到service.js 的上一级 运行nodemon server.js 即可直接访问到mock的数据啦

  1. 打开浏览器,启动起项目 然后就能像真正接口那样访问
    在这里插入图片描述

**二、代码
1、创建service.js文件,重启一个express服务

var express = require('express'); //引入express搭建一个最基本的服务器
var app = express(); // 使用express创建服务
var getJudgeList = require('./getJudgeList');  // require是引入存放数据文件的路径,当然你也可以直接写在请求里面(不推荐)

// 解决跨域问题
app.all('*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', 'http://localhost:3000');  // 服务端口
    // res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With, x-sso-token');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    res.header("Content-Type", "application/json;charset=utf-8");
    res.header("Content-Type", "application/json");
    res.header("Access-Control-Allow-Credentials", true);
    // res.header("Access-Control-Allow-Credentials", false);
    if (req.method == 'OPTIONS') {
        res.send(200); /*让options请求快速返回*/
    } else {
        next();
    }
});

// 设置路由配置
// app.get/post/use(既可以处理get也可post,括号里面是自定义的接口)
app.get('/commonLpt/getJudgeList', function(req, res) { 
    console.log('get执行了')
    var result = {
        msg: "成功",
        code: 0,
        data: getJudgeList  // 看代码第三行
    };
    res.send(result);  
});


// 监听端口号
app.listen(8899, function() {
    console.log('Example app listening on port 8899!');
});

然后在新建一个文件存放数据,本人是在和servic.js 同级下新建的,所以注意上面的路径哦,千万不要写错了哦

var result = [{
        "type": "轻微",
        "judge_type": "维修",
        "amount": "200",
        "judge_role": "",
        "judge_name": "人"
    },
    {
        "type": "还好",
        "judge_type": "工单",
        "amount": "100",
        "judge_role": "维修部",
        "judge_name": "张三"
    }
]
module.exports = result;

如果是本地已经接入了特定端口的程序,在接口请求时要用mock的数据时,一定要把请求的地址改为你监听的接口哦 ,在本例中是 http://localhost:8899/

然后就能像正常请求接口一样请求我们起的这个express服务啦

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值