Nest+Vue實戰：工作計劃管理系統

博客原文和更新地址：Nest+Vue實戰：工作計劃管理系統

前言

該項目是學習Nest.js框架所得，前端基於Vue.js + Vuex + VueRouter + ElementUI + SCSS，後端基於Node.js + TypeScript + Nest.js + MySQL + TypeORM。

預覽

功能

• 用戶
  1. 註冊、登錄、鑒權、查看信息、修改信息、退出登錄和註銷
  2. 查看最新公告和歷史公告
  3. 查看工作計劃、提交工作計劃材料和更新工作計劃材料
• 管理員
  1. 登錄、鑒權、查看信息、修改信息和退出登錄
  2. 查看最新公告、查看歷史公告、發佈公告和管理公告
  3. 審核用戶註冊、審核用戶註銷、封禁用戶和管理用戶
  4. 發佈工作計劃、管理工作計劃、查看工作計劃完成情況、查看工作計劃編輯情況、審核提交材料、批量下載提交材料、重命名提交材料、管理提交記錄
  5. 查看用戶年齡可視化數據、查看用戶性別可視化數據、查看特定工作計劃完成情況可視化數據、查看特定工作計劃審核情況可視化數據
• 超級管理員
  1. 系統啟動時自動註冊.env文件中的預設超級管理員賬號
  2. 擁有管理員的全部功能
  3. 添加管理員、封禁管理員、更改普通用戶或管理員角色、管理管理員用戶

地址

Gitee：

• 前端：work-plan-frontend

• 後端：work-plan-backend

Github：

• 前端：work-plan-frontend

• 後端：work-plan-backend

運行

• 後端：準備最新版的Node.js和MySQL，新建資料庫“work_plan”，打開根目錄下的.env文件並配置資料庫信息，然後執行：

  yarn install
  

  yarn run start:dev
  

• 前端：打開項目“src/config/config.js”文件，修改“BASE_URL”的值為對應的後端API地址，然後執行：

  npm install
  

  npm run dev
  

  進入登錄頁面後輸入.env文件中的超級管理員預設賬號密碼即可登錄系統。

最後

由於時間問題，資料庫設計和一些地方有點小問題，功能也有幾個沒寫，不過無傷大雅。

最後，如果覺得有幫助的話就點個Star吧！

參考

Iconfont

vue-admin-template

axios 下載文件流 請求

elementUI中upload自定義上傳行為 http-request屬性

Vue+ElementUI中使用Echarts繪製圓環圖 折線圖 餅圖 柱狀圖

NestJS JWT 實現用戶認證

學完這篇 Nest.js 實戰，還沒入門的來錘我！(長文預警)

Nest.js 實戰系列第二篇-實現註冊、掃碼登陸、jwt認證等