養(yǎng)老系統(tǒng)開發(fā)實(shí)戰(zhàn)：Django與Vue前后端分離架構(gòu)解析)
先聊幾句題外話。社區(qū)養(yǎng)老服務(wù)這幾年是個(gè)真需求但市面上能直接落地的小型系統(tǒng)其實(shí)不多。要么是給大平臺(tái)做的定制項(xiàng)目要么就是課程作業(yè)級(jí)別的“玩具”。真正能跑到社區(qū)里去用讓社工、老人家屬、運(yùn)營(yíng)方都覺得順手的系統(tǒng)得把檔案管理、健康數(shù)據(jù)、服務(wù)派單這些事捋清楚。而技術(shù)選型上Python 后端加 Vue 前端的組合在這個(gè)領(lǐng)域里屬于性價(jià)比很高的方案——Django 負(fù)責(zé)業(yè)務(wù)和權(quán)限Flask 在輕量接口和輔助腳本上補(bǔ)位PyCharm 做主力 IDE這套搭配我前后在幾個(gè)項(xiàng)目里折騰過踩了不少坑也攢了一些能直接抄作業(yè)的經(jīng)驗(yàn)這篇就系統(tǒng)拆給你看。如果你正準(zhǔn)備做一個(gè)社區(qū)養(yǎng)老相關(guān)的系統(tǒng)或者你只是想看看 Django 和 Vue 前后端分離的項(xiàng)目到底怎么落地這篇都應(yīng)該適合你。我會(huì)把項(xiàng)目從設(shè)計(jì)到實(shí)現(xiàn)再到環(huán)境配置、上線部署的完整鏈路講透。1. 項(xiàng)目整體設(shè)計(jì)與技術(shù)選型的真實(shí)考量1.1 為什么是 Django 而不是只用一個(gè) Flask說句實(shí)話社區(qū)養(yǎng)老系統(tǒng)的核心痛點(diǎn)從來不在“接口寫得快不快”而在數(shù)據(jù)模型是否清晰、權(quán)限是否可控、后臺(tái)管理是否好用。這三個(gè)方面Django 幾乎是 Python 生態(tài)里的最優(yōu)解。Django 自帶 ORM、Admin 后臺(tái)、認(rèn)證體系和中間件機(jī)制這意味著你不需要從零搭建用戶登錄、角色權(quán)限這些“地基”功能。社區(qū)養(yǎng)老系統(tǒng)里至少有三類角色運(yùn)營(yíng)管理員、社工/護(hù)工、老人家屬每類角色看到的頁(yè)面和能操作的數(shù)據(jù)完全不同。Django 的 Group 和 Permission 機(jī)制配合 django-guardian 做對(duì)象級(jí)權(quán)限能比較干凈地解決“家屬只能看自己老人的數(shù)據(jù)”這類需求。而 Flask 在這個(gè)項(xiàng)目里的定位我建議是“輔助服務(wù)”。比如獨(dú)立的健康數(shù)據(jù)推送服務(wù)、定時(shí)統(tǒng)計(jì)腳本、或者未來要拆出去的某個(gè)輕量算法服務(wù)比如跌倒檢測(cè)的接口。Flask 靈活、啟動(dòng)快、依賴少但它沒有自帶 ORM 和 Admin硬要用 Flask 寫整個(gè)系統(tǒng)光是把“老人檔案-家屬-服務(wù)工單”這套關(guān)系理清楚就得手工寫很多 SQL 和模板代碼后期維護(hù)成本會(huì)明顯偏高。這里給一個(gè)我的切分經(jīng)驗(yàn)主業(yè)務(wù)系統(tǒng)用 Django跑在 8000 端口輔助的實(shí)時(shí)數(shù)據(jù)服務(wù)或腳本用 Flask跑在 5000 端口。兩者之間通過 HTTP 接口通信甚至可以直接讓 Django 通過 requests 調(diào)用 Flask 的接口。這個(gè)架構(gòu)的好處是Django 崩了不影響實(shí)時(shí)推送服務(wù)Flask 要升級(jí)也不動(dòng)主業(yè)務(wù)。1.2 Vue 在純前端渲染里的不可替代性社區(qū)養(yǎng)老系統(tǒng)的頁(yè)面交互不算極復(fù)雜但有幾個(gè)模塊如果不用前端框架寫起來會(huì)非常痛苦。最典型的就是“服務(wù)工單流轉(zhuǎn)”社工接單、上門、上傳服務(wù)記錄、家屬確認(rèn)這個(gè)過程中工單狀態(tài)要實(shí)時(shí)刷新還有“健康檔案趨勢(shì)圖”老人血壓、血糖的歷史數(shù)據(jù)要畫折線圖Vue 配合 ECharts 非常順手。Vue 的核心價(jià)值是數(shù)據(jù)驅(qū)動(dòng)視圖。你把serviceOrder這個(gè)對(duì)象綁定到頁(yè)面上接口返回新狀態(tài)后頁(yè)面自動(dòng)更新不用手寫一堆 DOM 操作。這在 Django 模板時(shí)代是做不到的便利——當(dāng)然 Django 模板配合 jQuery 也能跑但寫到后面你會(huì)發(fā)現(xiàn)代碼里全是字符串拼接和全局函數(shù)維護(hù)性真的很差。版本選擇上新項(xiàng)目直接上 Vue 3 加 Composition API組合式函數(shù)比如把“獲取老人列表”的邏輯封裝成一個(gè)useElderList()在多個(gè)頁(yè)面復(fù)用時(shí)非常省事。組件庫(kù)推薦 Element Plus它對(duì)表單、表格、彈窗這類后臺(tái)管理場(chǎng)景覆蓋得比較全。1.3 PyCharm 在前后端混合項(xiàng)目里的配置思路社區(qū)養(yǎng)老這個(gè)項(xiàng)目涉及 Vue 前端、Django 后端、Flask 輔助服務(wù)三塊代碼在 PyCharm 里如果不好好規(guī)劃目錄會(huì)亂到你想刪庫(kù)跑路。我的建議是把工程拆成三個(gè)頂層目錄都放在同一個(gè) PyCharm 工程下community-care/ ├── backend_django/ │ ├── manage.py │ ├── config/ # 項(xiàng)目配置(settings, urls, wsgi) │ └── apps/ # 業(yè)務(wù)模塊 ├── backend_flask/ │ ├── app.py │ └── services/ # 推送、統(tǒng)計(jì)腳本 └── frontend_vue/ ├── package.json ├── vite.config.js └── src/PyCharm 里只需要把community-care作為項(xiàng)目根目錄打開然后分別給backend_django和backend_flask配置獨(dú)立的 Python 解釋器建議用虛擬環(huán)境。前端部分 PyCharm 雖然能識(shí)別 Vue 文件但我更推薦你在 PyCharm 的 Terminal 里用命令行操作 npm而日常寫前端代碼時(shí)把 Terminal 切到frontend_vue目錄下。有一點(diǎn)要注意PyCharm 的 Python 解釋器路徑、以及 Vue 的 Node 環(huán)境路徑不要搞混。我在項(xiàng)目里見過有人把 npm 裝到了系統(tǒng) Python 目錄里結(jié)果整個(gè)環(huán)境直接廢了重裝了好幾輪。這個(gè)細(xì)節(jié)點(diǎn)名一下后面就不會(huì)踩。2. 數(shù)據(jù)庫(kù)設(shè)計(jì)與核心功能模塊的拆解2.1 老人檔案、家屬綁定與健康數(shù)據(jù)的表結(jié)構(gòu)社區(qū)養(yǎng)老系統(tǒng)最核心的數(shù)據(jù)是“人”圍繞人的健康和服務(wù)記錄展開。我把數(shù)據(jù)庫(kù)表劃分為五個(gè)域人員域、服務(wù)域、健康域、活動(dòng)域、系統(tǒng)域。人員域是最基礎(chǔ)的核心表是elder老人檔案表字段包括姓名、身份證號(hào)、聯(lián)系方式、緊急聯(lián)系人、住址、自理能力評(píng)估等級(jí)等。這里有個(gè)容易忽略但現(xiàn)實(shí)里一定會(huì)出現(xiàn)的需求一個(gè)老人可能對(duì)應(yīng)多個(gè)家屬賬號(hào)所以建議單獨(dú)建elder_family關(guān)聯(lián)表而不是在老人表里只存一個(gè)家屬 ID。我在實(shí)操中就遇到過女兒和兒子都要綁定同一老人檔案的情況。服務(wù)域是業(yè)務(wù)流轉(zhuǎn)的關(guān)鍵含service_type服務(wù)類型表如家政、助餐、陪診、康復(fù)護(hù)理、service_order服務(wù)工單表、service_record服務(wù)記錄表。工單表要重點(diǎn)設(shè)計(jì)狀態(tài)字段我建議用 IntegerField 狀態(tài)字典而不是字符串直接存因?yàn)楹罄m(xù)要按狀態(tài)統(tǒng)計(jì)時(shí)整型字段跑 SQL 會(huì)快很多代碼里寫ORDER_STATUS_PENDING 0這類常量也清晰。還要考慮工單的多人協(xié)作加一個(gè)assignee_id字段存指派的社工 ID同時(shí)記錄派單時(shí)間和接單時(shí)間方便后期統(tǒng)計(jì)響應(yīng)效率。健康域存量測(cè)數(shù)據(jù)health_metric表用“一行一條指標(biāo)”而不是“一行多條指標(biāo)”的寬表設(shè)計(jì)。比如血壓、血糖、心率、血氧各一行記錄這樣查某一天的某一項(xiàng)指標(biāo)、畫趨勢(shì)圖都更靈活按metric_type和elder_id索引查詢沒什么壓力。睡眠、運(yùn)動(dòng)這類衍生數(shù)據(jù)可以獨(dú)立到health_sleep或者h(yuǎn)ealth_exercise表里避免和基礎(chǔ)體征混在一起?；顒?dòng)域處理社區(qū)活動(dòng)與簽到activity表的主鍵之外要加一個(gè)capacity容量字段和一個(gè)enrollment_count報(bào)名數(shù)字段前端展示“已報(bào)名/剩余名額”時(shí)直接讀這兩個(gè)字段避免每次請(qǐng)求都去 count 一遍報(bào)名表。系統(tǒng)域就是 Django 自帶的用戶、權(quán)限、日志相關(guān)表我會(huì)為運(yùn)營(yíng)管理后臺(tái)啟用一個(gè)超級(jí)管理員賬號(hào)為社工和家屬各建一個(gè)組。2.2 角色權(quán)限的三層設(shè)計(jì)超級(jí)管理員、社工/護(hù)工、家屬這個(gè)系統(tǒng)里最忌諱的是所有登錄用戶看到同樣的菜單、干同樣的事。權(quán)限設(shè)計(jì)我分了三層。第一層是 Django 自帶is_staff判定只控制運(yùn)營(yíng)后臺(tái)入口。第二層是 Group 控制模塊級(jí)權(quán)限比如社工組默認(rèn)具有view_elder和change_serviceorder的權(quán)限家屬組只有view_elder且僅限“自己綁定的人”。第三層我用elder_family關(guān)聯(lián)表自己做對(duì)象級(jí)過濾也就是在查詢Elder對(duì)象時(shí)如果當(dāng)前用戶屬于家屬組就強(qiáng)制追加.filter(id__incurrent_user.family_bindings)。第三層這步叫對(duì)象級(jí)權(quán)限D(zhuǎn)jango 的django-guardian庫(kù)可以幫你做得更優(yōu)雅但我個(gè)人在中小型系統(tǒng)里會(huì)優(yōu)先用“查詢時(shí)過濾”的方式原因有兩條一是實(shí)現(xiàn)簡(jiǎn)單肉眼可見地知道每個(gè)接口查了什么二是不會(huì)引入額外的權(quán)限表和數(shù)據(jù)量開銷查詢性能更可控。等系統(tǒng)權(quán)限點(diǎn)變復(fù)雜了再上 Guardian 也不遲。2.3 工單流轉(zhuǎn)與社區(qū)活動(dòng)的核心邏輯服務(wù)工單是養(yǎng)老系統(tǒng)運(yùn)轉(zhuǎn)的“毛細(xì)血管”我把狀態(tài)機(jī)設(shè)計(jì)成這樣待派單0已派單1服務(wù)中2已完成待確認(rèn)3已完成4已取消5狀態(tài)流轉(zhuǎn)里最敏感的環(huán)節(jié)是“已完成待確認(rèn)”。社工上門服務(wù)完在 App 端提交服務(wù)記錄含照片、時(shí)長(zhǎng)、服務(wù)項(xiàng)明細(xì)工單進(jìn)入待確認(rèn)狀態(tài)家屬在微信小程序或 Web 端確認(rèn)后工單才算真正完成。這個(gè)確認(rèn)環(huán)節(jié)之所以必須做是為了防止“虛報(bào)工時(shí)”和“服務(wù)爭(zhēng)議”——社區(qū)運(yùn)營(yíng)方需要靠家屬確認(rèn)來和監(jiān)督服務(wù)真實(shí)完成。活動(dòng)模塊的注意點(diǎn)是“報(bào)名去重”數(shù)據(jù)庫(kù)層面用activity_enrollment表的唯一約束(activity_id, elder_id)兜底代碼層面在提交報(bào)名接口先查詢?cè)俨迦?。這里我用到的技巧是給活動(dòng)表加一個(gè)capacity容量字段報(bào)名時(shí)用select_for_update()鎖行防止并發(fā)報(bào)名把名額打超。3. 前后端環(huán)境配置與核心使用要點(diǎn)3.1 Python 與 PyCharm 的環(huán)境配置經(jīng)驗(yàn)Python 環(huán)境這塊社區(qū)養(yǎng)老系統(tǒng)的依賴不算重但要把版本鎖穩(wěn)定。我用的版本組合是 Python 3.10 Django 4.2LTS Flask 2.3這套組合到今天依然很穩(wěn)。如果拉不下來依賴包建議直接配國(guó)內(nèi)鏡像源這個(gè)不多說環(huán)境配置速度會(huì)快很多。新建虛擬環(huán)境的操作基本是 PyCharm 的標(biāo)準(zhǔn)流程Settings → Project → Python Interpreter → Add Interpreter → Virtualenv Environment。這里我只提一個(gè)細(xì)節(jié)項(xiàng)目根目錄下要有requirements.txt并且里面要把每個(gè)依賴釘上版本號(hào)不要只寫Django一個(gè)名字。不然過兩個(gè)月回來更新依賴Django 大版本一變一堆 API 要改心態(tài)容易崩。前端環(huán)境上Vue 推薦用 Vite 作為構(gòu)建工具不是 webpack。Vite 啟動(dòng)速度確實(shí)快不少熱更新響應(yīng)也跟手。創(chuàng)建一個(gè) Vue 3 項(xiàng)目的命令是npm create vuelatest frontend_vue期間會(huì)問你要不要 TypeScript、要不要 Vue Router、要不要 Pinia。我這邊直接選 JavaScript Vue Router Pinia狀態(tài)管理還是建議提前引入工單數(shù)據(jù)、當(dāng)前用戶信息、登錄 token 都放 Pinia 里撐著后面寫起來調(diào)試起來都省事。3.2 Django REST Framework 的接口實(shí)現(xiàn)與跨域配置前后端分離的項(xiàng)目里后端只負(fù)責(zé)寫接口不動(dòng)頁(yè)面。這里我用 Django REST FrameworkDRF來寫 API。序列化器、視圖集、路由注冊(cè)這些套路都比較固定我展示老人檔案列表接口的核心代碼。先安裝依賴pip install djangorestframework django-cors-headers在settings.py里注冊(cè)并開啟全站跨域INSTALLED_APPS [ # ... 自帶應(yīng)用 rest_framework, corsheaders, ] MIDDLEWARE [ corsheaders.middleware.CorsMiddleware, # ... 其他中間件 ] CORS_ALLOWED_ORIGINS [ http://localhost:5173, # Vite 前端開發(fā)地址 ]我寫老人檔案的 DRF 視圖時(shí)用視圖集加ModelSerializer配合權(quán)限類IsAuthenticated保證請(qǐng)求必須帶登錄態(tài)。然后給elder模塊加一個(gè)“我的綁定老人”接口家屬登錄后調(diào)用它查詢時(shí)做對(duì)象級(jí)過濾避免越權(quán)。3.3 Flask 在實(shí)時(shí)推送與輕量接口上的補(bǔ)位在社區(qū)養(yǎng)老系統(tǒng)里Flask 的角色主要體現(xiàn)在兩個(gè)地方一個(gè)是健康數(shù)據(jù)的實(shí)時(shí)推送另一個(gè)是定時(shí)統(tǒng)計(jì)與通知服務(wù)。健康推送這個(gè)場(chǎng)景用 WebSocket 當(dāng)然最合適但如果項(xiàng)目不打算引入 Channels用 SSEServer-Sent Events作為折中方案也不錯(cuò)。SSE 是單向通道由服務(wù)端主動(dòng)往瀏覽器推數(shù)據(jù)正好適合“老人新上傳了一條血壓數(shù)據(jù)家屬頁(yè)面實(shí)時(shí)刷新”的場(chǎng)景。用 Flask 寫一個(gè) SSE 端點(diǎn)很輕from flask import Flask, Response app Flask(__name__) def generate_health_events(): while True: # 模擬從 Redis 或隊(duì)列取最新健康數(shù)據(jù) new_metric get_latest_health_metric() if new_metric: yield fdata: {json.dumps(new_metric)}\n\n time.sleep(5) app.route(/events/health) def health_events(): return Response(generate_health_events(), mimetypetext/event-stream)前端 Vue 里用EventSource直接監(jiān)聽const eventSource new EventSource(http://localhost:5000/events/health); eventSource.onmessage (event) { const metric JSON.parse(event.data); useHealthStore().pushMetric(metric); };注意這里有個(gè)跨域限制EventSource不是所有瀏覽器都允許跨域生產(chǎn)環(huán)境我會(huì)在 Flask 端加flask-cors處理或者通過 Nginx 把/events路徑反向代理到 Flask前端只請(qǐng)求同源的/events地址這樣最省心。前端在生產(chǎn)環(huán)境里花一分鐘配置一下 Vite 的代理server: { proxy: { /api: http://localhost:8000, /events: http://localhost:5000 } }這樣在開發(fā)里前端請(qǐng)求同源地址后端各自處理跨域問題少一大半。3.4 前端 Vue 頁(yè)面與路由組織前端頁(yè)面我按功能域分模塊登錄頁(yè)、工作臺(tái)、老人檔案頁(yè)、工單列表頁(yè)、工單詳情頁(yè)含流轉(zhuǎn)操作、健康數(shù)據(jù)趨勢(shì)頁(yè)、社區(qū)活動(dòng)頁(yè)、家屬綁定頁(yè)。路由組織用 Vue Router我的組織方式是按模塊拆路由文件而不是全部集中在router/index.js里// router/index.js const elderRoutes { path: /elder, name: ElderManage, component: () import(/views/elder/ElderList.vue), meta: { roles: [staff, family] } }components: () import(...)這種路由懶加載寫法是必要的。社區(qū)養(yǎng)老系統(tǒng)的前端首頁(yè)要加載的地圖組件、ECharts 圖表庫(kù)都不小全量打包會(huì)讓首屏耗很久。懶加載之后只有訪問到對(duì)應(yīng)路由才下載對(duì)應(yīng) JS chunk實(shí)測(cè)首屏?xí)r間能快不少。頁(yè)面狀態(tài)管理我用 Pinia 存一個(gè)useAuthStore保存登錄用戶的 token、角色和基礎(chǔ)信息。axios 攔截器統(tǒng)一從 store 里取 token 加在請(qǐng)求頭響應(yīng)碼 401 就自動(dòng)跳登錄頁(yè)。這套邏輯基本是前后端分離項(xiàng)目的標(biāo)配。4. 業(yè)務(wù)接口與核心功能的具體實(shí)現(xiàn)4.1 老人檔案模塊的接口與前端交互我用 DRF 寫老人檔案相關(guān)的三個(gè)核心接口GET /api/elders/老人列表社工/管理員看全部家屬只看綁定的老人GET /api/elders/{id}/老人詳情POST /api/elders/新建老人檔案在 ViewSet 里我是這么控制角色過濾的class ElderViewSet(viewsets.ModelViewSet): serializer_class ElderSerializer permission_classes [IsAuthenticated] def get_queryset(self): user self.request.user if user.groups.filter(name社工).exists() or user.is_staff: return Elder.objects.all() # 家屬角色: 只查自己綁定的老人 return Elder.objects.filter(family_links__useruser)這里family_links是 Elder 模型和關(guān)聯(lián)表之間的反向關(guān)系名需要提前在模型里設(shè)置好related_name。前端老人列表頁(yè)我用了 Element Plus 的el-table展示右上角“新增老人”按鈕彈一個(gè)el-dialog表單。新增成功之后調(diào)用refreshList()重新拉數(shù)據(jù)不搞手動(dòng)局部更新那一套邏輯簡(jiǎn)單出錯(cuò)概率低。4.2 Django 執(zhí)行查詢與刪除對(duì)象時(shí)的常見坑標(biāo)題里的熱搜詞“django執(zhí)行查詢-刪除對(duì)象”其實(shí)指向的是 Django ORM 使用中的兩個(gè)經(jīng)典陷阱。第一個(gè)是刪除對(duì)象時(shí)如果你用Elder.objects.filter(namexxx).delete()Django 默認(rèn)是“軟刪除”還是“真刪除”實(shí)際是級(jí)聯(lián)真刪除。如果 Elder 下面關(guān)聯(lián)了服務(wù)工單、健康記錄on_deletemodels.CASCADE會(huì)把所有關(guān)聯(lián)數(shù)據(jù)一并刪掉。社區(qū)養(yǎng)老的業(yè)務(wù)場(chǎng)景里老人檔案和三年服務(wù)記錄被一鍵清空那基本是事故級(jí)別的問題。所以我在項(xiàng)目里給 Elder 模型加了is_deleted布爾字段所有刪除操作改成is_deletedTrue查詢時(shí)通過objects.filter(is_deletedFalse)自動(dòng)過濾。這種邏輯刪除的做法雖然不是官方默認(rèn)但在業(yè)務(wù)系統(tǒng)里非常常見。第二個(gè)坑是查詢對(duì)象的性能問題。Elder.objects.all()表面上只查老人表但如果在模板或序列化器里訪問elder.serviceorder_set每訪問一個(gè)老人都會(huì)發(fā)一條額外 SQL這就是經(jīng)典的 N1 查詢。社區(qū)養(yǎng)老系統(tǒng)里家屬綁定頁(yè)展示 100 個(gè)老人每條多 3 條查詢數(shù)據(jù)庫(kù)壓力立刻翻四倍。解決辦法是用select_related和prefetch_related# 外鍵關(guān)系用 select_related Elder.objects.select_related(camera).all() # 多對(duì)多/反向外鍵關(guān)系用 prefetch_related Elder.objects.prefetch_related(serviceorder_set).all()4.3 工單狀態(tài)流轉(zhuǎn)的實(shí)際接口設(shè)計(jì)與 Vue 交互工單流轉(zhuǎn)是系統(tǒng)的業(yè)務(wù)核心我把狀態(tài)推進(jìn)的動(dòng)作寫成了 POST 接口而不是讓前端直接改狀態(tài)字段。這樣方便加校驗(yàn)和審計(jì)日志。比如“接單”動(dòng)作action(detailTrue, methods[post]) def accept(self, request, pkNone): order self.get_object() if order.status ! ORDER_STATUS_PENDING: return Response({error: 狀態(tài)不正確僅待派單工單可接單}, status400) order.status ORDER_STATUS_ASSIGNED order.assignee request.user order.accepted_at timezone.now() order.save() # 記錄審計(jì)日志 AuditLog.objects.create(userrequest.user, actionaccept_order, target_idorder.id) return Response(OrderSerializer(order).data)前端頁(yè)面上工單列表每行顯示當(dāng)前狀態(tài)標(biāo)簽狀態(tài)為“待派單”時(shí)顯示“派單”按鈕狀態(tài)為“服務(wù)中”時(shí)顯示“提交完成”按鈕。這個(gè)交互用 Vue 的v-if根據(jù)row.status動(dòng)態(tài)控制即可思路很直白。5. 社區(qū)活動(dòng)的報(bào)名模塊與數(shù)據(jù)可視化實(shí)現(xiàn)5.1 活動(dòng)模塊的表結(jié)構(gòu)與報(bào)名并發(fā)處理活動(dòng)模塊的表我前面提到過核心是activity和activity_enrollment。報(bào)名接口的關(guān)鍵在防超賣。當(dāng)多個(gè)家屬同時(shí)給同一位老人報(bào)名或者一個(gè)家屬給兩位老人同時(shí)報(bào)名時(shí)我需要保證名額不超。寫法上我用 Django 的select_for_update鎖行from django.db import transaction transaction.atomic def enroll_activity(request, activity_id, elder_ids): activity Activity.objects.select_for_update().get(pkactivity_id) if activity.enrollment_count len(elder_ids) activity.capacity: return error_response(名額不足) # 新增報(bào)名記錄 for elder_id in elder_ids: ActivityEnrollment.objects.create(activityactivity, elder_idelder_id) activity.enrollment_count len(elder_ids) activity.save() return success_response(報(bào)名成功)select_for_update會(huì)在數(shù)據(jù)庫(kù)層面給這行活動(dòng)記錄加鎖事務(wù)結(jié)束才釋放。這個(gè)方案在中小流量下完全夠用不用引入 Redis 鎖那套復(fù)雜機(jī)制。5.2 健康數(shù)據(jù)的 ECharts 趨勢(shì)展示老人健康數(shù)據(jù)沒有圖表展示家屬端是缺少說服力的。我用 Vue 3 ECharts通過vue-echarts組件做血壓趨勢(shì)折線圖。接口GET /api/health/metrics/?elder_id1metric_typeblood_pressure返回最近 30 天的收縮壓/舒張壓記錄前端把數(shù)據(jù)映射成圖表需要的[date, systolic, diastolic]數(shù)組調(diào)用v-chart :optionchartOption / const chartOption computed(() ({ xAxis: { type: category, data: dateList }, yAxis: { type: value, name: mmHg }, series: [ { name: 收縮壓, type: line, data: systolicList }, { name: 舒張壓, type: line, data: diastolicList } ], tooltip: { trigger: axis } }))實(shí)際展示中如果你用 Vue 對(duì) ECharts 實(shí)例不熟還容易掉進(jìn)“圖表不更新”的坑里。因?yàn)?ECharts 實(shí)例是異步渲染的直接改option不會(huì)刷新視圖需要用setOption手動(dòng)調(diào)用。如果用vue-echarts組件管理實(shí)例只要保證傳給:option的對(duì)象是響應(yīng)式的用 computed 生成新對(duì)象組件內(nèi)部會(huì)自動(dòng)調(diào)用setOption。這個(gè)點(diǎn)我在項(xiàng)目里反復(fù)提醒同事真的很容易踩。6. 項(xiàng)目部署上線與常見問題排查實(shí)錄6.1 前后端分離部署的整體思路社區(qū)養(yǎng)老系統(tǒng)上線時(shí)我推薦用 Nginx 同時(shí)代理前后端是這類系統(tǒng)比較標(biāo)準(zhǔn)、省事的部署方式。思路是這樣的前端npm run build后打包出來的dist目錄直接給 Nginx 做靜態(tài)文件服務(wù)Django 跑在 8000 端口Flask 跑在 5000 端口Nginx 把/api開頭的請(qǐng)求反向代理到 8000把/events開頭的請(qǐng)求反向代理到 5000。瀏覽器只要訪問同一個(gè)域名就不存在跨域問題了。一個(gè)參考的 Nginx 配置片段server { listen 80; server_name care.example.com; # 前端靜態(tài)文件 location / { root /var/www/community-care/dist; try_files $uri $uri/ /index.html; } # Django 接口 location /api/ { proxy_pass http://127.0.0.1:8000; } # Flask 健康推送 location /events/ { proxy_pass http://127.0.0.1:5000; proxy_buffering off; # SSE 必須關(guān)掉緩沖 proxy_read_timeout 3600s; } }try_files這個(gè)配置解決了 Vue Router 在 history 模式下頁(yè)面刷新 404 的問題。proxy_buffering off對(duì) SSE 是必要的不開的話 Nginx 會(huì)把事件流攢起來一次性推給瀏覽器實(shí)時(shí)性全沒了。這些細(xì)節(jié)裸跑的時(shí)候遇不到上線了就逃不掉。6.2 依賴安裝、跨域請(qǐng)求與頁(yè)面白屏的速查表把我在項(xiàng)目里遇到過的也是學(xué)員和同行問得最多的問題整理成一張速查表?，F(xiàn)象原因排查方向與解決pip install 很慢或超時(shí)默認(rèn)源訪問慢換國(guó)內(nèi)鏡像源如pip install -i 鏡像地址PyCharm 里 import django 報(bào)錯(cuò)解釋器沒選對(duì)Settings 里給項(xiàng)目配置獨(dú)立虛擬環(huán)境解釋器前端請(qǐng)求后端接口報(bào) CORS 錯(cuò)誤后端沒配跨域安裝并配置 django-cors-headers白名單帶上前端端口Vue 打包后刷新頁(yè)面 404路由 history 模式?jīng)]配 try_filesNginx 增加try_files $uri $uri/ /index.html;SSR/SSE 鏈接頻繁斷開代理緩沖未關(guān)關(guān)掉proxy_buffering并適當(dāng)加長(zhǎng)超時(shí)時(shí)間POST 請(qǐng)求 Django 返回 403CSRF 驗(yàn)證未過前后端分離時(shí)在視圖加csrf_exempt或統(tǒng)一走 DRF 的 token 認(rèn)證中文數(shù)據(jù)前端顯示亂碼編碼不統(tǒng)一檢查 MySQL 字符集為 utf8mb4接口響應(yīng)頭 charsetutf-8圖表數(shù)據(jù)不變但頁(yè)面卡死響應(yīng)式對(duì)象沒觸發(fā)更新ECharts 用 computed 生成新 option 對(duì)象或手動(dòng) setOption6.3 基于我經(jīng)驗(yàn)的避坑心得與后續(xù)擴(kuò)展方向最后分享三條個(gè)人在實(shí)際項(xiàng)目里最真實(shí)的體會(huì)希望能讓你繞過我趟過的坑。**第一所有“刪除”操作都要軟刪除不要硬刪。**社區(qū)養(yǎng)老業(yè)務(wù)改需求的速度快得驚人今天說把活動(dòng)取消了明天說要把老人轉(zhuǎn)去另一個(gè)社區(qū)后天說某個(gè)社工的服務(wù)記錄要復(fù)核。如果數(shù)據(jù)都是硬刪的后面想恢復(fù)想追溯全部抓瞎。所以我在所有核心業(yè)務(wù)表上都預(yù)留了is_deleted字段代價(jià)只是多寫一個(gè)過濾條件收益卻是巨大的可追溯性。**第二PyCharm 里寫代碼一定要把 Pylint/Flake8 這類靜態(tài)檢查開起來。**社區(qū)養(yǎng)老系統(tǒng)的代碼量不算小前后端加起來幾十個(gè)文件。不提前開檢查等你寫到第 30 個(gè)文件再回頭修規(guī)范問題那個(gè)成本真的很折磨。在 PyCharm 的 File Watchers 里配置一下保存即檢查效率提升明顯。**第三Django 的 Admin 后臺(tái)不要廢掉。**雖然你是前后端分離但運(yùn)營(yíng)人員臨時(shí)補(bǔ)錄數(shù)據(jù)、導(dǎo)出服務(wù)記錄、調(diào)整權(quán)限這些操作直接用 Django Admin 會(huì)比專門開發(fā)頁(yè)面快得多。把 Admin 的 list_display、search_fields 配置好你的運(yùn)營(yíng)同學(xué)會(huì)感謝你。至于后續(xù)擴(kuò)展我會(huì)建議兩條路。一條是把健康數(shù)據(jù)的推送鏈路升級(jí)成WebSocket實(shí)時(shí)雙通道前端能主動(dòng)給社工發(fā)送提醒比如“某老人血壓異常請(qǐng)盡快回訪”這套在 Flask 里用 flask-socketio 就能做另一條是接入小程序的家屬端Vue 3 的代碼結(jié)構(gòu)遷移到 uni-app 相對(duì)平滑后端接口完全不用動(dòng)。兩條都是這個(gè)項(xiàng)目自然會(huì)長(zhǎng)出來的方向到時(shí)候你會(huì)發(fā)現(xiàn)當(dāng)初把業(yè)務(wù)模塊劃分清楚、軟刪除做對(duì)、接口保持規(guī)范這些基礎(chǔ)工作的價(jià)值都在后面等著兌現(xiàn)。關(guān)于社區(qū)養(yǎng)老服務(wù)系統(tǒng)這篇就寫到這里。如果你正在做類似項(xiàng)目或者已經(jīng)在做了歡迎在評(píng)論區(qū)聊聊你踩過的坑、用過的方案。我這邊后續(xù)也會(huì)把這個(gè)項(xiàng)目里的一些核心代碼模塊單獨(dú)拆出來繼續(xù)講。 社區(qū)養(yǎng)老系統(tǒng)開發(fā)實(shí)戰(zhàn)：Django與Vue前后端分離架構(gòu)解析
先聊幾句題外話。社區(qū)養(yǎng)老服務(wù)這幾年是個(gè)真需求但市面上能直接落地的小型系統(tǒng)其實(shí)不多。要么是給大平臺(tái)做的定制項(xiàng)目要么就是課程作業(yè)級(jí)別的“玩具”。真正能跑到社區(qū)里去用讓社工、老人家屬、運(yùn)營(yíng)方都覺得順手的系統(tǒng)得把檔案管理、健康數(shù)據(jù)、服務(wù)派單這些事捋清楚。而技術(shù)選型上Python 后端加 Vue 前端的組合在這個(gè)領(lǐng)域里屬于性價(jià)比很高的方案——Django 負(fù)責(zé)業(yè)務(wù)和權(quán)限Flask 在輕量接口和輔助腳本上補(bǔ)位PyCharm 做主力 IDE這套搭配我前后在幾個(gè)項(xiàng)目里折騰過踩了不少坑也攢了一些能直接抄作業(yè)的經(jīng)驗(yàn)這篇就系統(tǒng)拆給你看。如果你正準(zhǔn)備做一個(gè)社區(qū)養(yǎng)老相關(guān)的系統(tǒng)或者你只是想看看 Django 和 Vue 前后端分離的項(xiàng)目到底怎么落地這篇都應(yīng)該適合你。我會(huì)把項(xiàng)目從設(shè)計(jì)到實(shí)現(xiàn)再到環(huán)境配置、上線部署的完整鏈路講透。1. 項(xiàng)目整體設(shè)計(jì)與技術(shù)選型的真實(shí)考量1.1 為什么是 Django 而不是只用一個(gè) Flask說句實(shí)話社區(qū)養(yǎng)老系統(tǒng)的核心痛點(diǎn)從來不在“接口寫得快不快”而在數(shù)據(jù)模型是否清晰、權(quán)限是否可控、后臺(tái)管理是否好用。這三個(gè)方面Django 幾乎是 Python 生態(tài)里的最優(yōu)解。Django 自帶 ORM、Admin 后臺(tái)、認(rèn)證體系和中間件機(jī)制這意味著你不需要從零搭建用戶登錄、角色權(quán)限這些“地基”功能。社區(qū)養(yǎng)老系統(tǒng)里至少有三類角色運(yùn)營(yíng)管理員、社工/護(hù)工、老人家屬每類角色看到的頁(yè)面和能操作的數(shù)據(jù)完全不同。Django 的 Group 和 Permission 機(jī)制配合 django-guardian 做對(duì)象級(jí)權(quán)限能比較干凈地解決“家屬只能看自己老人的數(shù)據(jù)”這類需求。而 Flask 在這個(gè)項(xiàng)目里的定位我建議是“輔助服務(wù)”。比如獨(dú)立的健康數(shù)據(jù)推送服務(wù)、定時(shí)統(tǒng)計(jì)腳本、或者未來要拆出去的某個(gè)輕量算法服務(wù)比如跌倒檢測(cè)的接口。Flask 靈活、啟動(dòng)快、依賴少但它沒有自帶 ORM 和 Admin硬要用 Flask 寫整個(gè)系統(tǒng)光是把“老人檔案-家屬-服務(wù)工單”這套關(guān)系理清楚就得手工寫很多 SQL 和模板代碼后期維護(hù)成本會(huì)明顯偏高。這里給一個(gè)我的切分經(jīng)驗(yàn)主業(yè)務(wù)系統(tǒng)用 Django跑在 8000 端口輔助的實(shí)時(shí)數(shù)據(jù)服務(wù)或腳本用 Flask跑在 5000 端口。兩者之間通過 HTTP 接口通信甚至可以直接讓 Django 通過 requests 調(diào)用 Flask 的接口。這個(gè)架構(gòu)的好處是Django 崩了不影響實(shí)時(shí)推送服務(wù)Flask 要升級(jí)也不動(dòng)主業(yè)務(wù)。1.2 Vue 在純前端渲染里的不可替代性社區(qū)養(yǎng)老系統(tǒng)的頁(yè)面交互不算極復(fù)雜但有幾個(gè)模塊如果不用前端框架寫起來會(huì)非常痛苦。最典型的就是“服務(wù)工單流轉(zhuǎn)”社工接單、上門、上傳服務(wù)記錄、家屬確認(rèn)這個(gè)過程中工單狀態(tài)要實(shí)時(shí)刷新還有“健康檔案趨勢(shì)圖”老人血壓、血糖的歷史數(shù)據(jù)要畫折線圖Vue 配合 ECharts 非常順手。Vue 的核心價(jià)值是數(shù)據(jù)驅(qū)動(dòng)視圖。你把serviceOrder這個(gè)對(duì)象綁定到頁(yè)面上接口返回新狀態(tài)后頁(yè)面自動(dòng)更新不用手寫一堆 DOM 操作。這在 Django 模板時(shí)代是做不到的便利——當(dāng)然 Django 模板配合 jQuery 也能跑但寫到后面你會(huì)發(fā)現(xiàn)代碼里全是字符串拼接和全局函數(shù)維護(hù)性真的很差。版本選擇上新項(xiàng)目直接上 Vue 3 加 Composition API組合式函數(shù)比如把“獲取老人列表”的邏輯封裝成一個(gè)useElderList()在多個(gè)頁(yè)面復(fù)用時(shí)非常省事。組件庫(kù)推薦 Element Plus它對(duì)表單、表格、彈窗這類后臺(tái)管理場(chǎng)景覆蓋得比較全。1.3 PyCharm 在前后端混合項(xiàng)目里的配置思路社區(qū)養(yǎng)老這個(gè)項(xiàng)目涉及 Vue 前端、Django 后端、Flask 輔助服務(wù)三塊代碼在 PyCharm 里如果不好好規(guī)劃目錄會(huì)亂到你想刪庫(kù)跑路。我的建議是把工程拆成三個(gè)頂層目錄都放在同一個(gè) PyCharm 工程下community-care/ ├── backend_django/ │ ├── manage.py │ ├── config/ # 項(xiàng)目配置(settings, urls, wsgi) │ └── apps/ # 業(yè)務(wù)模塊 ├── backend_flask/ │ ├── app.py │ └── services/ # 推送、統(tǒng)計(jì)腳本 └── frontend_vue/ ├── package.json ├── vite.config.js └── src/PyCharm 里只需要把community-care作為項(xiàng)目根目錄打開然后分別給backend_django和backend_flask配置獨(dú)立的 Python 解釋器建議用虛擬環(huán)境。前端部分 PyCharm 雖然能識(shí)別 Vue 文件但我更推薦你在 PyCharm 的 Terminal 里用命令行操作 npm而日常寫前端代碼時(shí)把 Terminal 切到frontend_vue目錄下。有一點(diǎn)要注意PyCharm 的 Python 解釋器路徑、以及 Vue 的 Node 環(huán)境路徑不要搞混。我在項(xiàng)目里見過有人把 npm 裝到了系統(tǒng) Python 目錄里結(jié)果整個(gè)環(huán)境直接廢了重裝了好幾輪。這個(gè)細(xì)節(jié)點(diǎn)名一下后面就不會(huì)踩。2. 數(shù)據(jù)庫(kù)設(shè)計(jì)與核心功能模塊的拆解2.1 老人檔案、家屬綁定與健康數(shù)據(jù)的表結(jié)構(gòu)社區(qū)養(yǎng)老系統(tǒng)最核心的數(shù)據(jù)是“人”圍繞人的健康和服務(wù)記錄展開。我把數(shù)據(jù)庫(kù)表劃分為五個(gè)域人員域、服務(wù)域、健康域、活動(dòng)域、系統(tǒng)域。人員域是最基礎(chǔ)的核心表是elder老人檔案表字段包括姓名、身份證號(hào)、聯(lián)系方式、緊急聯(lián)系人、住址、自理能力評(píng)估等級(jí)等。這里有個(gè)容易忽略但現(xiàn)實(shí)里一定會(huì)出現(xiàn)的需求一個(gè)老人可能對(duì)應(yīng)多個(gè)家屬賬號(hào)所以建議單獨(dú)建elder_family關(guān)聯(lián)表而不是在老人表里只存一個(gè)家屬 ID。我在實(shí)操中就遇到過女兒和兒子都要綁定同一老人檔案的情況。服務(wù)域是業(yè)務(wù)流轉(zhuǎn)的關(guān)鍵含service_type服務(wù)類型表如家政、助餐、陪診、康復(fù)護(hù)理、service_order服務(wù)工單表、service_record服務(wù)記錄表。工單表要重點(diǎn)設(shè)計(jì)狀態(tài)字段我建議用 IntegerField 狀態(tài)字典而不是字符串直接存因?yàn)楹罄m(xù)要按狀態(tài)統(tǒng)計(jì)時(shí)整型字段跑 SQL 會(huì)快很多代碼里寫ORDER_STATUS_PENDING 0這類常量也清晰。還要考慮工單的多人協(xié)作加一個(gè)assignee_id字段存指派的社工 ID同時(shí)記錄派單時(shí)間和接單時(shí)間方便后期統(tǒng)計(jì)響應(yīng)效率。健康域存量測(cè)數(shù)據(jù)health_metric表用“一行一條指標(biāo)”而不是“一行多條指標(biāo)”的寬表設(shè)計(jì)。比如血壓、血糖、心率、血氧各一行記錄這樣查某一天的某一項(xiàng)指標(biāo)、畫趨勢(shì)圖都更靈活按metric_type和elder_id索引查詢沒什么壓力。睡眠、運(yùn)動(dòng)這類衍生數(shù)據(jù)可以獨(dú)立到health_sleep或者h(yuǎn)ealth_exercise表里避免和基礎(chǔ)體征混在一起?；顒?dòng)域處理社區(qū)活動(dòng)與簽到activity表的主鍵之外要加一個(gè)capacity容量字段和一個(gè)enrollment_count報(bào)名數(shù)字段前端展示“已報(bào)名/剩余名額”時(shí)直接讀這兩個(gè)字段避免每次請(qǐng)求都去 count 一遍報(bào)名表。系統(tǒng)域就是 Django 自帶的用戶、權(quán)限、日志相關(guān)表我會(huì)為運(yùn)營(yíng)管理后臺(tái)啟用一個(gè)超級(jí)管理員賬號(hào)為社工和家屬各建一個(gè)組。2.2 角色權(quán)限的三層設(shè)計(jì)超級(jí)管理員、社工/護(hù)工、家屬這個(gè)系統(tǒng)里最忌諱的是所有登錄用戶看到同樣的菜單、干同樣的事。權(quán)限設(shè)計(jì)我分了三層。第一層是 Django 自帶is_staff判定只控制運(yùn)營(yíng)后臺(tái)入口。第二層是 Group 控制模塊級(jí)權(quán)限比如社工組默認(rèn)具有view_elder和change_serviceorder的權(quán)限家屬組只有view_elder且僅限“自己綁定的人”。第三層我用elder_family關(guān)聯(lián)表自己做對(duì)象級(jí)過濾也就是在查詢Elder對(duì)象時(shí)如果當(dāng)前用戶屬于家屬組就強(qiáng)制追加.filter(id__incurrent_user.family_bindings)。第三層這步叫對(duì)象級(jí)權(quán)限D(zhuǎn)jango 的django-guardian庫(kù)可以幫你做得更優(yōu)雅但我個(gè)人在中小型系統(tǒng)里會(huì)優(yōu)先用“查詢時(shí)過濾”的方式原因有兩條一是實(shí)現(xiàn)簡(jiǎn)單肉眼可見地知道每個(gè)接口查了什么二是不會(huì)引入額外的權(quán)限表和數(shù)據(jù)量開銷查詢性能更可控。等系統(tǒng)權(quán)限點(diǎn)變復(fù)雜了再上 Guardian 也不遲。2.3 工單流轉(zhuǎn)與社區(qū)活動(dòng)的核心邏輯服務(wù)工單是養(yǎng)老系統(tǒng)運(yùn)轉(zhuǎn)的“毛細(xì)血管”我把狀態(tài)機(jī)設(shè)計(jì)成這樣待派單0已派單1服務(wù)中2已完成待確認(rèn)3已完成4已取消5狀態(tài)流轉(zhuǎn)里最敏感的環(huán)節(jié)是“已完成待確認(rèn)”。社工上門服務(wù)完在 App 端提交服務(wù)記錄含照片、時(shí)長(zhǎng)、服務(wù)項(xiàng)明細(xì)工單進(jìn)入待確認(rèn)狀態(tài)家屬在微信小程序或 Web 端確認(rèn)后工單才算真正完成。這個(gè)確認(rèn)環(huán)節(jié)之所以必須做是為了防止“虛報(bào)工時(shí)”和“服務(wù)爭(zhēng)議”——社區(qū)運(yùn)營(yíng)方需要靠家屬確認(rèn)來和監(jiān)督服務(wù)真實(shí)完成。活動(dòng)模塊的注意點(diǎn)是“報(bào)名去重”數(shù)據(jù)庫(kù)層面用activity_enrollment表的唯一約束(activity_id, elder_id)兜底代碼層面在提交報(bào)名接口先查詢?cè)俨迦?。這里我用到的技巧是給活動(dòng)表加一個(gè)capacity容量字段報(bào)名時(shí)用select_for_update()鎖行防止并發(fā)報(bào)名把名額打超。3. 前后端環(huán)境配置與核心使用要點(diǎn)3.1 Python 與 PyCharm 的環(huán)境配置經(jīng)驗(yàn)Python 環(huán)境這塊社區(qū)養(yǎng)老系統(tǒng)的依賴不算重但要把版本鎖穩(wěn)定。我用的版本組合是 Python 3.10 Django 4.2LTS Flask 2.3這套組合到今天依然很穩(wěn)。如果拉不下來依賴包建議直接配國(guó)內(nèi)鏡像源這個(gè)不多說環(huán)境配置速度會(huì)快很多。新建虛擬環(huán)境的操作基本是 PyCharm 的標(biāo)準(zhǔn)流程Settings → Project → Python Interpreter → Add Interpreter → Virtualenv Environment。這里我只提一個(gè)細(xì)節(jié)項(xiàng)目根目錄下要有requirements.txt并且里面要把每個(gè)依賴釘上版本號(hào)不要只寫Django一個(gè)名字。不然過兩個(gè)月回來更新依賴Django 大版本一變一堆 API 要改心態(tài)容易崩。前端環(huán)境上Vue 推薦用 Vite 作為構(gòu)建工具不是 webpack。Vite 啟動(dòng)速度確實(shí)快不少熱更新響應(yīng)也跟手。創(chuàng)建一個(gè) Vue 3 項(xiàng)目的命令是npm create vuelatest frontend_vue期間會(huì)問你要不要 TypeScript、要不要 Vue Router、要不要 Pinia。我這邊直接選 JavaScript Vue Router Pinia狀態(tài)管理還是建議提前引入工單數(shù)據(jù)、當(dāng)前用戶信息、登錄 token 都放 Pinia 里撐著后面寫起來調(diào)試起來都省事。3.2 Django REST Framework 的接口實(shí)現(xiàn)與跨域配置前后端分離的項(xiàng)目里后端只負(fù)責(zé)寫接口不動(dòng)頁(yè)面。這里我用 Django REST FrameworkDRF來寫 API。序列化器、視圖集、路由注冊(cè)這些套路都比較固定我展示老人檔案列表接口的核心代碼。先安裝依賴pip install djangorestframework django-cors-headers在settings.py里注冊(cè)并開啟全站跨域INSTALLED_APPS [ # ... 自帶應(yīng)用 rest_framework, corsheaders, ] MIDDLEWARE [ corsheaders.middleware.CorsMiddleware, # ... 其他中間件 ] CORS_ALLOWED_ORIGINS [ http://localhost:5173, # Vite 前端開發(fā)地址 ]我寫老人檔案的 DRF 視圖時(shí)用視圖集加ModelSerializer配合權(quán)限類IsAuthenticated保證請(qǐng)求必須帶登錄態(tài)。然后給elder模塊加一個(gè)“我的綁定老人”接口家屬登錄后調(diào)用它查詢時(shí)做對(duì)象級(jí)過濾避免越權(quán)。3.3 Flask 在實(shí)時(shí)推送與輕量接口上的補(bǔ)位在社區(qū)養(yǎng)老系統(tǒng)里Flask 的角色主要體現(xiàn)在兩個(gè)地方一個(gè)是健康數(shù)據(jù)的實(shí)時(shí)推送另一個(gè)是定時(shí)統(tǒng)計(jì)與通知服務(wù)。健康推送這個(gè)場(chǎng)景用 WebSocket 當(dāng)然最合適但如果項(xiàng)目不打算引入 Channels用 SSEServer-Sent Events作為折中方案也不錯(cuò)。SSE 是單向通道由服務(wù)端主動(dòng)往瀏覽器推數(shù)據(jù)正好適合“老人新上傳了一條血壓數(shù)據(jù)家屬頁(yè)面實(shí)時(shí)刷新”的場(chǎng)景。用 Flask 寫一個(gè) SSE 端點(diǎn)很輕from flask import Flask, Response app Flask(__name__) def generate_health_events(): while True: # 模擬從 Redis 或隊(duì)列取最新健康數(shù)據(jù) new_metric get_latest_health_metric() if new_metric: yield fdata: {json.dumps(new_metric)}\n\n time.sleep(5) app.route(/events/health) def health_events(): return Response(generate_health_events(), mimetypetext/event-stream)前端 Vue 里用EventSource直接監(jiān)聽const eventSource new EventSource(http://localhost:5000/events/health); eventSource.onmessage (event) { const metric JSON.parse(event.data); useHealthStore().pushMetric(metric); };注意這里有個(gè)跨域限制EventSource不是所有瀏覽器都允許跨域生產(chǎn)環(huán)境我會(huì)在 Flask 端加flask-cors處理或者通過 Nginx 把/events路徑反向代理到 Flask前端只請(qǐng)求同源的/events地址這樣最省心。前端在生產(chǎn)環(huán)境里花一分鐘配置一下 Vite 的代理server: { proxy: { /api: http://localhost:8000, /events: http://localhost:5000 } }這樣在開發(fā)里前端請(qǐng)求同源地址后端各自處理跨域問題少一大半。3.4 前端 Vue 頁(yè)面與路由組織前端頁(yè)面我按功能域分模塊登錄頁(yè)、工作臺(tái)、老人檔案頁(yè)、工單列表頁(yè)、工單詳情頁(yè)含流轉(zhuǎn)操作、健康數(shù)據(jù)趨勢(shì)頁(yè)、社區(qū)活動(dòng)頁(yè)、家屬綁定頁(yè)。路由組織用 Vue Router我的組織方式是按模塊拆路由文件而不是全部集中在router/index.js里// router/index.js const elderRoutes { path: /elder, name: ElderManage, component: () import(/views/elder/ElderList.vue), meta: { roles: [staff, family] } }components: () import(...)這種路由懶加載寫法是必要的。社區(qū)養(yǎng)老系統(tǒng)的前端首頁(yè)要加載的地圖組件、ECharts 圖表庫(kù)都不小全量打包會(huì)讓首屏耗很久。懶加載之后只有訪問到對(duì)應(yīng)路由才下載對(duì)應(yīng) JS chunk實(shí)測(cè)首屏?xí)r間能快不少。頁(yè)面狀態(tài)管理我用 Pinia 存一個(gè)useAuthStore保存登錄用戶的 token、角色和基礎(chǔ)信息。axios 攔截器統(tǒng)一從 store 里取 token 加在請(qǐng)求頭響應(yīng)碼 401 就自動(dòng)跳登錄頁(yè)。這套邏輯基本是前后端分離項(xiàng)目的標(biāo)配。4. 業(yè)務(wù)接口與核心功能的具體實(shí)現(xiàn)4.1 老人檔案模塊的接口與前端交互我用 DRF 寫老人檔案相關(guān)的三個(gè)核心接口GET /api/elders/老人列表社工/管理員看全部家屬只看綁定的老人GET /api/elders/{id}/老人詳情POST /api/elders/新建老人檔案在 ViewSet 里我是這么控制角色過濾的class ElderViewSet(viewsets.ModelViewSet): serializer_class ElderSerializer permission_classes [IsAuthenticated] def get_queryset(self): user self.request.user if user.groups.filter(name社工).exists() or user.is_staff: return Elder.objects.all() # 家屬角色: 只查自己綁定的老人 return Elder.objects.filter(family_links__useruser)這里family_links是 Elder 模型和關(guān)聯(lián)表之間的反向關(guān)系名需要提前在模型里設(shè)置好related_name。前端老人列表頁(yè)我用了 Element Plus 的el-table展示右上角“新增老人”按鈕彈一個(gè)el-dialog表單。新增成功之后調(diào)用refreshList()重新拉數(shù)據(jù)不搞手動(dòng)局部更新那一套邏輯簡(jiǎn)單出錯(cuò)概率低。4.2 Django 執(zhí)行查詢與刪除對(duì)象時(shí)的常見坑標(biāo)題里的熱搜詞“django執(zhí)行查詢-刪除對(duì)象”其實(shí)指向的是 Django ORM 使用中的兩個(gè)經(jīng)典陷阱。第一個(gè)是刪除對(duì)象時(shí)如果你用Elder.objects.filter(namexxx).delete()Django 默認(rèn)是“軟刪除”還是“真刪除”實(shí)際是級(jí)聯(lián)真刪除。如果 Elder 下面關(guān)聯(lián)了服務(wù)工單、健康記錄on_deletemodels.CASCADE會(huì)把所有關(guān)聯(lián)數(shù)據(jù)一并刪掉。社區(qū)養(yǎng)老的業(yè)務(wù)場(chǎng)景里老人檔案和三年服務(wù)記錄被一鍵清空那基本是事故級(jí)別的問題。所以我在項(xiàng)目里給 Elder 模型加了is_deleted布爾字段所有刪除操作改成is_deletedTrue查詢時(shí)通過objects.filter(is_deletedFalse)自動(dòng)過濾。這種邏輯刪除的做法雖然不是官方默認(rèn)但在業(yè)務(wù)系統(tǒng)里非常常見。第二個(gè)坑是查詢對(duì)象的性能問題。Elder.objects.all()表面上只查老人表但如果在模板或序列化器里訪問elder.serviceorder_set每訪問一個(gè)老人都會(huì)發(fā)一條額外 SQL這就是經(jīng)典的 N1 查詢。社區(qū)養(yǎng)老系統(tǒng)里家屬綁定頁(yè)展示 100 個(gè)老人每條多 3 條查詢數(shù)據(jù)庫(kù)壓力立刻翻四倍。解決辦法是用select_related和prefetch_related# 外鍵關(guān)系用 select_related Elder.objects.select_related(camera).all() # 多對(duì)多/反向外鍵關(guān)系用 prefetch_related Elder.objects.prefetch_related(serviceorder_set).all()4.3 工單狀態(tài)流轉(zhuǎn)的實(shí)際接口設(shè)計(jì)與 Vue 交互工單流轉(zhuǎn)是系統(tǒng)的業(yè)務(wù)核心我把狀態(tài)推進(jìn)的動(dòng)作寫成了 POST 接口而不是讓前端直接改狀態(tài)字段。這樣方便加校驗(yàn)和審計(jì)日志。比如“接單”動(dòng)作action(detailTrue, methods[post]) def accept(self, request, pkNone): order self.get_object() if order.status ! ORDER_STATUS_PENDING: return Response({error: 狀態(tài)不正確僅待派單工單可接單}, status400) order.status ORDER_STATUS_ASSIGNED order.assignee request.user order.accepted_at timezone.now() order.save() # 記錄審計(jì)日志 AuditLog.objects.create(userrequest.user, actionaccept_order, target_idorder.id) return Response(OrderSerializer(order).data)前端頁(yè)面上工單列表每行顯示當(dāng)前狀態(tài)標(biāo)簽狀態(tài)為“待派單”時(shí)顯示“派單”按鈕狀態(tài)為“服務(wù)中”時(shí)顯示“提交完成”按鈕。這個(gè)交互用 Vue 的v-if根據(jù)row.status動(dòng)態(tài)控制即可思路很直白。5. 社區(qū)活動(dòng)的報(bào)名模塊與數(shù)據(jù)可視化實(shí)現(xiàn)5.1 活動(dòng)模塊的表結(jié)構(gòu)與報(bào)名并發(fā)處理活動(dòng)模塊的表我前面提到過核心是activity和activity_enrollment。報(bào)名接口的關(guān)鍵在防超賣。當(dāng)多個(gè)家屬同時(shí)給同一位老人報(bào)名或者一個(gè)家屬給兩位老人同時(shí)報(bào)名時(shí)我需要保證名額不超。寫法上我用 Django 的select_for_update鎖行from django.db import transaction transaction.atomic def enroll_activity(request, activity_id, elder_ids): activity Activity.objects.select_for_update().get(pkactivity_id) if activity.enrollment_count len(elder_ids) activity.capacity: return error_response(名額不足) # 新增報(bào)名記錄 for elder_id in elder_ids: ActivityEnrollment.objects.create(activityactivity, elder_idelder_id) activity.enrollment_count len(elder_ids) activity.save() return success_response(報(bào)名成功)select_for_update會(huì)在數(shù)據(jù)庫(kù)層面給這行活動(dòng)記錄加鎖事務(wù)結(jié)束才釋放。這個(gè)方案在中小流量下完全夠用不用引入 Redis 鎖那套復(fù)雜機(jī)制。5.2 健康數(shù)據(jù)的 ECharts 趨勢(shì)展示老人健康數(shù)據(jù)沒有圖表展示家屬端是缺少說服力的。我用 Vue 3 ECharts通過vue-echarts組件做血壓趨勢(shì)折線圖。接口GET /api/health/metrics/?elder_id1metric_typeblood_pressure返回最近 30 天的收縮壓/舒張壓記錄前端把數(shù)據(jù)映射成圖表需要的[date, systolic, diastolic]數(shù)組調(diào)用v-chart :optionchartOption / const chartOption computed(() ({ xAxis: { type: category, data: dateList }, yAxis: { type: value, name: mmHg }, series: [ { name: 收縮壓, type: line, data: systolicList }, { name: 舒張壓, type: line, data: diastolicList } ], tooltip: { trigger: axis } }))實(shí)際展示中如果你用 Vue 對(duì) ECharts 實(shí)例不熟還容易掉進(jìn)“圖表不更新”的坑里。因?yàn)?ECharts 實(shí)例是異步渲染的直接改option不會(huì)刷新視圖需要用setOption手動(dòng)調(diào)用。如果用vue-echarts組件管理實(shí)例只要保證傳給:option的對(duì)象是響應(yīng)式的用 computed 生成新對(duì)象組件內(nèi)部會(huì)自動(dòng)調(diào)用setOption。這個(gè)點(diǎn)我在項(xiàng)目里反復(fù)提醒同事真的很容易踩。6. 項(xiàng)目部署上線與常見問題排查實(shí)錄6.1 前后端分離部署的整體思路社區(qū)養(yǎng)老系統(tǒng)上線時(shí)我推薦用 Nginx 同時(shí)代理前后端是這類系統(tǒng)比較標(biāo)準(zhǔn)、省事的部署方式。思路是這樣的前端npm run build后打包出來的dist目錄直接給 Nginx 做靜態(tài)文件服務(wù)Django 跑在 8000 端口Flask 跑在 5000 端口Nginx 把/api開頭的請(qǐng)求反向代理到 8000把/events開頭的請(qǐng)求反向代理到 5000。瀏覽器只要訪問同一個(gè)域名就不存在跨域問題了。一個(gè)參考的 Nginx 配置片段server { listen 80; server_name care.example.com; # 前端靜態(tài)文件 location / { root /var/www/community-care/dist; try_files $uri $uri/ /index.html; } # Django 接口 location /api/ { proxy_pass http://127.0.0.1:8000; } # Flask 健康推送 location /events/ { proxy_pass http://127.0.0.1:5000; proxy_buffering off; # SSE 必須關(guān)掉緩沖 proxy_read_timeout 3600s; } }try_files這個(gè)配置解決了 Vue Router 在 history 模式下頁(yè)面刷新 404 的問題。proxy_buffering off對(duì) SSE 是必要的不開的話 Nginx 會(huì)把事件流攢起來一次性推給瀏覽器實(shí)時(shí)性全沒了。這些細(xì)節(jié)裸跑的時(shí)候遇不到上線了就逃不掉。6.2 依賴安裝、跨域請(qǐng)求與頁(yè)面白屏的速查表把我在項(xiàng)目里遇到過的也是學(xué)員和同行問得最多的問題整理成一張速查表?，F(xiàn)象原因排查方向與解決pip install 很慢或超時(shí)默認(rèn)源訪問慢換國(guó)內(nèi)鏡像源如pip install -i 鏡像地址PyCharm 里 import django 報(bào)錯(cuò)解釋器沒選對(duì)Settings 里給項(xiàng)目配置獨(dú)立虛擬環(huán)境解釋器前端請(qǐng)求后端接口報(bào) CORS 錯(cuò)誤后端沒配跨域安裝并配置 django-cors-headers白名單帶上前端端口Vue 打包后刷新頁(yè)面 404路由 history 模式?jīng)]配 try_filesNginx 增加try_files $uri $uri/ /index.html;SSR/SSE 鏈接頻繁斷開代理緩沖未關(guān)關(guān)掉proxy_buffering并適當(dāng)加長(zhǎng)超時(shí)時(shí)間POST 請(qǐng)求 Django 返回 403CSRF 驗(yàn)證未過前后端分離時(shí)在視圖加csrf_exempt或統(tǒng)一走 DRF 的 token 認(rèn)證中文數(shù)據(jù)前端顯示亂碼編碼不統(tǒng)一檢查 MySQL 字符集為 utf8mb4接口響應(yīng)頭 charsetutf-8圖表數(shù)據(jù)不變但頁(yè)面卡死響應(yīng)式對(duì)象沒觸發(fā)更新ECharts 用 computed 生成新 option 對(duì)象或手動(dòng) setOption6.3 基于我經(jīng)驗(yàn)的避坑心得與后續(xù)擴(kuò)展方向最后分享三條個(gè)人在實(shí)際項(xiàng)目里最真實(shí)的體會(huì)希望能讓你繞過我趟過的坑。**第一所有“刪除”操作都要軟刪除不要硬刪。**社區(qū)養(yǎng)老業(yè)務(wù)改需求的速度快得驚人今天說把活動(dòng)取消了明天說要把老人轉(zhuǎn)去另一個(gè)社區(qū)后天說某個(gè)社工的服務(wù)記錄要復(fù)核。如果數(shù)據(jù)都是硬刪的后面想恢復(fù)想追溯全部抓瞎。所以我在所有核心業(yè)務(wù)表上都預(yù)留了is_deleted字段代價(jià)只是多寫一個(gè)過濾條件收益卻是巨大的可追溯性。**第二PyCharm 里寫代碼一定要把 Pylint/Flake8 這類靜態(tài)檢查開起來。**社區(qū)養(yǎng)老系統(tǒng)的代碼量不算小前后端加起來幾十個(gè)文件。不提前開檢查等你寫到第 30 個(gè)文件再回頭修規(guī)范問題那個(gè)成本真的很折磨。在 PyCharm 的 File Watchers 里配置一下保存即檢查效率提升明顯。**第三Django 的 Admin 后臺(tái)不要廢掉。**雖然你是前后端分離但運(yùn)營(yíng)人員臨時(shí)補(bǔ)錄數(shù)據(jù)、導(dǎo)出服務(wù)記錄、調(diào)整權(quán)限這些操作直接用 Django Admin 會(huì)比專門開發(fā)頁(yè)面快得多。把 Admin 的 list_display、search_fields 配置好你的運(yùn)營(yíng)同學(xué)會(huì)感謝你。至于后續(xù)擴(kuò)展我會(huì)建議兩條路。一條是把健康數(shù)據(jù)的推送鏈路升級(jí)成WebSocket實(shí)時(shí)雙通道前端能主動(dòng)給社工發(fā)送提醒比如“某老人血壓異常請(qǐng)盡快回訪”這套在 Flask 里用 flask-socketio 就能做另一條是接入小程序的家屬端Vue 3 的代碼結(jié)構(gòu)遷移到 uni-app 相對(duì)平滑后端接口完全不用動(dòng)。兩條都是這個(gè)項(xiàng)目自然會(huì)長(zhǎng)出來的方向到時(shí)候你會(huì)發(fā)現(xiàn)當(dāng)初把業(yè)務(wù)模塊劃分清楚、軟刪除做對(duì)、接口保持規(guī)范這些基礎(chǔ)工作的價(jià)值都在后面等著兌現(xiàn)。關(guān)于社區(qū)養(yǎng)老服務(wù)系統(tǒng)這篇就寫到這里。如果你正在做類似項(xiàng)目或者已經(jīng)在做了歡迎在評(píng)論區(qū)聊聊你踩過的坑、用過的方案。我這邊后續(xù)也會(huì)把這個(gè)項(xiàng)目里的一些核心代碼模塊單獨(dú)拆出來繼續(xù)講。