node搭建mock服务（利用express）

新建文件夹mockServe, 新建server.js,  

2.将mock的数据（data.json）放入mockServer文件中，

3. npm init -y, 安装express包  npm  i express

4.在server.js中搭建服务, npm start 启动服务

//引入express
const express = require('express')
// 创建服务器应用实例
const app = express()
// 引入json数据
const appData  = require('./data.json') const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings

// 注册路由
app.get('/seller', function(req, res){
  // res.json(数据)->把数据转换成json字符串,根据数据内容,修改了Content-Type内部的编码格式,并返回
 res.json({ error:0, data:seller })
})

app.get('/goods', function(req, res){
  res.json({
    error:0,
    data:goods
  })
})

app.get('/ratings', function(req, res){
  res.json({
    error:0,
    data:ratings
  })
})

// 3.运行服务器应用,并监听端口
// 端口号可以任意选择,但是不要小于1000
app.listen("5000",function(err){
  if(err){
      console.log('服务器连接失败',err)
  }else{
      console.log('服务器启动成功,启动于http://localhost:5000上')
  }
})

 

此时在vue项目中的main.js测试下有没有数据出现， 

import axios from "axios";

axios.get('/seller').then(v=> console.log(v))

此时并没有数据返回，因为运行vue项目默认在本机搭建了8080端口的服务，去请求5000端口的服务，已经跨域了，我们需要在vue.config.js中设置代理

module.exports = {
  lintOnSave: false,

  devServer: {
    // 端口配置
    // port: 1888,
    // 友情提示:改完请重启项目才能生效!!!
    // 反向代理配置
    //需要转发路由的路径
    proxy: {
      "/api": {
        target: "http://localhost:5000",
        pathRewrite: { "^/api": "" },
        changeOrigin: true
      }
    }
  }
};

然后在去main.js去请求数据即可

import axios from "axios";

axios.get('/api/seller').then(v=> console.log(v))

 

 

第二种更简便的方法，在webpack的配置文件vue.config.js的devServer配置mock服务，因为vue项目运行的服务，以及mock的服务都在devServer中，同一个服务，不存在跨域

devServer.before

function (app, server, compiler)

提供在服务器内部先于所有其他中间件执行自定义中间件的功能。这可以用于定义自定义处理程序，例如：

webpack.config.js

module.exports = { //... devServer: { before: function(app, server, compiler) { app.get('/some/path', function(req, res) { res.json({ custom: 'response' }); }); } } };

const appData = require("./data.json"); const seller = appData.seller;
const goods = appData.goods;
const ratings = appData.ratings;

module.exports = {
  lintOnSave: false,

  devServer: {
    // 端口配置
    // port: 1888,
    // 友情提示:改完请重启项目才能生效!!!
    // 反向代理配置
    //需要转发路由的路径
    // proxy: {
    //   "/api": {
    //     target: "http://localhost:5000",
    //     pathRewrite: { "^/api": "" },
    //     changeOrigin: true
    //   }
    // }
 before(app) {
      app.get("/api/seller", function(req, res) {
        res.json({
          errno: 0,
          data: seller
        });
      });
      app.get("/api/goods", function(req, res) {
        res.json({
          errno: 0,
          data: goods
        });
      });
      app.get("/api/ratings", function(req, res) {
        res.json({
          errno: 0,
          data: ratings
        });
      });
    }
  }
};

此时在vue项目中的main.js测试下有没有数据出现

import axios from "axios";

axios.get('/seller').then(v=> console.log(v))