【24章】Qt 全流程实战企业级项目 - 云对象存储浏览器
给大家分享一套课程——Qt 全流程实战企业级项目 - 云对象存储浏览器，课程共24章，包更新。附源码+PDF课件。
开发QT有两种IDE可以使用，一种是使用 VS + Qt 的插件，另一种就是使用QtCreator工具。前一种是微软的工具，用的都比较多容易上手，缺点是信号槽的支持不太好，需要手写，不能自动生成，另外可能有中文编码的问题。后一种是Qt的官方IDE，智能提示与调试功能不如VS强大，但是是跨平台的IDE，其QtDesigner设计UI界面操作比较方便，并且由于是QT官方的IDE，对编码等支持都比较好，里面集成了Qt的帮助文档。不得不说Qt的帮助文档做的是非常好的，集成进QtCreator环境之后更加方便。
QT中最常用的控件QPushButton(按钮)、QLineEdit(文本框)、QRadioButton(单选框)、QCheckBox(复选框)、QFrame(一般用作容器控件，配合布局)、QProgressBar(进度条控件)这些控件的使用方法都非常简单，查一下帮助文档就可以搞定，下面的章节中，我们会讲解另外的一些控件的常用但是却不是很容易找到的功能。
一款针对云对象存储开发的可视化界面管理工具，界面简洁，操作便捷，轻松 实现对云对象资源的查看和管理 无目录层次结构、无数据格式限制，可容纳海量数据，支持 HTTP/HTTPS 协 议访问的分布式存储服务 适用于CDN数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景 项目涵盖：存储桶管理、资源对象管理、文件上传、文件下载等功能 覆盖核心知识：元对象系统，属性系统，对象树模型，事件系统，信号槽，MVC， QSS，数据库、网络以及前后端架构分层模型等
我们首先看一下模型层定义的变量，除了有查询条件之外，还有与分页相关的变量，以及保存勾选的角色记录的变量，最后是表单验证的规则。总体上来看，跟用户管理页面的模型层差不多。
data: function() {
return {
dataForm: {
roleName: null
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalCount: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
dataRule: {
roleName: [{ required: false, pattern: '^[a-zA-Z0-9\u4e00-\u9fa5]{1,10}$', message: '角色格式错误' }]
}
};
},
接下来我们看看前端页面的表单控件是怎么定义的。当用户点击查询按钮的时候，触发点击事件对应的回调函数是searchHandle()，这个函数是我们一会儿要声明的。
<el-table-column
type="selection"
:selectable="selectable"
header-align="center"
align="center"
width="50"
/>
<el-table-column type="index" header-align="center" align="center" width="100" label="序号">
<template #default="scope">
<span>{{ (pageIndex - 1) * pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column prop="roleName" header-align="center" align="center" label="角色名称" min-width="180"/>
<el-table-column header-align="center" align="center" label="权限数量" min-width="140">
<template #default="scope">
<span>{{ scope.row.permissions }}个</span>
</template>
</el-table-column>
<el-table-column prop="users" header-align="center" align="center" label="关联用户" min-width="140">
<template #default="scope">
<span>{{ scope.row.users }}人</span>
</template>
</el-table-column>
<el-table-column prop="desc" header-align="center" align="center" label="备注" min-width="450" />
<el-table-column prop="systemic" header-align="center" align="center" label="内置角色" min-width="100">
<template #default="scope">
<span>{{ scope.row.systemic ? '是' : '否' }}</span>
</template>
</el-table-column>
<el-table-column header-align="center" align="center" width="150" label="操作">
<template #default="scope">
<el-button
type="text"
size="medium"
:disabled="!isAuth(['ROOT', 'ROLE:UPDATE']) || scope.row.id == 0"
@click="updateHandle(scope.row.id, scope.row.systemic)"
>
修改
</el-button>
<el-button
type="text"
size="medium"
:disabled="!isAuth(['ROOT', 'ROLE:DELETE']) || scope.row.systemic || scope.row.users > 0"
@click="deleteHandle(scope.row.id)"
>
删除
</el-button>
</template>
</el-table-column>云存储其实除了对象存储外还有很多种形态，比如块存储和文件系统存储等也都有云的形态。只不过普通用户并不会直接使用云上的块存储和文件系统存储。云中的块存储和文件系统存储与传统存储并没有本质的差异。
块存储：块存储提供一个线性空间，通常用户不会直接使用，需要经过操作系统的文件系统才能使用。
文件存储：文件存储提供一个目录树，文件存储有目录和文件两个基本概念，其中目录是容器，可以容纳目录和文件，因此可以形成树状结构。
对象存储：对象存储其实对文件存储的简化，将多级目录树简化成了一级，对象存储包含桶和对象两个基本概念。其中桶是容器，可以容纳对象，类似文件存储中的目录，但是差异在于桶不可以嵌套。
