[ABP開源項目]--vue+vuex+vue-router+EF的權限管理系統

很久沒寫文字了，固然你們也不期待嘛，反正看代碼就好了。

演示網站

首先說下這個項目吧。
如標題同樣是基於VUE+.NET開發的框架，也是羣友一直吼吼吼要一個vue版本的ABP框架。
咱們先來看看首頁吧：

還比較酷炫，提供下演示帳號

演示地址：http://vue.yoyocms.com/
帳號：demo
密碼：bb123456
固然你也能夠本身註冊一個帳號，來進行驗證。

介紹

首先對不知道ABP框架的同窗說明下啥是ABP框架：

ABP是「ASP.NET Boilerplate Project (ASP.NET樣板項目)」的簡稱。
ASP.NET Boilerplate是一個用最佳實踐和流行技術開發現代WEB應用程序的新起點，它旨在成爲一個通用的WEB應用程序框架和項目模板。
框架
ABP是基於最新的ASP.NET CORE，ASP.NET MVC和Web API技術的應用程序框架。並使用流行的框架和庫，它提供了便於使用的受權，依賴注入，驗證，異常處理，本地化，日誌記錄，緩存等經常使用功能。
架構
ABP實現了多層架構（領域層，應用層，基礎設施層和表示層），以及領域驅動設計（實體，存儲庫，領域服務，應用程序服務，DTO等）。還實現和提供了良好的基礎設施來實現最佳實踐，如依賴注入。
模板
ABP輕鬆地爲您的項目建立啓動模板。它默認包括最經常使用的框架和庫。還容許您選擇單頁（Angularjs）或多頁架構，EntityFramework或NHibernate做爲ORM。訪問官網，瞭解更多。

結構

本次選擇的項目的結構爲:

• .net framework 4.6
• VUE + VUEX+ VUE-ROUTER
  這樣的先後端分離的技術，可是分離的不是很純粹，由於ABP設計的緣由，若是要純粹的先後端分離，在作受權的時候有點麻煩，也就沒有采用token的方式進行受權。

在以前的文章 [ABP框架]動態web Api的攔截用法 中有說明如何使用token進行受權驗證，目前使用的依然是cookie的方式進行驗證。
可是不影響先後端開發方式。
看下登陸頁面：

功能實現

• 登陸註冊
• 多語言切換
• 消息管理
• 租戶管理（多租戶）
• 角色管理
• Session
• 受權（權限管理）
• 設置管理
• 多語言管理
• 審計日誌
• 動態WebApi
  等功能，但願你本身去體驗。

若是你的.NET技能不紮實，或者想有提升，ABP是最好的學習框架。

前端技術棧說明：

前端使用的框架

1.vue
2.vuex
3.vue-router
4.jquery

UI庫

1.element-ui
2.waves
3.bootstrap
4.BSBADMIN

項目結構

• build webpack構建的腳本
• config webpack構建的配置
• dist build以後的文件
• src 源代碼目錄
  • assets 全局的資源文件
  • common 公共樣式 公共的方法
    • language 語言包(暫時無用)
    • utils 工具類
  • components 全局的組件
  • filters 過濾器
  • mixins 存放sass的各種樣式
  • router 路由配置
  • service 接口請求層
  • store vuex
  • vendor 存放第三方的庫
  • views 視圖文件
  • vuePlugin 自定義的vue插件
• static 靜態文件,編譯後的目錄不變

如下是前端人員的原話，感謝 慧鑫666 抽出時間來完善vue的界面。

## 開發步驟

進行開發前, 咱們假定你有 es6,sass,vue,vue-router,vuex 的技能基礎。
建議讀一讀 尤雨溪大神的建議

安裝前端依賴

進入Web項目中的Assets目錄

$ npm i

運行項目

記得先啓動後臺

$ npm run dev

webpack會用 express 啓動一個8986端口的web服務器

部署

$ npm run build

該命令會將全部文件編譯到 dist 目錄下, 參考上面的項目結構圖

1.添加頁面

• 先到 src/views 建立一個模塊的目錄。
  好比當前我添加了一個叫 administration 的目錄, 其中包含了全部系統管理的頁面
  每一個模塊裏面也可能會包含 components 和 assets目錄, 表示其中的組件和資源都只屬於當前模塊
  
• 接下來添加一個 Index.vue, 做爲父路由的頁面, 用來控制該模塊下的全部頁面。
  須要注意 keep-alive 的做用
• 而後添加你須要的頁面 好比叫 User.vue
  若是須要獲取數據, 請在 methods 中添加名爲 fetchData 的方法, 在該方法中, 須要在獲取完數據後調用 abp.view.setContentLoading(false)關閉內容區域的loading遮罩層。（能夠參照User.vue)

2.添加路由

• 進入src/router目錄，添加路由的模塊文件夾，在該文件夾中添加名爲 index.js的文件
  
• 而後向src/router/index.js 中註冊當前添加的路由信息

3.添加service

• 進入src/services目錄, 添加對應接口請求的模塊, 好比role相關的都放到roleService.js中
  該roleService.js文件導出的對象和abp.services.yoyocms.role是對應的。這樣使用的好處是能夠統一管理和擴展

以上就是vue版本的ABP 的基本狀況了。

下載地址：

vue版本開源地址：https://github.com/yoyocms/YoYoCms.AbpProjectTemplate
vue版本演示地址：http://vue.yoyocms.com/
angularJS版本開源地址：https://github.com/ltm0203/YoYoCms
angularJS版本演示地址：http://www.yoyocms.com

若是你有好的建議或者bug反饋，請到github上提issue 。

同時咱們也作了一個項目生成器，功能相似ABP官方的模板。

體驗網址 是: http://www.yoyocms.com/