JEECG技術文檔摘錄

1、Hello World

前后端分離框如何快速進入開發，請參照下面hello world實現demo

一、后台請求實現

@RestController
@RequestMapping("/test/jeecgDemo")
@Slf4j
public class JeecgDemoController {

    /**
     * hello world
     * 
     * @param id
     * @return
     */
    @GetMapping(value = "/hello")
    public Result<String> hello() {
        Result<String> result = new Result<String>();
        result.setResult("Hello World!");
        result.setSuccess(true);
        return result;
    }
}

直接訪問請求http://localhost:8080/jeecg-boot/test/jeecgDemo/hello 會提示token無效， 所以需要配置下攔截器ShiroConfig排除。

配置文件： jeecg-boot-module-system/src/main/java/org/jeecg/config/ShiroConfig.java 
加入配置：filterChainDefinitionMap.put("/test/jeecgDemo/hello", "anon");

再訪問請求http://localhost:8080/jeect-boot/test/jeecgDemo/hello，會返回結果如下：

{
    "success": true,
    "message": null,
    "code": null,
    "result": "Hello World!",
    "timestamp": 1548833208562
}

二、前台vue頁面實現

（1）創建vue頁面src/views/jeecg/helloworld.vue 調用后台請求，獲取返回的Hello World! 輸出到頁面，頁面代碼如下：

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script>
  import {getAction} from '@/api/manage'
  export default {
    data () {
      return {
        msg: ""
      }
    },
    methods: {
      hello () {
        var url = "/test/jeecgDemo/hello"
        getAction(url).then((res) => {
          if (res.success) {
            this.msg = res.result;
          }
        })
      }
    },
    created() {
      this.hello();
    }
  }
</script>

代碼說明：

1、data() 方法中定義數據對象msg 2、數據對象msg輸出到頁面，表達式如下：

{{ msg }}

3、定義一個方法，發起請求獲取后台響應 后台實現的是get方法，引入getAction方法 import {getAction} from '@/api/manage' 定義方法調用：

     hello () {
        var url = "/test/jeecgDemo/hello"
        getAction(url).then((res) => {
          if (res.success) {
            this.msg = res.result;
          }
        })
      }

4、Vue生命周期 created 中調用方法 created() { this.hello(); } hello方法中 this.msg = res.result; 把請求返回的Hello World! 賦值給msg數據對象，msg值改變則頁面顯示也改變。

三、配置菜單

配置helloword菜單【系統管理】-【菜單管理】

• 其中前端組件配置相對src/views/目錄下的 目錄名+文件名
• 例如頁面src/views/jeecg/helloworld.vue 前端組件配置 jeecg/helloworld

用戶角色授權【系統管理】-【角色管理】-授權 點擊菜單訪問頁面展示Hello World!

2、UI前端開發技巧

2.1全局配置文件

升級日志： 20190324

前台全局配置文件 配置內容：后台域名、圖片服務器域名配置 文件位置：public/index.html 好處： 前端build完也可以直接修改index.html配置內容

<!-- 全局配置 -->
  <script>
    window._CONFIG = {};
    window._CONFIG['domianURL'] = 'http://localhost:8080/jeecg-boot';
    window._CONFIG['imgDomainURL'] = 'http://localhost:8080/jeecg-boot/sys/common/view';
    window._CONFIG['pdfDomainURL'] = 'http://localhost:8080/jeecg-boot/sys/common/pdf/pdfPreviewIframe';
    window._CONFIG['casPrefixUrl'] = 'http://cas.example.org:8443/cas';
  </script>

用法：

參數	寫法	描述
后台服務域名	window._CONFIG['domianURL']	-
圖片服務器域名	window._CONFIG['imgDomainURL']	-
pdf文件預覽地址	window._CONFIG['pdfDomainURL']	-
CAS服務器地址	window._CONFIG['casPrefixUrl']	-

2.2源碼解讀

1. 登錄頁面代碼位置

   src\components\layouts\UserLayout.vue
   src/views/user/Login.vue
   

2. 首頁logo修改

   src/components/tools/Logo.vue
   

3. 圖片預覽路徑

   public/index.html
   <!-- 全局配置 -->
   <script>
    window._CONFIG = {};
    window._CONFIG['imgDomainURL'] = 'http://localhost:8080/jeecg-boot/sys/common/view';
   </script>
   圖文訪問路徑： http://127.0.0.1:8080/jeecg-boot/sys/common/view/user/h.jpg
   

   4.首頁報表

   src/views/dashboard/*
   src/views/dashboard/Analysis.vue
   

4. 登錄退出邏輯

   1.登錄頁面： src/views/user/Login.vue
   2.相關API定義位置： src/api/index.js（很多無用的刪掉）
                    src/api/index.js
                    src/api/login.js
                    src/api/manage.js
   3.左側菜單加載頁面：src/components/menu
               src/utils/util.js
               src/permission.js
   4.隱藏路由配置
    用途： 如果那個組件不想在菜單上配置，但有需要路由跳轉，則需要在這個地方配置路由。
    src/config/router.config.js
    對象： constantRouterMap
   5. 接口:   /sys/login        登錄接口
            /sys/permission/queryByUser  獲取用戶信息接口（首頁菜單）
   

6.首頁風格設置 src/defaultSettings.js

2.3vue路由帶參總結

2.3.1 params

配置路由格式要求: path: "/test/:id"
js參數獲取：this.$route.params.id

---

2.3.2 query

配置路由:無要求
js參數獲取：this.$route.query.id

---

備注：

router-link是html寫法，JS中語法如下：
this.$router.push({name:'test',query: {id:'1'}})
this.$router.push({name:'test',params: {id:'1'}})

2.4vuex 使用詳解

一、什么是vuex

vuex是一個專門為vue.js設計的集中式狀態管理架構。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。。

二、vuex使用場景

vuex主要是是做數據交互，父子組件傳值可以很容易辦到，但是兄弟組件間傳值（兄弟組件下又有父子組件），或者大型spa單頁面框架項目，頁面多並且一層嵌套一層的傳值，異常麻煩，用vuex來維護共有的狀態或數據會更便捷

場景說明：

• 由於vuex中的state存放的數據在頁面刷新時會丟失，vuex只能用於單個頁面中不同組件（例如兄弟組件）的數據流通

三、Vuex核心概念

• 1、store：類似容器，包含應用的大部分狀態

  一個頁面只能有一個容器 狀態存儲是響應式的 不能直接改變store中的狀態，唯一途徑顯示地提交mutations 在actions里面，也不能直接更改state里面的狀態值，必須先定義一個mutations，然后在actions里面commit這個mutations，從而來更改state的狀態值； 如果要再次請求異步，那么就是dispatch一個actions

• 2、State：包含所有應用級別狀態的對象

• 3、Getters：在組件內部獲取store中狀態的函數，類似組件的計算屬性computed

• 4、Mutations：唯一修改狀態的事件回調函數，默認是同步的，如果要異步就使用Actions

• 5、Actions：包含異步操作、提交mutations改變狀態

• 6、Modules：將store分割成不同的模塊

四、引入Vuex

1、安裝vuex

npm install vuex --save

2、新建一個store文件夾（這個不是必須的），並在文件夾下新建index.js文件，文件中引入我們的vue和vuex

3、在main.js 中引入新建的store

import store from './store/'

 new Vue({
      el: '#app',
      router,
      store,//使用store
      template: '<App/>',
      components: { App }
    })

五、頁面使用

1.讀取store里的值：

this.$store.state.字段名 
如果有 moudle 的話，假設叫 user ,那么取值又要變了，加上 module 名

this.$store.state.user.字段名 

2.發起操作請求:

this.$store.dispatch('action中的方法名' , '參數') ;

參數你可以隨便傳json

3.getters的用法

this.$store.getters.filterDoned 
filterDoned 是在 todo 里寫的一個 getters 方法，就這么

3、菜單路由配置

3.1菜單配置說明

字段名稱	說明
菜單類型	一級菜單：配置一級菜單；子菜單：配置下級菜單；按鈕：配置頁面按鈕權限
菜單名稱	定義菜單名稱
上級菜單	菜單類型為子菜單時，選擇關聯的上級菜單
菜單路徑	定義菜單的路徑，通常為：/包名/文件名 具體參見【菜單路徑配置說明】
前端組件	定義菜單訪問的組件名稱，有兩種類型，一種為通用組件，一種為具體的頁面，
	具體參見【前端組件配置說明】
菜單圖標	菜單樹展示的圖標
排序	菜單展示的先后順序
是否路由	此處很重要，默認是路由；如果是非的話，訪問404
隱藏路由	不展示為菜單，但是在頁面中跳轉，彈出的頁面路由菜單
聚合路由	多個下級菜單路由在一個頁面聚合展示

3.1.1前端組件配置說明：

• 1、非葉子菜單（即沒有下級的菜單）配置固定 前端組件layouts/RouteView

• 2、普通的葉子菜單（即具體的頁面） 配置相對於src/views目錄的路徑

  例如src/views/jeecg/helloworld.vue 這個頁面（具體參考底部截圖） 配置菜單時 前端組件為 jeecg/helloworld

• 3、需要跳轉到第三頁面的菜單 前端組件固定為：layouts/IframePageView（具體參考底部截圖）

  （比如跳轉百度：https://www.baidu.com）/)

• 4、java后台請求的菜單

  需要以{{ window._CONFIG['domianURL'] }}開頭（具體參考底部截圖）

3.1.2菜單路徑配置說明

• 1、非葉子菜單（即沒有下級的菜單），URL配置規則：按照功能模塊定義的關鍵根路徑即可，不能重復，需以“/”開頭
• 2、普通的葉子菜單（即具體的頁面），URL和前端組件配置保持一致即可，需在前端組件值前加“/”
• 3、需要跳轉到第三方頁面的菜單，菜單路徑配置第三方跳轉的地址即可，例如http://www.baidu.com

參考示例：

• 1.路由菜單配置截圖
• 2.外部鏈接菜單
• 3.后台鏈接菜單

3.2路由菜單規則

菜單配置就是配置前端所需要的路由 菜單路徑 : 對應頁面訪問請求URL （系統唯一，不能有重復URL） 前端組件 : 對應前端頁面組件（路徑+名字，無.vue后綴）

路由name取值規則：

通過菜單URL，生成路由name（去掉URL前綴斜杠，替換內容中的斜杠‘/’為-）
舉例： URL = /account/settings/base
      RouteName = account-settings-base

前端頁面跳轉用法:

<router-link :to="{ name: 'account-settings-base' }">
   基本設置
 </router-link>

4、系統權限用法

4.1頁面表單權限

4.1.1顯示隱藏控制

一、用法

v-has="'name'"

代碼示例：

<a-form-item v-has="'name'"
  :labelCol="labelCol"
  :wrapperCol="wrapperCol"
  label="請假人">
  <a-input placeholder="請輸入請假人" v-decorator="['name', {}]" />
</a-form-item>

二、權限配置：

三、使用說明

• v-has="'name'" 指令值“name”為授權標識，可對該授權標識進行“顯示/訪問”控制
• 權限編碼在【系統管理--菜單管理】中配置，添加按鈕類型的菜單數據，授權標識配置值“name”，策略選擇顯示/訪問，狀態選擇有效
• 控制規則：
• （1）使用v-has指令后，菜單權限中若沒有對應指令編碼的配置，則不顯示控件，
• （2）權限配置無效狀態時，則不進行權限控制，有效狀態時進行控制
• （3）策略：顯示/訪問，未授權時不顯示，授權后顯示

四、流程節點權限

（1）說明：

• 節點權限配置優先級高於菜單權限配置
• 節點權限應用於使用組件方式加載的附加表單頁面，並對附加表單頁面進行權限控制
• 顯示控制用法見上面用法描述
• 節點權限是通過 props: ['formData'],來傳遞給節點表單頁面的，因此頁面一定要定義這個，否則，節點配置的權限不生效
• 權限配置無效狀態時，則不進行權限控制，有效狀態時進行控制

（2）權限配置： 在【流程管理-流程設計】中找到需要配置的流程，進入【流程配置-流程節點】選擇需要進行權限控制的節點， 點擊【更多-權限設置】，新增/編輯 來配置權限。

4.1.2禁用控制用法一

一、用法

（1）頁面引入混入代碼

import {DisabledAuthFilterMixin} from '@/mixins/DisabledAuthFilterMixin'
mixins: [DisabledAuthFilterMixin],

（2）權限控制代碼示例：

<a-input-number :disabled="isDisabledAuth('name')"   v-decorator="[ 'days', {}]" />

二、權限配置：

三、使用說明

• :disabled="isDisabledAuth('name')" 調用方法disabledAuth，方法參數“name”為授權標識，該方法根據授權規則返回true/false，控制是否禁用
• 權限編碼在【系統管理--菜單管理】中配置，添加按鈕類型的菜單數據，授權標識配置值“name”，策略選擇可編輯，狀態選擇有效
• 控制規則：
• （1）菜單權限中若沒有對應指令編碼的配置，則不進行禁用控制，
• （2）權限配置無效狀態時，則不進行權限控制，有效狀態時進行控制
• （3）策略：可編輯，未授權時控件禁用，授權后可編輯

四、流程節點權限

（1）說明：

• 節點權限配置優先級高於菜單權限配置
• 節點權限應用於使用組件方式加載的附加表單頁面，並對附加表單頁面進行權限控制
• 顯示控制用法見上面用法描述
• 節點權限是通過 props: ['formData'],來傳遞給節點表單頁面的，因此頁面一定要定義這個，否則，節點配置的權限不生效，節點表單開發方法見【流程節點對接表單頁面開發方法】
• 權限配置無效狀態時，則不進行權限控制，有效狀態時進行控制

（2）權限配置： 在【流程管理-流程設計】中找到需要配置的流程，進入【流程配置-流程節點】選擇需要進行權限控制的節點， 點擊【更多-權限設置】，新增/編輯 來配置權限。

4.1.3禁用控制用法二

一、用法

（1）頁面引入工具js

import { disabledAuthFilter } from "@/utils/authFilter"

(2)methods方法中實現：

isDisabledAuth(code){
      return disabledAuthFilter(code);
    },

（2）權限控制代碼示例：

<a-input-number :disabled="isDisabledAuth('name')"   v-decorator="[ 'days', {}]" />

二、權限配置：

三、使用說明

• :disabled="isDisabledAuth('name')" 調用方法disabledAuth，方法參數“name”為授權標識，該方法根據授權規則返回true/false，控制是否禁用
• 權限編碼在【系統管理--菜單管理】中配置，添加按鈕類型的菜單數據，授權標識配置值“name”，策略選擇可編輯，狀態選擇有效
• 控制規則：
• （1）菜單權限中若沒有對應指令編碼的配置，則不進行禁用控制，
• （2）權限配置無效狀態時，則不進行權限控制，有效狀態時進行控制
• （3）策略：可編輯，未授權時控件禁用，授權后可編輯

四、流程節點權限

（1）說明：

• 節點權限配置優先級高於菜單權限配置

• 節點權限應用於使用組件方式加載的附加表單頁面，並對附加表單頁面進行權限控制

• 顯示控制用法見上面用法描述

• 節點權限是通過 props: ['formData'],來傳遞給節點表單頁面的，因此頁面一定要定義這個，否則，節點配置的權限不生效，節點表單開發方法見【流程節點對接表單頁面開發方法】

• 權限配置無效狀態時，則不進行權限控制，有效狀態時進行控制

• (2)methods方法中實現：

  isDisabledAuth(code){
        return disabledAuthFilter(code,this.formData);
      },
  

（2）權限配置： 在【流程管理-流程設計】中找到需要配置的流程，進入【流程配置-流程節點】選擇需要進行權限控制的節點， 點擊【更多-權限設置】，新增/編輯 來配置權限。

4.2頁面按鈕權限用法

1.前端頁面通過使用指令 v-has

<a-button @click="handleAdd" v-has="'user:add'" type="primary" icon="plus">添加用戶</a-button>

2.后台進入菜單管理頁面配置按鈕權限菜單

3.進入角色管理授權按鈕（授權后即可看見按鈕）

4.3JAVA訪問權限控制

1.后台請求權限控制，通過Shiro注解 @RequiresPermissions

@RequestMapping(value = "/add", method = RequestMethod.POST)
@RequiresPermissions("user:add")
public Result<SysUser> add(@RequestBody JSONObject jsonObject) {

2.后台進入菜單管理頁面配置訪問權限標識（選擇按鈕類型） （配置方式與按鈕權限一樣，即同一個授權標識，可以同時控制后台請求和前台按鈕顯示控制）

3.進入角色管理授權訪問權限（授權后即可訪問該請求）

4.4數據權限

4.4.1數據權限規則篇

一、功能說明

列表數據權限，主要通過數據權限控制行數據，讓不同的人有不同的查看數據規則； 比如： 銷售人員只能看自己的數據；銷售經理可以看所有下級銷售人員的數據；財務只看金額大於5000的數據等等；

二、數據權限分兩大類型

序號	類型	規則字段區別	說明
1	編碼方式	規則字段是駝峰寫法，對應mybatis實體的字段	編碼模式（通過代碼生成器生成代碼）
2	Online方式	規則字段是下划線寫法，對應表的字段	Online模式（在線表單模式，無代碼）

規則字段配置說明（非常重要）： 
①條件規則：大於/大於等於/小於/小於等於/等於/包含/模糊/不等於
②規則值：指定值 ( 固定值/系統上下文變量 )

三、數據權限規則篇

1.當前用戶上下文變量

注意：數據權限配置，規則值可以填寫系統上下文變量（當前登錄人信息），從而根據當前登錄人信息進行權限控制。

編碼	描述
sys_user_code	當前登錄用戶登錄賬號
sys_user_name	當前登錄用戶真實名稱
sys_date	當前系統日期
sys_time	當前系統時間
sys_org_code	當前登錄用戶部門編號
sysMultiOrgCode	當前登錄用戶擁有的所有機構編碼，逗號分隔

規則值，配置寫法如下：#{sys_user_code}

2.建表規范（系統標准字段）

如果需要通過當前登錄人，進行數據權限控制，則業務表必須有以下系統標准字段；數據添加和編輯，jeecg會通過攔截器自動注入操作人的信息。 比如：創建人，創建時間，創建人所屬部門、創建人所屬公司，有了這些標准字段，就可以通過當前登錄人進行數據隔離控制；

字段英文名	字段中文名
CREATE_BY	系統用戶登錄賬號
CREATE_NAME	系統用戶真實名字
SYS_ORG_CODE	登錄用戶所屬部門

3.組織機構郵編規則

JEECG組織機構支持無限層級，上下級關系通過組織機構編碼實現，組織機構編碼規則類似郵編方式，看下圖； 郵編規則優勢： 郵編規則，上下級編碼固定規律，便於定位下級和上級；

4.4.2系統數據權限用法

一、功能說明

列表數據權限，主要通過數據權限控制行數據，讓不同的人有不同的查看數據規則； 比如： 銷售人員只能看自己的數據；銷售經理可以看所有下級銷售人員的數據；財務只看金額大於5000的數據等等；

二、使用說明 （有兩種使用方法，以下說明以用戶管理列表查詢示例 配置數據規則:只查詢用戶賬號帶1的用戶）

方法A步驟如下:

• A-1.新增權限菜單：進入【系統管理】-->【菜單管理】界面 新增一個權限菜單(如下圖)

• A-2.配置數據權限規則：找到上述1新增的菜單,點擊操作列更多中的數據規則,配置,只查詢用戶賬號帶1的用戶(如下圖)
• A-3.角色授權：進入【系統管理】-->【角色管理】界面找到當前用戶對應的角色，點擊 更多->授權 操作，右側彈出框中找到上述1菜單，點擊后勾選權限規則,保存(如下圖)
• A-4.在后台請求方法上加注解 @PermissionData 在方法上加注解是為了提高系統運行效率,這樣就可以指定請求走權限過濾的邏輯,而非一棍子打死,讓所有請求都去篩選一下權限(如下圖)
• A-5.測試,訪問用戶管理界面發現數據被過濾了,即權限生效!

方法A的問題在於,每個請求都需要配置一個權限菜單,這樣其實也很費勁,同時對於菜單管理也不是很好,鑒於此可以考慮使用方法B 方法B基於注解屬性pageComponent,步驟如下：

• B-1.找到需要配置權限的頁面菜單,這里是用戶管理菜單

直接在該菜單上配置數據規則(如A-2)

• B-2.角色授權（如A-3）
• B-3.添加注解 (如A-4,不同的是注解上增加了一個屬性)@PermissionData(pageComponent="system/UserList") pageComponent的值和B-1中菜單的前端組件值保持一致
• B-4.測試,訪問用戶管理界面發現數據被過濾了,即權限生效!

規則字段配置說明（非常重要）： 
①條件規則：大於/大於等於/小於/小於等於/等於/包含/模糊/不等於/自定義SQL
②規則值：指定值 ( 固定值/系統上下文變量 )

三、數據權限規范說明

1.系統上下文變量

注意：數據權限配置，規則值可以填寫系統上下文變量（當前登錄人信息），從而根據當前登錄人信息進行權限控制。

編碼	描述
sys_user_code	當前登錄用戶登錄賬號
sys_user_name	當前登錄用戶真實名稱
sys_date	當前系統日期
sys_time	當前系統時間
sys_org_code	當前登錄用戶部門編號

規則值，配置寫法如下：#{sys_user_code}

2.建表規范（系統標准字段）

如果需要通過當前登錄人，進行數據權限控制，則業務表必須有以下系統標准字段；數據添加和編輯，jeecg會通過攔截器自動注入操作人的信息。 比如：創建人，創建時間，創建人所屬部門、創建人所屬公司，有了這些標准字段，就可以通過當前登錄人進行數據隔離控制；

字段英文名	字段中文名
CREATE_BY	系統用戶登錄賬號
CREATE_NAME	系統用戶真實名字
SYS_ORG_CODE	登錄用戶所屬部門

3.組織機構郵編規則

JEECG組織機構支持無限層級，上下級關系通過組織機構編碼實現，組織機構編碼規則類似郵編方式，看下圖； 郵編規則優勢： 郵編規則，上下級編碼固定規律，便於定位下級和上級；

4.5列表列權限控制

針對數據列表的列進行權限控制，控制列的展示與不展示，需要菜單的權限配置與頁面代碼配置使用 控制規則： 增加權限控制配置與代碼后，配置有效的狀態未授權時隱藏，授權時顯示

舉例： 針對常用示例列表，的用戶名字段

權限控制步驟

1. 針對列表列配置權限

在配置前需要對需要控制的列表權限編碼定義一個前綴，規則自己設計，不同的列表定義不同前綴最好不要重復
例如：定義前綴“testdemo:”  則需要對列表中的name列進行控制，權限編碼為，前綴+列字段名 （“testdemo:name”）

在對應的列表頁面菜單下配置權限：

配置說明：

• 菜單類型：選擇“按鈕/權限”
• 授權標識：前綴+列字段名 （“testdemo:name”）
• 授權策略：選擇“顯示/訪問(授權后顯示/可訪問)”
• 狀態：選擇“有效”

2. 增加頁面控制代碼

（1）引入工具方法

import { colAuthFilter } from "@/utils/authFilter"

（2）created方法中增加方法調用，根據權限過濾展示的列

created() {
      this.columns = colAuthFilter(this.columns,'testdemo:');
      this.loadData();
    },

說明：
colAuthFilter方法：
第一個參數：列表定義的列信息
第二個參數：列權限控制定義的權限編碼前綴“t

4.6聚合路由的使用

聚合路由， 配置后子菜單路由不顯示，子菜單之間的跳轉通過頁面上的路由鏈接進行跳轉

備注：父級菜單配置如下
（1）配置聚合路由，選擇是；
（2）菜單地址配置其子菜單中的一個菜單地址，作為默認跳轉的地址；