ElAdmin 快速開發框架個人筆記

角色權限用戶管理

• 編輯角色
  數據權限的三個選項：
  全部數據權限 無數據權限限制
  本級數據權限 限制只能看到本部門數據
  自定義數據權限 可根據實際需要選擇部門控制數據權限

數據交互流程

• 接口訪問控制：

@Log(description = "test")
@PutMapping(value = "/test")
@PreAuthorize("hasAnyRole('admin','menu:edit')")
public ResponseEntity update(@Validated @RequestBody Menu resources){
    // 略
}

接口表示用戶擁有 admin、menu:edit 權限中的任意一個就能能訪問update方法，如果方法不加@preAuthorize註解，意味着所有用戶都需要帶上有效的 token 後能訪問 update 方法。由於admin 擁有所有權限 所以在進行攔截時 有必要進行抽象 所以需要對其進行抽取 檢查是否有admin 是的話就放行 不是的話就找到它的權限

通用查詢

1、創建一個查詢類 QueryCriteria
2、在控制器中使用
3. Service 中查詢

@Override
// @Cacheable
public Object queryAll(UserQueryCriteria criteria, Pageable pageable) {
    Page<User> page = userRepository.findAll((root, criteriaQuery, criteriaBuilder) -> QueryHelp.getPredicate(root,criteria,criteriaBuilder),pageable);
    return PageUtil.toPage(page.map(userMapper::toDto));
}

緩存註解

@CacheConfig：主要用於配置該類中會用到的一些共用的緩存配置
@Cacheable：主要方法的返回值將被加入緩存。在查詢時，會先從緩存中獲取，若不存在纔再發起對數據庫的訪問。
@CachePut：主要用於數據新增和修改操作
@CacheEvict：配置於函數上，通常用在刪除方法上，用來從緩存中移除相應數據。

異常封裝

封裝了 BadRequestException，用於處理通用的異常
(1) 實體不存在： EntityNotFoundException
(2) 實體已存在：EntityExistException
全局異常攔截： GlobalExceptionHandler
用法：
/ 通用異常
throw new BadRequestException(“發生了異常”);
// 通用異常，使用自定義狀態碼
throw new BadRequestException(HttpStatus.OK, “發送了異常”);
// 實體存在異常
throw new EntityExistException(User.class, “email”, “[email protected]”);
// 實體不存在異常
throw new EntityNotFoundException(User.class, “userName”, “test”);

系統日誌

本系統使用 AOP 方式記錄用戶操作日誌，只需要在 controller 的方法上使用 @Log("") 註解，就可以將用戶操作記錄到數據庫，

@Log("新增用戶")
@PostMapping(value = "/users")
public ResponseEntity create(@Validated @RequestBody User resources){
    checkLevel(resources);
    return new ResponseEntity(userService.create(resources),HttpStatus.CREATED);
}

定時任務

使用步驟：

• 編寫任務處理類

@Slf4j
@Component
public class TestTask {
    public void run(){ log.info("執行成功");  }
    public void run1(String str){ log.info("執行成功，參數爲： {}" + str); }
}

• 頁面創建定時任務
  Bean名稱：Spring Bean名稱，如： testTask
  方法名稱：對應後臺任務方法名稱 方法參數：對應後臺任務方法名稱值，沒有可不填
  cron表達式：可查詢官方cron表達式介紹
  狀態：是否啓動定時任務
• 代碼生成：
  模塊名稱：這個顧名思義就是模塊的名稱 生成代碼的總文件夾名
  至於包下：這個的意思是生成的代碼放到哪個包裏面 生成文件夾名下的位置 類似與包名
  前端路徑：前端代碼生成的路徑 前端代碼的絕對路徑
  是否覆蓋：危險操作，需謹慎

查詢方法的調用 實現類 JPA 的綜合動態查詢

public Map<String,Object> queryAll(SOrderQueryCriteria criteria, Pageable pageable){// 這裏用 Predicate 封裝了查詢條件     傳入lambda 表達式 根據查詢條件進行封裝  進而由 JpaSpecificationExecutor  執行分頁查詢結果 得到 結果集  totle: totalElements:[{},{}]
    // root 是一個 操作查詢條件的  用它來拼裝具體的查詢實體
	Page<SOrder> page = sOrderRepository.findAll((root, criteriaQuery, criteriaBuilder) -> QueryHelp.getPredicate(root,criteria,criteriaBuilder),pageable);
    // 得到的page對象 用工具類轉換成map 然後傳到頁面  sOrderMapper::toDto  意思是調用 sOrderMapper 的 toDto方法  將實體類的  SOrder 轉化爲DTO  
    // 雙冒號是jdk8的一個重要方法   意爲 調用  sOrderMapper 裏面的  toDto 方法  把 page 轉換爲： SOrderDto
    Page<SOrderDto> map = page.map(sOrderMapper::toDto);
    // 將DTO 轉換爲  map 
    Map<String, Object> pageResult = PageUtil.toPage(map);
    return pageResult;
}

系統基類

eladmin-common -> me.zhengjie.base
異步線程池
eladmin-system -> me.zhengjie.config.AsyncTaskExecutePool
線程池工具類
eladmin-system -> me.zhengjie.config.ThreadPoolExecutorUtil
使用方式：
private final static ThreadPoolExecutor executor = ThreadPoolExecutorUtil.getPoll();

系統工具

common 模塊的util
ElAdminConstant：系統常用常量定義
EncryptUtils：加密工具，包括對稱加密解密，md5加鹽加密
FileUtil：文件工具類
PageUtil：分頁工具類
RequestHolder：隨時獲取 HttpServletRequest
SecurityUtils：獲取當前用戶
SpringContextHolder：隨時獲取bean
StringUtils：字符串工具類
ThrowableUtil：異常工具，獲取堆棧信息
ValidationUtil：驗證工具
#目錄如下

表格設置

設置show-overflow-tooltip爲true使row中的文字有省略提示

  <el-table-column :width="flexColumnWidth(column)" :show-overflow-tooltip="true" v-for="column in tableData.columns" :key="column" :label="customLabel(column)" :prop="column">

引入js

import moment from ‘moment’

引入CSS

• js校驗：
  郵箱：
  { type: ‘email’, message: ‘請輸入正確的郵箱地址’, trigger: ‘blur’ }

• 時間處理： 數據庫 是 datetime 實體類這麼寫
  /** 添加時間 */
  @Column(name = “import_time”)
  @CreationTimestamp // 這個註解是必須的 否則就會報錯
  private Timestamp importTime;

• 隱藏列 v-if=‘show’
  

• 柵欄架構：

<el-row type="flex" class="row-bg">
  <el-col :span="6">  
  </el-col>
  <el-col :span="6">
  </el-col>
</el-row>

vue 的分割線

<el-divider></el-divider>

部署：nginx 配置示例

#eladmin  behind
	server {
    listen 80;
    server_name 192.168.186.129;
    location / {
        proxy_pass http://127.0.0.1:8000; #這裏的端口記得改成項目對應的哦
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Port $server_port;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        }
    }

	#eladmin front
	server
   	 {
        listen 8013;
        server_name 192.168.186.129;
        index index.html index.htm;
        root  /usr/local/webserver/nginx/dist;  #dist上傳的路徑
        error_page 404 /index.html; #這個配置，預防頁面刷新後跳轉到404頁面
   	 }