本博文是基于单体(前后端分离)项目中的管理员模块中显示管理员部分着重梳理一遍使用Springboot在开发项目时实际的流程, 主要是包括Mapper层, Service层, Controller, 前后端整合四个部分,前端部分使用的是Vue2+ElementUI. 并不包括依赖pom.xml配置, yml配置文件配置, 因为这些文件往往可以从之前的项目中得到,实际上并不需要做过多的修改, 就算没有, 实际上这些工作一般是项目经理, 架构师完成.
1.显示管理员列表--Mapper
需要执行的SQL语句大致是:
SELECT * FROM ams_admin ORDER BY id
关于查询的字段列表,必须查询的字段有:id
、username
、phone
、email
、enable
;必须排除的字段有:password
、gmt_create
、gmt_modified
。
在项目的根包下创建pojo.vo.AdminListItemVO
类,用于封装需要查询的属性:
@Data
public class AdminListItemVO implements Serializable {
private Long id;
private String username;
private String nickname;
private String avatar;
private String phone;
private String email;
private String description;
private Integer enable;
private String lastLoginIp;
private Integer loginCount;
private LocalDateTime gmtLastLogin;
}
在AdminMapper.java
接口中添加抽象方法:
List<AdminListItemVO> list();
在AdminMapper.xml
中配置以上抽象方法映射的SQL语句:
<!-- List<AdminListItemVO> list(); -->
<select id="list" resultMap="ListResultMap">
SELECT
<include refid="ListQueryFields"/>
FROM
ams_admin
ORDER BY
id
</select>
<sql id="ListQueryFields">
<if test="true">
id, username, nickname, avatar, phone,
email, description, enable, last_login_ip, login_count,
gmt_last_login
</if>
</sql>
<resultMap id="ListResultMap" type="cn.tedu.csmall.passport.pojo.vo.AdminListItemVO">
<id column="id" property="id"/>
<result column="username" property="username"/>
<result column="nickname" property="nickname"/>
<result column="avatar" property="avatar"/>
<result column="phone" property="phone"/>
<result column="email" property="email"/>
<result column="description" property="description"/>
<result column="enable" property="enable"/>
<result column="last_login_ip" property="lastLoginIp"/>
<result column="login_count" property="loginCount"/>
<result column="gmt_last_login" property="gmtLastLogin"/>
</resultMap>
在AdminMapperTests.java
测试类中编写并执行测试:
@Test
void testList() {
List<AdminListItemVO> adminList = mapper.list();
log.debug("查询管理员列表,结果集中的数据的数量={}", adminList.size());
for(AdminListItemVO admin : adminList) {
log.debug("{}", admin);
}
}
2. 显示管理员列表--Service
在IAdminService
接口中添加抽象方法:
List<AdminListItemVO> list();
在AdminServiceImpl
实现类中重写并实现以上抽象方法:
@Override
public List<AdminListItemVO> list() {
return adminMapper.list();
}
在AdminServiceTests
中编写并执行测试:
@Test
void testList() {
List<AdminListItemVO> adminList = service.list();
log.debug("查询管理员列表,结果集中的数据的数量={}", adminList.size());
for(AdminListItemVO admin : adminList) {
log.debug("{}", admin);
}
}
3. 显示管理员列表--Controller
在AdminController.java
中添加处理请求的方法:
// http://localhost:9081/admins
@GetMapping("")
@ApiOperation("查询管理员列表")
@ApiOperationSupport(order = 400)
public JsonResult<List<AdminListItemVO>> list() {
List<AdminListItemVO> list = adminService.list();
return JsonResult.ok(list);
}
完成后,启动项目,尝试向此路径发起请求,将得到类似如下结果:
{
"state": 20000,
"message": null,
"data": [
{
"id": 1,
"username": "root",
"nickname": "root",
"avatar": null,
"phone": null,
"email": "root@qq.com",
"description": "最高管理员",
"enable": 1,
"lastLoginIp": null,
"loginCount": 0,
"gmtLastLogin": null
},
{
"id": 2,
"username": "super_admin",
"nickname": "administrator",
"avatar": null,
"phone": null,
"email": "admin@qq.com",
"description": "超级管理员",
"enable": 1,
"lastLoginIp": null,
"loginCount": 0,
"gmtLastLogin": null
},
{
"id": 3,
"username": "nobody",
"nickname": "无名",
"avatar": null,
"phone": null,
"email": "liucs@qq.com",
"description": null,
"enable": 0,
"lastLoginIp": null,
"loginCount": 0,
"gmtLastLogin": null
}
]
}
4. 前后端整合部分
- 创建新的视图文件(
AdminListView.vue
) - 在
router/index.js
配置路由 - 在
HomeView.vue
的菜单中,添加新的菜单项,使得可以通过菜单访问此视图 - 从Element UI官网复制合适的表格代码到视图文件中
- 使用服务器端响应的数据,替换从Element UI官网复制过来的模拟数据
- 此时,使用的服务器响应的数据也是模拟数据
- 调整表格相关的视图设计
- 在
methods
中添加新的函数,用于向服务器发起请求,并响应服务器端响应的列表数据替换掉表格原本绑定的数据 - 通过
mounted
生命周期函数,使得页面刚刚打开就调用methods
中定义的加载列表的数据