Mock.js各种使用_mock.js 请求头-优快云博客

本文介绍了如何使用Express、Vue和Mock.js配合，创建本地数据服务器，模拟接口返回值，适用于前端开发和API测试。步骤包括安装依赖、创建mock数据、设置跨域及路由、并展示了在Vue项目中调用模拟数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Mock.js 简单使用

# 第一步：安装
npm install mockjs

# 第二步：创建index.js
// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素,每个元素均包含id,name,description属性
    'list|1-10': [{
        'id|+1': 1,// 属性 id 是一个自增数，起始值为 1，每次增 1
        'name': '@cname',//占位符语法，生成一个中文名称
        'description|3-5':'@csentence',//占位符语法，生成3-5个中文句子
        'area':'@province',//省份占位符，将随机生成省份名称
    }]
})
// 输出结果
console.log(JSON.stringify(data))

# 第三步：命令行运行 node index.js

express、express-generator插件、Mock.js 简单使用

# 第一步：安装
express` (express框架): `npm install express -g
express-generator` (express项目生成插件): `npm install express-generator -g
mockjs`(模拟数据生成库): `npm install mockjs

# 第二步：在指定路径下打开命令行，输入express mockserver,即可生成名为mockserver的项目

在这里插入图片描述

# 第三步：打开app.js文件,在 var app = express() 之后加入如下代码，屏蔽跨域:
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    next();
});

# 第四步：仿照users.js文件的格式及其在app.js文件中的路由挂载方式（任何一个熟练地代码搬运工肯定看得懂），引入mockjs,生成需要的随机数据,当接收到前端发送的请求时,返回生成的数据:

//服务端响应代码片段/routes/operationboard.js:
//业务逻辑为查询系统告警信息列表
//node服务器启动后，请求地址为:127.0.0.1:3000/operationboard/systemwarn
//3000端口为express默认启动端口

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

router.get('/systemwarn', function (req, res, next) {
  var data =Mock.mock({
      'list|20':[{
            'id|+1':1,
            'serial_number|1-100':1,
            'warn_number|1-100':1,
            'warn_name|1':['流水线编排服务异常','磁盘占用超过阈值'],
            'warn_level|1':['紧急','重要'],
            'warn_detail':'环境IP:10.114.123.12,服务名称:XX',
            'create_time':Random.datetime(),
            'finish_time':Random.datetime(),
            'contact|4':'abc'
        }] 
      });

  res.send({
    meta : {
      message: 'success'
    },
    status:true,
    data: data.list
  })
})
module.exports = router;

# 第五步：在mockserver项目目录下打开命令行工具，输入npm start,待服务启动后，打开前端页面即可看到服务器返回的模拟数据。
# 第六步：浏览器输入 http://127.0.0.1:3000/operationboard/systemwarn

vue、mock、express 模拟接口返回值

# 第一步：安装mock,express
npm i express -D
npm i mockjs -D

# 第二步：创建模拟数据文件夹mock/，再创建mock/index.js
const express = require('express') // 引入express
const Mock = require('mockjs') // 引入mock

let app = express()
// 解决跨域
app.use(function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS')
  res.header('Access-Control-Allow-Headers', 'X-Requested-With')
  res.header('Access-Control-Allow-Headers', 'Content-Type')
  next()
})
// 获取零售户信息
app.use('/mockapi/test', function (req, res) {
  console.log('mockAPI截取的数据了')
  console.log(req)
  res.json(Mock.mock({
    'code': 0,
    'msg': '执行成功'
  }))
})
app.listen('8090', () => {
  console.log('监听端口 8090')
})

# 第三步：创建完成后，切换到mock目录下，运行 node index.js
# 第四步：此时，在浏览器输入 http://127.0.0.1:8090/mockapi/test 即可获取{code:0, msg:'执行成功'}

注意：一个简单的本地数据服务器就搭建起来了

# 第五步：vue项目中的请求路径
# 1:我在项目中是配置.env文件
VUE_APP_BASE_API="http://127.0.0.1:8090/mockapi"

# 2:配置request.js
import axios from 'axios'
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API
})
export default service

# 3:index.vue页面中
import request from '@/utils/request.js'
request({
	url: '/test',
	method: 'get'
}).then(res => {
	console.log(res)
	// 拿到 {code:0, msg:'执行成功'}
})

vue、body-parser、 express、 mockjs简单实现接口模拟数据

# 第一步：安装
npm i  body-parser express mockjs -D

** 说明
body-parser : 处理post请求数据的
express nodeJs框架
mockjs 模拟数据的

# 第二步：书写nodeJs逻辑 路径   mock/index.js
var express = require("express"); //引入express模块
var Mock = require("mockjs"); //引入mock模块
var fs = require("fs");
var app = express(); //实例化express
var bodyParser = require("body-parser");

//创建application/json解析
var jsonParser = bodyParser.json();

/*为app添加中间件处理跨域请求*/
app.use(function(req, res, next) {
	res.header("Access-Control-Allow-Origin", "*");
	res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
	res.header("Access-Control-Allow-Headers", "X-Requested-With");
	res.header("Access-Control-Allow-Headers", "Content-Type");
	next();
});

// 设置get请求
app.get("/index", function (req, res) {
	res.send("sdf")
})

// 设置接口
app.post("/login", jsonParser, function(req, res){
	var userName = req.body.user;
	var password = req.body.password;
    console.log("User name = "+userName+", password is "+password);
    var data=[
        {
            data:213,
            num:444,
            age:12
        },
        {
            data:456,
            num:678,
            age:13
        }];
	if (userName && password) {
        res.status(200),
		res.json(data)
	}else {
		res.send("no");
	}

});

/**监听8090端口*/
   app.listen("8090");

# 第三步：运行 ： node mock

# 第四步： vuex封装
// store.js
import ajax from "axios";
export default {
	actions: {
		mocks({ commit } ,param) {
    		return new Promise( (res, req) => {
        		ajax.post('/login', param).then(function (response) {
            		res(response)
                })
                .catch(function (error) {
                    req(error)
                });
    		})
		}
	}
}

# 第五步：调用
import { mapActions } from "vuex";
export default {
	created() {
        let param = {
            user: 'Fred',
            password: 'Flintstone'
        }
		this.mocks(param).then(res => {
            console.log(res);
        })
	},
	methods: {
		...mapActions(["mocks"]),
	}
}