目录
- 一、jeecg-boot 入门
- 二、jeecg-boot 框架知识点
- 2.0 jeecg-boot 主题色修改
- 2.1 jeecg数据库表-字段规范
- 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中实现点击菜单,希望点击菜单打开新窗口页签(大屏)
- 2.9 jeecg中退出登录 功能无效,替代方案
- 2.10 a-range-picker 日期选择器使用
- 2.11 获取系统字典内容的方法
- 三、Ant Design Vue -几个好用的技巧
- 3.1 Ant Design Table 单行点击选中
- 四、 css 样式-常用的几种样式
- 4.1 不允许选中文字
- 4.2 滚动条样式
- 4.3 元素超出父元素边框,让其自动换行
- 五、几个小坑
- 5.1 关于session store 和 local store 之间的区别
一、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 之间的区别