1.前言
本章我们实现用户管理功能,但是不会特别详细地介绍每一个功能,如果有同学需要了解可以私信获取源码地址查看。
2.页面展示
一般情况下,每一个系统的用户管理功能都是不相同的,但是公共的功能应该都一样,例如:用户新增、编辑、删除、修改密码等功能。
3. 功能分析
用户信息主要包括基础信息和行为信息:
- 基础信息是静态的:用户的基本属性,例如:姓名、性别、密码、手机号等
- 行为信息是动态的:用户的操作行为的结果或日志的记录
因此我们在对用户设计时需要考虑到这两方面,特别是用户的行为信息,它涉及到权限,然而权限需要仔细地考究。
但截止目前我们的项目是起步阶段,在这里我们需要考虑的是用户静态信息。在用户管理界面的功能如下:
- 用户的添加、编辑
- 删除
- 修改密码
- 状态设置
- 导入(导入功能放到用户管理完成后实现)
用户的添加我们要确定用户的基本属性表单,确定哪些需要填写,哪些是自动生成。
对于删除、修改密码、状态设置这三个功能本项目设计的是可以批量操作。如果有需要单独操作的可以放到表格行操作列。
4.代码示例
虽然Layui官网关闭了,但是代码是开源的,另外也有很多Layui镜像网站,这些网站一样是可以查看的文档,并不影响我们的使用。具体的使用方式可以参考网站文档,如有特殊需求可以在评论区讨论交流。此项只说明一些特殊的地方,至于其他普通的方法,可以参考文档网站或者本项目的源码,详细的功能本章不做详细讨论。
4.1 特殊一
下图代码存在于Student.js文件中,表示了获取学生数据列表。
操作列的操作项,我们不需要写到js代码中,我们使用layui的模板语法。
此项模板语法与本项目后续中的权限设计及视图组件相关而且锲合度非常高。当然此项功能的设计及使用方式我们放到权限设计时再做讨论。
4.2 特殊二
关于新增有个需要说明的地方--提交。关于这个功能,可以在新增页面的表单下方设计提交按钮。而本次设计是采用layer.open自带的确定按钮,当然按钮的文字和样式都是可以调整的,这些可以参考相关文档,如有特殊需求欢迎评论区讨论。
敲黑板!!!
关于官网文档中获取子页面方法的功能中
var iframeWin = window[layero.find('iframe')[0]['name']]
这句代码并不是100%能够获取到子页面对象。特别是在一些特殊情况下,top.layer.open或parent.layer.open时可能获取不到对象。因此您需要使用如下方法:当然最好忘记上面的写法
var iframeWin = $(layero).find("iframe")[0].contentWindow;
其他的删除等功能我们不需要在这里做说明,这些功能没什么特殊点 。如需源码请看文章末尾提示。
5.结语
本章并没有说明全部功能,仅仅说明了一些需要注意的地方,详细功能请获取源码查看。各位同学在阅读实践过程中有看不懂或有其他想法的可以在评论区留言或者私信。教程有帮助的话请各位同学帮忙评论点赞关注三连,感谢大家!
----------------------------------------------------
私信: 校园图书管理系统 可以获取Gitee的链接