基于JavaWEB的综合项目 - 3.1(角色管理） - 《Java笔记》

角色管理
①概要设计
在数据库中建立表格并创建对应实体类

package domain;
public class Role {
    private Integer rid;
    private String rname;
    private String rdescription;
    private String yl1;
    private String yl2;
    public Role() {
    }
    public Role(Integer rid, String rname, String rdescription, String yl1, String yl2) {
        this.rid = rid;
        this.rname = rname;
        this.rdescription = rdescription;
        this.yl1 = yl1;
        this.yl2 = yl2;
    }
    public Integer getRid() {
        return rid;
    }
    public void setRid(Integer rid) {
        this.rid = rid;
    }
    public String getRname() {
        return rname;
    }
    public void setRname(String rname) {
        this.rname = rname;
    }
    public String getRdescription() {
        return rdescription;
    }
    public void setRdescription(String rdescription) {
        this.rdescription = rdescription;
    }
    public String getYl1() {
        return yl1;
    }
    public void setYl1(String yl1) {
        this.yl1 = yl1;
    }
    public String getYl2() {
        return yl2;
    }
    public void setYl2(String yl2) {
        this.yl2 = yl2;
    }
}

②在角色列表页面，使用layui-table数据表格组件，动态请求数据，展示数据
提供了一个用来展示数据的标签，在js中使用table组件请求数据，自动渲染数据

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
        <script src="./layui/layui.all.js"></script>
    </head>
    <body>
        <%--角色列表--%>
        <table id="roleGrid"></table>
        <script>
            layui.use(['table'],function () {
                var table=layui.table;
                table.render(
                    {
                        elem: '#roleGrid',//绑定渲染位置
                        url: 'roleFindAll',//底层使用ajax请求表格数据
                        cols: [[
                            {title: '角色编号', field: 'rid'},
                            {title: '角色名称', field: 'rname'},
                            {title: '角色描述', field: 'rdescription'},
                            {title: '操作'}
                        ]], //指定查询结果与表格单元之间的展示关系，看哪个属性展示在哪个位置
                        page:true
                    });
            })
        </script>
    </body>
</html>

③服务端处理请求，根据分页条件，查询分页所需要的数据，这些数据要符合layui-table组件的数据结构要求

package controller;
import domain.LayPageInfo;
import myweb.annotation.Controller;
import myweb.annotation.RequestMapping;
import myweb.annotation.RequestParam;
import myweb.annotation.ResponseBody;
import service.RoleService;
@Controller
public class RoleController {
    private RoleService roleService=new RoleService();
    @RequestMapping("/roleFindAll")
    @ResponseBody
    public LayPageInfo findAll(@RequestParam("page") int page, @RequestParam("limit") int limit){
        return roleService.findByPage(page, limit);
    }
}

package service;
import dao.RoleDao;
import domain.LayPageInfo;
import domain.Role;
import orm.SqlSession;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class RoleService {
    private RoleDao roleDao=new SqlSession().getMapper(RoleDao.class);
    public LayPageInfo findByPage(int page,int limit){
        //确保page下限
        page=Math.max(1,page);
        //确保page上限
        int count= roleDao.total();
        int max=(int)Math.ceil(1.0*count/limit);
        max=Math.max(1,max);//有可能为0
        page=Math.min(page, max);
        int start=(page-1)*limit;
        int length=limit;
        Map<String,Integer>param=new HashMap<>();
        param.put("start",start);
        param.put("length",length);
        List<Role> roleList= roleDao.findByPage(param);
        return new LayPageInfo(roleList,count,"",0) ;
    }
}

package dao;
import domain.Role;
import orm.annotation.Select;
import java.util.List;
import java.util.Map;
public interface RoleDao {
    @Select("select count(*) from t_role")
    public int total();
    @Select("select * from t_role limit #{start},#{length}")
    public List<Role> findByPage(Map<String,Integer> param);
}

package domain;
import java.util.List;
//装载layui-table组件分页时的数据结构
public class LayPageInfo {
        private List<?> data ;
        private Integer count ;
        private String msg ;
        private Integer code ;
        public List<?> getData() {
            return data;
        }
        public void setData(List<?> data) {
            this.data = data;
        }
        public int getCount() {
            return count;
        }
        public void setCount(Integer count) {
            this.count = count;
        }
        public String getMsg() {
            return msg;
        }
        public void setMsg(String msg) {
            this.msg = msg;
        }
        public Integer getCode() {
            return code;
        }
        public void setCode(Integer code) {
            this.code = code;
        }
        public LayPageInfo(List<?> data, Integer count, String msg, Integer code) {
            this.data = data;
            this.count = count;
            this.msg = msg;
            this.code = code;
        }
        public LayPageInfo() {
        }
    }

④表格单元使用自定义模板提供操作按钮

<%--表格单元的按钮模板--%>
        <script type="text/html" id="rowBtns">
            <button type="button" class="layui-btn layui-btn-danger layui-btn-sm">
                <i class="layui-icon">&#xe640;</i>删除</button>
            <button type="button" class="layui-btn layui-btn-warm layui-btn-sm" onclick="toUpdate()">
                <i class="layui-icon">&#xe642;</i>修改</button>
        </script>

⑤点击编辑按钮，弹出对话框，内有表单组件，完成编辑修改

<!-- 弹出层中的表单模板 -->
        <form id="roleUpdateForm" class="layui-form" action="roleUpdate" style="display:none;padding-top:10px;">
            <div class="layui-form-item">
                <label class="layui-form-label">角色编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="rid" id="rid" readonly  lay-verify="required" autocomplete="off" class="layui-input layui-input-inline">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="rname" id="rname" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input layui-input-inline">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">角色描述</label>
                <div  class="layui-input-inline">
                    <input type="text" name="rdescription" id="rdescription" placeholder="请输入描述" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="button" class="layui-btn layui-btn-primary" onclick="closeEditWin()">取消</button>
                </div>
            </div>

        </form>

function toUpdate(rid,rname,rdescription) {
                layui.use(['layer'],function () {
                    var layer=layui.layer;
                    var $=layui.jquery;

                    $('#rid').val(rid) ;//jQuery写法设置标签value属性
                    document.getElementById('rname').value = rname ;
                    $('#rdescription').val(rdescription);

                    layer.open({
                        type:1,//打开一个页面层，可以展示一些html效果
                        area:[400,300],
                        title:'修改角色',
                        content:$('#roleUpdateForm')//必须使用jQuery,jQuery根据id找到form模板，将其引入到弹出层
                    })
                })
            }

            function closeEditWin() {
                layui.use(['layer'],function () {
                    var layer=layui.layer;
                    layer.closeAll();
                })
            }

⑥修改请求实现

@RequestMapping("/roleUpdate")
    public String update(Role role){
        roleService.update(role);
        return "role.jsp";
    }

public void update(Role role){
        roleDao.update(role);
    }

@Update("update t_role set rname=#{rname} , rdescription=#{rdescription} where rid = #{rid}")
public void update(Role role);