muteki

muteki

• 簡介
  • vue3.0 一款基於springboot和vue的前後端分離的後台管理模版，同時可以快速開發給前端提供介面（Restfull API）
  • 代碼通過90% 阿里巴巴編碼規約掃描、 findbugs
  • WEB端支援多終端登錄，可對終端進行單獨維護
  • 使用者管理、角色管理、部門管理、權限管理、選單管理、日誌管理等
  • 有vue3 ant-design-vue版和vue2 element版
  • 專案完全開源MIT
  • 閃耀吧! 宛如流星一般

開發文件

• 文件持續更新中。 。 。

原項目地址

上手指南

以下指南將幫助你在本機上安裝和執行該項目，進行開發和測試。關於如何將該專案部署到線上環境，請參考部署小節。

安裝要求、步驟

• 安裝配置Java環境， JDK1.8
• 安裝mysql 8 ，建立資料庫( utf8mb4 , utf8mb4_general_ci )導入sql(doc目錄下)
• 安裝redis ,下載安裝即可
• 開發工具需要安裝lombok插件(開發工具推薦IDEA)
• ---後端運行(如果出問題一般是yml設定檔中資料來源之類的設定出錯)
• 安裝配置node環境
• 安裝vue-cli ,進入vue目錄執行npm install
• ---前端運行npm run serve ( WebStorm或IDEA可以直接點選package.json檔案中第6行左邊綠三角)

演示地址

• 線上演示地址
  ant-design-vue版,vue3.0,ant-design-vue2.0.0
  element版,vue2.5

  帳號	密碼
  superadmin	111111
  admin	111111
  admin1	111111

  • tip:多個使用者同時登陸可能會被頂掉,superadmin超級管理員才可以看到所有頁面
  • tip:演示環境已經禁止部分增刪改操作
  • tip:如果有其他異常，請強制刷新頁面(有可能是快取問題),如果還不行請提issues

• 介面文檔

  • swagger-bootstrap
  • tips:請在請求前面手動新增/muteki;請求會提示時間戳錯誤，請求請攜帶__t=當前時間戳

部署

• springboot目錄下執行mvn clean package指令打包,打包後產生檔案在/target/build目錄下
  • config目錄為存放的設定檔
  • lib目錄為maven依賴的jar包
  • static目錄存放靜態文件
  • jar檔為產生的jar包(以後pom依賴不變的話可以只替換該jar包)
• vue目錄下執行npm run build指令打包，打包後產生檔案在/dist目錄下
  • 打包配置在.env檔和vue.config.js檔中
• 部署伺服器上面需要設定JDK1.8 、 mysql 8 、 redis環境
• jar套件運行nohup java -jar springboot.jar &可以在後台運行並且將日誌輸出到當前目錄下nohup.out文件
• 部署伺服器建議配置nginx ,vue打包後放在nginx下,不配置可以放在jar包同一目錄static下面

常見錯誤

• java.lang.RuntimeException: Cannot resolve classpath entry: E:maven-repositorymysqlmysql-connector-java8.0.15mysql-connector-java-8.0.15.jar
  • 出錯: 根據資料庫產生實體類
  • 解決: resources/config/generator-config.xml第6行jar包路徑改成自己的jar包路徑

後端:

springboot、mybatis、redis

1. 簡介
   • 基於springboot範本建立的項目
2. 基本配置
   • .yml檔案可以設定相關信息
   • config目錄下為常用模組配置
   • filter配置了跨域、參數過濾等
     • 參數過濾請求自動去除前後空格,使用了Jsoup過濾html標籤(可以自訂配置過濾等級)
3. 權限管理
   • 帶有@AuthToken註解的接口，請求頭必須有token才能訪問
   • 配合vue前端頁面動態渲染路由，以及隱藏顯示按鈕:按鈕儲存在this.$globalFun.getSessionStorage('buttonMap')中(前端)
   • 精確到介面等級權限，必須完善功能管理中選單或按鈕對應的對應api ,否則存在token後預設放行
4. 封裝廠用CURD,繼承BaseService即可
   • baseInsert()和baseUpdate()會自動過濾值為null的字段
5. 根據資料庫自動產生實體類
   • 運行org.mybatis.generator.plugin.MyBatisTest.main()方法
   • 具體配置resources/config/generator-config.xml
6. 日誌按天存放，具體配置在resources/config/logback-spring.xml
7. 根據資料庫自動產生資料庫文檔
   • 運行org.screw.ScrewTest.testScrew()方法

前端:

vue:

1. 簡介

   • 基於vue cli創建的項目
   • 介面UI: element-ui
   • 網路請求: axios
     • 全域呼叫方式this.$axios({ url: '', data: {}, success(data) {} });
       • url:只需要網域之後的地址
       • success:回呼只需要處理code為200的情況
   • 全域變數和方法在/src/utils目錄下
   • 覆蓋element-ui樣式在/src/assets/sass/element-variables.scss 文件
   • 項目中大部分都有註釋

2. 基本配置

   • 配合後端實作動態路由:功能管理表單填入path路徑，預設根路徑為/src/views/main/**/*/Index.vue/
   • .env.production/development檔案和vue.config.js為設定檔

3. 封裝的常用組件

   • dialog:彈出框
     • detail: 標題+內容的方式展示數據
     • form: 表單提交, @submit只需要處理表單驗證之後的情況
     • index: 普通彈出框
   • table:表格
     • 表格接受的回傳範例: {"list":[],"pageNum":1,"pageSize":10}
     • 表格資料請求tableDataRequest: { url: '', data: {} }
       • url:請求地址
       • data:額外參數，配合頂部搜尋使用
     • 表格展示tableColumns: [ {prop: 'username', label: '用户名',formatter(){ return ''; }} ]接受一個陣列---參考layui表格
       • formatter: 複雜展示，可以回傳一個dom

鳴謝

首先感謝springboot 、 vue 、 element-ui等優秀的開源專案其次該專案參考了許多網路上的範例，如果看到類似的程式碼，那麼，答案只有一個了