[造輪子]基於java+typescript 前後端分離專案骨架

zhaohejing發表於2018-06-15

引言

造輪子是不可能停止的,這輩子都不可能停止的。輪子造的好,外快拿不少。

為了滿足不同系統下的不同架構需求,就有了這篇輪子說。

為了Microsoft!所以有了基於.net Core + EF 的骨架。

為了oracle! 所以有了基於 java +Mybatis 的骨架。

為了 chome! 所以有了基於node +experss 的骨架。

專案技術棧

後端技術統計:

  • 後端骨架: springboot
  • 資料庫 : [mysql,mssql]
  • Orm: Mybatis,Mybatis-plus,
  • 許可權元件: Shiro
  • ddd模式:
  • JWTtoken :實現restful api介面,無狀態授權認證
  • 自注解 :實現@Pass,@Log,@Current 註解功能
  • SpringAOP 切面注入事務,過濾請求,防止xss攻擊
  • Bcrypt加密 :保證密碼安全性
  • 基於u-r-p的許可權體系:使用者-角色-授權體系,介面只需要關心許可權。
  • DataCreator:專案初始資料初始化。
  • MpGenerater:專案程式碼生成器,減少60%開發。
  • SwaggerUi :api介面文件,authoration認證

前端技術統計:

  • 語言: node,typescript
  • ui庫: iview,vue
  • 元件: vuex,router,axios,singlr...
  • 全域性utils:封裝通用方法,異常類,cookie,session幫助類
  • 通用查詢條件:table展示,filter過濾自動裝配.

目錄樹

├────────────────
│  .gitignore   //配置檔案
│  init.sql     //資料庫初始化sql指令碼
│  pom.xml      //springboot pom配置
│  README.md    //readme
│  sale.iml     //...
├─dashboard     //前端目錄結構
│  │  .gitignore    //...
│  │  .npmrc        //...
│  │  package.json  //
│  │  tsconfig.json  //ts專案配置檔案
│  │  vue.config.js  //vue配置
│  │  yarn.lock  
│  ├─node_modules  //依賴庫         
│  ├─public     //公共庫        
│  └─src        //原始檔     
├─src   //java服務端原始碼
│  ├─main
│  │  ├─java
│  │  │  └─com
│  │  │      └─monkey
│  │  └─resources //資源路徑
│  └─test  //測試相關
│      └─java
└─target //打包檔案
複製程式碼

服務端結構

通過git 下載原始碼,專案基於 ^jdk1.8,^node6.0
使用maven專案管理,IDE推薦ijidea.
直接ide匯入pom檔案 自動還原依賴
修改~/resources/config/application-dev.properties 內資料庫名以及相關資訊.
使用init.sql初始化資料庫資訊。
ide直接執行SpringbootApplication.java 可以啟動專案
訪問 http://localhost:8081/swagger-ui.html#/ 直觀api文件
或者 在根目錄(pom所在目錄) shell執行 mvn clean package 
在target內直接執行打包好的jar檔案 也可以。
複製程式碼

客戶端架構

通過vscode開啟dashboard資料夾
shell內執行 npm install 還原依賴
npm run serve 啟動專案
npm run build 打包專案
複製程式碼

示例頁面

服務介面

[造輪子]基於java+typescript 前後端分離專案骨架

[造輪子]基於java+typescript 前後端分離專案骨架
[造輪子]基於java+typescript 前後端分離專案骨架

git地址

相關文章