本博文是基于单体(前后端分离)项目中的管理员模块中显示管理员部分着重梳理一遍使用Springboot在开发项目时实际的流程, 主要是包括Mapper层, Service层, Controller, 前后端整合四个部分,前端部分使用的是Vue2+ElementUI. 并不包括依赖pom.xml配置, yml配置文件配置, 因为这些文件往往可以从之前的项目中得到,实际上并不需要做过多的修改, 就算没有, 实际上这些工作一般是项目经理, 架构师完成.

1.显示管理员列表--Mapper

 需要执行的SQL语句大致是:

SELECT * FROM ams_admin ORDER BY id

 关于查询的字段列表,必须查询的字段有:idusernamephoneemailenable必须排除的字段有:passwordgmt_creategmt_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. 前后端整合部分

  1. 创建新的视图文件(AdminListView.vue
  2. router/index.js配置路由
  3. HomeView.vue的菜单中,添加新的菜单项,使得可以通过菜单访问此视图
  4. 从Element UI官网复制合适的表格代码到视图文件中
  5. 使用服务器端响应的数据,替换从Element UI官网复制过来的模拟数据
  1. 此时,使用的服务器响应的数据也是模拟数据
  1. 调整表格相关的视图设计
  2. methods中添加新的函数,用于向服务器发起请求,并响应服务器端响应的列表数据替换掉表格原本绑定的数据
  3. 通过mounted生命周期函数,使得页面刚刚打开就调用methods中定义的加载列表的数据