• 角色管理
      1) 概要设计
      t_role(
      rid
      rname
      rdescription //描述
      yl1
      yl2
      )
      主键如果是自增，最好是使用bigint
      image.png

      insert into t_role values(null,’管理员1’,’很牛’,null,null);
      insert into t_role values(null,’管理员2’,’很牛’,null,null);
      insert into t_role values(null,’管理员3’,’很牛’,null,null);
      insert into t_role values(null,’管理员4’,’很牛’,null,null);
      insert into t_role values(null,’管理员5’,’很牛’,null,null);
      insert into t_role values(null,’管理员6’,’很牛’,null,null);
      insert into t_role values(null,’管理员7’,’很牛’,null,null);
      insert into t_role values(null,’管理员8’,’很牛’,null,null);
      insert into t_role values(null,’管理员9’,’很牛’,null,null);
      insert into t_role values(null,’管理员10’,’很牛’,null,null);
      insert into t_role values(null,’管理员11’,’很牛’,null,null);
      insert into t_role values(null,’管理员12’,’很牛’,null,null);
      insert into t_role values(null,’管理员13’,’很牛’,null,null); ```java //Role.java package com.duyi.qxgl07.domain;

    public class Role { private Integer rid ; private String rname ; private String rdescription ; private String yl1 ; private String yl2 ;

    1. public Integer getRid() {
    2.     return rid;
    3. }
    4. public void setRid(Integer rid) {
    5.     this.rid = rid;
    6. }
    7. public String getRname() {
    8.     return rname;
    9. }
    10. public void setRname(String rname) {
    11.     this.rname = rname;
    12. }
    13. public String getRdescription() {
    14.     return rdescription;
    15. }
    16. public void setRdescription(String rdescription) {
    17.     this.rdescription = rdescription;
    18. }
    19. public String getYl1() {
    20.     return yl1;
    21. }
    22. public void setYl1(String yl1) {
    23.     this.yl1 = yl1;
    24. }
    25. public String getYl2() {
    26.     return yl2;
    27. }
    28. public void setYl2(String yl2) {
    29.     this.yl2 = yl2;
    30. }
    31. public Role(Integer rid, String rname, String rdescription, String yl1, String yl2) {
    32.     this.rid = rid;
    33.     this.rname = rname;
    34.     this.rdescription = rdescription;
    35.     this.yl1 = yl1;
    36.     this.yl2 = yl2;
    37. }
    38. public Role() {}

    }

    2.     2) 在角色列表页面，使用layui-table数据表格组件 动态请求数据，展示数据<br />  * 提供了一个用来展示数据的标签<br />  * 在js中使用table组件请求数据，自动渲染数据<br />      layui.use(['table'],function(){<br />                var table = layui.table ;<br />                table.render({<br />                    elem:'#roleGrid', //绑定渲染的位置<br />                    url:'roleFindAll', //底层使用ajax请求表格数据<br />                    cols:[[ //指定查询结果与表格单元之间的展示关系，哪个属性展示在哪个位置<br />                        {title:'角色编号',field:'rid'},<br />                        {title:'角色名称',field:'rname'},<br />                        {title:'角色描述',field:'rdescription'},<br />                        {title:'操作'}<br />                    ]],<br />                    page:true<br />                });<br />            })<br />      * 注意： 默认开启分页栏<br />                      发送url请求时会自动追加page=1和limit=10参数<br />    3) 服务端处理请求，根据分页条件，查询分页所需要的数据<br />    这些数据要符合layui-table组件的数据结构要求<br />  {<br />      code:0,<br />      msg:'',<br />      count:10000,<br />      data:[]<br />  }<br />  这个结构可以用之前分页创建的PageInfo处理
    3. ```java
    4. //PageInfo.java
    5. package com.duyi.qxgl07.domain;
    7. import java.util.List;
    9. //装载（自定义）分页相关的信息
    10. //扩展：增加layui-table组件分页相关的信息
    11. public class PageInfo {
    12.     private Integer page ;
    13.     private Integer rows ;
    14.     private Integer total ;
    15.     private Integer max ;
    16.     private Integer start ;
    17.     private Integer end ;
    19.     private List<?> data ;
    20.     private Integer count ;
    21.     private String msg ;
    22.     private Integer code ;
    24.     public Integer getPage() {
    25.         return page;
    26.     }
    27.     public void setPage(Integer page) {
    28.         this.page = page;
    29.     }
    30.     public Integer getRows() {
    31.         return rows;
    32.     }
    33.     public void setRows(Integer rows) {
    34.         this.rows = rows;
    35.     }
    36.     public Integer getTotal() {
    37.         return total;
    38.     }
    39.     public void setTotal(Integer total) {
    40.         this.total = total;
    41.     }
    42.     public Integer getMax() {
    43.         return max;
    44.     }
    45.     public void setMax(Integer max) {
    46.         this.max = max;
    47.     }
    48.     public Integer getStart() {
    49.         return start;
    50.     }
    51.     public void setStart(Integer start) {
    52.         this.start = start;
    53.     }
    54.     public Integer getEnd() {
    55.         return end;
    56.     }
    57.     public void setEnd(Integer end) {
    58.         this.end = end;
    59.     }
    60.     public List<?> getData() {
    61.         return data;
    62.     }
    63.     public void setData(List<?> data) {
    64.         this.data = data;
    65.     }
    66.     public PageInfo(Integer page, Integer rows, Integer total, Integer max, Integer start, Integer end, List<?> data) {
    67.         this.page = page;
    68.         this.rows = rows;
    69.         this.total = total;
    70.         this.max = max;
    71.         this.start = start;
    72.         this.end = end;
    73.         this.data = data;
    74.     }
    75.     public PageInfo() {}
    76. }
    1. 4) 表格单元使用自定义模板提供操作按钮<br />    5) 点击编辑按钮，弹出对话框，内有表单组件，完成编辑修改<br />    6) 修改请求实现
    1. //comm.html
    2. <link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
    3. <script src="layui/layui.js"></script>
    1. //role.jsp
    2. <%@ page pageEncoding="utf-8" %>
    3. <html>
    4.     <head>
    5.         <%@include file="comm.html"%>
    6.     </head>
    7.     <body>
    8.         <!-- 角色列表 -->
    9.         <table id="roleGrid"></table>
    11.         <!-- 表格单元的按钮模板 -->
    12.         <script type="text/html" id="rowBtns">
    13.             <button class="layui-btn layui-btn-sm layui-btn-warm" onclick="toEdit('{{d.rid}}','{{d.rname}}','{{d.rdescription}}')">
    14.                 <i class="layui-icon">&#xe642;</i> 编辑
    15.             </button>
    17.             <button class="layui-btn layui-btn-sm layui-btn-danger">
    18.                 <i class="layui-icon">&#xe640;</i> 删除
    19.             </button>
    20.         </script>
    23.         <!-- 弹出层中的表单模板 -->
    24.         <form id="roleEditForm" class="layui-form" action="roleUpdate" style="display:none;padding-top:10px;">
    25.             <div class="layui-form-item">
    26.                 <label class="layui-form-label">角色编号</label>
    27.                 <div class="layui-input-inline">
    28.                     <input type="text" name="rid" id="rid" readonly  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input layui-input-inline">
    29.                 </div>
    30.             </div>
    32.             <div class="layui-form-item">
    33.                 <label class="layui-form-label">角色名称</label>
    34.                 <div  class="layui-input-inline">
    35.                     <input type="text" name="rname" id="rname" required placeholder="请输入名称" autocomplete="off" class="layui-input">
    36.                 </div>
    37.             </div>
    39.             <div class="layui-form-item">
    40.                 <label class="layui-form-label">角色描述</label>
    41.                 <div  class="layui-input-inline">
    42.                     <input type="text" name="rdescription" id="rdescription" required  lay-verify="required" placeholder="请输入描述" autocomplete="off" class="layui-input">
    43.                 </div>
    44.             </div>
    46.             <div class="layui-form-item">
    47.                 <div class="layui-input-block">
    48.                     <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
    49.                     <button type="button" class="layui-btn layui-btn-primary" onclick="closeEditWin()">取消</button>
    50.                 </div>
    51.             </div>
    53.         </form>
    55.         <script>
    56.             layui.use(['table'],function(){
    57.                 var table = layui.table ;
    59.                 <-- 渲染表格(函数)，约定优于配置  -->
    60.                 table.render({
    61.                     elem:'#roleGrid', //绑定渲染的位置
    62.                     url:'roleFindAll', //底层使用ajax请求表格数据
    63.                     cols:[[ //指定查询结果与表格单元之间的展示关系，哪个属性展示在哪个位置
    64.                         {title:'角色编号',field:'rid'},
    65.                         {title:'角色名称',field:'rname'},
    66.                         {title:'角色描述',field:'rdescription'},
    67.                         {title:'操作',templet:'#rowBtns'}
    68.                     ]],
    69.                     page:true
    70.                 });
    71.             })
    73.             function toEdit(rid,rname,rdescription){
    74.                //显示一个弹出层，弹出对话框，使用layui-layer
    75.                layui.use(['layer'],function(){
    76.                    var layer = layui.layer ;
    77.                    var $ = layui.jquery;
    79.                    $('#rid').val(rid) ;
    80.                    document.getElementById('rname').value = rname ;
    81.                    $('#rdescription').val(rdescription);
    83.                    layer.open({
    84.                        type:1,
    85.                        title:'编辑角色',
    86.                        area:[400],
    87.                        content:$('#roleEditForm')
    88.                    });
    90.                });
    91.             }
    93.             function closeEditWin(){
    94.                 layui.use('layer',function(){
    95.                     var layer = layui.layer ;
    96.                     layer.closeAll();
    97.                 });
    98.             }
    99.         </script>
    100.     </body>
    101. </html>
    1. //LayPageInfo.java
    2. package com.duyi.qxgl07.domain;
    4. import java.util.List;
    6. //装载layui-table组件分页时的数据结构
    7. public class LayPageInfo {
    8.     private List<?> data ;
    10.     private Long count ;
    11.     private String msg ;
    12.     private Integer code ;
    14.     public List<?> getData() {
    15.         return data;
    16.     }
    17.     public void setData(List<?> data) {
    18.         this.data = data;
    19.     }
    20.     public Long getCount() {
    21.         return count;
    22.     }
    23.     public void setCount(Long count) {
    24.         this.count = count;
    25.     }
    26.     public String getMsg() {
    27.         return msg;
    28.     }
    29.     public void setMsg(String msg) {
    30.         this.msg = msg;
    31.     }
    32.     public Integer getCode() {
    33.         return code;
    34.     }
    35.     public void setCode(Integer code) {
    36.         this.code = code;
    37.     }
    38.     public LayPageInfo(List<?> data, Long count, String msg, Integer code) {
    39.         this.data = data;
    40.         this.count = count;
    41.         this.msg = msg;
    42.         this.code = code;
    43.     }
    44.     public LayPageInfo() {}
    45. }
    1. //RoleController.java
    2. package com.duyi.qxgl07.controller;
    4. import com.duyi.qxgl07.domain.LayPageInfo;
    5. import com.duyi.qxgl07.domain.Role;
    6. import com.duyi.qxgl07.service.RoleService;
    7. import org.duyi.web7.annotation.Controller;
    8. import org.duyi.web7.annotation.RequestMapping;
    9. import org.duyi.web7.annotation.RequestParam;
    10. import org.duyi.web7.annotation.ResponseBody;
    12. @Controller
    13. public class RoleController {
    15.     RoleService service = new RoleService() ;
    17.     @RequestMapping("/roleFindAll")
    18.     @ResponseBody
    19.     public LayPageInfo findAll(@RequestParam("page") int page , @RequestParam("limit") int limit){
    20.         return service.findByPage(page,limit);
    21.     }
    23.     @RequestMapping("/roleUpdate")
    24.     public String update(Role role){
    25.         service.update(role);
    26.         return "role.jsp" ;
    27.     }
    29. }
    1. //RoleDao.java
    2. package com.duyi.qxgl07.dao;
    4. import com.duyi.qxgl07.domain.Role;
    5. import orm.annotation.Select;
    6. import orm.annotation.Update;
    7. import java.util.List;
    8. import java.util.Map;
    10. public interface RoleDao {
    12.     @Select("select count(*) from t_role")
    13.     public long total();    //用long取或者int都可    --> 更推荐用long
    15.     @Select("select * from t_role limit #{start},#{length}")
    16.     public List<Role> findByPage(Map<String,Integer> param) ;
    18.     @Update("update t_role set rname=#{rname} , rdescription=#{rdescription} where rid = #{rid}")
    19.     public void update(Role role) ;
    20. }
    1. //RoleService.java
    2. package com.duyi.qxgl07.service;
    4. import com.duyi.qxgl07.dao.RoleDao;
    5. import com.duyi.qxgl07.domain.LayPageInfo;
    6. import com.duyi.qxgl07.domain.Role;
    7. import orm.SqlSession;
    9. import java.util.HashMap;
    10. import java.util.List;
    11. import java.util.Map;
    13. public class RoleService {
    15.     RoleDao dao = new SqlSession().getMapper(RoleDao.class);
    17.     public LayPageInfo findByPage(int page , int limit){
    18.         //确保page下限
    19.         page = Math.max(1,page) ;
    21.         //确保page上限 page max（需要计算 total/limit）
    22.         long count = dao.total() ;
    23.         //                向上取整
    24.         int max = (int) Math.ceil( 1.0*count/limit );
    25.         //确保max是有效，至少也会有1页
    26.         max = Math.max(1,max);
    27.         //确保page上限
    28.         page = Math.min(page ,max) ;
    30.         //mysql的分页只认 start , length
    31.         int start = (page-1)*limit ;
    32.         int length = limit ;
    34.         Map<String,Integer> param = new HashMap<String,Integer>();
    35.         param.put("start",start) ;
    36.         param.put("length",length) ;
    38.         List<Role> roles = dao.findByPage(param);
    40.         return new LayPageInfo(roles,count,"",0) ;
    41.     }
    43.     public void update(Role role){
    44.         dao.update(role);
    45.     }
    47. }