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

最新推荐文章于 2022-08-29 21:41:40 发布

monikaH

最新推荐文章于 2022-08-29 21:41:40 发布

阅读量648

点赞数

分类专栏：我的前端成长记文章标签： express mock 数据新手

本文链接：https://blog.csdn.net/qq_40072782/article/details/102679609

版权

我的前端成长记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、安装和命令
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、创建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;