jeecg-boot 入门-小白避坑篇

一、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数据库表-字段规范

数据库表必须有的字段
id 字段 （系统代码回传用的）
createTime 字段  (排序用的)

2.2 j-dict-select-tag 的使用

注意点 jeecg 框架，由于深度绑定，所以数据库的表主键必须为id，而且框架自动生成的。
主键类型得设置成 字符串类型，注意长度至少为32位，以防万一。

2.3 j-dict-select-tag 的使用

j-dict-select-tag 通过加载系统字典值，下拉选择数据
car_types 是预先定义的字典值
vehicleType 是选择的值

<a-form-item label="车辆类型">
  <j-dict-select-tag
    type="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 图片预览核心代码，细节地方，自己调整一下就好
<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中实现点击菜单，希望点击菜单打开新窗口页签(大屏）

资料参考来源：
思路：

• 定义要跳转的页面的路由地址【router.config.js 进行配置】
• 菜单中配置好要跳转的 url【页面菜单功能进行配置】
• 跳转新页面配置【menu/Contextmenu.vuej 中针对url进行配置】

(1) 静态路由配置

(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: 退出登录跳转登录页面
           that.$router.push({ path: '/user/login' })
           // update-end author:wangshuai date:20200601 for: 退出登录跳转登录页面
           //window.location.reload()
         })
         .catch(err => {
           console.log('发生错误==>', 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-picker
	  showTime
	  :placeholder="['开始时间', '结束时间']"
	  format="YYYY-MM-DD"
	  :value="queryParam.rangeTimer"
	  @change="rangeTimerChange"
	/>
div>

script>
	// 参数定义
	queryParam: {
	  rangeTimer: undefined,
	  startTime: undefined,
	  endTime: undefined,
	},
	
	// 函数定义
	rangeTimerChange(dates, dateStr) {
	  // 数据赋值给rangeTimer ，主要是组件上用来显示值的
	  this.queryParam.rangeTimer = dates
	  // 下面是 开始日期 和 结束日期 的拆分
	  this.queryParam.startTime = dateStr[0]
	  this.queryParam.endTime = dateStr[1]
	}
script>

效果

2.11 获取系统字典内容的方法

// --第一种方法-以下方法是系统用的获取字典值的方法----------
// 这里是yn 是否  字典值
// dictList 是获取到的结果数组

ajaxGetDictItems('yn', null).then(res => {
  if (res.success) {
    this.dictList= res.result
  }
})



//----第二种方法---------------------------------------------------
//优先从缓存中读取字典配置
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-table
		   rowKey="id"
		   :columns="columns1"
		   :data-source="data1"
		   :customRow="tableClick2 "
		   :row-selection="{
		     selectedRowKeys: selectedRowKeys,
		     onChange: onListOnChange,
		     type: 'checkbox'
		   }"
		 >
		a-table>
	div>
template>

<script>
// data中定义好参数变量
export default {
	data() {
		return {
			columns1:[],
			data1: [],
			selectedRowKeys: [],
			// 其余必填参数，这里省略……
		}
	},
	methods: {
		onListOnChange(val) {
			this.selectedRowKeys = val;
		},
		// 点击行数据进行单选操作
	    tableClick1(record, index) {
	      return {
	        on: {
	          click: () => {
	            let keys = []
	            keys.push(record.id)
	            this.selectedRowKeys = keys
	          }
	        }
	      }
	    },
    // 点击行数据，进行多选操作
	    tableClick2(record, index) {
	      return {
	        on: {
	          click: () => {
	            let rowKeys = this.selectedRowKeys
	            if (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 {
    /*内层轨道，滚动条中间部分（位置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 之间的区别

参考来源（csdn上的一个小伙伴）