系統概述
項目結構
Al_Compny系統采用前后端分離的全棧架構,項目根目錄下包含兩個主要子目錄:Al_Compny_backend
(后端服務)和Al_Compny_frontend
(前端應用)。
核心功能模塊
Al_Compny系統是一個面向"一人公司"場景的企業智能管理平臺,集成了用戶管理、角色權限控制、菜單系統和智能HR助手等核心功能模塊。系統旨在為個人創業者提供全方位的管理支持,包括簡歷優化、戰略分析、人事文章生成和財務決策輔助。
用戶管理模塊
用戶管理模塊是系統的基礎,負責用戶賬戶的創建、認證和信息維護。該模塊定義了系統用戶的數據模型和相關API接口。
角色與權限模塊
角色與權限模塊實現了基于角色的訪問控制(RBAC)機制,通過角色定義權限,并將角色分配給用戶。系統還包含菜單模塊,用于定義系統功能菜單和權限關聯。
智能HR助手模塊
智能HR助手模塊是系統的核心智能功能,提供簡歷助手、戰略分析助手和人事部助手等多種AI服務,支持文件上傳和對話式交互
系統架構與技術棧
Al_Compny系統采用現代化的全棧前后端分離架構,后端基于Python的Django框架,前端基于Vue 3框架,通過RESTful API進行通信。
技術棧組成
后端技術棧:
- 框架: Django + Django REST framework
- 數據庫: MySQL
- 認證: JWT (JSON Web Token)
- 部署: WSGI
前端技術棧:
-
框架: Vue 3 + Vite
-
狀態管理: Pinia
-
UI組件庫: Element Plus
-
路由: Vue Router
-
HTTP客戶端: Axios
前后端協同工作機制
系統采用標準的前后端分離模式,前端負責用戶界面展示和交互,后端提供數據API服務。用戶通過瀏覽器訪問前端應用,前端通過Axios庫向后端Django服務發起HTTP請求,后端處理請求并返回JSON格式的數據。
用戶與權限管理
用戶認證流程
系統采用JWT(JSON Web Token)進行用戶認證,實現了標準的注冊和登錄流程。
角色權限體系
系統通過角色管理實現權限控制,不同角色擁有不同的系統訪問權限。前端路由配置中明確標識了各頁面的權限要求。
智能HR助手功能
功能概述
智能HR助手模塊為"一人公司"場景提供全方位的智能支持,主要包括:
- 簡歷助手: 幫助優化個人簡歷,提升求職競爭力
- 戰略分析助手: 提供商業戰略分析和決策支持
- 人事部助手: 生成人事相關文檔和文章
- 財務決策支持: 提供財務規劃和決策建議
數據模型設計
智能HR助手基于對話會話模型,支持多輪對話和文件上傳功能。
業務邏輯流程
當用戶發送消息時,系統創建用戶消息記錄,并調用AI服務生成回復。
API接口設計
RESTful API路由
系統采用RESTful風格的API設計,通過Django的URL路由機制進行端點管理。
主要API端點
模塊 | 端點 | HTTP方法 | 功能 |
---|---|---|---|
用戶 | /user/register/ | POST | 用戶注冊 |
用戶 | /user/login/ | POST | 用戶登錄 |
HR助手 | /hrchat/ | GET, POST | 對話會話管理 |
HR助手 | /hrchat/{id}/messages/ | GET | 獲取消息列表 |
HR助手 | /hrchat/{id}/messages/send/ | POST | 發送新消息 |
前后端交互流程
JWT認證流程
系統采用JWT進行無狀態認證,確保API調用的安全性。
Pinia狀態管理
前端使用Pinia進行全局狀態管理,集中管理用戶認證狀態。
數據庫設計
數據庫配置
系統使用MySQL作為主要數據庫,配置信息位于Django設置文件中。
數據表結構
系統主要數據表包括:
- sys_user: 系統用戶表
- chat_session: 對話會話表
- chat_message: 對話消息表
系統上下文圖
數據表結構
系統主要數據表包括:
- sys_user: 系統用戶表
- chat_session: 對話會話表
- chat_message: 對話消息表
前端架構
項目結構
Al_Compny項目包含前后端兩個主要部分。前端位于Al_Compny_frontend
目錄,采用Vue 3 + TypeScript + Pinia + Vue Router的現代前端技術棧。后端為Django項目,提供RESTful API服務。
前端核心結構如下:
src/main.ts
:應用入口文件src/App.vue
:根組件src/router/index.ts
:路由配置src/stores/
:Pinia狀態管理模塊src/utils/request.ts
:Axios封裝src/views/
:頁面級組件src/components/
:可復用UI組件src/types/
:TypeScript類型定義
核心組件
本項目采用MVVM架構模式,通過組件化設計實現高內聚低耦合。核心組件包括:
- 視圖層(View):
.vue
文件,負責UI渲染與用戶交互 - 模型層(Model):Pinia Store,管理應用狀態
- 視圖模型(ViewModel):Vue組件的
<script setup>
部分,連接視圖與模型
數據流遵循單向數據流原則:用戶操作觸發事件 → 組件調用Store方法 → Store調用API → 更新狀態 → 視圖響應式更新。
應用入口與初始化
main.ts
是Vue應用的啟動入口,負責創建Vue實例并掛載核心插件。
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import App from './App.vue'
import router from './router'const app = createApp(App)
const pinia = createPinia()app.use(pinia)
app.use(router)
app.use(ElementPlus)
app.mount('#app')
初始化流程:
- 創建Vue應用實例
- 創建Pinia狀態管理實例
- 依次注冊Pinia、Vue Router、ElementPlus插件
- 掛載到DOM元素
#app
此設計實現了關注點分離,確保應用在啟動時完成所有依賴注入。
根組件與布局
App.vue
作為根組件,采用<script setup>
語法糖,結構簡潔。
<template><router-view />
</template>
該組件僅包含一個<router-view>
占位符,用于動態渲染當前路由匹配的視圖組件。這種設計實現了路由驅動的布局機制——不同的URL路徑會加載不同的頁面組件(如Login.vue、Dashboard.vue等),而根組件保持不變。
路由系統
Vue Router在index.ts
中定義了完整的路由表,采用嵌套路由實現模塊化管理。
路由配置分析
routes: [{path: '/home',name: 'home',meta: {requiresAuth: true},component: () => import('@/views/Home.vue'),redirect: '/home/dashboard',children: [ /* 子路由 */ ]},{path: '/login',name: 'login',meta: {requiresAuth: false},component: () => import('@/views/Login.vue'),}
]
關鍵特性:
- 路由元信息:
meta.requiresAuth
標記是否需要認證 - 懶加載:使用
import()
動態導入組件,實現代碼分割 - 嵌套路由:
/home
下包含多個子頁面(儀表盤、用戶管理等)
路由守衛
router.beforeEach(async (to, from, next) => {const userStore = useUserStore()const savedToken = localStorage.getItem('token')if (to.meta.requiresAuth && !savedToken) {next({ path: '/login', query: { redirect: to.fullPath } })} else {next()}
})
全局前置守衛實現:
- 檢查目標路由是否需要認證
- 若未登錄且訪問受保護路由,則重定向至登錄頁
- 登錄后可自動跳轉回原始目標頁面
狀態管理
Pinia在user.ts
中實現了用戶狀態的集中管理,遵循單一狀態樹原則。
狀態定義
const user = ref<User | null>(null)
const token = ref<string | null>(localStorage.getItem('token'))
const isLoggedIn = computed(() => !!token.value)
user
:存儲用戶信息對象token
:JWT令牌,初始化時從localStorage
讀取isLoggedIn
:計算屬性,反映登錄狀態
核心方法
登錄方法
const login = async (loginForm: LoginForm) => {const response = await request.post('/user/login/', loginForm)if (apiResponse.code === 200) {token.value = jwtTokenuser.value = userInfolocalStorage.setItem('token', jwtToken)return { success: true }}
}
登出方法
const logout = () => {localStorage.removeItem('token')user.value = nulltoken.value = nullrouter.push('/login')
}
自動恢復狀態
// 刷新頁面時從 localStorage 恢復 token
const savedToken = localStorage.getItem('token')
if (savedToken && !userStore.token) {userStore.token = savedToken
}
狀態管理實現了:
- 持久化:token存儲在
localStorage
- 響應式:使用
ref
和computed
實現自動更新 - 集中控制:所有用戶相關操作通過Store統一處理
API請求封裝
request.ts
對Axios進行了封裝,提供統一的HTTP請求接口。
封裝策略
const httpService = axios.create({baseURL: "http://127.0.0.1:8000/",timeout: 3000
})
- 基礎配置:設置API基礎URL和超時時間
- 請求攔截器:自動添加認證頭
- 響應攔截器:統一處理響應和錯誤
請求攔截器
httpService.interceptors.request.use(config => {config.headers.AUTHORIZATION = localStorage.getItem('token') || ''return config
})
確保每次請求都攜帶JWT令牌。
響應處理
export function get<T>(url, params) {return new Promise((resolve, reject) => {httpService({ url, method: 'get', params }).then(response => resolve(response)).catch(error => reject(error))})
}
提供get
、post
、del
、fileUpload
等便捷方法,支持泛型類型推斷。
本節來源
- [request.ts](file:///E:/Al_Compny/Al_Compny_frontend/src/utils/request.ts#L1-L153)
組件通信與數據流
系統通過"事件驅動 + 狀態管理"模式實現組件間通信。
數據流示例:登錄流程
關鍵通信機制:
- 組件 → Store:通過
useUserStore()
獲取Store實例并調用方法 - Store → API:Store內部調用
request
模塊發起HTTP請求 - API → Store:更新響應數據到狀態
- Store → 組件:組件通過
computed
或直接引用響應式數據自動更新視圖
類型安全
通過types/user.ts
定義接口,確保類型安全:
export interface User {id: numberusername: stringemail?: string
}export interface ApiResponse<T> {code: numbermessage: stringdata?: T
}
本節來源
- [Login.vue](file:///E:/Al_Compny/Al_Compny_frontend/src/views/Login.vue#L1-L219)
- [user.ts](file:///E:/Al_Compny/Al_Compny_frontend/src/stores/user.ts#L1-L185)
- [request.ts](file:///E:/Al_Compny/Al_Compny_frontend/src/utils/request.ts#L1-L153)
- [user.ts](file:///E:/Al_Compny/Al_Compny_frontend/src/types/user.ts#L1-L26)
登錄流程分析
以登錄功能為例,展示完整的工作流程:
- 用戶交互:在
Login.vue
輸入用戶名密碼 - 表單驗證:Element Plus表單規則驗證輸入
- 調用Store:
handleLogin()
調用userStore.login()
- 發起請求:Store通過
request.post()
發送登錄請求 - 身份驗證:后端驗證憑證,返回JWT token
- 狀態更新:Store更新
token
和user
狀態 - 持久化:token保存到
localStorage
- 路由跳轉:導航到首頁
- 守衛驗證:路由守衛檢查token有效性
- 頁面渲染:加載Dashboard組件
此流程體現了MVVM模式的優勢:視圖只關注用戶交互,業務邏輯和狀態管理完全解耦。
本節來源
- [Login.vue](file:///E:/Al_Compny/Al_Compny_frontend/src/views/Login.vue#L1-L219)
- [user.ts](file:///E:/Al_Compny/Al_Compny_frontend/src/stores/user.ts#L39-L77)
- [index.ts](file:///E:/Al_Compny/Al_Compny_frontend/src/router/index.ts#L50-L100)
結論
Al_Compny前端架構采用現代化的Vue 3技術棧,具有以下特點:
優勢:
- 清晰的分層:MVVM模式實現關注點分離
- 高效的通信:Pinia提供集中式狀態管理
- 安全的路由:路由守衛實現權限控制
- 統一的API:Axios封裝簡化網絡請求
- 響應式更新:Vue 3的響應式系統確保UI同步
改進建議:
- 錯誤處理:增強全局錯誤處理機制
- 類型完善:補充更多接口類型定義
- 性能優化:添加API響應緩存
- 安全性:考慮使用
httpOnly
cookie存儲token - 測試覆蓋:增加單元測試和E2E測試
整體架構設計合理,具備良好的可維護性和擴展性,為企業的數字化管理平臺提供了堅實的技術基礎。
后端架構
項目結構
Al_Compny后端項目采用Django框架,遵循MVC設計模式,整體結構清晰,模塊化程度高。項目主要由以下幾個核心部分組成:
- 主配置目錄 (
Al_Compny_backend/Al_Compny_backend
):包含Django項目的核心配置文件(settings.py
,urls.py
,asgi.py
,wsgi.py
)。 - 應用模塊:包括
user
(用戶管理)、role
(角色管理)、menu
(菜單權限)、hrchat
(HR對話)等獨立應用,每個應用都遵循Django的標準結構(models.py
,views.py
,urls.py
等)。 - 管理腳本:
manage.py
是Django項目的命令行工具入口。
這種結構體現了高內聚、低耦合的設計原則,便于維護和擴展。
核心配置分析
Django項目的主配置文件settings.py
是整個應用的“大腦”,它定義了項目運行所需的所有全局設置。
服務器接口配置
asgi.py
和wsgi.py
是Django與Web服務器通信的接口。
- ASGI (Asynchronous Server Gateway Interface):
asgi.py
文件配置了異步應用接口,允許Django處理WebSocket、HTTP/2等長連接或異步請求,為未來的實時功能(如聊天)提供支持。 - WSGI (Web Server Gateway Interface):
wsgi.py
文件配置了傳統的同步應用接口,用于處理標準的HTTP請求。大多數Web服務器(如Gunicorn, uWSGI)通過此接口與Django應用通信。
# asgi.py 和 wsgi.py 的核心代碼
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'Al_Compny_backend.settings')
application = get_asgi_application() # 或 get_wsgi_application()
數據庫連接配置
項目配置了MySQL數據庫,替代了默認的SQLite,以支持更復雜的數據操作和更高的并發性能。
# settings.py 中的 DATABASES 配置
DATABASES = {'default': {'ENGINE': 'django.db.backends.mysql','NAME': 'db_al_compnyManage','USER': 'root','PASSWORD': '20021230','HOST': 'localhost','PORT': '3306'}
}
JWT認證設置
項目集成了djangorestframework-simplejwt
庫來實現基于Token的認證。
# settings.py 中的 JWT_AUTH 配置
JWT_AUTH = {'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1), # Token有效期為1天
}
REST_FRAMEWORK = {'DEFAULT_AUTHENTICATION_CLASSES': ['rest_framework_simplejwt.authentication.JWTAuthentication',]
}
CORS策略
為了支持前端(Al_Compny_frontend
)的跨域訪問,項目配置了django-cors-headers
中間件。
# settings.py 中的 CORS 配置
CORS_ORIGIN_ALLOW_ALL = True # 允許所有來源
CORS_ALLOW_CREDENTIALS = True # 允許攜帶憑證(如Cookie)
CORS_ALLOW_METHODS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'] # 允許的HTTP方法
應用注冊
INSTALLED_APPS
列表注冊了所有啟用的應用,包括Django內置應用和自定義應用。
INSTALLED_APPS = ['django.contrib.auth','django.contrib.contenttypes',# ... 其他內置應用'user', # 用戶管理'role', # 角色管理'menu', # 菜單權限'hrchat', # HR對話'rest_framework', # Django REST framework'rest_framework_jwt', # JWT認證支持"corsheaders", # CORS支持
]
本節來源
- [settings.py](file://al_compny_backend/Al_Compny_backend/settings.py#L1-L170)
- [asgi.py](file://al_compny_backend/Al_Compny_backend/asgi.py#L1-L17)
- [wsgi.py](file://al_compny_backend/Al_Compny_backend/wsgi.py#L1-L16)
路由分發體系
項目采用分層的URL路由分發機制,實現了清晰的API路徑管理。
根路由 (Root URLs)
Al_Compny_backend/urls.py
作為根路由,負責將不同前綴的請求分發到對應的應用。
# Al_Compny_backend/urls.py
urlpatterns = [path('user/', include('user.urls')), # 所有 /user/ 開頭的請求交給 user 應用處理path('role/', include('role.urls')), # 所有 /role/ 開頭的請求交給 role 應用處理path('menu/', include('menu.urls')), # 所有 /menu/ 開頭的請求交給 menu 應用處理
]
應用路由 (App URLs)
每個應用都有自己的urls.py
文件,定義其內部的API端點。
以user
應用為例:
# user/urls.py
urlpatterns = [path('register/', RegisterView.as_view(), name='register'), # POST /user/register/path('login/', LoginView.as_view(), name='login') # POST /user/login/
]
這種分發模式使得API路徑清晰、易于維護,并且各應用的路由相互隔離。
數據模型設計
數據模型定義了數據庫的表結構和對象關系。
SysUser 模型
user/models.py
中的SysUser
類定義了系統用戶的核心信息。
class SysUser(models.Model):id = models.AutoField(primary_key=True)username = models.CharField(max_length=100, unique=True) # 用戶名,唯一password = models.CharField(max_length=100) # 加密后的密碼avatar = models.CharField(max_length=255, null=True) # 頭像email = models.CharField(max_length=100, null=True) # 郵箱phonenumber = models.CharField(max_length=11, null=True) # 手機號status = models.IntegerField(null=True) # 狀態 (0正常, 1停用)# ... 其他字段class Meta:db_table = "sys_user" # 對應數據庫表名
ChatSession 與 ChatMessage 模型
hrchat/models.py
中定義了聊天會話和消息的模型,體現了典型的“一對多”關系。
class ChatSession(models.Model):title = models.CharField(max_length=100, blank=True) # 會話標題created_at = models.DateTimeField(auto_now_add=True) # 創建時間class ChatMessage(models.Model):ROLE_CHOICES = [("user", "User"), ("assistant", "Assistant")]session = models.ForeignKey(ChatSession, on_delete=models.CASCADE, related_name="messages")role = models.CharField(max_length=10, choices=ROLE_CHOICES) # 消息角色content = models.TextField() # 消息內容file = models.CharField(max_length=255, blank=True, null=True) # 附件created_at = models.DateTimeField(auto_now_add=True) # 創建時間
關系設計說明:
ChatMessage
通過ForeignKey
字段session
關聯到ChatSession
。on_delete=models.CASCADE
表示當會話被刪除時,其所有消息也會被級聯刪除。related_name="messages"
允許通過session.messages.all()
反向查詢該會話的所有消息。
API實現與JWT認證
API邏輯主要通過Django REST framework (DRF) 的類視圖(APIView
)實現。
用戶注冊 (RegisterView)
user/views.py
中的RegisterView
處理用戶注冊請求。
- 接收數據:從
request.data
獲取username
,password
等。 - 驗證數據:檢查用戶名和密碼是否為空,以及用戶名是否已存在。
- 創建用戶:使用
make_password()
對明文密碼進行哈希加密,然后創建SysUser
實例并保存到數據庫。
用戶登錄與JWT令牌生成 (LoginView)
LoginView
是JWT認證流程的核心。
-
接收憑證:獲取
username
和password
。 -
驗證憑證:查詢數據庫找到用戶,并使用
check_password()
驗證密碼哈希。 -
生成令牌
:
- 創建一個
RefreshToken
對象(refresh = RefreshToken.for_user(user)
)。 - 從刷新令牌中提取訪問令牌(
access_token = str(refresh.access_token)
)。
- 創建一個
-
返回響應:將
access_token
和用戶基本信息返回給前端。
序列化器作用
序列化器(Serializers)是DRF的核心組件,負責在Python對象(如Django模型實例)和JSON數據之間進行轉換。
數據序列化 (Python -> JSON)
當API需要返回數據時(如獲取聊天記錄),序列化器將數據庫查詢結果(QuerySet)或模型實例轉換為前端可讀的JSON格式。
# hrchat/serializers.py
class ChatMessageSerializer(serializers.ModelSerializer):class Meta:model = ChatMessagefields = ["id", "role", "content", "file", "created_at"] # 指定需要序列化的字段
在MessageList
視圖中,get_queryset()
返回ChatMessage
對象列表,DRF會自動使用ChatMessageSerializer
將它們序列化為JSON數組。
數據反序列化 (JSON -> Python)
當API接收數據時(如創建新消息),序列化器驗證傳入的JSON數據,并將其轉換為Python字典,以便創建或更新模型實例。
# 在 MessageCreate 視圖中
def perform_create(self, serializer):session = get_object_or_404(ChatSession, pk=self.kwargs["pk"])# serializer.validated_data 包含已驗證的JSON數據message = serializer.save(session=session, role="user") # 創建并保存 ChatMessage 實例
本節來源
- [hrchat/serializers.py](file://al_compny_backend/hrchat/serializers.py#L1-L13)
- [hrchat/views.py](file://al_compny_backend/hrchat/views.py#L1-L57)
權限控制機制
項目遵循RESTful設計原則,API設計清晰、狀態無關。
RESTful設計體現
- 資源導向:API端點代表資源(如
/user/
,/chat/
)。 - 統一接口:使用標準的HTTP方法(GET, POST, PUT, DELETE)對資源進行操作。
- 無狀態:服務器不保存客戶端狀態,每次請求都包含所有必要信息(通過JWT Token)。
權限控制應用
雖然在當前分析的user
和hrchat
應用的視圖中未顯式設置permission_classes
(如IsAuthenticated
),但權限控制主要在前端路由和API調用層面實現。
- 前端路由守衛:前端代碼
src/router/index.ts
中,路由元信息meta: {requiresAuth: true}
標記了需要登錄的頁面(如人事助手、財務助手)。路由守衛會在跳轉前檢查是否存在有效的Token。 - API調用:前端在調用需要認證的API時,會自動在請求頭中添加
Authorization: Bearer <access_token>
。后端的JWTAuthentication
類會自動驗證此Token。
因此,權限控制是一個前后端協同的過程:前端負責阻止未登錄用戶訪問特定頁面,而后端通過JWT驗證確保API調用的合法性。