最后
javascript是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
=======================================================================
我们知道,权限管理一般都会涉及到用户、组织机构、角色,以及权限功能等方面的内容,ABP框架的基础内容也是涉及到这几方面的内容,其中它们之间的关系基本上是多对多的关系,它们的关系如下所示。
权限模块里面包含的一些主对象表和中间表,中间表主要用来存储两个对象之间的多对多关系,如角色包含多个用户,用户属于多个机构,机构包含多个角色等等。
结合ABP后端提供的接口,Vue前端我们要实现基础的用户、组织机构、角色、功能权限等内容的管理,以及维护它们之间的关系。Vue前端对于权限管理模块的菜单列表如下所示。
上图权限管理模块中,包括用户管理、机构管理、角色管理、菜单管理、功能管理、审计日志、登录日志等内容模块的管理。
其中用户管理模块,主要用来展示用户信息列表,以及查看对应用户权限、维护密码等处理。
用户列表界面如下所示,包括对应条件的查询和列表展示、以及查看、添加、编辑、删除、重置密码等功能入口。
用户信息查看界面如下所示:
主要展示用户基础信息,和所属的关系信息,其中权限部分列出对应用户包含的功能点,用于界面按钮等方面的控制处理。
用户添加界面,则主要用来处理录入用户基础信息部分即可,如下界面所示。
用户信息录入,对用户基础表单数据进行校验,符合格式要求才能录入。
用户编辑界面,基本上和上面的类似了,不在赘述。
另外,删除用户或者重置密码,一般需对确认后再行操作,弹出一个对话框用户确认再继续。
ABP+Vue的框架参考的是已完成的ABP+Winform的功能界面进行开发,具体也可以了解下Winform版本框架《ABP开发框架前后端开发系列—(14)基于Winform的ABP快速开发框架》
======================================================================
以上我们介绍了权限管理模块涉及的内容和关系,并着重介绍了用户管理界面中的内容展示,下面介绍在Element中如何实现对上面界面的处理的。
首先我们需要根据ABP后端的接口进行前端JS端的类的封装处理,其中前面说过,常规的Get/GetAll/Create/Update/Delete/Count等接口,我们放在BaseApi基类里面定义,其他子类继承它即可。
权限模块我们涉及到的用户管理、机构管理、角色管理、菜单管理、功能管理、审计日志、登录日志等业务类,那么这些类继承BaseApi,就会具有相关的接口了,如下所示继承关系。
我们这里以UserAPI的JS类定义介绍,如下所示。
我们以其中一个接口为例进行介绍实现代码,可以看到主要就是简单封装的调用即可。
GetGrantedFunctionsByUser(id) { // 获取用户权限列表
return request({
url: this.baseurl + ‘GetGrantedFunctionsByUser’,
method: ‘get’,
params: { id }
})
}
有了这些业务类的准备,那么我们和后端ABP的API接口对接,就很容易了,如下图所示。
剩下的就是对Vue + Element前端的界面处理事情了。
我们先来看看查询的处理,常规的查询涉及日期区间的查询处理,这里我们用一个一个查询日期的处理操作,如下图所示。
表单的界面代码如下所示 :
<el-date-picker
v-model=“searchForm.creationTime”
type=“daterange”
align=“right”
unlink-panels
range-separator=“至”
start-placeholder=“开始日期”
end-placeholder=“结束日期”
:picker-options=“pickerOptions”
/>
其中定义了一个pickerOptions 属性,用于快速选择日期的,在data里面增加一个这样的属性即可。
pickerOptions: {
shortcuts: [{
text: ‘最近一周’,
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit(‘pick’, [start, end]);
}
}, {
text: ‘最近一个月’,
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit(‘pick’, [start, end]);
}
}, {
text: ‘最近三个月’,
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit(‘pick’, [start, end]);
}
}]
},
在页面里面,我们定义了一些分页查询的处理条件和对象,如下所示。
查询表单则定义一个单独的表单对象,如下代码所示:
searchForm: { // 查询表单
UserName: ‘’,
PhoneNumber: ‘’,
creationTime: ‘’
},
页面加载准备好,我们就调用获取列表的数据即可。
created() { // 页面加载后,加载列表数据
this.getlist()
},
获取列表的处理操作如下代码所示,主要就是准备构建好对应的查询参数,然后调用UserApi类的接口查询列表即可。
getlist() { // 列表数据获取
var CreationTimeStart = ‘’
if (this.searchForm.creationTime && this.searchForm.creationTime.length > 0) {
CreationTimeStart = this.parseTime(this.searchForm.creationTime[0], ‘{y}-{m}-{d}’)
}
var CreationTimeEnd = ‘’
if (this.searchForm.creationTime && this.searchForm.creationTime.length > 1) {
CreationTimeEnd = this.parseTime(this.searchForm.creationTime[1], ‘{y}-{m}-{d}’)
}
var param = { // 构造常规的分页查询条件
SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,
MaxResultCount: this.pageinfo.pagesize,
// 过滤条件
UserName: this.searchForm.UserName,
PhoneNumber: this.searchForm.PhoneNumber,
CreationTimeStart: CreationTimeStart,
CreationTimeEnd: CreationTimeEnd
};
// 获取列表,绑定到模型上,并修改分页数量
this.listLoading = true
user.GetAll(param).then(data => {
this.list = data.result.items
this.pageinfo.total = data.result.totalCount
this.listLoading = false
})
},
search() { // 查询列表处理
this.pageinfo.pageindex = 1;// 重置为第一页=
this.getlist()
},
通过列表的查询操作,我们就可以把数据获取到,界面就会得到及时的更新显示了:
// 获取列表,绑定到模型上,并修改分页数量
this.listLoading = true
user.GetAll(param).then(data => {
this.list = data.result.items
this.pageinfo.total = data.result.totalCount
this.listLoading = false
})
而列表主要就是在界面使用el-table组件进行展示的了,如下图所示代码。
el-table绑定了对应的数据,并设置好显示的格式以及选择操作事件、行双击事件等操作。
而el-table里面的显示的列,需要根据我们返回数据的属性名称进行显示,如下代码所示。
而如果我们需要对属性进行特殊的展示,我们就需要使用v-if条件或者过滤器进行处理了。如下是根据不同内容,构建标签显示内容。
已激活
未激活
最后
如果你已经下定决心要转行做编程行业,在最开始的时候就要对自己的学习有一个基本的规划,还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标,然后为之努力,坚持到底。如果你有幸看到这篇文章,希望对你有所帮助,祝你转行成功。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Active === true" type=“success” effect=“dark”>已激活
未激活
最后
如果你已经下定决心要转行做编程行业,在最开始的时候就要对自己的学习有一个基本的规划,还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标,然后为之努力,坚持到底。如果你有幸看到这篇文章,希望对你有所帮助,祝你转行成功。