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

0501路由-react-仿低代码平台项目

文章目录

    • 1 react路由
      • 1.1 核心库:React Router
        • 安装
      • 1.2 基本路由配置
        • 路由入口组件
        • 定义路由
      • 1.3 导航方式
        • 使用 `<Link>` 组件
        • 编程式导航
      • 1.4 动态路由参数
        • 定义参数
        • 获取参数
      • 1.5 嵌套路由
        • 父路由配置
        • 子路由占位符
      • 1.6 重定向与404页面
        • 重定向
        • 404页面
      • 1.7 路由守卫(权限控制)
      • 1.8 代码分割与懒加载
      • 注意事项
      • 完整示例
    • 2 问卷系统业务流程图
      • 阶段1:用户身份验证
      • 阶段2:问卷创建与管理
      • 阶段3:问卷发布与分发
      • 阶段4:数据收集与填写
      • 阶段5:数据分析与处理
      • 阶段6:问卷终止或循环
      • 关键分支说明
    • 3 路由设计
      • 3.1 页面对应的路由
      • 3.2、Layout模版
    • 4 实践
      • 4.1 创建页面
      • 4.2 创建layout
      • 4.3 配置router
      • 4.4 使用路由api-页面跳转和获取参数
      • 4.5 自定义网页标题和favicon
    • 结语

1 react路由

1.1 核心库:React Router

React 官方推荐使用 React Router 实现路由功能。当前主流版本是 v6.x(注意与旧版 v5 的语法差异)。

安装
yarn add react-router-dom

1.2 基本路由配置

路由入口组件

在应用顶层包裹 <BrowserRouter>(或 <HashRouter>):

import { BrowserRouter } from 'react-router-dom';function App() {return (<BrowserRouter>{/* 路由配置 */}</BrowserRouter>);
}
定义路由

使用 <Routes><Route> 定义路由映射:

import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import User from './User';function App() {return (<Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /><Route path="/user/:id" element={<User />} /></Routes>);
}

1.3 导航方式

使用 <Link> 组件

替代 <a> 标签实现无刷新跳转:

import { Link } from 'react-router-dom';function Nav() {return (<nav><Link to="/">Home</Link><Link to="/about">About</Link></nav>);
}
编程式导航

通过 useNavigate Hook 跳转:

import { useNavigate } from 'react-router-dom';function Button() {const navigate = useNavigate();return (<button onClick={() => navigate('/user/123')}>Go to User 123</button>);
}

1.4 动态路由参数

定义参数

在路径中使用 :param 定义动态参数:

<Route path="/user/:id" element={<User />} />
获取参数

通过 useParams Hook 获取参数:

import { useParams } from 'react-router-dom';function User() {const { id } = useParams();return <div>User ID: {id}</div>;
}

1.5 嵌套路由

父路由配置

使用嵌套 <Route> 定义子路由:

<Route path="/dashboard" element={<Dashboard />}><Route path="profile" element={<Profile />} /><Route path="settings" element={<Settings />} />
</Route>
子路由占位符

父组件中通过 <Outlet> 渲染子路由内容:

import { Outlet } from 'react-router-dom';function Dashboard() {return (<div><h1>Dashboard</h1><Outlet /> {/* 子路由在此渲染 */}</div>);
}

1.6 重定向与404页面

重定向

使用 <Navigate> 组件:

<Route path="/old-path" element={<Navigate to="/new-path" />} />
404页面

通过 path="*" 匹配未知路径:

<Route path="*" element={<NotFound />} />

1.7 路由守卫(权限控制)

通过封装 <Route> 实现登录验证等逻辑:

function PrivateRoute({ children }) {const isAuthenticated = checkAuth(); // 自定义权限检查return isAuthenticated ? children : <Navigate to="/login" />;
}// 使用
<Route path="/admin" element={<PrivateRoute><Admin /></PrivateRoute>} />

1.8 代码分割与懒加载

结合 React.lazy 实现路由懒加载:

const About = React.lazy(() => import('./About'));<Route path="/about" element={<React.Suspense fallback={<Loading />}><About /></React.Suspense>
} />

注意事项

  1. 版本兼容性:v6 与 v5 差异较大(如 Switch 替换为 Routescomponent 改为 element)。
  2. 路径匹配:v6 默认精确匹配,无需添加 exact 属性。
  3. 相对路径:v6 支持嵌套路由中的相对路径跳转。

完整示例

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';function App() {return (<BrowserRouter><nav><Link to="/">Home</Link><Link to="/about">About</Link></nav><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /><Route path="/user/:id" element={<User />} /><Route path="*" element={<NotFound />} /></Routes></BrowserRouter>);
}

掌握这些核心概念后,你可以构建复杂的路由逻辑,实现动态页面切换、权限控制等高级功能。

2 问卷系统业务流程图

阶段1:用户身份验证

用户访问系统
已注册?
登录账号
注册新账号

阶段2:问卷创建与管理

C
创建新问卷
使用模板?
选择模板库问卷
自定义新建空白问卷
编辑基础信息
标题/描述
设置截止时间
匿名/实名填写
设计问题
题型设置: 单选/多选/文本等
逻辑跳转: 根据答案跳转题目
预览测试
验证通过?
保存问卷草稿/发布

阶段3:问卷发布与分发

M
需审核?
提交管理员审核
审核通过?
J
发布问卷
选择分发渠道
生成链接/二维码
邮件邀请
嵌入网站/APP

阶段4:数据收集与填写

错误
通过
R
填写者访问问卷
身份验证?
登录/验证身份
直接填写
填写问题
逻辑校验
提交问卷
数据存储至数据库

阶段5:数据分析与处理

Z
实时数据统计
图表展示: 柱状图/饼图
文本答案词云
导出原始数据
Excel/CSV
API对接第三方工具
生成分析报告
下载/分享报告

阶段6:问卷终止或循环

AD
需重新编辑?
J
关闭问卷
停止数据收集
归档历史数据

关键分支说明

  1. 权限控制
    • 管理员可批量管理问卷、审核敏感内容;
    • 普通用户仅限操作自有问卷。
  2. 异常处理
    • 填写中断自动保存草稿;
    • 提交失败时提示错误类型(如必填项未填)。
  3. 高级功能扩展
    • 付费版支持A/B测试、高级分析;
    • 企业版集成SSO登录、数据加密。

此流程图覆盖了问卷系统从创建到分析的核心业务闭环,可根据实际需求调整分支复杂度。

3 路由设计

3.1 页面对应的路由

  • 首页: /
  • 登录:/login
  • 注册:/register
  • 问卷管理: /manage
    • 我的问卷:/manage/list
    • 星标问卷:/manage/star
    • 回收站:/manage/trash
  • 问卷详情:/question
    • 编辑问卷:/question/edit/:id
    • 问卷统计:/question/stat/:id
  • 404:访问不存在页面跳转404

3.2、Layout模版

Axure RP设计布局

Layout:布局,用于设置应用整体结构。

  • MainLayout:整体布局

    • 头部

      • 网站标题、log
      • 首页导航
      • 登录/注册、个人中心等
    • 主体

      • 左侧导航菜单
      • 右侧内容
    • 底部:

      • 网站信息:备案、联系方式等
  • ManageLayout

  • QuestionLayout

4 实践

  • 按设计,新建若干页面

  • 为每个页面配置路由

  • 分配对应的Layout模版

4.1 创建页面

在这里插入图片描述

  • pages
    • manage:问卷管理
      • List.tsx:我的问卷
      • List.module.scss:我的问卷样式
      • Star.tsx:标星问卷
      • Trash.tsx:回收站
    • question:问卷详情
      • Edit
        • index.tsx:编辑问卷
      • Stat
        • index.tsx:问卷统计
    • Home.tsx:默认页
    • Login.tsx:登录页
    • NotFound.tsx:404跳转页
    • Register.tsx:注册页

4.2 创建layout

  • layouts
    • MainLayout.tsx:主布局
    • ManageLayout.module.scss:主布局样式
    • ManageLayout.tsx:问卷管理布局
    • QuestionLayout.tsx:问卷详情布局

4.3 配置router

  • route
    • index.tsx

代码如下所示:

import { createBrowserRouter } from "react-router-dom";import MainLayout from "../layouts/MainLayout";
import ManageLayout from "../layouts/ManageLayout";
import QuestionLayout from "../layouts/QuestionLayout";import Home from "../pages/Home";
import Login from "../pages/Login";
import Register from "../pages/Register";
import NotFound from "../pages/NotFound";
import List from "../pages/manage/List";
import Star from "../pages/manage/Star";
import Trash from "../pages/manage/Trash";
import Edit from "../pages/question/Edit";
import Stat from "../pages/question/Stat";const router = createBrowserRouter([{path: "/",element: <MainLayout />,children: [{path: "/",element: <Home />,},{path: "login",element: <Login />,},{path: "register",element: <Register />,},{path: "manage",element: <ManageLayout />,children: [{path: "list",element: <List />,},{path: "star",element: <Star />,},{path: "trash",element: <Trash />,},],},{path: "*",element: <NotFound />,},],},{path: "/question",element: <QuestionLayout />,children: [{path: "edit/:id",element: <Edit />,},{path: "stat/:id",element: <Stat />,},],},
]);export default router;

4.4 使用路由api-页面跳转和获取参数

页面跳转

  • useNavigate
  • Link

Home.tsx代码如下所示:

import { FC } from "react";
import { useNavigate, Link } from "react-router-dom";const Home: FC = () => {const nav = useNavigate();function clickHandler() {nav({pathname: "/login",search: "a=20",});}return (<div><p>Home</p><div><button onClick={clickHandler}>登录</button><Link to="/register">注册</Link></div></div>);
};export default Home;

传参和获取参数

传参参考上面示例,获取参数

  • useParams
  • useSearchParams
import { FC } from "react";
import { useParams } from "react-router-dom";const Edit: FC = () => {const { id = "" } = useParams();return <div>Edit {id}</div>;
};export default Edit;
import { FC } from "react";
import { useSearchParams } from "react-router-dom";
import { useImmer } from "use-immer";import QuestionCard from "../../components/QuestionCard";
import styles from "./List.module.scss";...const List: FC = () => {const [searchParams] = useSearchParams();console.log("keyword", searchParams.get("keyword"));...
};export default List;

4.5 自定义网页标题和favicon

修改首页index.html

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" href="/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>问卷调查</title></head><body><div id="root"></div><script type="module" src="/src/main.tsx"></script></body>
</html>

使用第三方ahooks

...
import { useTitle } from "ahooks";
...const List: FC = () => {useTitle('调查问卷-我的问卷')
...
};export default List;

结语

❓QQ:806797785

⭐️仓库地址:https://gitee.com/gaogzhen

⭐️仓库地址:https://github.com/gaogzhen

相关文章:

0501路由-react-仿低代码平台项目

文章目录 1 react路由1.1 核心库&#xff1a;React Router安装 1.2 基本路由配置路由入口组件定义路由 1.3 导航方式使用 <Link> 组件编程式导航 1.4 动态路由参数定义参数获取参数 1.5 嵌套路由父路由配置子路由占位符 1.6 重定向与404页面重定向404页面 1.7 路由守卫&a…...

C++二分查找

一、模板①&#xff1a;向下取整&#xff08;mid (l r) >> 1&#xff09; while (l < r) {int mid l r >> 1; // 等价于 (l r) / 2&#xff08;向下取整&#xff09;if (check(mid)) r mid; // 保留左半区else l mid 1; // 舍弃左半区 } 适用场…...

c++将jpg转换为灰度图

c将jpg转换为灰度图 step1:添加依赖 下载这两个文件&#xff0c;放在cpp同一目录下&#xff0c;编译生成 https://github.com/nothings/stb/blob/master/stb_image_write.h https://github.com/nothings/stb/blob/master/stb_image.hstep2:C:\Users\wangrusheng\source\repos…...

react/vue中前端多图片展示页面优化图片加载速度的五种方案

需求背景 在多项目中 例如官网项目中 会出现很多大图片显示的情况 这个时候就会出现图片过大 公司带宽不够之类导致页面加载速度过慢及页面出现后图片仍然占位但并未加载出来 或者因为网络问题导致图片区域黑块等等场景 这个时候我们就要对图片和当前场景进行优化 方案定…...

第二届电气技术与自动化工程国际学术会议 (ETAE 2025)

重要信息 2025年4月25-27日 中国广州 官网: http://www.icetae.com/ 部分 征稿主题 Track 1&#xff1a;电气工程 输配电、电磁兼容、高电压和绝缘技术、电气工程、电气测量、电力电子及其应用、机电一体化、电路与系统、电能质量和电磁兼容性、电力系统及其自…...

Windows 图形显示驱动开发-WDDM 2.0功能_上下文监视

功能概述 上下文监视机制是GPU与CPU协同计算的核心同步技术&#xff0c;通过受监视围栏&#xff08;Monitored Fence&#xff09;实现跨硬件单元的高效协调。其核心目标是解决以下场景的同步需求&#xff1a; GPU引擎间同步&#xff1a;例如在多渲染管线中&#xff0c;后处理…...

YOLOv12即插即用---PPA

1.模块介绍 多分支特征提取:PPA 模块采用局部卷积、全局卷积和串行卷积三种并行分支,从多个尺度和层次提取特征,有效保留小目标在多次下采样过程中的关键信息。 特征融合与注意力增强:在特征提取后,PPA 模块引入高效的通道注意力和空间注意力机制,实现自适应特征增强,…...

MySql主从相关概念

想象一下&#xff0c;你的业务飞速增长&#xff0c;用户请求如潮水般涌来&#xff0c;突然数据库主库宕机&#xff0c;数据丢失&#xff0c;服务瘫痪——这简直是开发者的噩梦&#xff01;MySQL主从复制就像一张安全网&#xff0c;通过主库写、从库读的协作模式&#xff0c;不仅…...

精品推荐-最新大模型MCP核心架构及最佳实践资料合集(18份).zip

精品推荐-最新大模型MCP核心架构及最佳实践资料合集&#xff0c;共18份。 1、2025年程序员必学技能&#xff1a;大模型MCP核心技术.pdf 2、MCP 架构设计剖析&#xff1a;从 Service Mesh 演进到 Agentic Mesh.pdf 3、MCP 架构设计深度剖析&#xff1a;使用 Spring AI MCP 四步…...

Qt模型-视图架构

引言 在GUI开发中&#xff0c;数据与界面的同步一直是核心挑战。传统方法将数据存储在界面组件内部容器中&#xff0c;容易引发数据冗余和同步问题。Qt的模型-视图&#xff08;Model-View&#xff09;架构通过解耦数据与界面&#xff0c;提供了更优雅的解决方案。本文将深入剖…...

Transformers 是工具箱,BERT 是工具。

Transformers 是工具箱&#xff0c;BERT 是工具。 &#x1f50d; 详细解释&#xff1a; 名称作用比喻理解举例&#x1f916; transformers&#xff08;库&#xff09;一个框架&#xff0c;提供很多 NLP 模型的“使用方式”&#xff0c;包括文本分类、问答、摘要等相当于一个“…...

AI应用企业研发方案

一、引言 在当今数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;技术正以前所未有的速度融入各个行业&#xff0c;推动着企业的创新与变革。对于医药流通行业批发公司而言&#xff0c;面对日益激烈的市场竞争和不断变化的客户需求&#xff0c;借助AI技术提升企业的…...

Python实例题:Python实现iavaweb项目远端自动化更新部署

目录 Python实例题 题目 题目分析 需求理解 关键知识点 实现思路分析 代码实现 代码解释 execute_remote_command 函数&#xff1a; deploy_java_web_project 函数&#xff1a; 主程序&#xff1a; 运行思路 结束语 Python实例题 题目 Python实现iavaweb项目远端…...

NO.90十六届蓝桥杯备战|动态规划-区间DP|回文字串|Treats for the Cows|石子合并|248(C++)

区间dp也是线性dp的⼀种&#xff0c;它⽤区间的左右端点来描述状态&#xff0c;通过⼩区间的解来推导出⼤区间的解。因此&#xff0c;区间DP的核⼼思想是将⼤区间划分为⼩区间&#xff0c;它的状态转移⽅程通常依赖于区间的划分点。 常⽤的划分点的⽅式有两个&#xff1a; 基于…...

无人机在极端环境材料的选择

一、材料选择与优化 1. 耐低温/高温复合材料 碳纤维增强聚合物&#xff08;CFRP&#xff09;&#xff1a;具备高强度、低膨胀系数特性&#xff0c;适用于极寒&#xff08;-40℃&#xff09;和高温&#xff08;50℃&#xff09;环境&#xff0c;减少因温度变化导致的结构变形。…...

视觉目标检测大模型GAIA

中国科学院自动化研究所智能感知与计算研究中心携手华为等领军企业&#xff0c;共同推出面向产业应用的视觉目标检测全流程解决方案——GAIA智能检测平台。该研究成果已获CVPR 2021会议收录&#xff08;论文链接&#xff1a; 论文地址&#xff1a;https://arxiv.org/pdf/2106.…...

【数据分析实战】使用 Matplotlib 绘制折线图

1、简述 在日常的数据分析、科研报告、项目可视化展示中&#xff0c;折线图是一种非常常见且直观的数据可视化方式。本文将带你快速上手 Matplotlib&#xff0c;并通过几个实际例子掌握折线图的绘制方法。 Matplotlib 是 Python 中最常用的数据可视化库之一&#xff0c;它能够…...

[原创](现代Delphi 12指南): 设置、运行和调试你的第一个macOS应用程序.

[作者] 常用网名: 猪头三 出生日期: 1981.XX.XX 企鹅交流: 643439947 个人网站: 80x86汇编小站 编程生涯: 2001年~至今[共24年] 职业生涯: 22年 开发语言: C/C、80x86ASM、Object Pascal、Objective-C、C#、R、Python、PHP、Perl、 开发工具: Visual Studio、Delphi、XCode、C …...

第一个Qt开发的OpenCV程序

OpenCV计算机视觉开发实践&#xff1a;基于Qt C - 商品搜索 - 京东 下载安装Qt&#xff1a;https://download.qt.io/archive/qt/5.14/5.14.2/qt-opensource-windows-x86-5.14.2.exe 下载安装OpenCV&#xff1a;https://opencv.org/releases/ 下载安装CMake&#xff1a;Downl…...

APCC:CloudberryDB和Greenplum数据库的管理利器

在大数据时代&#xff0c;企业数据量激增&#xff0c;数据库的运维复杂度与日俱增。如何高效管理数据库集群、快速定位问题并保障系统稳定性&#xff0c;成为企业IT团队的核心挑战。Analytical Processing Central Console&#xff08;APCC&#xff09; 应运而生——这是一款专…...

3D打印革新制造范式:CASAIM 3D打印解决方案

在传统制造面临定制化需求激增与供应链效率瓶颈的双重挑战下&#xff0c;3D打印技术正以颠覆性姿态重塑产业格局。CASAIM深耕工业级3D打印领域十余年&#xff0c;以材料科学、工艺控制与数字化设计的深度融合&#xff0c;为航空航天、汽车制造、医疗器械等高精尖行业提供从原型…...

[蓝桥杯]小tips

记得return 0 输入输出 关闭同步流肯定会记得 但是要记得define endl \n 更重要 dfs和string传参的注意 题目链接 #include<bits/stdc.h> using namespace std;//#define int long long using ll long long; using ar2 array<int,2>; using ar3 array<i…...

安宝特案例 | Fundació Puigvert 医院应用AR技术开创尿石症治疗新纪元

案例介绍 在医疗科技不断进步的今天&#xff0c;Fundaci Puigvert 医院迈出了重要一步&#xff0c;成功应用AR技术进行了全球首例同时使用两台内窥镜的ECIRS手术&#xff08;内镜肾内联合手术&#xff09;&#xff0c;由Esteban Emiliani M.D. PhD F.E.B.U 博士主刀。这标志着…...

LangGraph 架构详解

核心架构组件 LangGraph 的架构建立在一个灵活的基于图的系统上&#xff0c;使开发者能够定义和执行复杂的工作流。以下是主要架构组件&#xff1a; 1. 状态管理系统 LangGraph 的核心是其强大的状态管理系统&#xff0c;它允许应用程序在整个执行过程中维护一致的状态&…...

项目学习总结001

1. 策略模式和工厂模式 https://mp.weixin.qq.com/s/RG-h7r69JyKUlBZylJJIFQ 在软件开发中也常常遇到类似的情况&#xff0c;实现某一个功能有多个途径&#xff0c;此时可以使用一种设计模式来使得系统可以灵活地选择解决途径&#xff0c;也能够方便地增加新的解决途径。这就是…...

TGRS 2024 | 基于光谱相关的高光谱图像超分辨率融合网络

10.1109/TGRS.2024.3423422 研究背景及以往方法存在的问题 高光谱图像超分辨率&#xff08;HSI-SR&#xff09;旨在通过融合低空间分辨率 HSI 与高空间分辨率 MSI&#xff0c;提升 HSI 的空间分辨率。现有方法在模态差异处理、波段相关性利用、细节保留等方面存在不足&#x…...

小张的工厂进化史——工厂模式

小张的工厂进化史——工厂模式 一、简单工厂模式&#xff1a;全能生产线二、工厂方法模式&#xff1a;分品牌代工三、抽象工厂模式&#xff1a;生态产品族四、三种模式核心对比表五、结合Spring实现简单工厂&#xff08;实践&#xff09; 小张从华强北起家&#xff0c;最初只有…...

jupyter notebook 无法启动- markupsafe导致

一、运行jupyter notebook和Spyder报错&#xff1a;(已安装了Anaconda&#xff0c;以前可打开) 1.背景&#xff1a;为了部署机器学习模型&#xff0c;按教程直接安装了flask 和markupsafe&#xff0c;导致jupyter notebook&#xff0c;Spyder 打不开。 pip install flas…...

GPT - GPT(Generative Pre-trained Transformer)模型框架

本节代码主要为实现了一个简化版的 GPT&#xff08;Generative Pre-trained Transformer&#xff09;模型。GPT 是一种基于 Transformer 架构的语言生成模型&#xff0c;主要用于生成自然语言文本。 1. 模型结构 初始化部分 class GPT(nn.Module):def __init__(self, vocab…...

数据中台、BI业务访谈(三):如何选择合适的访谈对象

大家在日常中有没有遇到这种情况&#xff0c;感觉所有的事情都准备的很充分了&#xff0c;反复的演练&#xff0c;结果一上去就发现事情完全没有按照自己预想的来。智者千虑&#xff0c;必有一失。满满自信的去&#xff0c;结果是铩羽归来。 这种情况很正常&#xff0c;就跟打…...

计算机网络-TCP可靠传输机制

计算机网络-TCP可靠传输机制 3. TCP可靠传输机制3.1 序列号与确认号机制3.1.1 序列号与确认号的基本概念3.1.2 序列号与确认号的工作原理3.1.3 序列号与确认号在Linux内核中的实现TCP控制块中的序列号和确认号字段序列号的初始化发送数据时的序列号处理接收数据时的确认号处理 …...

计算机网络- 传输层安全性

传输层安全性 7. 传输层安全性7.1 传输层安全基础7.1.1 安全需求机密性&#xff08;Confidentiality&#xff09;完整性&#xff08;Integrity&#xff09;真实性&#xff08;Authenticity&#xff09;不可否认性&#xff08;Non-repudiation&#xff09; 7.1.2 常见安全威胁窃…...

【C++取经之路】lambda和bind

目录 引言 lambda语法 lambda捕获列表解析 1&#xff09;值捕获 2&#xff09;引用捕获 3&#xff09;隐式捕获 lambda的工作原理 lambda进阶用法 泛型lambda 立即调用 lambda 与 function bind语法 bind的调用逻辑 bind核心用途 绑定参数 调整参数顺序 bind的…...

AF3 ProteinDataset类的初始化方法解读

AlphaFold3 protein_dataset模块 ProteinDataset 类主要负责从结构化的蛋白质数据中构建一个可供模型训练/推理使用的数据集,ProteinDataset 类的 __init__ 方法用于初始化一个蛋白质数据集对象。 源代码: def __init__(self,dataset_folder,features_folder="./data/t…...

博客园账户注册全流程指南(附常见问题)

博客园账户注册全流程指南&#xff08;附常见问题&#xff09; 引言 博客园作为国内老牌技术社区&#xff0c;是程序员们分享知识、交流技术的圣地。本文将手把手教你完成从注册到开通博客的全流程&#xff0c;附常见问题解答&#xff0c;助你轻松开启技术博客之旅。 一、注…...

算法复习笔记

算法复习 最大公约数枚举abc反序数 模拟xxx定律打印数字菱形今年的第几天&#xff1f;vector完数VS盈数剩下的树 排序和查找顺序查找二分查找找位置 字符串统计单词浮点数加法 线性数据结构队列约瑟夫问题&#xff08;队列&#xff09;计算表达式&#xff08;栈&#xff09; 递…...

spring boot 引入fastjson,com.alibaba.fastjson不存在(Springboot-测试项目)

spring boot 引入fastjson&#xff0c;com.alibaba.fastjson不存在&#xff08;Springboot-测试项目&#xff09; 先解决最初的的包不找到问题&#xff0c;适用所有包找不到跟进。 <mirrors><!-- mirror| Specifies a repository mirror site to use instead of a g…...

新闻推荐系统(springboot+vue+mysql)含万字文档+运行说明文档

新闻推荐系统(springbootvuemysql)含万字文档运行说明文档 该系统是一个新闻推荐系统&#xff0c;分为管理员和用户两个角色。管理员模块包括个人中心、用户管理、排行榜管理、新闻管理、我的收藏管理和系统管理等功能。管理员可以通过这些功能进行用户信息管理、查看和编辑用…...

UE4 踩坑记录

1、Using git status to determine working set for adaptive non-unity build 我删除了一个没用的资源&#xff0c;结果就报这个错&#xff0c;原因就是这条命令导致的&#xff0c; 如果这个项目是git项目&#xff0c; ue编译时会优先通过 git status检查哪些文件被修改&#…...

【解决方案】vscode 不小心打开了列选择模式,选择时只能选中同一列的数据。

vscode 不小心打开了列选择模式&#xff0c;选择时只能选中同一列的数据。 解决方案&#xff1a; 1.通过命令面板关闭&#xff1a; 按下 Ctrl Shift P&#xff08;Windows/Linux&#xff09;或 Cmd Shift P&#xff08;macOS&#xff09;&#xff0c;输入 切换列选择模式…...

国标GB28181视频平台EasyCVR如何搭建汽车修理厂远程视频网络监控方案

一、背景分析 近年我国汽车保有量持续攀升&#xff0c;与之相伴的汽车保养维修需求也逐渐提高。随着社会经济的发展&#xff0c;消费者对汽车维修服务质量的要求越来越高&#xff0c;这使得汽车维修店的安全防范与人员管理问题面临着巨大挑战。 多数汽车维修店分布分散&#…...

【Go】windows下的Go安装与配置,并运行第一个Go程序

【Go】windows下的Go安装与配置&#xff0c;并运行第一个Go程序 安装环境&#xff1a;windows10 64位 安装版本&#xff1a;go1.16 windows/amd64 一、安装配置步骤 1.到官方网址下载安装包 https://golang.google.cn/dl/ 默认情况下 .msi 文件会安装在 c:\Go 目录下。可自行配…...

Linux 线程:从零构建多线程应用:系统化解析线程API与底层设计逻辑

线程 线程的概述 在之前&#xff0c;我们常把进程定义为 程序执行的实例&#xff0c;实际不然&#xff0c;进程实际上只是维护应用程序的各种资源&#xff0c;并不执行什么。真正执行具体任务的是线程。 那为什么之前直接执行a.out的时候&#xff0c;没有这种感受呢&#xf…...

榕壹云无人共享系统:基于SpringBoot+MySQL+UniApp的物联网共享解决方案

无人共享经济下的技术革新 随着无人值守经济模式的快速发展,传统共享设备面临管理成本高、效率低下等问题。榕壹云无人共享系统依托SpringBoot+MySQL+UniApp技术栈,结合物联网与移动互联网技术,为商家提供低成本、高可用的无人化运营解决方案。本文将详细解析该系统的技术架…...

技术书籍推荐(002):电子书免费下载

20. 利用Python进行数据分析 免费 电子书 PDF 下载 书籍简介&#xff1a; 本书聚焦于使用Python进行数据处理和分析。详细介绍了Python中用于数据分析的重要库&#xff0c;如NumPy&#xff08;提供高效的数值计算功能&#xff0c;包括数组操作、数学函数等&#xff09;、panda…...

安全序列(DP)

#include <bits/stdc.h> using namespace std; const int MOD1e97; const int N1e65; int f[N]; int main() {int n,k;cin>>n>>k;f[0]1;for(int i1;i<n;i){f[i]f[i-1]; // 不放桶&#xff1a;延续前一位的所有方案if(i-k-1>0){f[i](f[i]f[i-k…...

数据可视化 —— 堆形图应用(大全)

一、案例一&#xff1a;温度堆积图 # 导入 matplotlib 库中的 pyplot 模块&#xff0c;这个模块提供了类似于 MATLAB 的绘图接口&#xff0c; # 方便我们创建各种类型的可视化图表&#xff0c;比如折线图、柱状图、散点图等 import matplotlib.pyplot as plt # 导入 numpy 库&…...

利用 pyecharts 实现地图的数据可视化——第七次人口普查数据的2d、3d展示(关键词:2d 、3d 、map、 geo、涟漪点)

参考文档&#xff1a;链接: link_pyecharts 官方文档 1、map() 传入省份全称&#xff0c;date_pair 是列表套列表 [ [ ],[ ] … ] 2、geo() 传入省份简称&#xff0c;date_pair 是列表套元组 [ ( ),( ) … ] 1、准备数据 population_data&#xff1a;简称经纬度 population_da…...

字节跳动开源 LangManus:不止是 Manus 平替,更是下一代 AI 自动化引擎

当 “AI 自动化” 成为科技领域最炙手可热的关键词&#xff0c;我们仿佛置身于一场激动人心的变革前夜。各行各业都在翘首以盼&#xff0c;期待 AI 技术能够真正解放生产力&#xff0c;将人类从繁琐重复的工作中解脱出来。在这个充满无限可能的时代&#xff0c;字节跳动悄然发布…...

第十四届蓝桥杯大赛软件赛省赛C/C++ 大学 A 组真题

文章目录 1 幸运数题目描述&#xff1a;答案&#xff1a;4430091 代码&#xff1a; 2 有奖问答题目描述&#xff1a;重点&#xff1a;答案&#xff1a;8335366 代码&#xff1a; 3 平方差题目描述&#xff1a;思路&#xff1a;数学找规律代码&#xff1a; 4 更小的数题目描述&a…...