SpringBoot单体(前后端分离)业务开发流程

        本博文是基于单体(前后端分离)项目中的管理员模块中显示管理员部分着重梳理一遍使用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. 前后端整合部分

1. 创建新的视图文件（AdminListView.vue）

2. 在router/index.js配置路由

3. 在HomeView.vue的菜单中，添加新的菜单项，使得可以通过菜单访问此视图

4. 从Element UI官网复制合适的表格代码到视图文件中

5. 使用服务器端响应的数据，替换从Element UI官网复制过来的模拟数据

   1. 此时，使用的服务器响应的数据也是模拟数据

6. 调整表格相关的视图设计

7. 在methods中添加新的函数，用于向服务器发起请求，并响应服务器端响应的列表数据替换掉表格原本绑定的数据

8. 通过mounted生命周期函数，使得页面刚刚打开就调用methods中定义的加载列表的数据