spring boot mysql增删改查基于springboot的增删改查

转载

架构领航员 2024-01-08 19:02:35

文章标签 增删改查 spring boot bc 添加用户 html 文章分类 spring boot 后端开发

八、基于Spring Boot实现的增删改查

这里依然是基于表SystemUserInfo和之前整合的持久层来实现的！

页面大概长这个样子，所有操作都在页面中进行：

spring boot mysql增删改查基于springboot的增删改查_添加用户

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/pagination.css"/>
    <script src="./scripts/pagination.js"></script>
    <script src="./scripts/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //当前页
            var pageIndex = '[[${pageInfo.pageNum}]]';
            //总记录数
            var total = '[[${pageInfo.total}]]';
            //当前页的数量
            var pageSize = '[[${pageInfo.pageSize}]]';
            //总页数
            var pages = '[[${pageInfo.pages}]]';
            new Pagination({
                element: '#pages',
                type: 1,
                pageIndex: pageIndex,
                pageSize: pageSize,
                total: total,
                //是否跳转
                jumper: true,
                singlePageHide: false,
                prevText: '上一页',
                nextText: '下一页',
                disabled: true,
                currentChange: function(index) {
                    $("#pageNum").val(index);
                    $("#userForm").submit();
                }
            });
        });
        function resetForm() {
            location.href = "selectAllByJS";
        }
    </script>
</head>
<body>
<form action="selectAllByJS" id="userForm" method="post" style="margin: 30px auto;width: 600px">
    <input type="hidden" name="pageNum" id="pageNum">
    登录名：<input type="text" name="userinfoLoginid" id="userinfoLoginid" th:value="${systemUserinfo.userinfoLoginid}"/><br><br>
    性别：<input type="radio" name="userinfoSex" th:checked="${userinfoSex} == 男" class="userinfoSex" value="男"/>男
         <input type="radio" name="userinfoSex" th:checked="${userinfoSex} == 女" class="userinfoSex" value="女"/>女<br><br>
    邮箱：<input type="text" name="userinfoEmail" id="userinfoEmail" th:value="${systemUserinfo.userinfoEmail}"/><br><br>
    电话：<input type="text" name="userinfoMobile" id="userinfoMobile" th:value="${systemUserinfo.userinfoMobile}"/><br><br>
    角色：
    <select name="userinfoRole">
        <option value="">--请选择--</option>
        <option th:each="role:${listRole}" th:value="${role.roleId}" th:text="${role.roleName}" th:selected="${systemUserinfo.userinfoRole}==${role.roleId}"></option>
    </select>
    <br><br>
    <input type="submit" value="查询"/>
    <input type="button" value="重置" onclick="resetForm()"/>
    <input type="button" value="添加用户" onclick="location.href='toAddUserInfo'"/>
</form>
<span style="color: red" th:text="${msg}"></span>
<span style="color: red" th:text="${MSG}"></span>
<table border="1" cellpadding="0" cellspacing="0" width="900px" style="margin: 50px auto;text-align: center">
    <tr>
        <td>编号</td>
        <td>登录名</td>
        <td>姓名</td>
        <td>性别</td>
        <td>角色</td>
        <td>登录密码</td>
        <td>登录状态</td>
        <td>邮箱</td>
        <td>电话</td>
        <td>操作</td>
    </tr>
    <!--/*@thymesVar id="list" type=""*/-->
    <tr th:each="user:${pageInfo.list}">
        <td th:text="${user.userinfoUid}"></td>
        <td th:text="${user.userinfoLoginid}"></td>
        <td th:text="${user.userinfoName}"></td>
        <td th:text="${user.userinfoSex}"></td>
        <td th:text="${user.systemRole.roleName}"></td>
        <td th:text="${user.userinfoPassword}"></td>
        <td th:text="${user.userinfoStatus}"></td>
        <td th:text="${user.userinfoEmail}"></td>
        <td th:text="${user.userinfoMobile}"></td>
        <td>
            <a th:href="@{/deleteUserInfo(userinfoUid=${user.userinfoUid})}">删除</a> 
            <a th:href="@{/toUpdateUserInfo(userinfoUid=${user.userinfoUid})}">修改</a>
        </td>
    </tr>
</table>
<!--这个div里的内容是由前端框架利用js生成的-->
<div id="pages"></div>
</body>
</html>

话不多说，下面开始造吧…

1. 添加用户信息

点击添加用户按钮，会发送toAddUserInfo请求，然后跳转到addUserinfo页面：

/**
 * 到添加用户信息界面
 * @param request
 * @return
 */
@RequestMapping(method = RequestMethod.GET,value = "/toAddUserInfo")
public String toAddUserInfo(HttpServletRequest request){
    List<SystemRole> listRole = systemRoleService.selectAll();
    request.setAttribute("listRole",listRole);
    return "ebuy/addUserinfo";
}

在addUserinfo页面添加用户信息：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加用户信息</title>
</head>
<body>
<div style="color: red" th:text="${msg}"></div>
<div style="width: 700px;margin: 50px auto;">
    <form method="post" action="doAddUserInfo">
        登录名：<input type="text" name="userinfoLoginid"  /><br/><br/>
        姓名：<input type="text" name="userinfoName"  /><br/><br/>
        密码：<input type="password" name="userinfoPassword"  /><br/><br/>
        性别：
        <input type="radio" name="userinfoSex" value="男" />男
        <input type="radio" name="userinfoSex" value="女"/> 女<br/><br/>
        邮箱：<input type="text" name="userinfoEmail" /><br/><br/>
        电话：<input type="text" name="userinfoMobile" /><br/><br/>
        角色：
        <select name="userinfoRole" >
            <option value="">--请选择--</option>
            <option th:each="role:${listRole}" th:value="${role.roleId}" th:text="${role.roleName}"></option>
        </select>
        <br/><br/>
        <input type="submit" value="保存"/>
    </form>
</div>
</body>
</html>

点击保存即提交表单，发送doAddUserInfo请求：

/**
 * 添加用户信息操作
 * @param systemUserinfo
 * @param request
 * @return
 */
@RequestMapping(method = RequestMethod.POST,value = "/doAddUserInfo")
public String doAddUserInfo(SystemUserinfo systemUserinfo,HttpServletRequest request){
    int r = systemUserinfoService.insert(systemUserinfo);
    if (r == 1){
        return "redirect:/selectAllByJS";
    }
    request.setAttribute("msg","添加用户失败，请重新添加！");
    return "ebuy/addUserinfo";
}

添加成功后即可跳转到首页了！

映射文件中的sql语句：

<insert id="insert" parameterType="cn.boot.pojo.SystemUserinfo" >
  <selectKey keyProperty="userinfoUid" keyColumn="USERINFO_UID" resultType="java.lang.String" order="BEFORE">
    select seq_user_id.nextval from dual
  </selectKey>
  insert into SYSTEM_USERINFO (USERINFO_UID, USERINFO_LOGINID, USERINFO_NAME, 
    USERINFO_PASSWORD, USERINFO_SEX, USERINFO_EMAIL, 
    USERINFO_MOBILE, USERINFO_STATUS, USERINFO_ROLE
    )
  values (#{userinfoUid,jdbcType=VARCHAR}, #{userinfoLoginid,jdbcType=VARCHAR}, #{userinfoName,jdbcType=VARCHAR}, 
    #{userinfoPassword,jdbcType=VARCHAR}, #{userinfoSex,jdbcType=CHAR}, #{userinfoEmail,jdbcType=VARCHAR}, 
    #{userinfoMobile,jdbcType=VARCHAR}, #{userinfoStatus,jdbcType=DECIMAL}, #{userinfoRole,jdbcType=VARCHAR}
    )
</insert>

说明：
这里的角色id会根据角色表中的角色id匹配到相应的角色名！

2. 删除用户信息

点击删除用户按钮，会发送deleteUserInfo请求，deleteUserInfo请求中绑定有当前用户的id，可直接删除：

/**
* 删除用户信息
* @param userinfoUid
* @return
*/
@RequestMapping(method = RequestMethod.GET,value = "/deleteUserInfo")
public String deleteUserInfo(String userinfoUid){
   int r = systemUserinfoService.deleteByPrimaryKey(userinfoUid);
   if (r == 1){
       return "redirect:/selectAllByJS";
   }
   return "redirect:/selectAllByJS";
}

删除成功后即可跳转到首页啦！

映射文件中的sql语句：

<delete id="deleteByPrimaryKey" parameterType="java.lang.String" >
  delete from SYSTEM_USERINFO
  where USERINFO_UID = #{userinfoUid,jdbcType=VARCHAR}
</delete>

3. 修改用户信息

点击修改按钮，会发送toUpdateUserInfo请求，toUpdateUserInfo请求中同样绑定有当前用户的id，然后会跳转到updateUserInfo页面：

/**
 * 到更新用户页面
 * @param userinfoUid
 * @param request
 * @return
 */
@RequestMapping(method = RequestMethod.GET,value = "/toUpdateUserInfo")
public String toUpdateUserInfo(String userinfoUid,HttpServletRequest request){
    SystemUserinfo systemUserinfo = systemUserinfoService.selectByPrimaryKey(userinfoUid);
    List<SystemRole> listRole = systemRoleService.selectAll();
    request.setAttribute("listRole",listRole);
    request.setAttribute("systemUserinfo",systemUserinfo);
    return "ebuy/updateUserInfo";
}

在updateUserInfo页面中填写修改的信息：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>更新用户信息</title>
</head>
<body>
<div style="color: red" th:text="${msg}"></div>
<div style="width: 700px;margin: 50px auto;">
    <form method="post" action="doUpdateUserInfo">
        <input type="hidden" id="userinfoUid" name="userinfoUid" th:value="${systemUserinfo.userinfoUid}"/>
        登录名：<input type="text" id="userinfoLoginid" name="userinfoLoginid" th:value="${systemUserinfo.userinfoLoginid}"/><br/><br/>
        姓名：<input type="text" id="userinfoName" name="userinfoName" th:value="${systemUserinfo.userinfoName}"/><br/><br/>
        密码：<input type="password" id="userinfoPassword" name="userinfoPassword"  th:value="${systemUserinfo.userinfoPassword}"/><br/><br/>
        性别：
        <input type="radio" name="userinfoSex" value="男" th:checked="${systemUserinfo.userinfoSex}==男"/>男
        <input type="radio" name="userinfoSex" value="女" th:checked="${systemUserinfo.userinfoSex}==女"/>女<br/><br/>
        邮箱：<input type="text" name="userinfoEmail" th:value="${systemUserinfo.userinfoEmail}"/><br/><br/>
        电话：<input type="text" name="userinfoMobile" th:value="${systemUserinfo.userinfoMobile}"/><br/><br/>
        角色：
        <select name="userinfoRole" >
<!--            <option value="">--请选择--</option>-->
            <option th:each="role:${listRole}" th:value="${role.roleId}" th:text="${role.roleName}"></option>
        </select>
        <br/><br/>
        <input type="submit" value="更新"/>
    </form>
</div>
</body>
</html>

点击更新，提交表单即发送doUpdateUserInfo请求：

/**
 * 更新用户信息操作
 * @param systemUserinfo
 * @param request
 * @return
 */
@RequestMapping(method = RequestMethod.POST,value = "/doUpdateUserInfo")
public String doUpdateUserInfo(SystemUserinfo systemUserinfo,HttpServletRequest request){
    int r = systemUserinfoService.updateByPrimaryKey(systemUserinfo);
    if (r > 0){
        return "redirect:/selectAllByJS";
    }
    request.setAttribute("msg","更新用户信息失败！");
    return "ebuy/updateUserInfo";
}

修改成功后跳转到首页啦！

映射文件中的sql语句：

<update id="updateByPrimaryKey" parameterType="cn.boot.pojo.SystemUserinfo" >
  update SYSTEM_USERINFO
  <set>
    <if test="userinfoLoginid!=null and userinfoLoginid!=''">
      USERINFO_LOGINID=#{userinfoLoginid},
    </if>
    <if test="userinfoName!=null and userinfoName!=''">
      USERINFO_NAME=#{userinfoName},
    </if>
    <if test="userinfoPassword!=null and userinfoPassword!=''">
      USERINFO_PASSWORD=#{userinfoPassword},
    </if>
    <if test="userinfoSex!=null and userinfoSex!=''">
      USERINFO_SEX=#{userinfoSex},
    </if>
    <if test="userinfoEmail!=null and userinfoEmail!=''">
      USERINFO_EMAIL=#{userinfoEmail},
    </if>
    <if test="userinfoMobile!=null and userinfoMobile!=''">
      USERINFO_MOBILE=#{userinfoMobile},
    </if>
    <if test="userinfoStatus!=null and userinfoStatus!=''">
      USERINFO_STATUS=#{userinfoStatus},
    </if>
    <if test="userinfoRole!=null and userinfoRole!=''">
      userinfo_Role=#{userinfoRole}
    </if>
  </set>
  where USERINFO_UID = #{userinfoUid,jdbcType=VARCHAR}
</update>

说明：
在修改信息的页面加入了th:value标签是为了修改者不用再重新输入一遍相关的信息，而是只用修改需要修改额地方即可！

4. 查询用户信息（按条件查找）

在form中选择要查询的条件，点击查询即可发送selectAllByJS请求：

/**
 * 分页实现 -- 通过前端js实现条件查询
 *
 * @param request
 * @param pageNum
 * @return
 */
@RequestMapping("/selectAllByJS")
public String selectAllByJS(SystemUserinfo systemUserinfo,HttpServletRequest request, @RequestParam(name = "pageNum", defaultValue = "1") int pageNum,@RequestParam(name = "pageSize",defaultValue = "4")int pageSize) {
    PageInfo<SystemUserinfo> pageInfo = systemUserinfoService.selectAll2(systemUserinfo,pageNum, pageSize);
    request.setAttribute("pageInfo", pageInfo);
    request.setAttribute("systemUserinfo",systemUserinfo);

    List<SystemRole> listRole=systemRoleService.selectAll();
    request.setAttribute("listRole",listRole);
    return "ebuy/selectPage";
}

查询后即可在当前页面显示符合条件的信息，当点击重置时会刷新页面，显示所有的信息。