Avue框架学习

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()   //组件实例在服务器上被渲染之前调用