目錄

• 一、jeecg-boot 入門
• 二、jeecg-boot 框架知識點
• • 2.0 jeecg-boot 主題色修改
  • 2.1 jeecg數(shù)據(jù)庫表-字段規(guī)范
  • 2.2 j-dict-select-tag 的使用
  • 2.3 j-dict-select-tag 的使用
  • 2.4 jeecg中table列字典值的翻譯
  • 2.5 jeecg中JUpload的使用
  • 2.6 jeecg中圖片預覽的方法
  • 2.7 jeecg中confirm 刪除確認提示無效，替代方案
  • 2.8 jeecg中實現(xiàn)點擊菜單，希望點擊菜單打開新窗口頁簽(大屏）
  • 2.9 jeecg中退出登錄 功能無效，替代方案
  • 2.10 a-range-picker 日期選擇器使用
  • 2.11 獲取系統(tǒng)字典內(nèi)容的方法
• 三、Ant Design Vue -幾個好用的技巧
• • 3.1 Ant Design Table 單行點擊選中
• 四、 css 樣式-常用的幾種樣式
• • 4.1 不允許選中文字
  • 4.2 滾動條樣式
  • 4.3 元素超出父元素邊框，讓其自動換行
• 五、幾個小坑
• • 5.1 關于session store 和 local store 之間的區(qū)別

一、jeecg-boot 入門

1.1 為小白避坑用的，視頻教程(官方教程)

視頻教程 https://edu.csdn.net/learn/25027說明文檔 http://jeecg-boot.mydoc.io/

---

二、jeecg-boot 框架知識點

2.0 jeecg-boot 主題色修改

（1）首先找到項目中的 defaultSettings.js 文件
（2） 找到文件中的 export default 中的 primaryColor字段，這里的顏色值可以修改成自己想要的顏色代碼：

2.1 jeecg數(shù)據(jù)庫表-字段規(guī)范

數(shù)據(jù)庫表必須有的字段 id 字段 （系統(tǒng)代碼回傳用的） createTime 字段 (排序用的)

2.2 j-dict-select-tag 的使用

注意點 jeecg 框架，由于深度綁定，所以數(shù)據(jù)庫的表主鍵必須為id，而且框架自動生成的。 主鍵類型得設置成 字符串類型，注意長度至少為32位，以防萬一。

2.3 j-dict-select-tag 的使用

j-dict-select-tag 通過加載系統(tǒng)字典值，下拉選擇數(shù)據(jù) car_types 是預先定義的字典值 vehicleType 是選擇的值<a-form-item label="車輛類型"><j-dict-select-tagtype="list"placeholder="請選擇車輛類型"dictCode="car_types"v-model="vehicleType"/> </a-form-item>

2.4 jeecg中table列字典值的翻譯

注意點就是直接在 dataIndex 中添加 _dictText 就可以解決問題了 column: [{title: '車輛類型',align: 'center',dataIndex: 'vehicleType_dictText' }]

2.5 jeecg中JUpload的使用

首先是import 方式引入組件 import JUpload from '@/components/jeecg/JUpload'其次是 注冊組件 components: {JUpload,},實際使用代碼示例 [number=1 代表只能上傳1 文件]： <j-upload v-model="fileList" :number="1"></j-upload>

2.6 jeecg中圖片預覽的方法

以下的官方demo中的案例，拿出來分享以下，下面這個是圖片列表

//jeect-boot 圖片預覽核心代碼，細節(jié)地方，自己調(diào)整一下就好 <div><template><div style="float:left;width:104px;height:104px;margin:8px;"><div style="width:100%;height:100%;display:flex;padding:0px;border: 1px solid #d9d9d9;border-radius: 4px;cursor: pointer;"><img style="width:100%;" :src="'https://img-pre.ivsky.com/img/tupian/pre/201803/29/gongchengshi.jpg'" :preview="'https://img-pre.ivsky.com/img/tupian/pre/201803/29/gongchengshi.jpg'" /></div></div></template> </div>

2.7 jeecg中confirm 刪除確認提示無效，替代方案

原有的確認提示框

// 直接修改 JeecgListMixin.js 中的 $confirm 部門，替換成如下部分 <script> this.$confirm('請仔細核對，確認是否刪除', '提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).then(() => {// 確認進入這里that.loading = true;deleteAction(that.url.deleteBatch, {ids: ids}).then((res) => {if (res.success) {//重新計算分頁問題that.reCalculatePage(that.selectedRowKeys.length)that.$message.success(res.message);that.loadData();that.onClearSelected();} else {that.$message.warning(res.message);}}).finally(() => {that.loading = false;});}).catch(() => {// 取消進入這里console.log('catch')}); </script>

2.8 jeecg中實現(xiàn)點擊菜單，希望點擊菜單打開新窗口頁簽(大屏）

資料參考來源：
思路：

• 定義要跳轉(zhuǎn)的頁面的路由地址【router.config.js 進行配置】
• 菜單中配置好要跳轉(zhuǎn)的 url【頁面菜單功能進行配置】
• 跳轉(zhuǎn)新頁面配置【menu/Contextmenu.vuej 中針對url進行配置】

(1) 靜態(tài)路由配置

(2) 菜單配置

(3) 彈出新頁面配置

2.9 jeecg中退出登錄 功能無效，替代方案

原有的確認提示框

替換之后

<script> // 直接修改 UserMenu.vue 中的 handleLogout() 方法，直接將原有的confirm替換成，替換成如下部分 this.$confirm('真的要注銷登錄嗎', '提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).then(() => {// 確認進入這里return that.Logout({}).then(() => {// update-begin author:wangshuai date:20200601 for: 退出登錄跳轉(zhuǎn)登錄頁面that.$router.push({ path: '/user/login' })// update-end author:wangshuai date:20200601 for: 退出登錄跳轉(zhuǎn)登錄頁面//window.location.reload()}).catch(err => {console.log('發(fā)生錯誤==>', err)that.$message.error({title: '錯誤',description: err.message})})}).catch(() => {// 取消進入這里console.log('catch')}) </script>

2.10 a-range-picker 日期選擇器使用

原有的確認提示框

<div>// 日期選擇器定義 format="YYYY-MM-DD" format="YYYY-MM-DD HH:mm:ss"<a-range-pickershowTime:placeholder="['開始時間', '結束時間']"format="YYYY-MM-DD":value="queryParam.rangeTimer"@change="rangeTimerChange"/> </div></script>// 參數(shù)定義queryParam: {rangeTimer: undefined,startTime: undefined,endTime: undefined,},// 函數(shù)定義rangeTimerChange(dates, dateStr) {// 數(shù)據(jù)賦值給rangeTimer ，主要是組件上用來顯示值的this.queryParam.rangeTimer = dates// 下面是 開始日期 和 結束日期 的拆分this.queryParam.startTime = dateStr[0]this.queryParam.endTime = dateStr[1]} </script>

效果

2.11 獲取系統(tǒng)字典內(nèi)容的方法

// --第一種方法-以下方法是系統(tǒng)用的獲取字典值的方法---------- // 這里是yn 是否 字典值 // dictList 是獲取到的結果數(shù)組ajaxGetDictItems('yn', null).then(res => {if (res.success) {this.dictList= res.result} })//----第二種方法--------------------------------------------------- //優(yōu)先從緩存中讀取字典配置 if (getDictItemsFromCache(this.dictCode)) {this.dictOptions = getDictItemsFromCache(this.dictCode)return }

---

三、Ant Design Vue -幾個好用的技巧

3.1 Ant Design Table 單行點擊選中

//首先是引入table組件 // cameraTableClick 行點擊事件 // tableClick1 是單選的方法 type: 'radio' // tableClick2 是多選的方法 type: 'checkbox' // selectedRowKeys 是變量， // onListOnChange是一個change方法<template><div><a-tablerowKey="id":columns="columns1":data-source="data1":customRow="tableClick2 ":row-selection="{selectedRowKeys: selectedRowKeys,onChange: onListOnChange,type: 'checkbox'}"></a-table></div> </template><script> // data中定義好參數(shù)變量 export default {data() {return {columns1:[],data1: [],selectedRowKeys: [],// 其余必填參數(shù)，這里省略……}},methods: {onListOnChange(val) {this.selectedRowKeys = val;},// 點擊行數(shù)據(jù)進行單選操作tableClick1(record, index) {return {on: {click: () => {let keys = []keys.push(record.id)this.selectedRowKeys = keys}}}},// 點擊行數(shù)據(jù)，進行多選操作tableClick2(record, index) {return {on: {click: () => {let rowKeys = this.selectedRowKeysif (rowKeys.length > 0 && rowKeys.includes(record.id)) {rowKeys.splice(rowKeys.indexOf(record.id), 1)} else {rowKeys.push(record.id)}this.selectedRowKeys= rowKeys}}}}, } </script>

---

四、 css 樣式-常用的幾種樣式

4.1 不允許選中文字

.className {-moz-user-select: none;-webkit-user-select:none; }

4.2 滾動條樣式

.scorll::-webkit-scrollbar {/*滾動條整體部分，其中的屬性有width,height,background,border等（就和一個塊級元素一樣）（位置1）*/width: 10px;height: 10px;border-radius: 10px; }.scorll::-webkit-scrollbar-button {/*滾動條兩端的按鈕，可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果（位置2）*/background: #fff;display: none; }.scorll::-webkit-scrollbar-track {/*外層軌道，可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果（位置3）*/background: #fff;display: none; }.scorll::-webkit-scrollbar-track-piece {/*內(nèi)層軌道，滾動條中間部分（位置4）*/background: #fff;border-radius: 10px; }.scorll::-webkit-scrollbar-thumb {/*滾動條里面可以拖動的那部分（位置5）*/background: #A3A5A7;border-radius: 10px; }.scorll::-webkit-scrollbar-corner {/*邊角（位置6）*/background: #fff; }.scorll::-webkit-scrollbar-resizer {/*定義右下角拖動塊的樣式（位置7）*/background: #fff; }.scorll {scrollbar-arrow-color: #fff;/**//*三角箭頭的顏色*/scrollbar-face-color: #fff;/**//*立體滾動條的顏色*/scrollbar-3dlight-color: #fff;/**//*立體滾動條亮邊的顏色*/scrollbar-highlight-color: #fff;/**//*滾動條空白部分的顏色*/scrollbar-shadow-color: #fff;/**//*立體滾動條陰影的顏色*/scrollbar-darkshadow-color: #fff;/**//*立體滾動條強陰影的顏色*/scrollbar-track-color: #A3A5A7;/**//*立體滾動條背景顏色*/scrollbar-base-color: #fff;/**//*滾動條的基本顏色*/ }

4.3 元素超出父元素邊框，讓其自動換行

<style> .className {flex-wrap: wrap; } </style>

五、幾個小坑

5.1 關于session store 和 local store 之間的區(qū)別

參考來源（csdn上的一個小伙伴）

總結

以上是生活随笔為你收集整理的jeecg-boot 入门-小白避坑篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。