前端先行模拟接口(mock+expres+json)

目录

mock模拟数据:data/static.js

路由:index.js

服务器:server.js

yarn /node 启动服务器:yarn start

客户端:修改代理路径(修改设置后都要重启才生效)

示例

后端框架express构建服务器

前端发起请求

静态数据:res.status === 304

3xx状态码:重定向+缓存

301 Moved Permanently:永久重定向,搜索引擎会更新

302 Found:临时重定向,搜索引擎通常不会更新索引

304 Not Modified:资源未修改,可以使用本地缓存

JSON解析和生成

JSON生成JSON.stringify(value,replacer?,space?)​​​​​​​


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',           // 生成随机的IDdate: 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 bodyconst result = applyConfMock[id]; // Use the id to get the corresponding datares.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 propertyfetch('/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
});

静态数据:res.status === 304

axios默认会处理304响应,不会返回304状态码的内容,而是直接使用之前的缓存数据。

3xx状态码:重定向+缓存

301 Moved Permanently:永久重定向,搜索引擎会更新

302 Found:临时重定向,搜索引擎通常不会更新索引

304 Not Modified:资源未修改,可以使用本地缓存

JSON解析和生成

var str = '{"name": "参宿","id":7}';      //'JSON字符串'
var obj = JSON.parse(str);                //JSON.parse(str)
console.log(obj);                       //JSON的解析(JSON字符串转换为JS对象)//Object { name: "参宿", id: 7 }
var jsonstr = JSON.stringify(obj);        //JSON.stringify(obj)
console.log(jsonstr);                     //JSON的生成(JS对象转换为JSON字符串)JSON.parse(text[, reviver])//reviver函数参数,修改解析生成的原始值,调用时机在 parse 函数返回之前。
//k:key,v:value
JSON.parse('{"p": 5}', function (k, v) {if(k === '') return v;     // 如果到了最顶层,则直接返回属性值,return v * 2;              // 否则将属性值变为原来的 2 倍。
});                            // { p: 10 }//从最最里层的属性开始,一级级往外,最终到达顶层,也就是解析值本身
JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {console.log(k); // 输出当前的属性名,从而得知遍历顺序是从内向外的,// 最后一个属性名会是个空字符串。return v;       // 返回原始属性值,相当于没有传递 reviver 参数。
});// 1
// 2
// 4
// 6
// 5
// 3
// ""

JSON生成JSON.stringify(value,replacer?,space?)

  1. value: 要转换的 JavaScript 对象、数组、字符串、数字、布尔值或 null
  2. replacer (可选): 一个函数或数组,用于控制转换过程中的属性过滤和转换操作。
  3. space (可选): 用于控制输出字符串的格式化,可以是一个字符串或数字。

如果是一个数字,表示缩进的空格数;

如果是一个字符串,表示使用该字符串作为缩进。

const data = {name: "Alice",age: 25,address: "123 Main St",secretInfo: "This is a secret"
};// 使用 replacer 函数来过滤掉 secretInfo 属性
const jsonStringWithReplacer = JSON.stringify(data, (key, value) => {if (key === "secretInfo") {return undefined; // 过滤掉 secretInfo 属性}return value;
}, 2);console.log(jsonStringWithReplacer);const data = {name: "Bob",age: 28,hobbies: ["coding", "gaming"],address: "456 Elm St"
};// 使用 replacer 数组来只保留 name 和 hobbies 属性
const jsonStringWithArrayReplacer = JSON.stringify(data, ["name", "hobbies"], 2);console.log(jsonStringWithArrayReplacer);
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))

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/83209.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【SpringCloud】Gateway服务网关

Spring Cloud Gateway 是 Spring Cloud 的一个全新项目,该项目是基于 Spring 5.0,Spring Boot 2.0 和 Project Reactor 等响应式编程和事件流技术开发的网关,它旨在为微服务架构提供一种简单有效的统一的 API 路由管理方式。 1.为什么需要网关…

【网站搭建】开源社区Flarum搭建记录

环境 服务器系统:腾讯云 OpenCloudOS 宝塔版本:免费版8.0.1 Nginx:1.24.0 MySQL:5.7.42 PHP:8.1.21 萌狼蓝天 2023年8月7日 PHP设置 1.安装扩展:flieinfo、opcache、exif 2.解除禁用函数:putenv…

无涯教程-Perl - endservent函数

描述 此功能告诉系统您不再期望使用getservent从服务文件中读取条目。 语法 以下是此函数的简单语法- endservent返回值 此函数不返回任何值。 例 以下是显示其基本用法的示例代码- #!/usr/bin/perlwhile(($name, $aliases, $port_number,$protocol_name)getservent())…

【LeetCode 75】第二十五题(735)行星碰撞

目录 题目: 示例: 分析: 代码运行结果: 题目: 示例: 分析: 给一个数组,数组里的元素表示行星,元素的符号决定行星运动的方向,元素的绝对值决定行星的大小…

知网期刊《中阿科技论坛》简介及投稿须知

知网期刊《中阿科技论坛》简介及投稿须知 主管单位:宁夏回族自治区科学技术厅 主办单位:宁夏回族自治区对外科技交流中心(中国一阿拉伯国家技术转移中心) 刊  期:月刊 国际刊号:ISSN 2096-7268 国内刊号:CN 64-…

一文读懂ISO27701

引言 隐私暴露,大数据营销杀熟、骚扰信息不断……越来越多的数据泄露与威胁影响全球人类的安宁生活。在此背景下,各个国家、地区纷纷出台相关法律法规,对数据安全与隐私保护相关问题进行严格规范与引导。目前常见的有中国的个人信息保护法、…

选读SQL经典实例笔记21_字符串处理

1. SQL 并不专门用于处理复杂的字符串 1.1. 需要有逐字遍历字符串的能力。但是,使用SQL 进行这样的操作并不容易 1.2. SQL 没有Loop循环功能 1.2.1. Oracle的MODEL子句除外 2. 遍历字符串 2.1. 把EMP表的ENAME等于KING的字符串拆开来显示为4行,每行…

Observable设计模式简介

Observable设计模式存在于许多Java API和响应式编程中。下面介绍Java中永恒的Observable模式。 Observable设计模式用于许多重要的Java API。一个众所周知的示例是使用ActionListenerAPI执行操作的JButton。在这个例子中,我们ActionListener在按钮上进行了监听或…

测评HTTP代理的透明匿名?

在我们日常的网络冒险中,你是否曾听说过HTTP代理的透明匿名特性?这些神秘的工具就像是网络世界中的隐身斗士,让我们能够在互联网的迷雾中保护自己的身份和隐私。那么,让我们一起揭开HTTP代理的面纱,探索其中的奥秘吧&a…

Grafana技术文档--基本安装-docker安装并挂载数据卷-《十分钟搭建》

阿丹: Prometheus技术文档--基本安装-docker安装并挂载数据卷-《十分钟搭建》_一单成的博客-CSDN博客 在正确安装了Prometheus之后开始使用并安装Grafana作为Prometheus的仪表盘。 一、拉取镜像 搜索可拉取版本 docker search Grafana拉取镜像 docker pull gra…

Python-OpenCV中的图像处理-边缘检测

Python-OpenCV中的图像处理-边缘检测 边缘检测Canny算子 边缘检测Canny算子 Canny 边缘检测是一种非常流行的边缘检测算法,是 John F.Canny 在 1986 年提出的。它是一个有很多步构成的算法:噪声去除、计算图像梯度、非极大值抑制、滞后阀值等。 Canny(i…

TP、TN、FP、FN的理解

TP、TN、FP、FN的理解 理解英文意思: 在第2个单词的基础上理解第1个单词(即第2个单词是前提条件) TP:True Positive 判定为真的(positive),且判定对了(true) TN&…

【算法|数组】双指针

算法|数组——双指针 引入 给你一个按 非递减顺序 排序的整数数组 nums,返回 每个数字的平方 组成的新数组,要求也按 非递减顺序 排序。 示例 1: 输入:nums [-4,-1,0,3,10] 输出:[0,1,9,16,100] 解释:…

Python Pandas 使用示例

文章目录 使用Boolean 选择rows读取Excel表格里指定的sheet, 并跳过起始n行删除只有一个元素的行删除重复的合并多个csv文件到excel表格中获取csv文件的数据 使用Boolean 选择rows import pandas as pd# Sample DataFrame data {Name: [John, Alice, Bob, Emily],Age: [25, 3…

扫雷(超详解+全部码源)

C语言经典游戏扫雷 前言一.游戏规则二.所需文件三.创建菜单四.游戏核心内容实现1.创建棋盘2.打印棋盘3.布置雷4.排查雷5.game()函数具体实现 五.游戏运行实操六.全部码源 前言 😀C语言实现扫雷是对基础代码能力的考察。通过本篇文章你将学会如何制作出扫雷&#xff…

centos linux 安装RDMA Soft-RoCE|虚拟机安装Soft-RoCE

什么是Soft-RoCE softRoCE的目标是在所有支持以太网的设备上都可以部署RDMA传输,可以使不具备RoCE能力的硬件和支持RoCE的硬件间进行基于IB语义的交流。 大白话就是模拟RDMA的软件栈,使得在没有RDMA网卡的环境上,也可以运行基于RDMA写的传输…

Java-数据类型

数据类型 数据类型基本数据类型整形浮点字符型布尔类字节 引用数据类型类型转换显式转换隐式转换注意事项 整型提升 作为学习Java的入门知识,在刚开始面试的几场,表现不太好的时候,就有几个面试官会问这个问题,估计此时此刻我在他们的心目中也就是这个问题的层次了吧…当然,当时…

Leetcode-每日一题【剑指 Offer 15. 二进制中1的个数】

题目 编写一个函数,输入是一个无符号整数(以二进制串的形式),返回其二进制表达式中数字位数为 1 的个数(也被称为 汉明重量).)。 提示: 请注意,在某些语言(如 Java&…

postgresql|数据库|角色(用户)管理工作---授权和去权以及usage和select两种权限的区别

前言: postgresql做为一个比较复杂的关系型的重型数据库,不管是安装部署,还是后期的运行维护,都还是有比较多的细节问题需要引起关注。 例如,用户权限的合理分配,那么,什么是权限的合理分配呢…

详解推送Git分支时发生的 cannot lock ref 错误

在码云上建了一个项目仓库,分支模型使用 git-flow ,并在本地新建了一个功能分支 feature/feature-poll。后来在推送时发生错误,提示 cannot lock ref ...... 这样的错误信息。下面复盘一下具体过程和解决办法,以供参考。 在码云中建立仓库时,考虑到想按照 GitFlow 的模式…