Avue框架学习
我们的项目使用的框架是 Avue
在我看来这个框架最大的特点是可以基于JSON配置页面上的From,Table以及各种各样的输入框等,不需要懂前端就可以很快上手,前提是需要多查一下文档
开发环境搭建
由于我本地的环境全是用docker来搭建的,所以我依然选择用docker搭建我的开发环境
1.编写dockerfile构建基础镜像
# vue项目是依赖node.js环境的
# 直接依据官方的node.js镜像来进行构建
# {version} 替换成所需的node.js版本
FROM node:{version}
# 设置工作目录
WORKDIR /app
# 先把package复制到镜像用于构建项目依赖
COPY package*.json ./
RUN npm install
# 在把项目复制到镜像中
COPY . .
# 暴露开发服务器端口
EXPOSE 8081
# 启动开发服务器
CMD ["npm", "run", "dev" , "--" , "--port" , "8081"]
2.编写docker-compose.yaml指定镜像运行容器
# 我本地的docker版本比较高,不需要指定version
# 服务
services:
# 服务名称
tpm:
# 将当前目录下的Dockerfile构建成一个新的镜像
build:
context: .
dockerfile: Dockerfile
# 指定容器的名称
container_name: tpm
# 将当前目录下所有文件挂在进容器内
# dockerfile中的执行的 npm install 生成的node_modules也需要挂在到宿主机
volumes:
- .:/app
- /app/node_modules
# 环境变量 CHOKIDAR_USEPOLLING 用于解决在 Docker 中文件系统事件丢失的问题
environment:
- CHOKIDAR_USEPOLLING=true
# 开启一个模拟的终端
stdin_open: true
tty: true
# 端口映射
ports:
- "8081:8081"
# 指定网络
networks:
default:
driver: bridge
ipam:
driver: default
3.运行起来~
# 找到docker-compose.yaml文件并执行以下命令
docker-compose up
执行到这一步已经可以进行开发任务了,访问 http://localhost:8081/
通过 docker logs -f tpm 就可以查看容器的日志啦
Avue速查手册
avue-crud 配置项
<avue-crud
:option="option" // 表格配置属性
:table-loading="loading" // 表格等待框的控制,加载的时候转圈圈,设置true/false
:search.sync="search" // 搜索的变量(需要sync修饰符)
:visible.sync="changelnfo" // 是否显示,设置true/false
:data="data" // 表格显示的数据
:page.sync="page" // 表格分页配置选项(需要sync修饰符)
:permission="permissionList" // 权限控制
:before-open="beforeOpen" // 打开前的回调function(file,column)
v-model="form" // 数据模型用来存取页面值的
ref="crud" // 在普通的DOM元素上使用,引用指向的就是DOM元素
@cell-click="pageto" // 表格点击运行方法onclick方法定义
@row-update="rowUpdate" // 更新数据后确定触发该事件
@row-save="rowSave" // 新增数据后点击确定触发该事件
@row-del="rowDel" // 行数据删除时触发该事件
@row-click="handleRowClick" // 单击行运行的方法
@search-change="searchChange" // 点击搜索后触发该事件
@search-reset="searchReset" // 清空搜索回调方法
@selection-change="selectionChange" // 点击页码会调用current-change方法回调当前页数,返回当前第几页
@current-change="currentChange" // 点击每页多少条会调size-change方法回调
@size-change="sizeChange" // 点击刷新按钮触发该事件
@refresh-change="refreshChange" // 当选择项发生变化时会触发该事件
@on-load="onLoad" // 打开表格页面的方法,一般用来初始化,返回页面数据
>
option 参数解释
option: {
height:'auto', // 表格高度
calcHeight: 30, // 表格高度差
searchShow: true, // 首次加载是否显示搜索
searchMenuSpan: 4, // 搜索按钮长度
searchSpan:6, // 搜索框长度最大长度24
border: true, // 表格边框是否显示
index: true, // 是否显示序号
indexLabel:'序号', // 并将索引字段设置为"序号"
viewBtn: true, // 是否显示查看按钮
selection: true, // 表格勾选列(即批量删除)
dialogClickModal: false, // 是否可以通过点击modal关闭Dialog
addBtn:false, // 是否显示添加按钮
editBtn:false, // 是否显示编辑按钮
delBtn:false, // 是否显示删除按钮
excelBtn:false, // 表格导出按钮是否显示
labelWidth:120, // 表单前面的标题长度
searchLabelWidth:80, // 搜索项标题长度
refreshBtn: false, // 表格上面小的刷新按钮
columnBtn: false, // 表格上面小的列表按钮
searchBtn: false, // 表格上面小的搜索按钮
menu: true, // 是否显示操作栏
menuWidth:300, // 表格操作列宽度
dialogWidth: '80%', // 弹出表单的弹窗宽度
saveBtnText:'保存', // 保存按钮文案
updateBtnText:'修改', // 修改按钮文案
cancelBtnText:'取消', // 取消按钮文案
addBtnText:'新增', // 新增按钮文案
editBtnText:'编辑', // 编辑按钮文案
delBtnText:'删除', // 删除按钮文案
viewBtnText:'查看', // 查看按钮文案
searchBtnText:'搜索', // 搜索按钮文案
emptyBtnText:'清空', // 清空按钮文案
dialogClickModal: false, // dialog对话框去掉'点击屏幕空白区就关闭弹框'属性
searchShowBtn:true, // 栏目折叠显隐
header:false, // 隐藏表格头部操作
refreshBtn:true, // 刷新
columnBtn: true, // 操作列显隐
excelBtn: false, // 导出Excel
printBtn: false, // 表格打印导出
filterBtn: false, // 筛选
}
column 参数解释
column: [
{
label:"用户名", //表格的标题
prop:"username", //表格的key
width:"150", //表格的宽度
fixed: true, //是否冻结列
hide:true, //是否隐藏列
index:true, //是否显示表格序号默认值:false
visdiplay:true, //表单不显示
overHidden: true, //超出用省略号显示
rules: [ //表单校验规则
{
required: true, //是否必填
message:"提示信息", //提示信息
trigger: "blur"
}
],
addDisabled: true, //添加的时候禁止修改
editDisabled: true, //编辑的时候禁止修改
disabled:true, //禁止编辑
addDisplay: false, //新增时是否显示
editDisplay: false, //编辑时是否显示
viewDisplay: false, //查看时是否显示
display: false, //在查看,新增,编辑页面是否显示
span:24, //span:24-条数据占一行,span:8一行3条数据
sortable:true, //排序方式切换,倒序、正序切换
search:true, //添加可搜索框
searchPlaceholder:"搜索框辅助文字",
align:"center", //表单数据居中
row: true, //是否单独成行
}
]
组合式API-生命周期钩子
onMounted() //组件挂载完成后执行
onUpdated() //状态变更而更新其DOM树之后调用
onUnmounted() //组件实例被卸载之后调用
onBeforeMount() //组件被挂载之前被调用
onBeforeUpdate() //状态变更而更新其DOM树之前调用
onBeforeUnmount() //组件实例被卸载之前调用
onErrorCaptured() //捕获了后代组件传递的错误时调用
onRenderTracked() //组件渲染过程中追踪到响应式依赖时调用
onRenderTriggered() //响应式依赖的变更触发了组件渲染时调用
onActivated() //若组件实例是<KeepAlive>缓存树的一部分,当组件被插入到DOM中时调用
onDeactivated() //若组件实例是<KeepAlive>缓存树的一部分,当组件从DOM中被移除时调用
onServerPrefetch() //组件实例在服务器上被渲染之前调用
![[数据集][目标检测]睡岗检测数据集VOC+YOLO格式3290张4类别](https://img-blog.csdnimg.cn/direct/df5087939f7e44b49256a7569f95370d.png)
