# 实战项目1

**Repository Path**: Ezreal0916/practical-project-1

## Basic Information

- **Project Name**: 实战项目1
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-14
- **Last Updated**: 2026-01-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI 全栈项目


## 技能点
### react 开发全家桶
- react + typescript(JS超级) 
- react+router-dom(前端路由)
- zustand(中央状态管理)
- axios(http请求库)

### 后端开发
- node+ ts
- nest.js 企业级别后端开发框架
- PSQL 数据库
- redis 缓存数据库

### AI
- langchain 
- coze/n8n
- llm 大模型
- 各种的AI编辑器 trae/cursor

### 项目安排
- frontend 前端项目
- backend 后端项目
- ai_server
- admin 后台管理系统

## git操作
- 全新的实战项目
  git init
- 提交的时机
  每次完成一个相对独立的模块后，提交一次代码。
  提交信息要准确完整，

## react 全家桶
### react+router-dom(前端路由)
- 前端路由 
- 早期的前端没有路由，路由由后端，前端是切图崽
- 前后端分离，前端有独立的（html5）路由，实现页面切换。
- 两种形式
  - Hash 路由
    - 路由路径中包含 # 符号，例如：http://localhost:3000/#/home
    - 刷新页面时，服务器不会收到请求，因为 # 后面的内容不会被发送到服务器
    - 不支持 SEO
    - 丑一点/很温柔 兼容性好 瞄点
  - History 路由
    - 路由路径中不包含 # 符号，例如：http://localhost:3000/home
    - 刷新页面时，服务器会收到请求，需要服务器配置支持
    - 支持 SEO
  - BrowerRouter /和后端路由一样，需要我们使用到html5 history Api 兼容性好 
    ie11 之前不兼容，现在的浏览器几乎都支持
  - as Router 可读性 
    性能，快 页面组件的懒加载
    /   HOME 延迟一下About  阻止加载
    /About About

### 路由有多少种
- 静态路由
  - 固定的路由路径，例如：/home、/about、/contact 等
- 动态路由
  - 包含参数的路由路径，例如：/user/:id、/product/:category 等
- 通配符路由
  - 匹配所有路径的路由，例如：* 或 /:catchAll(.*)
- 重定向路由
  - 将一个路由路径重定向到另一个路由路径，例如：/old-path 重定向到 /new-path
  redirect to="/new-path" 重定向路由 Navigate
- 404 路由
  - 当用户访问不存在的路由路径时，显示的路由，例如：/404 或 /not-found
- 嵌套路由
  - 在一个路由组件中定义子路由，例如：/products 下有 /products/:id 等子路由 Outlet
- 鉴权路由 （路由守卫） ProtectedRoute
  - 用于保护某些路由，只有在用户登录或满足其他条件时才能访问
  - 可以在路由组件中使用，也可以在组件中使用

### 路由生成访问历史
history 栈 先进后出
replace redirect 替换当前路由，不会添加到历史记录中

### 单页应用
- 传统的开发是多页的，基于http请求，每次url发生改变后，去服务器重新请求整个页面
体验不太好，页面会白一下
- 单页面 react-router-dom html5 history
前端路由
路由改变后
前端会收到一个事件，将匹配的新路由显示在页面上