vue项目结合Mock+Express模拟后台假数据

项目
该项目使用了node中的express+mockjs实现了动态模拟接口，已封装，可多处使用。
Mock.js官方定义生成随机数据，拦截 Ajax 请求。

目录结构
项目结构
我这里用的是vue-cli3创建的新项目，然后在目录下创建了mock文件夹，用来存放模拟数据的代码，在其中新建了一个serve.js文件。
首先安装express
npm install -save express
在serve.js里写一个简单的express服务：

let express = require('express');
let app = express();

app.get('/',function (req,res) {
    res.send(`<h1>Hello, World</h1>`)
})

app.listen(8081,function(){
    console.log('服务器已启动')
})

然后启动项目

我是在test整个项目下直接启动的serve.js，所以带了mock这个文件夹名字，如出现上图的效果，说明启动成功。
然后在浏览器输入http://localhost:8081就可以看到页面加载出来了
请求成功
启动的话也可以在项目的package.json中的scripts里加上
"mock": "node api/app.js"
这样我们就可以npm run mock启动这个文件了，也可以实现同样的效果。
上面的实现了效果之后，接下来我们先引入mockjs
npm install --save-dev mockjs
然后修改servr.js:

let express = require('express');
let app = express();
let Mock = require('mockjs');

app.get('/',function (req,res) {
    res.send(`<h1>Hello, World</h1>`)
});

app.use('/api/test/project',function(req,res){
    res.json(Mock.mock({
        'code':200,
        'data|1-9':[{
            'id|+1':1
        }]
    }))
});

app.listen(8081,function(){
    console.log('服务器已启动')
})

重新启动serve.js，在浏览器输入http://localhost:8081/api/test/project，就可以看到返回的数据：
json数据
在vue中使用
简单的在app.vue中写一个axios请求

mounted(){
    axios.get('/api/test/project').then((data)=>{
      console.log(data)
    }).catch((err)=>{
      console.log(err)
    })
  }

记得先引入axios，import axios from 'axios'。
启动vue项目后会发现

因为我们vue项目的端口是8080，而serve.js端口号是8081，端口号不同，跨域了，需要我们配置下Vue.config.js

module.exports={
    devServer:{
        proxy:{//反向代理
            '/api':{
                target:'http://localhost:8081/',
            }
        }
    }
}

重新启动vue项目，刷新页面，请求成功

可是这样serve.js的复用性不是很高，我们可以把代码再封装下，在mock文件夹下再建一个test.js文件。代码如下：

let express = require('express');
let router = express.Router();
let Mock = require('mockjs');

router.get('/project',function (req,res) {
    let data = Mock.mock({
        'code':200,
        'data|1-9':[{
            'id|+1':1
        }]
    });
    return res.json(data);
})

module.exports = router;

然后再把serve.js修改下

let express = require('express');
let app = express();
let Mock = require('mockjs');
let router = express.Router();

app.get('/',function (req,res) {
    res.send(`<h1>Hello, World</h1>`)
});

router.use('/test',require('./test'));
app.use('/api',router)

app.listen(8081,function(){
    console.log('服务器已启动')
})

重启下serve.js；刷新下页面
请求成功了
请求成功，修改成功，这样我们以后增加接口和修改数据只需修改test.js文件即可。

小知识点

req.query: 解析url中的querystring，如?name=haha，req.query 的值为{name: ‘haha’}
req.params: 解析 url 中的占位符，如/:name，访问/haha，req.params 的值为{name: ‘haha’};
req.body: 解析后请求体，需使用相关的模块，如 body-parser，请求体为{“name”: “haha”}，则 req.body 为 {name: ‘haha’};
可以根据请求方式打印出来具体的参数查看是否传参成功。
app.use(path,callback)中的callback既可以是router对象又可以是函数
app.get(path,callback)中的callback只能是函数。
npm i --save ==dependencies 项目（运行时，发布到生产环境时）依赖
npm i --save-dev ==devDependencies 工程构建（开发时，打包时）依赖；

如有不足，请大家及时指出。

十年树人

发布了15 篇原创文章 · 获赞 15 · 访问量 1377

私信关注

vue项目结合Mock+Express模拟后台假数据

猜你喜欢