像easyUI一樣寫vue——avue後臺整合元件

smallwei發表於2018-03-14
UIVue元件

avue1.0釋出了！！！歡迎點選演示地址體驗

演示地址:http://122.4.205.228:7777——jenkins+docker+git鉤子自動部署

碼雲地址:gitee.com/smallweigit…

github地址：github.com/nmxiaowei/a…

簡介

avue 是一個類似easyui那種去寫vue的方案支援SSR(服務端渲染)和SPA(單例頁面),全部基於json可配置化去開發介面，節約開發成本和提高開發效率，基本構成由 Vue.js 和 element。它使用了最新的前端技術棧，許可權驗證，第三方網站巢狀等功能，很多功能還在開發，敬請期待

1.vuex本地持久化儲存,封裝h5的sessionStorage和localStorage

2.加入了本地離線的包引入方法去引入vue，vue-router等第三方包 詳細介紹

3.支援SSR服務端渲染(express)vue-server-renderer

4.支援阿里巴巴圖示庫線上呼叫，自動同步圖示 阿里巴巴圖示庫

5.支援iframe巢狀第三方網站詳細介紹

6.支援js動態可配CRUD和FORM,節約大量開發成本，配置字典介面自動匹配字典

7.支援多種登入方式,本地驗證碼校驗和服務端驗證碼校驗

8.全域性錯誤日誌記錄

9.scss模組化開發

10.增加系統管理模板(使用者管理,角色管理,選單管理——基於本框架的crud元件自動生成)

11.打包後docker一鍵部署指令碼基於nginx映象（具體的可以修改./src/docker/Dockerfile）

支援路由改變單例頁面title

像easyUI一樣寫vue——avue後臺整合元件

許可權動態切換

像easyUI一樣寫vue——avue後臺整合元件

例項

像easyUI一樣寫vue——avue後臺整合元件

登入

像easyUI一樣寫vue——avue後臺整合元件

許可權測試頁面

像easyUI一樣寫vue——avue後臺整合元件

資料展示

像easyUI一樣寫vue——avue後臺整合元件

錯誤頁面

像easyUI一樣寫vue——avue後臺整合元件

錯誤日誌記錄

像easyUI一樣寫vue——avue後臺整合元件

CRUD

像easyUI一樣寫vue——avue後臺整合元件 像easyUI一樣寫vue——avue後臺整合元件

FORM

像easyUI一樣寫vue——avue後臺整合元件

使用者管理

像easyUI一樣寫vue——avue後臺整合元件

角色管理

像easyUI一樣寫vue——avue後臺整合元件

選單設定

像easyUI一樣寫vue——avue後臺整合元件

阿里巴巴圖示庫(線上呼叫)

像easyUI一樣寫vue——avue後臺整合元件

登入頁面SSR渲染

像easyUI一樣寫vue——avue後臺整合元件

主頁

像easyUI一樣寫vue——avue後臺整合元件

第三方網站

像easyUI一樣寫vue——avue後臺整合元件

功能

- 全域性錯誤日誌記錄
- vuex持久化儲存
- 鎖屏
- SSR渲染頁面
- 資料展示
- 登入/登出
 - 使用者名稱登入
 - 驗證碼登入
 - 第三方登入(開發中)
- 許可權驗證
- 第三方網站巢狀
- CRUD(增刪改查)
- FORM(動態生成)
- 阿里巴巴圖示庫(線上呼叫)
- 系統管理
 - 使用者管理
 - 角色管理
 - 選單管理
- 更多功能開在開發
複製程式碼

按鈕的顯隱控制

返回的vuex物件中額permission陣列包括按鈕的許可權 例如: ['sys_crud_add', 'sys_crud_export'], crud的增加按鈕和匯出按鈕

全域性錯誤日誌記錄

放開./src/page/errlog/index.vue中的errorA的元件即可測試他是儲存在本地，可以自己回掉方法上傳伺服器，呼叫CLEAR_ALL_ERR方法清空本地

vuex持久化存demo請看

詳細demo請看./src/store/modules/tgs.js例項

...
state:{
  ...
  tag: getStore({ name: 'tag' }) || tagObj
},
...
 mutations: {
  ...
  setStore({ name: 'tagList', content: state.tagList, type: 'session' })
  ...
 }
複製程式碼

資料加密工具類——在./src/util/util.js中encryption

支援Base64和Aes加密

const data ={
  username:'admin',
  password:'123456'
}
const userInfo = encryption({
    data: data,//加密的資料
    key:'123',//aes加密時的型別，不是aes加密不用傳
    type: 'Base64',//要加密的型別 Base64 || Aes
    param: ['useranme', 'password'] //要加密的欄位
});
複製程式碼

CRUD和FORM使用說明————根據配置json檔案自動生成CRUD和FORM，並且配置字典介面，自動匹配字典

詳細demo請看./src/page/table/index.vue和./src/page/form/index.vue例項例項

子定義操作按鈕<br />
<template slot-scope="scope">
    <el-button icon="el-icon-check" size="small" @click="handleGrade(scope.row,scope.$index)">許可權</el-button>
</template>
js自動配置crud<br />
{
  border: true,//表格是否顯示邊框
  index: true,///表格是否顯示序號
  selection: true,//表格是否顯示可選select
  dic:['GRADE','SEX'],//傳入需要獲取字典的變數，看vuex中的getDic方法
  column: [
    {
      label: "使用者名稱",//表格的標題
      prop: "username",//表格的key
      width: "150",//表格的寬度
      fixed: true,//是否凍結列
      hide:true,//是否隱藏
      span:12,//表單格柵顯示的列
      type:'select', //select | radio | checkbox | date 預設為text
      visdiplay:true,//表單不顯示
      overHidden: true,//超出省略號顯示
      dicData: 'GRADE', //傳入需要引用的字典
      ],//type的資料字典,當type為：select | radio | checkbox 載入
      dataDetail: val => {
        return `<span class="el-tag">${val}</span>`;;//是否對列表資料處理
      },
      rules: [{ required: true, message: "請輸入使用者名稱", trigger: "blur" }] //表單校驗規則
    }
}
複製程式碼

開發

# 克隆專案
git clone https://gitee.com/smallweigit/avue.git

# 安裝依賴
npm install
   
# 建議不要用cnpm安裝 會有各種詭異的bug 可以通過如下操作解決 npm 下載速度慢的問題
npm install --registry=https://registry.npm.taobao.org

# 啟動服務
npm run dev
複製程式碼

除錯與釋出

# 構建測試環境
npm run dev

# 構建生成環境
npm run build

# 構建SSR渲染頁面
npm run start

複製程式碼

其它

# 程式碼檢測
npm run lint

# 單元測試
npm run karma

# 構建SSR客戶端程式碼
npm run build:client

# 構建SSR服務端端程式碼
npm run build:server
複製程式碼

License

MIT

Copyright (c) 2017-present Smallwei QQ:1634566606

相關文章