Day84.尚好房 — 功能提取、页面封装、jquery-validate表单校验、完成角色 | 用户管理模块

已于 2022-06-28 22:50:47 修改
阅读量389 收藏
点赞数
分类专栏： 尚好房 文章标签： redis
于 2022-06-18 10:33:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a111042555/article/details/125344177
版权

目录

角色管理模块

一、角色管理代码封装  ★

1、封装BaseDao

2、封装BaseDao

 3、封装BaseServiceImpl

4、封装Controller层

二、前端页面封装

1、封装头部css与js引用

2、提取分页信息

三、前端数据校验 (jQuery Validate 插件 )

代码引入

用户管理模块

一、AdminDao层

二、AdminService层

三、AdminController层

四、用户管理列表页面 (layerDate)

五、用户管理新增页面

六、用户管理修改页面

角色管理模块

前面我做了角色管理，其实就是一个基本的针对单表的增删改查，后续可能还有很多针对单表的增删改查，因此我们把上面的增删改查做一个全面的封装，方便后续复用。

服务器端：dao层、service层与controller层对应的增删改查我可以提取封装为base类，后续直接继承，方便后续复用

前端：页面头部css与js、分页等，可以通过Thymeleaf代码片段 (th:fragment) 提取出来，页面包含进去 (th:insert) 即可

一、角色管理代码封装  ★

1、封装BaseDao

在common-util模块添加：BaseDao

//通用的Base接口
public interface BaseDao <T>{

    Integer insert(T t);
    //Serializable 基本数据类型都继承了
    T selectById(Serializable id);

    Integer update(T t);

    void delete(Serializable id);

    Page<T> findPage(Map<String, Object> filters);

}

RoleDao 只保留独有的方法

@Repository
public interface RoleDao extends BaseDao<Role> {
    //模块特有的方法，声明到子接口中，共用的方法声明在父接口中
    List<Role> findAll();

    //通用的增伤改查，分页封装到了基础BaseDao
}

2、封装BaseDao

在common-util模块添加接口：BaseService

public interface BaseService<T> {
    Integer insert(T t);

    void delete(Serializable id);

    void update(T t);

    T getById(Serializable id);

    PageInfo<T> findPage(Map<String, Object> filters);
}

 RuleService只保留独有功能

public interface RoleService extends BaseService<Role> {
    List<Role> findAll();
}

 3、封装BaseServiceImpl

public abstract class BaseServiceImpl<T> implements BaseService<T>{
    //用于获取真实的Dao
    public abstract BaseDao<T> getEntityDao();
    @Override
    public Integer insert(T t) {
        return getEntityDao().insert(t);
    }
    @Override
    public T getById(Serializable id) {
        return getEntityDao().selectById(id);
    }
    @Override
    public void update(T t) {
        getEntityDao().update(t);
    }
    @Override
    public void delete(Serializable id) {
        getEntityDao().delete(id);
    }
    //分页
    @Override
    public PageInfo<T> findPage(Map<String, Object> filters) {
        //使用工具类进行类型装换，设置默认值，解决空指针(访问首页时没有pageNum参数)
        int pageNum = CastUtil.castInt(filters.get("pageNum"),1);
        int pageSize = CastUtil.castInt(filters.get("pageSize"),1);

        //开启分页功能 (注意检查是否进行依赖、mybatis.xml是否配置)
        //将这两个参数，与当前线程(ThreadLocal)进行绑定，传递给dao层
        PageHelper.startPage(pageNum,pageSize);
        // select 语句，会自动追加limit ?,?  (limit startIndex,pageSize)
        // 公式: startIndex = (pageNum-1)*pageSize

        Page<T> page = getEntityDao().findPage(filters);  //传递查询条件参数
        return new PageInfo(page,5);   //5: 显示的导航页数
    }
}

RuleService 只保留独有方法，将RuleDao传入 gitEntityDao() 方法

@Service
@Transactional
public class RoleServiceImpl extends BaseServiceImpl<Role> implements RoleService {

    @Autowired  //Spring框架提供的依赖注入  先进性byType再进行byName
    //@Resource   //jdk提供的依赖注入注解   先进行byName在进行byType
    RoleDao roleDao;

    @Override
    public List<Role> findAll() {
        return roleDao.findAll();
    }

    @Override
    public BaseDao<Role> getEntityDao() {
        return roleDao;
    }
}

4、封装Controller层

在common-util模块添加：BaseController

封装了转发成功页，和获取提交的分页参数及搜索条件

public class BaseController {

    private final static String PAGE_SUCCESS = "common/successPage";
    //提示信息
    public final static String MESSAGE_SUCCESS = "操作成功！";

    /**
     * 成功页
     * @param message
     * @param request
     */
    protected String successPage(String message, HttpServletRequest request) {
        request.setAttribute("messagePage", StringUtil.isEmpty(message) ? MESSAGE_SUCCESS : message);
        return PAGE_SUCCESS;
    }

    /**
     * 封装页面提交的分页参数及搜索条件
     * @param request
     * @return
     *
     * http://localhost:/role?age=22&age=23&roleName=管理员
     */
    protected Map<String, Object> getFilters(HttpServletRequest request) {
        Enumeration<String> paramNames = request.getParameterNames();
        Map<String, Object> filters = new TreeMap();
        while(paramNames != null && paramNames.hasMoreElements()) {
            String paramName = (String)paramNames.nextElement();
            String[] values = request.getParameterValues(paramName);
            if (values != null && values.length != 0) {
                if (values.length > 1) {
                    filters.put(paramName, values);
                } else {
                    filters.put(paramName, values[0]);
                }
            }
        }

        //如果没有提交请求参数，给就这两个参数赋予默认值。
        if(!filters.containsKey("pageNum")) {
            filters.put("pageNum", 1);
        }
        if(!filters.containsKey("pageSize")) {
            filters.put("pageSize", 2);
        }
        return filters;
    }

RoleController，因为各模块跳转的页面不同，所以变化表不大 

@Controller
@RequestMapping("/role")
public class RoleController extends BaseController {

    private final static String PAGE_INDEX = "role/index";
    private static final String PAGE_CREATE = "role/create";
    private static final String ACTION_LIST = "redirect:/role"; //重定向
    //private static final String PAGE_SUCCESS = "common/successPage";
    private static final String PAGE_EDIT = "role/edit";

    @Autowired
    RoleService roleService;

    //删除
    @RequestMapping("/delete/{id}")
    public String delete(@PathVariable Long id,ModelMap model){
        roleService.delete(id);
        return ACTION_LIST;
    }

    //修改
    @RequestMapping(value="/update")
    public String update(Map map,Role role,HttpServletRequest request) {
        roleService.update(role);

        return this.successPage("修改成功",request);
    }

    //前往修改页面
    @RequestMapping("/edit/{id}")
    public String edit(@PathVariable Long id,ModelMap model){
        Role role = roleService.getById(id);
        model.addAttribute("role",role);
        return PAGE_EDIT;
    }


    @RequestMapping("/save")
    public String save(Role role, Map map,HttpServletRequest request){  //springMVC根据反射创建Bean,调用参数名称的set方法,将参数注入到对象
        roleService.insert(role);
        //Map 和 ModelMap 本质相同，map调用put即可
        return this.successPage("添加成功",request);
    }

    //前往新增页面
    @RequestMapping("/create")
    public String create(){

        return PAGE_CREATE;
    }

    /*
     * 分页查询角色列表
     *   根据条件进行查询
     *      roleName = ''
     *      pageNum = 1 隐藏域
     *      pageSize = 10 y隐藏域
     */
    @RequestMapping
    public String index(HttpServletRequest request,Map map) {
        Map<String, Object> filters = getFilters(request);
        //分页对象，将集合数据，pageNum、pageSize、total、pages等
        PageInfo<Role> pageInfo = roleService.findPage(filters);

        //用于数据回显
        map.put("page",pageInfo);
        map.put("filters",filters);
        return PAGE_INDEX;
    }
}

二、前端页面封装

1、封装头部css与js引用

在common下新建：head.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<!-- th:fragment 代码片段 -->
<div th:fragment="head">
  <title>权限管理系统</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
  <meta name="renderer" content="webkit"/>
  <meta http-equiv="Cache-Control" content="no-siteapp" />

  <link rel="shortcut icon" th:href="@{favicon.ico}" />
  <link rel="shortcut icon" th:href="@{/static/favicon.ico}">
  <link th:href="@{/static/css/bootstrap.min.css?v=3.3.7}" rel="stylesheet">
  <link th:href="@{/static/css/font-awesome.css?v=4.4.0}" rel="stylesheet">

  <!-- Data Tables -->
  <link th:href="@{/static/css/plugins/dataTables/dataTables.bootstrap.css}" rel="stylesheet">

  <link th:href="@{/static/css/animate.css}" rel="stylesheet">
  <link th:href="@{/static/css/style.css?v=4.1.0}" rel="stylesheet">

  <!-- 全局js -->
  <script th:src="@{/static/js/jquery.min.js?v=2.1.4}"></script>
  <script th:src="@{/static/js/bootstrap.min.js?v=3.3.7}"></script>
  <script th:src="@{/static/js/plugins/jeditable/jquery.jeditable.js}"></script>
  <!-- Data Tables -->
  <script th:src="@{/static/js/plugins/dataTables/jquery.dataTables.js}"></script>
  <script th:src="@{/static/js/plugins/dataTables/dataTables.bootstrap.js}"></script>

  <!-- 弹出层js -->
  <script th:src="@{/static/js/plugins/layer/layer.min.js}"></script>
  <script th:src="@{/static/js/myLayer.js}"></script>

  <!--表单校验-->
  <script th:src="@{/static/js/plugins/validate/jquery.validate.min.js}" type="text/javascript" ></script>
  <script th:src="@{/static/js/plugins/validate/messages_zh.min.js}" type="text/javascript" ></script>

  <!--日历小组件-->
  <script th:src="@{/static/js/plugins/layer/laydate/laydate.js}"></script>
</div>
</body>
</html>

Rule 其他页面头部改为

<!--头部js与css提取-->
<head th:include="common/head :: head"></head>

2、提取分页信息

在common下新建：pagination.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--分页条-->
<div class="row" th:fragment="pagination">

    <!--隐藏了当前页、总页数-->
    <input type="hidden" name="pageSize" id="pageSize" th:value="${page.pageSize}"/>
    <input type="hidden" name="pageNum" id="pageNum" th:value="${page.pageNum}"/>

    <div class="col-sm-6">
        <div class="dataTables_info" id="DataTables_Table_0_info" role="alert" aria-live="polite" aria-relevant="all">
            当前第<span th:text="${page.pageNum }"></span>页/共<span th:text="${page.pages }"></span>页&nbsp;&nbsp;共<span
                id="pageTotal" th:text="${page.total }"></span>条记录&nbsp;&nbsp;
        </div>
    </div>
    <div class="col-sm-6">
        <div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
            <ul class="pagination">
                <!--首页 disabled样式: 禁止点击-->
                <li class="paginate_button previous" th:if="${!page.isFirstPage}"><a
                        href="javascript:document.forms.ec.pageNum.value=1;document.forms.ec.submit();">首页</a></li>
                <li class="paginate_button previous disabled" th:if="${page.isFirstPage}"><a href="javascript:">首页</a></li>
                <!--上一页-->
                <li class="paginate_button previous" th:if="${!page.isFirstPage}"><a
                        th:href="'javascript:document.forms.ec.pageNum.value='+${page.prePage}+';document.forms.ec.submit();'">上一页</a>
                </li>
                <li class="paginate_button previous disabled" th:if="${page.isFirstPage}"><a
                        href="javascript:">上一页</a></li>
                <!--页数循环-->
                <li th:each="i : ${page.navigatepageNums}"
                    th:class="${i == page.pageNum } ? 'paginate_button active' : 'paginate_button'">
                    <a th:href="'javascript:document.forms.ec.pageNum.value='+${i}+';document.forms.ec.submit();'"><span
                            th:text="${i}"></span></a>
                </li>
                <!--下一页-->
                <li class="paginate_button next" th:if="${!page.isLastPage}"><a
                        th:href="'javascript:document.forms.ec.pageNum.value='+${page.nextPage}+';document.forms.ec.submit();'">下一页</a>
                </li>
                <li class="paginate_button next disabled" th:if="${page.isLastPage}"><a href="javascript:">下一页</a>
                </li>
                <!--尾页-->
                <li class="paginate_button next" th:if="${!page.isLastPage}"><a
                        th:href="'javascript:document.forms.ec.pageNum.value='+${page.pages}+';document.forms.ec.submit();'">尾页</a>
                </li>
                <li class="paginate_button next disabled" th:if="${page.isLastPage}"><a href="javascript:">尾页</a></li>
            </ul>
        </div>
    </div>
</div>

</body>
</html>

RuleIndex 改为

<!--分页片段提取-->
<div class="row" th:include="common/pagination :: pagination"></div>

三、前端数据校验 (jQuery Validate 插件 )

前端校验我们选择：jQuery Validate 插件

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。

参考文档：jQuery Validate | 菜鸟教程

序号规则描述
1required:true必须输入的字段。
2remote:"check.php"使用 ajax 方法调用 check.php 验证输入值。
3email:true必须输入正确格式的电子邮件。
4url:true必须输入正确格式的网址。
5date:true必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6dateISO:true必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7number:true必须输入合法的数字（负数，小数）。
8digits:true必须输入整数。
9creditcard:必须输入合法的信用卡号。
10equalTo:"#field"输入值必须和 #field 相同。
11accept:输入拥有合法后缀名的字符串（上传文件的后缀）。
12maxlength:5输入长度最多是 5 的字符串（汉字算一个字符）。
13minlength:10输入长度最小是 10 的字符串（汉字算一个字符）。
14rangelength:[5,10]输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15range:[5,10]输入值必须介于 5 和 10 之间。
16max:5输入值不能大于 5。
17min:10输入值不能小于 10。

代码引入

1、在common/head.html  导入 js 库

<script th:src="@{/static/js/plugins/validate/jquery.validate.min.js}" type="text/javascript" ></script>
<script th:src="@{/static/js/plugins/validate/messages_zh.min.js}" type="text/javascript" ></script>

2、新增create.html 添加校验代码

<script type="text/javascript">
    $(function(){
        $('#ec').validate({
            rules:{
                roleName:"required",
                description:"required"
            },
            messages:{
                roleName:"角色必须输入",
                description:"描述必须输入"
            },
            submitHandler: function(form) {
                $(form).find(":submit").attr("disabled", true).text("正在提交...");
                form.submit();
            }
        });
    });
</script>

3、修改edit.html 和 create.html一致

用户管理模块

由于封装了通用代码，代码得到完全复用，将大大提高效率。 

一、AdminDao层

由于上文中封装了通用代码，我们只需要继承，然后xml 文件实现Sql语句即可

@Repository
public interface AdminDao extends BaseDao<Admin> {
    
}

AdminDao.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.atguigu.dao.AdminDao">

    <!--映射: (ORM) Object Relationship Mapping-->
    <resultMap id="Admin" type="Admin">
        <id property="id" column="id"></id>
        <result column="username" property="username" ></result>
        <result column="password" property="password" ></result>
        <result column="name" property="name" ></result>
        <result column="phone" property="phone" ></result>
        <result column="head_url" property="headUrl" ></result>
        <result column="description" property="description" ></result>
        <result column="create_time" property="createTime" ></result>
        <result column="update_time" property="updateTime" ></result>
        <result column="is_deleted" property="isDeleted" ></result>
    </resultMap>

    <!--复用查询的字段-->
    <sql id="column">
               id,username,password,name,phone,head_url,
               description,create_time,update_time,is_deleted
    </sql>


    <!--添加 主键回填-->
    <insert id="insert" useGeneratedKeys="true" keyProperty="id">
        insert into acl_admin(username,password,name,phone,head_url,description)
        values (#{username},#{password},#{name},#{phone},#{headUrl},#{description})
    </insert>


    <!--根据id查询-->
    <select id="selectById" resultType="Admin">
        select <include refid="column"></include>
        from acl_admin
        where id = #{id} and is_deleted = 0;
    </select>

    <!--修改-->
    <update id="update">
        update acl_admin
        <set>
            <if test="username!=null and username!=''">
                username = #{username},
            </if>
            <if test="password!=null and password!=''">
                password = #{password},
            </if>
            <if test="phone!=null and phone!=''">
                phone = #{phone},
            </if>
            <if test="name!=null and name!=''">
                name = #{name},
            </if>
            <if test="headUrl!=null and headUrl!=''">
                head_url = #{headUrl},
            </if>
            <if test="description!=null and description!=''">
                description = #{description},
            </if>
            update_time = now()
        </set>
        where id = #{id}
    </update>

    <!--软删除：就是修改表的is_deleted字段值： 0 表示正常    1 表示被删除-->
    <delete id="delete">
        update acl_admin set is_deleted = 1 ,update_time = now() where id = #{id}
    </delete>

    <!--功能提取  模糊查询也可写成"%"#{ename}"%"，concat函数用于拼接字符-->
    <sql id="where">
        <where>
            <if test="name!=null and name!=''">
                and name = #{name}
            </if>
            <if test="username!=null and username!=''">
                and username = #{username}
            </if>
            <if test="phone!=null and phone!=''">
                and phone = #{phone}
            </if>
            <if test="createTimeBegin!=null and createTimeBegin!=''">
                and create_time >= #{createTimeBegin}
            </if>
            <if test="createTimeEnd!=null and createTimeEnd!=''">
                and create_time &lt;= #{createTimeEnd}
            </if>
            and is_deleted = 0
        </where>
    </sql>

    <!--带查询条件的 分页插件 查询-->
    <select id="findPage" resultMap="Admin">
        select <include refid="column"></include>
        from acl_admin
        <include refid="where"></include>
        order by id desc
    </select>

</mapper>

二、AdminService层

public interface AdminService extends BaseService<Admin> {

}
@Service
@Transactional
public class AdminServiceImpl extends BaseServiceImpl<Admin> implements AdminService {

    @Autowired
    AdminDao adminDao;

    @Override
    public BaseDao<Admin> getEntityDao() {
        return adminDao;
    }
}

三、AdminController层

复制 RuleController，ctrl + r  查找替换，将Rule，rule替换为Admin、admin即可

package com.atguigu.controller;

import com.atguigu.base.BaseController;
import com.atguigu.entity.Admin;
import com.atguigu.service.AdminService;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import java.util.Map;


// ctrl + r  查找替换
@Controller
@RequestMapping("/admin")
public class AdminController extends BaseController {

    private static final String PAGE_INDEX = "admin/index";
    private static final String PAGE_CREATE = "admin/create";
    private static final String ACTION_LIST = "redirect:/admin";
    private static final String PAGE_EDIT = "admin/edit";

    @Autowired
    AdminService adminService;


    @RequestMapping("/delete/{id}")
    public String delete(@PathVariable("id") Long id){
        adminService.delete(id); //返回结果表示sql语句对数据库起作用的行数
        return ACTION_LIST;
    }

    @RequestMapping("/update")
    public String update(Admin admin,Map map,HttpServletRequest request){ //springMVC框架根据反射创建bean对象，并调用参数名称的set方法，将参数封装到bean对象中。
        adminService.update(admin);
        return this.successPage("修改成功",request);
    }

    @RequestMapping("/edit/{id}")
    public String edit(@PathVariable("id") Long id, Map map){
        Admin admin = adminService.getById(id);
        map.put("admin",admin);
        return PAGE_EDIT;
    }

    @RequestMapping("/save")
    public String save(Admin admin,Map map,HttpServletRequest request){
        admin.setHeadUrl("http://47.93.148.192:8080/group1/M00/03/F0/rBHu8mHqbpSAU0jVAAAgiJmKg0o148.jpg");
        adminService.insert(admin);
        return this.successPage("添加成功",request);
    }

    @RequestMapping("/create")
    public String create(){
        return PAGE_CREATE;
    }

    /**
     * 分页查询
     *      根据查询条件进行查询
     *          adminName = ''
     *          pageNum = 1   隐藏域
     *          pageSize = 10  隐藏域
     * @param map
     * @return
     */
    @RequestMapping
    public String index(HttpServletRequest request,Map map){
        Map<String,Object> filters =  getFilters(request);
        //分页对象，将集合数据，pageNum,pageSize,pages,total等
        PageInfo<Admin> pageInfo = adminService.findPage(filters);
        map.put("page",pageInfo);
        map.put("filters",filters);
        return PAGE_INDEX;
    }

}

批量替换时，匹配大小写


这里出错 批量替换时注意匹配条件，注解映射路径可能不会被替换

四、用户管理列表页面 (layerDate)

需用到日期选择器layerDate，需引入laydate.js文件 (Hplus，参考 hplus-master/index.html )

<script th:src="@{/static/js/plugins/layer/laydate/laydate.js}"></script>

创建admin文件夹，用户管理相关的页面都放在该文件夹下面。

直接复制角色管理的列表、新增和修改页面，调整页面属性即可

index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head :: head"></head>
<body class="gray-bg">
<form id="ec" action="/admin" method="post">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <table class="table form-table margin-bottom10">
                        <tr>
                            <td>
                                <input type="text" name="name" th:value="${#maps.containsKey(filters,'name')}? ${filters.name}:''" placeholder="用户名称" class="input-sm form-control"/>
                            </td>
                            <td>
                                <input type="text" name="username" th:value="${#maps.containsKey(filters,'username')}? ${filters.username}:''" placeholder="账号名称" class="input-sm form-control"/>
                            </td>
                            <td>
                                <input type="text" name="phone" th:value="${#maps.containsKey(filters,'phone')}? ${filters.phone}:''" placeholder="手机号码" class="input-sm form-control"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" name="createTimeBegin" th:value="${#maps.containsKey(filters, 'createTimeBegin')} ? ${filters.createTimeBegin} : ''" placeholder="开始日期：YYYY-MM-DD" class="input-sm form-control" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})"/>
                            </td>
                            <td>
                                <input type="text" name="createTimeEnd" th:value="${#maps.containsKey(filters, 'createTimeEnd')} ? ${filters.createTimeEnd} : ''" placeholder="截止日期：YYYY-MM-DD" class="input-sm form-control" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})"/>
                            </td>
                            <td>
                            </td>
                        </tr>
                    </table>
                    <div>
                        <!--搜索框 解决了在第二页查询时，表单回显引起的BUG-->
                        <button type="submit" class="btn btn-sm btn-primary create" onclick="javascript:document.forms.ec.pageNum.value=1;">搜索</button>
                        <button type="button" class="btn btn-sm btn-primary create">新增</button>
                        <button type="button" class="btn btn-sm btn-primary" onclick="javascript:window.location.reload()">刷新</button>
                    </div>

                    <table class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>头像</th>
                            <th>账号名称</th>
                            <th>用户名称</th>
                            <th>手机号码</th>
                            <th>描述</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr class="gradeX" th:each="item,it : ${page.list}">
                                <td class="text-center" th:text="${it.count}">11</td>
                                <td>
                                    <img th:src="${item.headUrl}" style="width: 60px; height: 60px;">
                                </td>
                                <td th:text="${item.username}">33</td>
                                <td th:text="${item.name}">33</td>
                                <td th:text="${item.phone}">33</td>
                                <td th:text="${item.description}">33</td>
                                <td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}" >33</td>
                                <td>
                                    <!--将id值赋值给临时属性，便于jQuery获取id-->
                                    <a class="edit" th:attr="data-id=${item.id}">修改</a>
                                    <a class="delete" th:attr="data-id=${item.id}">删除</a>
                                </td>
                            </tr>


                        </tbody>
                    </table>

                    <div class="row" th:include="common/pagination :: pagination"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</form>

<!--数据校验-->
<script th:inline="javascript">

    $(function(){
        $(".create").on("click",function () {
           opt.openWin("/admin/create","新增",580,430)
        })

        $(".edit").on("click",function () {
            var id = $(this).attr("data-id");
            opt.openWin("/admin/edit/"+id,"修改",580,430)
        });

        $(".delete").on("click",function () {
            var id = $(this).attr("data-id");
            opt.confirm("/admin/delete/"+id,"确认要删除吗?");
        });
    });
</script>


</body>
</html>

五、用户管理新增页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head :: head"></head>
<script type="text/javascript">
    $(function(){
        $('#ec').validate({
            rules:{
                name:"required",
                username:{
                    rangelength:[3,15]
                },
                phone:{
                    required:true,
                    rangelength:[11,11]
                },
                password:{
                    required:true,
                    rangelength:[6,15]
                },
                confirmPassword:{
                    equalTo:"#password"
                }
            },
            messages:{
                name:"真实姓名必须输入",
                username:{
                    rangelength:"用户账号3到15位"
                },
                phone:{
                    required: "手机号码必须输入",
                    rangelength:"手机号码格式不正确"
                },
                password:{
                    required: "密码必须输入",
                    rangelength:"密码6到15位"
                },
                confirmPassword:{
                    equalTo:"密码与确认密码不一致"
                }
            },
            submitHandler: function(form) {
                $(form).find(":submit").attr("disabled", true).text("正在提交...");
                form.submit();
            }
        });
    });
</script>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-content" style="width: 98%;">
            <form id="ec" th:action="@{/admin/save}" method="post" class="form-horizontal">
                <div class="form-group">
                    <label class="col-sm-2 control-label">真实姓名：</label>
                    <div class="col-sm-10">
                        <input type="text" name="name" id="name" class="form-control" />
                    </div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">用户账号：</label>
                    <div class="col-sm-10">
                        <input type="text" name="username" id="username" class="form-control"/>
                        <label for="username" class="error" id="usernameLabel"></label>
                    </div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">手机号码：</label>
                    <div class="col-sm-10">
                        <input type="text" name="phone" id="phone" maxlength="11" class="form-control"/>
                    </div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">密码：</label>
                    <div class="col-sm-10">
                        <input type="password" name="password" id="password" maxlength="15" class="form-control"/>
                    </div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">确认密码：</label>
                    <div class="col-sm-10">
                        <input type="password" name="confirmPassword" id="confirmPassword" maxlength="15" class="form-control"/>
                    </div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <div class="col-sm-4 col-sm-offset-2 text-right">
                        <button class="btn btn-primary" type="submit">确定</button>
                        <button class="btn btn-white" type="button" onclick="javascript:opt.closeWin();" value="取消">取消</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

六、用户管理修改页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head :: head"></head>
<script type="text/javascript">
    $(function(){
        $('#ec').validate({
            rules:{
                name:"required",
                phone:{
                    required:true,
                    rangelength:[11,11]
                }
            },
            messages:{
                name:"真实姓名必须输入",
                phone:{
                    required: "手机号码必须输入",
                    rangelength:"手机号码格式不正确"
                }
            },
            submitHandler: function(form) {
                $(form).find(":submit").attr("disabled", true).text("正在提交...");
                form.submit();
            }
        });
    });
</script>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-content" style="width: 98%;">
            <form id="ec" th:action="@{/admin/update}" method="post" class="form-horizontal">
                <input type="hidden" name="id" th:value="${admin.id}">
                <div class="form-group">
                    <label class="col-sm-2 control-label">真实姓名：</label>
                    <div class="col-sm-10">
                        <input type="text" name="name" id="name" th:value="${admin.name}" class="form-control"/>
                    </div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">手机号码：</label>
                    <div class="col-sm-10">
                        <input type="text" name="phone" id="phone" th:value="${admin.phone }" maxlength="11" class="form-control"/>
                    </div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="form-group posf">
                    <div class="col-sm-4 col-sm-offset-2 text-right">
                        <button class="btn btn-primary" type="submit">确定</button>
                        <button class="btn btn-white" type="button" onclick="javascript:opt.closeWin();" value="取消">取消</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
焰火青年·
关注
专栏目录
javaEE架构必须懂的知识Base类
风水道人
01-22 467
import java.util.List; import org.springframework.dao.DataAccessException; import com.yuanchuangyun.framework.entity.BaseEntity; public interface BaseDaoMapper<T extends BaseEntity> { public <PK> T getById(PK id)throws DataAccessExce.
使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享
weixin_34232617的博客
10-12 91
使用Jquery+EasyUI 进行框架项目开发案例讲解之三 角色管理源码分享  　　  在上两篇文章 　  《使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享》  　　《使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享》 　　我们分享了使用Jquery EasyUI来进行UI布局等开发的相关方法，也许你在使用EasyUI...
尚好房 09_权限管理
lbw18的博客
08-30 259
前面已经做了用户管理与角色管理，目前我们在此基础上完善权限管理功能在项目中创建 1.1.1.1 AdminRoleMapper.xml映射配置文件 在项目中创建映射配置文件 1.1.2 业务层 1.1.2.1 RoleService接口 在项目中的接口中新增 1.1.2.2 RoleServiceImpl实现类 在项目中的实现类中新增 1.1.3 表现层 在项目中的中新增 1.1.4 前端页面 ① 在项目中的中新增新增标签 绑定点击事件 ② 在项目中创建页面 1.2 保存角色分配 1.2.1 持久层 1.
service层通用接口IBaseService增删改查操作，IBaserviceImpl
最新发布
usa_washington的博客
08-26 525
service层通用接口
jQuery.validate验证功能--有道笔记整理
want_water_fish的博客
11-19 517
Query Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。 该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery
th:include的使用
海涛高软
07-05 4276
th:include 和 th:replace 的区别
ajax json 提交 java_ajax 以json形式提交表单
weixin_39932455的博客
02-22 79
表单元素转JSON自定义一个函数$.fn.serializeObject = function(){var o = {};var a = this.serializeArray();$.each(a, function() {if (o[this.name] !== undefined) {if (!o[this.name].push) {o[this.name] = [o[this.name]]...
SpringMVC学习笔记
qq_45485626的博客
10-14 418
一、 Spring集成web开发环境 1. 集成 1.1 ApplicationContext应用上下文获取方式 应用上下文对象是通过new ClasspathXmlApplicationContext(spring配置文件) 方式获取的，但是每次从容器中获得Bean时都要编写new ClasspathXmlApplicationContext(spring配置文件) ，这样的弊端是配置文件加载多次，应用上下文对象创建多次。 在Web项目中，可以使用ServletContextListener监听Web应用
Day87.二手房管理: 数据字典 (zTree组件)、小区管理
a111042555的博客
06-20 879
尚好房
尚好房 01_搭建环境
lbw18的博客
08-30 1123
尚好房是一个二手房管理服务平台，开放优质资源和线上能力，聚合线上线下二手房产资源，打造一个全方位二手房服务生态市场，为消费者提供优质房产服务资源。最终分布式架构模块shf-parent：根目录，管理子模块：​ common-util：公共类模块​ model：实体类模块​ service：dubbo服务父节点​ service-acl：权限服务模块​ service-house：房源服务模块​ service-user：用户服务模块​ service-api：dubbo服务api接口​ web：前端（
技术总结（四）-Hibernate 多表查询
bravemanzhou的专栏
05-27 529
记录一下工作中遇到的问题和解决办法。 最近遇到是一个问题就是通过Hibernate查询多个表，每个表中取几个字段。在这里记录一下解决的办法，和大家交流。 分割线 -------------------------------- 一、先跟大家交代一下用到的实体类 LogEnt 记录用户访问企业实体 public class LogEnt{ private String id;
PageHelper直接对List进行分页的方法
weixin_46649054的博客
04-13 3926
问题背景：PageHelper的分页只有在 PageHelper.startPage(pageNum,pageSize); 之后的数据库查询语句才起作用，原因是PageHelper的实现原理是在数据库查询过程中通过拦截器拦截处理。 在我当前的项目中，需要对本地已经缓存好的ArrayList进行分页，减少数据库操作。方法有两种： 第一种： 重新自定义PageInfo类，能解决问题，但是比较繁琐，不探究。 第二种：（推荐） 直接用PageHelper的类来实现，代码如下： //创建Page类 Page page
Bootstarp分页,每次项目都头疼的.再也不要重写了.复制下来重用
走错路的程序员
09-08 1727
bootstarp 分页
jquery.paginate分页插件使用
dly120219891208的专栏
03-18 6137
①：引入jquery.paginate.js和style.css及图片文件 ②：在页面适当位置加入以下代码 ③：初始化插件 $(document).ready(function(){ // $("#pager").pager({ pagenumber: _currentPage, pagecount: _totalPage, buttonClickCallback: PageCli
BaseDAO开发及获取泛型的传输数据类型（Class<T>）实例讲解
前尘叆夢
05-17 4786
一般在涉及DAO开发时，常用到的增删改查方法会封装到一个基类（BaseDAO），对于各个数据表的基本维护业务都需要用到增删改查等方法。 若对每张表都编写一套增删改差方法未必有些麻烦，并且不符合编码的基本准则。一般，我们可以将这些功能的所公用的部分封装为一个对象，或者是类，此类是所有DAO的 基类，可以称为：BaseDAO。 由于此类接收到不同的操作对象，故需泛型的支持。 下面，我通过以下实
mysql basemapper抽取_使用tk mybatis向上抽取base dao和base service注意问题
weixin_30253941的博客
02-01 734
0x0 背景为了尝试在mybatis框架下抽取BaseDao和BaseService，使用tk mapper作为通用mapper对dao层通用操作进行抽取。按照作者的介绍：通用 Mapper4 是一个可以实现任意 MyBatis 通用方法的框架，项目提供了常规的增删改查操作以及Example 相关的单表操作。通用 Mapper 是为了解决 MyBatis 使用中 90% 的基本操作，使用它可以很方...
thymeleaf引入bootstrap失败
qq_40970962的博客
10-05 1312
今天在引入bootstrap的时候死活调用不出样式 记录一下踩的坑： 在head中代码如下 <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script th:src="@{/static/jquery/jquery-3.2.1.min.js}"></script> &l
Java分布式二手房项目尚好房第二课 用户角色管理
fegus的博客
06-21 574
后台前端框架模板：Hplus下载地址：https://gitee.com/hplus_admin/hplus资料文件中已下载，可以直接使用1、主页2、表单页面3、表格说明：我们需要的后台模板基本都包含1、在web-admin模块webapps下新建static文件夹，用于存放静态资源文件2、复制Hplus静态资源到static文件夹3、项目如图1、在templates目录新建frame文件夹，用于存放框架相关页面2、复制hplus-master文件夹index.html文件到frame文件夹3、删除inde
Hibernate中通过传入实体的主键id来使用get方法获取整个实体的内容问题
墨笙弘一
08-31 2454
做老项目的一个需求变更，遇到一个问题，我直接调用封装好的dao中的get方法，传入参数这个实体的主键，结果报下面的错误： 八月 31, 2018 11:14:49 上午 org.apache.catalina.core.StandardWrapperValve invoke 严重: Servlet.service() for servlet [springServlet] in contex...
Vue2.0 vee-validate表单校验组件详细教程与配置
本文详细介绍了Vue2.0表单校验组件vee-validate的使用方法，适合有一定Vue2.0基础的学习者。首先，我们从安装部分开始，强调了使用`npm install vee-validate@next --save`安装最新版（非Vue1.0），对于使用Bower的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值