一、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-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 图片预览核心代码，细节地方，自己调整一下就好
<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-pickershowTime: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-tablerowKey="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.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 {/*内层轨道，滚动条中间部分（位置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上的一个小伙伴）

jeecg-boot 入门-小白避坑篇相关推荐

1. 计算机组装论文关于显示器,显示器参数扫盲—小白入坑篇

   显示器参数扫盲-小白入坑篇 2019-05-01 14:11:35 24点赞 103收藏 20评论 事情经历 上周六(2019年4月27日)在bilibili刷到一个组装台式机的视频,总的算下来花费小 ...

2. Python~Pandas 小白避坑之常用笔记

   Python~Pandas 小白避坑之常用笔记 提示:该文章仅适合小白同学,如有错误的地方欢迎大佬在评论处赐教 文章目录 Python~Pandas 小白避坑之常用笔记 前言 一.pandas安装 二 ...

3. JPBC库（基于配对的密码学）入门和避坑指南

   视频地址:https://www.bilibili.com/video/BV1o5411Y77r/ 1. JPBC简介 Java Pairing-Based Cryptography Library ...

4. 基于树莓派语音合成小白避坑

   文章目录 前言 1.硬件要求 2.麦克风检测 2.1细节注意 3.python-sdk模块 4.代码部分改进 总结 前言 如何利用树莓派能够实现语音识别.语音合成适合小白的入门小设计. 参考文章: h ...

5. spring boot入门，看这篇文章就够了

   一.SpringBoot入门 1.基本介绍 简化Spring应用开发的一个框架.整个Spring技术栈的一个大整合: J2EE开发的一站式解决方案: 优点: 快速创建独立运行的Spring项目以及与主 ...

6. 【U3D入门小白教程——案例篇】之一：球吃豆

   个人学习第一章节:球吃豆 1.初入Unity3d,作为新手的我们第一步当然是登录官网,下载对应的Unity3d. 新手下载个人免费版本即可,下载结束按照默认安装即可. 2.打开unity3d,这里分为 ...

7. 我的GO+语言初体验-Go+入门安装避坑手册

   一.入门简介 英文介绍 For engineering: working in the simplest language that can be mastered by children. For ...

8. 【U3D入门小白教程——案例篇】之二：全民打飞机

   个人学习第二章节:雷电游戏 1.通过上一章的了解,初步入门了Unity引擎.现在我们将进一步学习游戏开发,学习制作一款射击类小游戏.首先我们需要去官网下载我们所需要的所有资源并且导入项目. 2.在项目 ...

9. 【兼职避坑篇】怎么找到靠谱的客服兼职工作

   九月开学季又到了,很多同学想在校期间也能做点兼职赚点零花钱.本篇是仅针对找客服兼职的经验分享,从介绍客服兼职的优点缺点到找工作技巧,无私心分享给大家.   一.客服兼职的优点 很明显. 简单易上手啊, ...

最新文章

1. #6280. 数列分块入门 4（区间修改，区间查询）
2. c++ string 字符串
3. python控制语句第一章_【原创】Python第一章
4. 【今晚7点半】：华为云视频直播在各细分场景的体验指标优化实践
5. 25/100. Palindrome Linked List
6. 学习笔记 - MarkDown 语法
7. 康宁玻璃ct值计算公式_【钦州】CT室铅板生产厂家
8. LiteIDE 编写Go的单元测试
9. linux如何加入windows域
10. 【个人笔记】OpenCV4 C++ 快速入门 12课
11. 中国电子科技集团公司第三十八研究所(合肥9月29日)
12. iOS贝塞尔曲线（UIBezierPath）的基本使用方法
13. java 进度条插件_java进度条控件如何使用？
14. 在电脑上怎样将长方形图片裁剪成圆形的图片？
15. html中如何改变鼠标样式,HTML中常用鼠标样式
16. mybaitis-plus 持久层高效开发, 懒人神器
17. linux查看usb文件,linux lsusb查看USB信息
18. Verge3D 2.12 for Blender发布
19. 墨水染色之广度优先搜索(C语言实现)
20. Imperva WAF Bypass【翻译】

热门文章

1. 牛客BM6. 判断链表中是否有环
2. AS5048A SPI 14位磁旋转编码器
3. 3～5年进入国内公有云前三，紫光云有备而来
4. 作业:山姆公司相开展“会员制营销”和“EMAIL营销”
5. 平板升级android版本号,App版本升级方案
6. windows10解决“引用的账户当前已锁定”问题
7. Codevs5288 航线设计（动态规划加强版） 解题报告
8. 结构体，共用体与枚举
9. 专业的PDF转换Word软件使用教程
10. 地理空间距离计算及优化（根据两个点经纬度计算距离）