目录
mock模拟数据：data/static.js
路由：index.js
服务器：server.js
yarn /node 启动服务器：yarn start
客户端：修改代理路径(修改设置后都要重启才生效)
示例
后端框架express构建服务器
前端发起请求
JSON
静态数据：res.status === 304
3xx - Redirection（重定向）：附加操作已完成请求
301 Moved Permanently：永久重定向，搜索引擎会更新
302 Found：临时重定向，搜索引擎通常不会更新索引
A.cookie 失效 有 CORS 问题
B.代理服务器的目标地址请求的不对，config/index.js 配置的 proxy 的 target
304 Not Modified：304资源缓存，可以使用本地缓存
Image · nuysoft/Mock Wiki · GitHub
适用于前端先行，api中有设置mock
mock模拟数据：data/static.js
// 导入 Mock 模块
import Mock from 'mockjs'
// 获取 Random 对象
const Random = Mock.Random
// 生成随机 ID、邮箱、IP、城市、日期时间等数据
//Random.id() 再@id 等价于 直接使用 Random.id()，推荐用@id，简洁
Random.id()
Random.email()
Random.ip()
Random.city()
Random.datetime()
Random.now()
Random.cname()
// 手机号前缀列表
const phonePrefix = ['132', '135', '189']
//Math.random() 函数返回一个 0 到 1 之间的随机小数
//index索引值将被用来选择一个前缀。
const index = Math.floor(Math.random() * phonePrefix.length)
//随机的8位数字串
const phone = phonePrefix[index] + Mock.mock(/\d{8}/)
// 静态数据对象
const static_data = {
// 登出模拟数据
logout: {
// 从[0, 200]中随机选择一个元素作为模拟数据
"code|1": [0, 200],
"data": null,
"message|1": ["执行成功"]
},
// 登录模拟数据
login: {
"code": 1,
"data": {
"datas": [{
"user": {
"status": 1,
"userid": "@id",
"userName": Random.string('lower', 5), // 随机小写字母用户名
"createTime": "@datetime", // 随机日期时间
"modifyTime": "@now", // 当前时间
"leader|1": [true, false] // 随机领导状态
},
"resources": null
}]
},
"message": "执行成功"
},
// 用户信息模拟数据
info: {
"code": 1,
"data": {
"datas": [{
"userid": "@id",
"userName": Random.string('lower', 5), // 随机小写字母用户名
"realName": "@cname", // 随机中文姓名
"createTime": "@datetime", // 随机日期时间
"modifyTime": "@now", // 当前时间
// @id() 是 Mock.js 提供的一个占位符，用于生成一个随机的唯一标识符。与之前的 @id 不同，这里使用了括号，这表示它会生成一个新的唯一标识符，而不是使用同一个。
"orgId": "@id()", // 随机组织 ID
"email": "@email", // 随机邮箱
"phone": phone, // 随机手机号
// true，生成的城市名会带有省份，例如："广东省深圳市"
"city": "@city(true)", // 随机城市名
"ip": "@ip", // 随机 IP 地址
"leader|1": [true, false] // 随机领导状态
}]
},
"message": "执行成功"
}
}
// 生成模拟数据并导出
let loginMock = Mock.mock(static_data.login),
logoutMock = Mock.mock(static_data.logout),
infoMock = Mock.mock(static_data.info)
export {
loginMock,
logoutMock,
infoMock
}
// 使用Mock.mock来生成模拟数据
const data = Mock.mock({
code: 1,
data: {
pid: '@id', // 生成随机的ID
date: Random.now(), // 生成当前时间
'list|1-10': [{ // 生成1到10个对象的数组
'id|+1': 1, // 从1开始，递增生成id
'valiue|+1': Random.increment() // 使用Random.increment()生成递增的值
}]
},
message: 'succ' // 设置消息
})
const getItem = JSON.stringify(data, null, 4)路由：index.js
import { loginMock, logoutMock, infoMock } from './data/static.js'
// 定义 user 函数，用于处理路由和请求
const user = function (app) {
// 登录
app.get('/api/user/login', (req, res) => {
res.send(loginMock);
});
// 用户信息
app.get('/api/user/info', (req, res) => {
res.send(infoMock);
});
// 退出
app.get('/api/user/logout', (req, res) => {
res.send(logoutMock);
});
};
export default user服务器：server.js
node/express都可实现，express代码量更少
import express from 'express'
import bodyParser from 'body-parser'
// chalk加颜色的
import chalk from 'chalk'
// 创建一个Express应用程序实例
let app = express();
// 使用body-parser中间件解析urlencoded和json请求体
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// 用户权限
import user from './user/index.js';
user(app);
// 首页
import home from './home/index.js';
home(app);
// 上传
import upload from './upload/index.js';
upload(app);
// 监听端口以便接受HTTP请求
// 启动监听
app.listen(5899, () => {
console.log(chalk.blue('Express mock server listening on port 5899'));
});yarn /node 启动服务器：yarn start
客户端：修改代理路径(修改设置后都要重启才生效)
const configStatic = {
title: '后台', // 网站的标题
icon: '//c/favicon.ico', // 网站的图标路径
publicPath: {
development: '/', // 开发环境的公共路径
online: '//ment/', // 在线环境的公共路径
uat: '//jment/uat', // UAT环境的公共路径（User Acceptance Testing”（用户验收测试））
test: '//ent/test' // 测试环境的公共路径
},
proxy: {
'/api': { // 代理规则，将以 /api 开头的请求转发到指定的目标地址
target: 'http://localhost:5899', // 代理的目标地址
changeOrigin: true, // 设置请求头中的 Origin 字段为目标地址，用于处理跨域
//pathRewrite: {
// '^/api': '/' // 修改请求路径，将 /api 替换为空字符串
//}
}
}
}
module.exports = configStatic
示例
后端框架express构建服务器
// 引入所需的模块和数据
import express from 'express';
import { applyConfMock } from './data/static.js';
const app = express();
const port = 3000; // Replace with your desired port number
// 处理 POST 请求
app.use(express.json());
app.post('/api/upload/applyconf', (req, res) => {
const id = req.body.id; // Get the id from the request body
const result = applyConfMock[id]; // Use the id to get the corresponding data
res.send(result);
});
// 启动服务器
app.listen(port, () => {
console.log(`Server is listening at http://localhost:${port}`);
});
前端发起请求
const id = 123; // Replace with the actual id value
const data = { id: id }; // Create an object with the id property
fetch('/api/upload/applyconf', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => {
// Handle the response result
})
.catch(error => {
// Handle errors
});
JSON
import Mock from 'mockjs'
// 定义模板
const template = {
'list|1-10': [{}]
}
// 生成模拟数据，转换为 JSON Schema 格式的数据
// JSON Schema 来验证它是否符合预期的数据结构
const data = Mock.toJSONSchema(template)
// 测试日志
console.log(JSON.stringify(data, null, 4))
静态数据：res.status === 304
axios库默认会处理304响应，不会返回304状态码的内容，而是直接使用之前的缓存数据。
3xx - Redirection（重定向）：附加操作已完成请求
301 Moved Permanently：永久重定向，搜索引擎会更新
服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。文章来源：https://www.toymoban.com/news/detail-637290.html
302 Found：临时重定向，搜索引擎通常不会更新索引
A.cookie 失效 有 CORS 问题
B.代理服务器的目标地址请求的不对，config/index.js 配置的 proxy 的 target
//响应拦截器
if (error.response && error.response.status === 302) {
if (window.location.host === 'expenseexternal.xx.cn') {
window.location.href = 'https:///passport-cloud.xxx.cn/login?service=' + encodeURIComponent(window.location.href)
}
}304 Not Modified：304资源缓存，可以使用本地缓存
表示客户端发送了一个带有条件的请求（通常If-Modified-Since或If-None-Match）文章来源地址https://www.toymoban.com/news/detail-637290.html
到了这里，关于前端先行模拟接口（mock+expres+json）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
