当前位置：首页 > news >正文

前端用json-server来Mock后端返回的数据处理

news 来源：原创 2025/5/14 9:26:00

<html><body><div class="login-container"><h2>登录</h2><div class="login-form"><div class="form-group"><input type="text" id="username" placeholder="请输入用户名" /></div><div class="form-group"><input type="password" id="password" placeholder="请输入密码" /></div><button class="login-btn" onclick="handleLogin()">登录</button><div class="form-links"><a href="#">忘记密码?</a><a href="#">注册账号</a></div><script>function handleLogin() {const username = document.getElementById('username').value;const password = document.getElementById('password').value;// 这里可以添加用户名和密码的验证逻辑if(username && password) {// 发送登录请求到本地模拟的APIfetch('http://localhost:3000/users').then(response => response.json()).then(data => {const user = data.find(u => u.username === username && u.password === password);if(user) {// 登录成功，跳转到后台管理页面localStorage.setItem('token', user.token);  // 模拟保存tokenwindow.location.href = 'dashboard.html';  // 跳转到同级的后台管理页面} else {alert('用户名或密码错误');}}).catch(error => {alert('登录失败,请稍后重试');});} else {alert('请输入用户名和密码');}}</script></div></div><div class="beian-container"><a href="https://beian.miit.gov.cn/" target="_blank">备案号: 粤B2-20090059-1623A</a></div><style>body {margin: 0;min-height: 100vh;display: flex;align-items: center;justify-content: center;background-color: #f5f5f5;position: relative;}.login-container {width: 100%;max-width: 400px;padding: 20px;box-shadow: 0 0 10px rgba(0,0,0,0.1);border-radius: 5px;background-color: white;}.login-container h2 {text-align: center;color: #333;margin-bottom: 30px;}.form-group {margin-bottom: 20px;}.form-group input {width: 100%;padding: 10px;border: 1px solid #ddd;border-radius: 4px;font-size: 14px;box-sizing: border-box;}.login-btn {width: 100%;padding: 12px;background-color: #1890ff;color: white;border: none;border-radius: 4px;cursor: pointer;font-size: 16px;}.login-btn:hover {background-color: #40a9ff;}.form-links {margin-top: 15px;text-align: center;}.form-links a {color: #1890ff;text-decoration: none;margin: 0 10px;font-size: 14px;}.form-links a:hover {text-decoration: underline;}.beian-container {position: fixed;bottom: 20px;left: 0;right: 0;text-align: center;}.beian-container a {color: #666;text-decoration: none;font-size: 20px;}.beian-container a:hover {color: #1890ff;}</style></body>
</html>

为了基于上述代码模拟登录，并让本地访问后台管理页面，你可以通过以下步骤来实现：

确保后端接口存在：你需要确保本地有一个接口（例如 /api/login）来模拟登录请求的处理。因为你的代码中使用的是 fetch 来发送请求到该接口，后端会返回模拟数据。
使用前端本地模拟 API：如果没有真正的后端，你可以使用 JavaScript 来模拟登录 API。你可以将登录接口本地化，只是直接返回你希望的 mock 数据。
本地开发环境搭建：
- 你可以使用简单的 HTTP 服务器来提供本地服务（例如通过 node.js 或 python 搭建）。
- 或者，你可以使用现有的工具（如 json-server）来创建一个 mock 的 RESTful API。

使用 `json-server` 来模拟后端

安装 json-server：首先，你需要安装 json-server 来模拟后端 API。使用 npm 或 yarn 安装：

npm install -g json-server

如果npm下载的有点慢的话，可以参考下面这篇文章，切换到淘宝镜像源去下载。

npm i 安装依赖卡慢，失败，等很久，不成功，错误等等_npm i 很慢-CSDN博客

2. 创建一个模拟数据文件：在你的项目目录下创建一个 db.json 文件，这个文件将用来模拟后端数据，例如：

{"users": [{"username": "user","password": "123","success": true,"token": "mock-jwt-token-123","userId": "mock-user-001","role": "user"}]
}

3. 启动 json-server：使用以下命令启动本地 API 服务器：

json-server --watch db.json --port 3000

这样，你就启动了一个 RESTful API 服务器，模拟 /api/login 接口。

4. 修改前端代码：你需要将 fetch 请求中的 URL 修改为本地模拟的 API 地址，例如：

fetch('http://localhost:3000/users')

或者根据用户名和密码进行匹配，具体实现可以在前端模拟，或者通过 json-server 的 routes 配置来实现。

后台管理页面 (Dashboard)

你需要在 /dashboard.html 页面中，根据 localStorage 中保存的 token 来显示用户的后台管理页面内容。

<html><body><div class="dashboard-container"><h2>后台管理页面</h2><p>欢迎，您已经成功登录！</p><button onclick="logout()">退出登录</button></div><script>// 检查 localStorage 中是否有 tokenconst token = localStorage.getItem('token');if (!token) {// 如果没有 token，则重定向到登录页面window.location.href = 'index.html';}function logout() {// 清除 localStorage 中的 tokenlocalStorage.removeItem('token');// 退出后重定向回登录页面window.location.href = 'index.html';}</script><style>body {margin: 0;min-height: 100vh;display: flex;align-items: center;justify-content: center;background-color: #f5f5f5;}.dashboard-container {width: 100%;max-width: 600px;padding: 20px;box-shadow: 0 0 10px rgba(0,0,0,0.1);border-radius: 5px;background-color: white;text-align: center;}.dashboard-container h2 {margin-bottom: 20px;}.dashboard-container button {padding: 10px 20px;background-color: #1890ff;color: white;border: none;border-radius: 4px;cursor: pointer;font-size: 16px;}.dashboard-container button:hover {background-color: #40a9ff;}</style></body>
</html>

代码解析：

登录页面 (index.html):
- 用户名和密码填写后，点击登录按钮触发 handleLogin 方法。
- 方法会发送一个请求到本地模拟的 API (http://localhost:3000/users)，通过匹配用户名和密码来判断是否登录成功。
- 成功登录后，模拟将一个 JWT token 存储在 localStorage 中，并跳转到 dashboard.html 页面。
后台管理页面 (dashboard.html):
- 在页面加载时，会检查 localStorage 是否存在 token。如果没有，说明用户没有登录，页面会重定向回登录页面 (index.html)。
- 如果 token 存在，则认为用户已登录，显示后台管理界面，并提供一个退出登录按钮，点击后清除 localStorage 中的 token 并重定向回登录页面。

通过这样的设置，你可以实现一个简单的前端模拟登录系统，并允许用户登录后访问后台管理页面。

运行之后，在登录页面输入user、123点击登录

即可进入到后台管理页面

前端用json-server来Mock后端返回的数据处理

<html><body><div class"login-container"><h2>登录</h2><div class"login-form"><div class"form-group"><input type"text" id"username" placeholder"请输入用户名&q…...

编程日记 2025/5/14 9:26:00

【linux】文件与目录命令 - mv

文章目录 1. 基本用法2. 常用参数3. 用法举例4. 注意事项 mv 命令用于移动或重命名文件和目录，是 Linux 系统中管理文件的重要工具之一。它既能移动文件到指定路径，也能重命名文件或目录。 1. 基本用法语法： mv [选项] 源文件目标文件 mv…...

编程日记 2025/5/9 9:18:51

OSPF - LSA对照表

LSA的三要素，如何唯一表示一条LSA Type：表示是几类的LSA Link-id：这个比较特殊，不同的LSA的Link-ID不同 Advertising router：谁产生的LSA 常用的就是1、2、3、4、5、7型LSA 点击蓝字跳转LSA详细介绍(持续更新中…...

编程日记 2025/5/10 9:06:50

------------------------------------------数据库------------------------------ (2).查看所有数据库 show dbs (3).选择数据库，如果不存在则隐式创建这个数据库 use 数据库名 ------------------------------------------集合------------------------------ …...

编程日记 2025/5/6 0:57:27

uniapp开发u-icon图标不显示问题

uniapp开发图标用u-icon不显示，换成uv-icon就可以了插件市场从这里下载：uv-ui 破釜沉舟之兼容vue32、app、h5、小程序等多端，灵活导入，利剑出击 - DCloud 插件市场组件库看这个：介绍 | 我的资料管理-uv-ui 是全面兼…...

编程日记 2025/5/12 8:16:23

宁德时代2025年Verify入职测评语言理解及数字推理真题SHL题库汇总、考情分析

宁德时代社招Verify入职测评对薪酬有着重要影响，其规定正确率达到80%才能顺利通过测评。这体现了公司对人才专业素养与能力的严格要求，旨在筛选出真正符合岗位需求的优秀人才。测评内容涵盖了专业知识、技能运用、逻辑思维等多方面，只有综合能…...

编程日记 2025/5/14 8:28:16

Spring Data Elasticsearch简介

一、Spring Data Elasticsearch简介 1 SpringData ElasticSearch简介 Elasticsearch是一个实时的分布式搜索和分析引擎。它底层封装了Lucene框架,可以提供分布式多用户的全文搜索服务。 Spring Data ElasticSearch是SpringData技术对ElasticSearch原生API封装之后的产物,它通…...

编程日记 2025/5/6 23:14:46

即插即用，无缝集成各种模型，港科大蚂蚁等发布Edicho：图像编辑一致性最新成果！

文章链接：https://arxiv.org/pdf/2412.21079 项目链接：https://ezioby.github.io/edicho/ 亮点直击显式对应性引导一致性编辑：通过将显式图像对应性融入扩散模型的去噪过程，改进自注意力机制与分类器自由引导（CFG&…...

编程日记 2025/5/11 9:07:39

鸿蒙开发（29）弹性布局 (Flex)

概述弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方…...

编程日记 2025/5/14 2:29:17

华为 Sensor 省电策略调研

华为EMUI 9.0.0.187（C00E57R1P15） 无该功能华为EMUI 9.1.0.321（C00E320R1P1） 之后有sensor管控一、华为 Sensor 省电策略 1. Sensor 类别只配置非唤醒类Sensor 2. 手机静止情况，应用不可见时达到1分钟&#xff0…...

编程日记 2025/5/14 8:59:40

Kotlin语言的网络编程

Kotlin语言的网络编程 Kotlin作为一种现代的编程语言，其简洁、安全和高效的特性使得在开发各种应用时得到广泛认可。尤其是在网络编程方面，Kotlin凭借其与Java的高度兼容性以及丰富的库支持，使得网络操作变得更加简单易用。本文将详细探讨Ko…...

编程日记 2025/5/13 17:16:48

redis：安装部署、升级以及失败回退

安装部署一、准备工作 1. 检查系统要求确保你的服务器满足 Redis 的基本要求：操作系统：支持的 Linux 发行版（如 Ubuntu, CentOS）内存：至少 4GB（根据实际应用需求调整）CPU：单核或多核 CPU磁盘空间：足够的磁盘空间用于数据存储和日志记录2. 更新系统软件包在开始…...

编程日记 2025/5/13 17:46:01

3. ML机器学习

1.人工智能与机器学习的关系机器学习是人工智能的一个重要分支，是人工智能的一个子集。它无需显式编程，而是通过数据和算法使机器能够自动学习和改进，从而实现智能行为。机器学习依赖于算法来识别数据中的模式，并通过这些模式做出…...

编程日记 2025/5/14 7:30:00

在高德地图上加载3DTilesLayer图层模型/天地瓦片

1. 引入必要的库 Three.js：一个用于创建和显示3D图形的JavaScript库。vuemap/three-layer：一个Vue插件，它允许你在高德地图中添加Three.js图层。vuemap/layer-3dtiles：一个用于处理3D Tiles格式数据的Vue插件，可以用来…...

编程日记 2025/5/14 8:35:22

用户使用LLM模型都在干什么？

Anthropic 对用户与 Claude 3.5 Sonnet 的大量匿名对话展开分析，主要发现及相关情况如下： 使用用途分布软件开发主导：在各类使用场景中，软件开发占比最高，其中编码占 Claude 对话的 15% - 25%，网页和移动应…...

编程日记 2025/5/14 8:45:31

2 抽象工厂（Abstract Factory）模式

抽象工厂模式 1.1 分类 （对象）创建型 1.2 提出问题家具店里有沙发、椅子、茶几等产品。产品有不同风格，如现代、北欧、工业。希望确保客户收到的产品风格统一，并可以方便地添加新产品和风格。 1.3 解决方案提供一个创建一…...

编程日记 2025/5/13 15:14:26

数据结构-串

串的实现在C语言中所使用的字符串就是串的数据类型的一种。串的存储结构定长顺序存储表示类似于线性表的顺序存储结构，用一组连续的存储单元存储串值的字符序列。 #define MAXLEN 255 //预定义最大串长为255 typedef struct SString {char ch[MAXLEN]; …...

编程日记 2025/5/14 1:58:51

C#，图论与图算法，有向图（Direct Graph）广度优先遍历（BFS，Breadth First Search）算法与源程序

1 图的广度优先遍历图的广度优先遍历（或搜索）类似于树的广度优先遍历（参见本文的方法2）。这里唯一需要注意的是，与树不同，图可能包含循环，因此我们可能再次来到同一个节点。为了避免多次处理节…...

编程日记 2025/5/7 21:57:00

使用ElasticSearch查询

从一个query body开始 {"query": {"bool": {"disable_coord": true,"must": [{"match": {"enabled": "1"}},{"range": {"effectTime": {"lt": "2017-06-13 13:33:…...

编程日记 2025/5/9 5:11:27

PyCharm+RobotFramework框架实现UDS自动化测试——（一）python-can 库的安装与环境配置

从0开始学习CANoe使用从0开始学习车载测试相信时间的力量星光不负赶路者，时光不负有心人。文章目录 1. 概述2.安装 python-can 库—基于pycharm在对应的工程下3. 在任意盘中安装环境4. 导入 can 模块语法5. 配置 CAN 接口6.CANoe设备连接语法 1. 概述本专栏主…...

编程日记 2025/5/14 9:19:57

C# 值类型和引用类型详解

简介在 C# 中，值类型和引用类型是两个基础的数据类型类别，它们的主要区别在于存储位置和赋值方式。值类型值类型存储的是数据本身，分配在栈 (Stack) 中。当一个值类型变量被赋值给另一个变量时，会复制值。值类型的特点…...

编程日记 2025/5/14 9:13:13

计算机网络 —— 网络编程（TCP）

计算机网络 —— 网络编程（TCP） TCP和UDP的区别TCP (Transmission Control Protocol)UDP (User Datagram Protocol) 前期准备listen （服务端）函数原型返回值使用示例注意事项 accpect （服务端）函数原型返回…...

编程日记 2025/5/14 8:47:05

[Unity Shader] Shader基础光照3：环境光与自发光

在Unity中，光照是场景渲染的关键组成部分。正确使用环境光和自发光能够大大提高场景的真实感和视觉效果。本篇文章将详细介绍Unity中的环境光和自发光的基本概念，以及如何在编辑器和Shader中进行操作和实现。 1. 环境光（Ambient Light） 1.1 环境光的定义环境光是场景中…...

编程日记 2025/5/6 11:31:56

云原生安全风险分析

一、什么是云原生安全云原生安全包含两层含义： 面向云原生环境的安全具有云原生特征的安全 0x1：面向云原生环境的安全面向云原生环境的安全的目标是防护云原生环境中基础设施、编排系统和微服务等系统的安全。这类安全机制不一定具备云原生的特性…...

编程日记 2025/5/11 4:05:16

Redis 安装与配置指南

Redis 安装与配置指南目录安装说明 Linux 安装 Redis 3.0 压缩包上传服务器编译和安装修改配置启动 Redis关闭 Redis 卸载 RedisRedis 集群配置 Master 主库配置启动 Master 节点的 Redis 和 Sentinel客户登录验证Slave 从库配置查看集群数据验证安装说明 Linux 安装 R…...

编程日记 2025/5/13 23:09:50

C语言Day13（c程序设计小红书+pta）

目录 （一）用函数调用实现，把最小的数字放在最前面，把最大的放在最后边 （二）使数字向后移m位 （三）用户自定义数据类型： （四）候选人计票数 &am…...

编程日记 2025/5/10 17:26:13

C++二十三种设计模式之迭代器模式

C二十三种设计模式之迭代器模式一、组成二、特点三、目的四、缺点五、示例代码一、组成抽象聚合类：存储集合元素，声明管理集合元素接口。具体聚合类：实现管理集合元素接口。抽象迭代器类：声明访问和遍历聚合类元素的接口。 …...

编程日记 2025/5/13 13:40:54

【AI游戏】使用强化学习玩 Flappy Bird：从零实现 Q-Learning 算法（附完整资源）

1. 引言 Flappy Bird 是一款经典的休闲游戏，玩家需要控制小鸟穿过管道，避免碰撞。虽然游戏规则简单，但实现一个 AI 来自动玩 Flappy Bird 却是一个有趣的挑战。本文将介绍如何使用 Q-Learning 强化学习算法来训练一个 AI，使其能够…...

编程日记 2025/5/14 5:20:18

VSCode 中的 launch.json 配置使用

VSCode 中的 launch.json 配置使用在 VSCode 中，launch.json 文件用于配置调试设置，特别是用来定义如何启动和调试你的应用。它允许你配置不同的调试模式、运行参数和调试选项。基本结构 launch.json 文件位于 .vscode 文件夹内，可以通过…...

编程日记 2025/5/14 9:26:00

深度学习算法：开启智能时代的钥匙

引言深度学习作为机器学习的一个分支，近年来在图像识别、自然语言处理、语音识别等多个领域取得了革命性的进展。它的核心在于构建多层的神经网络，通过模仿人脑处理信息的方式，让机器能够从数据中学习复杂的模式。深度学习算法的基本原理…...

编程日记 2025/5/14 8:19:20

Clojure语言的并发编程

Clojure语言的并发编程引言在现代软件开发中，并发编程成为了处理多个任务、提高应用效率和响应速度的重要手段。尤其是在多核处理器逐渐成为主流的今天，如何高效利用这些计算资源是每个开发者面临的挑战。Clojure作为一种函数式编程语言，…...

编程日记 2025/5/12 9:19:11

MySQL学习记录1【DQL和DCL】

SQL学习记录该笔记从DQL处开始记录 DQL之前值得注意的点字段 BETWEEN min AND max 可以查询区间[min, max]的数值如果同一个字段需要满足多个OR条件，可以采取字段 IN(数值1, 数值2, 数值3....)LIKE语句字段 LIKE ___%%% 表示模糊匹配，_匹配一个字段…...

编程日记 2025/5/14 9:09:36

EasyExcel的应用

一、简单使用引入依赖： 这里我们可以使用最新的4.0.2版本，也可以选择之前的稳定版本，3.1.x以后的版本API大致相同，新的版本也会向前兼容（3.1.x之前的版本，部分API可能在高版本被废弃）&…...

编程日记 2025/5/13 22:02:29

JS控制对应数据隐藏

首先需要获得到所有的input框，并声明一个空对象来存放，遍历所有的复选框，将他们中选中的放入对象，并设置键值为true，然后执行checkFalseValues(result)函数 function hideItem() {let checkboxes $(.setting_box inp…...

编程日记 2025/5/14 8:59:40

【剑指Offer刷题系列】数据流中的中位数

目录问题描述示例示例 1： 思路解析方法一：使用两个堆（最大堆和最小堆）核心思路详细步骤示例分析优势适用场景代码实现Python 实现（方法一：使用两个堆） 测试代码复杂度分析方法一：使…...

编程日记 2025/5/13 5:23:10

RabbitMQ高级篇之MQ可靠性数据持久化

文章目录消息丢失的原因分析内存存储的缺陷如何确保 RabbitMQ 的消息可靠性？数据持久化的三个方面持久化对性能的影响持久化实验验证性能对比Spring AMQP 默认持久化总结消息丢失的原因分析 RabbitMQ 默认使用内存存储消息，但这种方式带来了两个主要问…...

编程日记 2025/5/12 7:34:11

C 语言奇幻之旅 - 第16篇：C 语言项目实战

目录引言1. 项目规划1.1 需求分析与设计1.1.1 项目目标1.1.2 功能需求1.1.3 技术实现方案 2. 代码实现2.1 模块化编程2.1.1 学生信息模块2.1.2 成绩管理模块 2.2 调试与测试2.2.1 调试2.2.2 测试2.2.4 测试结果 3. 项目总结3.1 代码优化与重构3.1.1 代码优化3.1.2 代码重构 3.…...

编程日记 2025/5/13 17:21:30

[笔记] 使用 Jenkins 实现 CI/CD ：从 GitLab 拉取 Java 项目并部署至 Windows Server

随着软件开发节奏的加快，持续集成（CI）和持续部署（CD）已经成为确保软件质量和加速产品发布的不可或缺的部分。Jenkins作为一款广泛使用的开源自动化服务器，为开发者提供了一个强大的平台来实施这些实践。然而…...

编程日记 2025/5/6 8:02:19

Git最便捷的迁移方式

#当公司要求git需要迁移时，你是不是感觉到束手无策。今天带来给大家最快，最便捷的迁移方式这个命令是用于重命名git仓库中的远程仓库名。在这个命令中，我们将远程仓库的名字从"origin"改为"old-origin"。 git remote …...

编程日记 2025/5/13 2:59:45

【颜色分类--荷兰国旗问题】

问题给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums ， 原地对它们进行排序，使得相同颜色的元素相邻，并按照红色、白色、蓝色顺序排列。我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。必须在不使用库内置的 sort 函数的情况下…...

编程日记 2025/5/9 14:31:51

xrdp连接闪退情况之一

错误核查首先使用命令vim ~/.xsession-errors，当里面的报错信息为WARNING **: Could not make bus activated clients aware of XDG_CURRENT_DESKTOPGNOME environment variable:Failed to execute child process “dbus-launch” (No such file or directory)&am…...

编程日记 2025/5/12 6:13:18

KubeVirt 进阶：设置超卖比、CPU/MEM 升降配、在线磁盘扩容

前两篇文章，我们分别介绍 Kubevirt 的安装、基本使用以及将 oVirt 虚拟机迁移到 KubeVirt，我们留了两个ToDo，一个是本地磁盘的动态分配，一个是固定 IP 的需求，本期我们先解决第一个，本地磁盘的动态分配。…...

编程日记 2025/5/6 23:00:21

（回溯法）leetcode39组合总和

第一个2开头，下面的子节点的集合元素均为2,5,3 但是在5开头，下面的子节点集合元素均为5,3 带着这个图的思路确定i和index的传递值 backtracking(i, nums,8,sum);用的是i而不是i1 // ConsoleApplication3.cpp : 此文件包含 "main" 函数。程序…...

编程日记 2025/5/11 21:36:33

【数据结构】二叉搜索树

目录 1. 二叉搜索树的概念 2. 二叉搜索树的性能分析 3.二叉搜索树的实现 3. 1.二叉搜索树的插入 3.2. 二叉搜索树的查找 3.3. 二叉搜索树的删除 3.4. 二叉搜索树的实现代码 4. 二叉搜索树key和key/value两种使用场景 4.1 key搜索场景： 4.2 key/value搜索场…...

编程日记 2025/5/9 5:41:50

高可用虚拟IP-keepalived

个人觉得华为云这个文档十分详细：使用虚拟IP和Keepalived搭建高可用Web集群_弹性云服务器 ECS_华为云应用场景：虚拟IP技术。虚拟IP，就是一个未分配给真实主机的IP，也就是说对外提供数据库服务器的主机除了有一个真实IP外还有一个…...

编程日记 2025/5/9 3:02:28

CSS语言的多线程编程

CSS语言的多线程编程引言在现代Web开发中，CSS（层叠样式表）被广泛用于给网页添加样式。然而，CSS本身是一种声明性语言，在设计上并没有直接支持多线程编程的功能。实际上，CSS的解析和应用是由浏览器的渲染…...

编程日记 2025/5/9 23:15:41

电脑之一键备份系统(One Click Backup System for Computer)

电脑之一键备份系统相信使用电脑的的人都遇到过，电脑系统崩溃，开机蓝屏等原因，这个时候你急着用电脑办公，电脑却给你罢工是多么气人了，其实可以给电脑做一个系统备份。最近每天都有系统蓝屏崩溃，这个实难…...

编程日记 2025/5/13 3:34:42

R语言的正则表达式

R语言中的正则表达式深度解析正则表达式（Regular Expressions，简称Regex）是一种用于描述字符串匹配规则的工具，广泛应用于数据处理、文本分析、数据清洗等多个领域。在R语言中，正则表达式被广泛应用于字符串的处理和…...

编程日记 2025/5/9 15:36:00

解决el-table表格数据量过大导致页面卡顿问题又名《umy-ui---虚拟表格仅渲染可视区域dom的神》

后台管理系统的某个页面需要展示多个列表数据量过多页面渲染dom卡顿经调研发现两个组件 pl-table和umy-ui （也就是u-table） 最终决定使用umy-ui 它是专门基于 Vue 2.0 的桌面端组件库流畅渲染表格万级数据而且他是对element-ui的表格做了二次优化…...

编程日记 2025/5/13 9:18:46

《机器学习》——贝叶斯算法

贝叶斯简介贝叶斯公式，又称贝叶斯定理、贝叶斯法则，最初是用来描述两个事件的条件概率间的关系的公式，后来被人们发现具有很深刻的实际意义和应用价值。该公式的实际内涵是，支持某项属性的事件发生得愈多，则该属性成…...

编程日记 2025/5/10 23:05:30

使用 json-server 来模拟后端

后台管理页面 (Dashboard)

代码解析：

相关文章：

使用 `json-server` 来模拟后端