FU-Project | xuhao的博客

type

status

date

slug

summary

📝 项目技术与依赖详解

1. 后端rust生态（cargo.toml）

rust生态不是Java一样的全家桶，而是更像是乐高积木，就类似是python一样

package name	work	content
axum	web 框架	就像是springboot 或者flask 和fastapi。负责接收http请求、解析参数、分发路由。它是由tokio构建的，性能极高。
tokio	异步运行时	rust本身不带异步功能。它是发送机就是负责调度并发任务。没有它async/await就是摆设。
sea-orm	orm(对象关系映射)	思考一下对数据库操作是不是都需要编写sql语句那么其中还会涉及到很多的SQL知识，现在不需要了，库函数都优化过了。不需要写sql就能去操作数据库。
serde	序列化/反序列化	数据的打包和解包。主要配合serde_json使用，把rust的结构体自动转换json字符串传送给前端，或者把前端发送的json字符串解析成结构体。
tower-http	http中间件	核心用途是cors（跨域资源共享）。因为前端在5173，后端在3000端口，游览器默认禁止互相访问，这个包就是负责放行的。
jsonwebtoken	身份验证	用于生成和校验jwt。就像是去游乐场带手环做身份辨识。
tracing	日志系统	用于打印日志（log），输出不同等级的日志到文件当中。

2.前端web-admin

package name	work	content	ㅤ
vue3	核心框架	现代前端的基础。它让我们通过组件化的方式编写网页，数据变化界面自动变化，不需要再去操作dom	ㅤ
vite	构建工具	它是启动器和打包器。开发时它让服务启动，部署的时候编译成htmlcssjs	ㅤ
vue-router	路由管理	管理页面跳转路由输入对应的路径能去显示对应的组件	ㅤ
pinia	状态管理	全局变量仓库	ㅤ
axios	http客户端	负责向后端发送请求。这是游览器fetch api的封装，更方便处理拦截器例如加上token。	ㅤ
ant-ui	ui组件库	现成的积木。	ㅤ

3.移动端：uniapp

uniapp不需要额外的安装包，它是基于vue的框架，核心逻辑和vue一样知识标签变化了。

需要额外的去下载编译器hbuilderx

🤗学习路径

first step web基础（1周）

global：写一个静态页面理解网页是怎么来的

1.html5

标签结构 div span 表单 input button等等重点要理解html是骨架

2.css3

flex布局盒子模型定位 css是皮肤不需要精通

3.JavaScript（es6）

核心学习 let const 箭头函数（）⇒{} 解析赋值const {data}=res

异步操作promise async await

second step Vue 3 框架入门 (2周)

Vue 3 基础 (Composition API):

目标： 能用 Vue 写出带交互的界面。

必须学 <script setup> 语法糖，不要学老式的 Options API。

核心概念：ref (定义变量), onMounted (页面加载时), computed (自动计算)。

组件通信:

父子组件怎么传数据 (props, emit)。

UI 库的使用:

学习怎么看 antui 的文档。复制粘贴官方示例代码，改成自己的数据。

任务：用 antui 画一个“用户登录表单”和一个“数据表格”。

third step 前后端交互与网络 (3天)

目标： 理解前端怎么拿到后端的数据。

HTTP 协议:

了解 GET (查) 和 POST (改) 的区别。

了解状态码 (200 成功, 401 没权限, 500 炸了)。

了解 Header (Token 是放在 Header 里的)。

Axios:

学会封装 Axios（设置 BaseURL，设置请求拦截器自动加 Token）。

last step Rust 后端入门 (1-2周)

Rust 曲线很陡。对于做这个项目，不需要精通 Rust 所有特性，会“照猫画虎”。

Rust 基础语法:

变量与可变性 (mut)。

结构体 (Struct) 与 枚举 (Enum) -> 用来定义数据模型。

Option<T> (可能有，可能无) 和 Result<T, E> (成功或失败) -> 必须理解，Rust 处理空值和错误的方式。

所有权 (Ownership) - 浅尝辄止:

理解为什么有时候要用 .clone()。

理解 & 是借用（看一眼），不带 & 是拿走。

Axum 框架的使用 (模仿):

不用从头造轮子。学会看你的代码：

怎么写一个 Handler 函数？

怎么从 Json<Payload> 里拿参数？

怎么返回 Json<Response>？

SeaORM (查数据库):

学会看文档写查询：Entity::find().filter(...).all(&db).await。

附加数据库与工具 (穿插学习)

SQL 基础:

理解 Table (表), Row (行), Column (列)。

理解 Primary Key (主键) 和 Foreign Key (外键)。

Git:

git clone (下载代码)

git pull (拉取最新)

git add . -> git commit -> git push (提交代码)。

提交前先 Pull，遇到冲突不要慌。

📎 参考文章

木有哦自行寻找

💡

想要快速进步就每天写500行代码坚持半年