【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-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm">
<el-form-item prop="roleName">
<el-input
v-model="dataForm.roleName"
placeholder="角色名称"
size="medium"
class="input"
clearable="clearable"
/>
</el-form-item>
<el-form-item>
<el-button size="medium" type="primary" @click="searchHandle()">查询</el-button>
<el-button
size="medium"
type="primary"
:disabled="!isAuth(['ROOT', 'ROLE:INSERT'])"
@click="addHandle()"
>
新增
</el-button>
<el-button
size="medium"
type="danger"
:disabled="!isAuth(['ROOT', 'ROLE:DELETE'])"
@click="deleteHandle()"
>
批量删除
</el-button>
</el-form-item>
</el-form>
角色管理页面中的表格设计,与用户管理页面类似,只不过列数要少了很多。
<el-table
:data="dataList"
border
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
cell-style="padding: 4px 0"
style="width: 100%;"
size="medium"
>
<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>
</el-table>
云存储(Cloud Storage)就是在线上服务端提供数据存储功能的服务,这里的线上服务端通常称为云端。云存储与传统存储的区别在于,云存储中的资源通常通过互联网可以直接访问,而传统存储通常不对外提供直接访问的接口。其实我们每个人都接触过云存储,比如iCloud、网盘和云相册等,都是云存储。而且这些云存储都是以对象存储的形式呈现的。
云存储其实除了对象存储外还有很多种形态,比如块存储和文件系统存储等也都有云的形态。只不过普通用户并不会直接使用云上的块存储和文件系统存储。云中的块存储和文件系统存储与传统存储并没有本质的差异。
块存储:块存储提供一个线性空间,通常用户不会直接使用,需要经过操作系统的文件系统才能使用。
文件存储:文件存储提供一个目录树,文件存储有目录和文件两个基本概念,其中目录是容器,可以容纳目录和文件,因此可以形成树状结构。
对象存储:对象存储其实对文件存储的简化,将多级目录树简化成了一级,对象存储包含桶和对象两个基本概念。其中桶是容器,可以容纳对象,类似文件存储中的目录,但是差异在于桶不可以嵌套。![QQ截图20231213145532.png](https://static.golangjob.cn/231213/cfdf877b74f034419ea82eebcf848130.png)
有疑问加站长微信联系(非本文作者)
![](https://static.golangjob.cn/static/img/footer.png?imageView2/2/w/280)