catadmin 管理系統

喝可樂的騎士發表於2017-12-28

系統使用

catadmin是一套許可權管理系統，管理頁面，介面，頁面按鈕許可權這些資源

目錄（系統）

許可權的第一層級，諸如長城系統，七橋系統，小貸系統，對應前臺頁面的大欄目 許可權的第二層級是大欄目下面的小欄目，都是按照sort欄位升序排列

catadmin 管理系統

許可權（頁面，介面）

  • 在資料庫中頁面和介面都是屬於許可權這一級別的資源，只有型別不同，type一個是page一個是api，但是在介面中為了方便直觀的新增和檢視，把介面設定到頁面下面，這樣使用者在某個頁面所能訪問的介面必須在這裡定義好（不包括查詢引數），如果是公共介面則需要重複定義

  • 這樣設計的好處最大的就是不會干擾原來程式的執行，不會增加新的資料庫，對後臺原先的邏輯不會有大的改動

  • 在頁面上通過新增許可權按鈕可以新增頁面級別的許可權，在某個頁面資源右側可以通過新增介面按鈕新增所屬的介面資源

  • 頁面和介面的編輯有所不同 頁面的編輯可以設定是否展示（不展示的頁面也就是不會出現在目錄裡，但是可以訪問到，如果不定義就沒有許可權訪問該頁面了,sort欄位也是升序排列），介面的編輯沒有這兩項

catadmin 管理系統

子許可權管理

子許可權是用來管理單個頁面上面按鈕的許可權，控制其是否顯示，這一塊功能目前還沒有去應用

catadmin 管理系統

角色管理

目前我設定了三個角色，

  • 財務清算部，可以檢視長城和小貸的專案
  • 七橋管理員，可以檢視七橋admin，七橋房產的專案
  • 系統管理員，閘道器係統，埋點系統等 後面的設定以OA上的申請為主
    catadmin 管理系統

catadmin 管理系統

catadmin 管理系統

系統開發

系統流程

原先把頁面渲染和輸出JSON通過middleware處理，但是這樣增加了中介軟體的數量，增加了複雜度，這次增加了一個基類函式，所有的控制器通過繼承基類函式開發

const BaseController = require('./baseController')

class AccountController extends BaseController
複製程式碼

如果方法需要輸出頁面，

async list () {
      await this.render()
}
複製程式碼

如果方法需要輸出JSON

async doEdit () {
      const data = this.ctx.request.body;
      this.renderJSON(await this.ctx.service.user.doEdit(data));
}
複製程式碼

中介軟體

catadmin把一些許可權校驗的工作放在中介軟體裡處理，這部分定義是在config.default.js裡的middleware項

middleware: ['errorHandler', 'urlRedirect', 'saveSession', 'authentication']
複製程式碼
  • url_redirect 統一的路由重定向，如果使用者訪問的地址未經過路由定義，全部重定向到前臺或者後臺的首頁
  • saveSession 每次訪問頁面延長session的時效
  • authentication 校驗訪問的路由 使用者是夠有許可權

開發流程

  • 啟動專案，在根目錄npm run dev啟動egg伺服器，在app/public目錄下npm run dev開啟靜態資源編譯
  • 在view目錄下面建立新專案的資料夾，左側選單欄統一使用layout/common/leftAside.tpl，目錄結構和路由結構保持一致，其他的CSS,JS目錄同理
  • 訪問的頁面許可權，介面許可權在後臺配置

js開發流程

引入Page頁面類，採用如下的結構開發

var page = new Page({
  eventsMap: {
    'click #addauthority': 'addauthority',
    'click .delete': 'delete'
  },
  mounted () {
    this.initialization();
  },
  methods: {
    initialization: function () {
        
    }
複製程式碼

效能優化小計

  • 由於是多頁面應用，有幾十個檔案，將它們作為chunk提取公用檔案，生成的檔案大約有2M
new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      chunks: chunks,
      minChunks: 2
    }),
複製程式碼
  • 移除common.js，放在基類JS去引用，最終打包進vender.js中
  • 合併component下面的css檔案

後端優化

  • 原先資料表中的資料轉為樹形結構的函式優化
let result = [];
  //data.sort(ascOrder('fid'));
  directory.forEach((item) => {
    let flag = result.find((itemC) => { return item.fid == itemC.id; });
    if (flag) {
      flag.child.push({cname: item.name, isshow: item.isshow, id: item.id, sort: item.sort});
    } else {
      if (item.fid) {
        result.push({fname: item.name, isshow: item.isshow, id: item.id, fid: item.fid, sort: item.sort, child: [{isshow: item.isshow, cname: item.name, id: item.id}]});
      } else {
        result.push({fname: item.name, isshow: item.isshow, id: item.id, fid: item.fid, sort: item.sort, child: []});
      }
    }
  })
複製程式碼

改成了

let idMap = [],
    jsonTree = [];
  //data.sort(ascOrder('fid'));
  const pid = 'fid'
  const id= 'id'
  const children = 'child'
  directory.forEach(v => {
    idMap[v[id]] = v;
  })
  directory.forEach((v) => {
    let parent = idMap[v[pid]];
    if(parent) {
      !parent[children] && (parent[children] = []);
      parent[children].push(v);
    } else {
      jsonTree.push(v);
    }
複製程式碼

速度快了一倍

  • 合併獲取資料的介面

後續計劃

相關文章