Layui页面粘贴的方法

一: 在Controller层 注解的注意点 :

1.先写一个大的 RequestMapping ()

        () 里面的的是  :   (这些你写的那个实体类的方法,在这取名是什么 比如 用户类 user)

2. 在Controller层 需要写一个 Controller的注解

3. @Autowired 就相当与 之前new的 全局的serviceImpl 的方法

4.在写每个方法的时候, 都要写一个RequestMapping () 和 @ResponseBody 注解

        RequestMapping () 的()里面 每一个新的里面写的是 增删改查的方法名

@Controller
@RequestMapping("user")
public class UserController {@Autowiredpublic UserService userService;/*** 去列表页面* @return*/@RequestMapping("toUserList")public String goUserList() {return "user/list";}/*** 去登录的页面* @return*/@RequestMapping("toLogin")public String toLogin() {return "login";}@RequestMapping("toUserAdd")public String toUserAdd(){return "user/user_add";}/*** 用户列表*/@RequestMapping("userList")@ResponseBodypublic BaseResponse userList(User user){//调用 用户列表的方法return userService.userList(user);}/*** 用户登录* @param user* @return*/@RequestMapping("login")@ResponseBodypublic BaseResponse login(@RequestBody User user){return userService.login(user);}/*** 用户添加* @param user* @return*/@RequestMapping("userAdd")@ResponseBodypublic BaseResponse userAdd(@RequestBody User user){//调用添加的方法return userService.userAdd(user);}/*** 用户修改* @param userId* @return*/@RequestMapping("userUpd")@ResponseBodypublic BaseResponse userUpd(Integer userId){//调用修改的方法return userService.userUpd(userId);}/*** 删除的方法* @param userId* @return*/@RequestMapping("userDel")@ResponseBodypublic BaseResponse userDel(Integer userId){//调用修改的方法return userService.userDel(userId);}}

二: 去后台去页面的注意点:

在后台的Controller层跳转页面 写一个注解, RequestMapping(“toUserList”)

!!!特别注意点 : 需要+注解 谁的页面有ajax请求, 在去页面的方法里需要写注解

        1.跳转页面的时候,写一个注解,括号里面写的是你要去的页面

        2.返回的 : 比如是列表页面 “user/list” 因为列表是在user包下面的 要加包名

                比如登录的页面直接建在views下面 就不需要在+个包名了

/*** 去列表页面* @return*/@RequestMapping("toUserList")public String goUserList() {return "user/list";}/*** 去登录的页面* @return*/@RequestMapping("toLogin")public String toLogin() {return "login";}

 三: 粘贴Layui在service层登录的判断:

在后台的Service层判断和之前的一样都是在Service判断的

1. 先判断用户实体类是否存在
2. 判断登录的账户名称是否正确
3. 判断登录密码是否正确
4. 调用mapper层方法把登录名称传过去
5. 对用户名称判空处理
6. 对用户密码判空处理
7. 传session
8. 最后给出登录成功的提示

   @Autowiredprivate HttpServletRequest request;/*** 登录* @param user* @return*/@Overridepublic BaseResponse login(User user) {//判断用户实体类是否存在if (ObjectUtils.isEmpty(user)){return ResponseUtil.error("参数错误");}//判断用户账号if (StringUtils.isEmpty(user.getUserName())){return ResponseUtil.error("用户名称错误");}//判断密码错误if (StringUtils.isEmpty(user.getUserPwd())){return ResponseUtil.error("用户密码错误");}//调用mapper层方法User u = userMapper.login(user.getUserName());//对用户名判空处理if (StringUtils.isEmpty(u.getUserName())){return ResponseUtil.error("用户名称不可以为空");}//对用户密码判空处理if (StringUtils.isEmpty(u.getUserPwd())){return ResponseUtil.error("用户密码不可以为空");}request.getSession().setAttribute("user",u);//给出成功提示return ResponseUtil.success("登录成功");}

四 : 粘列表页面的步骤: 

复制官网页面的代码

        修改路径 3个路径

①: 在title标签下面的路径 记忆法:  Slcl

<title>Demo</title><!-- 请勿在项目正式环境中引用该 layui.css 地址 --><link href="/static/layui/css/layui.css" rel="stylesheet">

②: 在标记有请勿在项目正是环境中引用的地方改路径 记忆法:  Sjj

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="/static/js/jquery-1.8.3.js"></script>

③: 在标记有请勿在项目正是环境中引用的地方改路径 记忆法:  sll

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="/static/js/jquery-1.8.3.js"></script>
<script src="/static/layui/layui.js"></script>

1. 修改表头和字段

        1.  在form下方的script标签里, table.render创建表格实例方法里

        2.  Field: 里写的是 字段名   title:里写的是表头

<script>layui.use(function(){var table = layui.table;var form = layui.form;var laydate = layui.laydate;// 创建表格实例table.render({elem: '#ID-table-demo-search',url: '/user/userList', // 此处为静态模拟数据，实际使用时需换成真实接口cols: [[{type: 'radio', title: '😊', fixed: true}, // 单选框{field:'userId', title: "用户主键ID"},{field:'userCode', title: "用户编号"},{field:'userPhone', title: "用户手机号"},{field:'userType', title: "用户类型"},{field:'userIdCode', title: "用户证件号"},]],

1. 在写完表头下面 310的位置下面 写 分页

        分页默认字段是在 layui里==>表格==>异步属性==>Request里找

page: true,height: 310,toolbar: '#demo-toolbar-setRowChecked',request: {pageName: 'pageNum', // 页码的参数名称，默认：pagelimitName: 'pageSize' // 每页数据条数的参数名，默认：limit},

1. 分页下方必须写的 是 parseData 方法

        parseData 方法在 layui里==>表格==>异步属性==>parseData==>最后一个模块里

parseData: function(res){ // res 即为原始返回的数据return {"code": 0, // 解析接口状态"msg": res.message, // 解析提示文本"count": res.data.total, // 解析数据长度"data": res.data.list // 解析数据列表};},

1. Limit 是自定义分页条数

        自定义分页条数在 layui里==>分页==>自定义每条页数的选择项

// toolbar: '#template-id',//分页limit:3,limits:[1,3,5]

 五: 粘登录页面的步骤:

1. 和列表一样,在title标签下面,修改路径 记忆法: slcl
2. 在form表单里面修改自己建表里用户名称/用户密码的字段
3. 在下方的脚本里面 写ajax

        ①: 登录ajax的注意点 :  data里面转换格式写的是 field

        ②: 多+一步 contentType : ‘application/json’

        ③: 在成功回调函数里面 判断是 res.code === 200

        ④: 跳转页面

        //  修改路径  / 

<title>Demo</title><!-- 请勿在项目正式环境中引用该 layui.css 地址 --><link href="/static/layui/css/layui.css" rel="stylesheet">

         /  修改用户名/ 用户密码 /

<form class="layui-form"><div class="demo-login-container"><div class="layui-form-item"><div class="layui-input-wrap"><div class="layui-input-prefix"><i class="layui-icon layui-icon-username"></i></div><input type="text" name="userName" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear"></div></div><div class="layui-form-item"><div class="layui-input-wrap"><div class="layui-input-prefix"><i class="layui-icon layui-icon-password"></i></div><input type="password" name="userPwd" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye"></div></div>

         /  修改ajax   /

六 : 粘添加页面的步骤:

        !!!  和列表一样更改3个路径  !!!

        ①:  头部工具

               1. 在List列表页面下方的脚本里面==>最后的位置粘一个头部工具栏事件

                  头工具栏事件: 在 layui里==>表格==>事件==>表头自定义元素工具事件

               2. 在头工具栏中 找到工具栏模版 在列表页面 给添加按钮

                //   第1种 头工具栏 1 //

 // 头工具栏事件table.on('toolbar(ID-table-demo-search)', function(obj){var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态switch(obj.event){case 'Add':location.href = "/user/toUserAdd";break;};});

                 //   第1种 列表添加按钮  在更改路径上面 1  //

<script type="text/html" id="demo-toolbar-setRowChecked"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="Add">添加</button></div>
</script>

        //   第2种 头工具栏 1 //

                    layui==>表格==>选中行操作==>头工具栏事件

/*** 头工具栏事件*/table.on('toolbar(ID-table-demo-search)', function(obj){var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态switch(obj.event){case 'add':location.href="/role/toAdd"break;};});

        //   第2种 列表添加按钮  在更改路径上面 2  //

        

<%--从layyi 中粘添加的按钮--%>
<script type="text/html" id="demo-toolbar-setRowChecked"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="add">添加</button><button class="layui-btn layui-btn-sm" lay-event="del">批删</button></div>
</script>

        ②: 在body里==>form==>div 只留下一个

                自己本身有多少个字段再复制几个留下来的div

        ③: 字段名 

                <label class="layui-form-label">用户姓名</label> 写字段的名字

        ④:   inp 标签 相对应的字段

                在inp标签里面==>name属性里面 写 相对应的字段

<body>
<form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label">用户编号</label><div class="layui-input-block"><input type="text" name="userCode" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">用户姓名</label><div class="layui-input-block"><input type="text" name="userName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">用户手机号</label><div class="layui-input-block"><input type="text" name="userPhone" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">用户类型</label><div class="layui-input-block"><input type="text" name="userType" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">用户证件号</label><div class="layui-input-block"><input type="text" name="userCard" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input"></div></div>

        ⑤: 添加按钮

                layui==>表单组件==>综合演示==>打开源代码==>找添加按钮

                在最后一个div里面的确认和重置要留下, 把确认改为 添加提供添加按钮

<div class="layui-form-item"><div class="layui-input-block"><button type="submit" class="layui-btn" lay-submit lay-filter="demo1">添加</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div>

       ⑥: 在提交事件里面有个此处可执行 ajax 写ajax 页面写ajax

                后端方法里面就需要写注解

                更改ajax的路径

                在对res判断的时候, 需要+code 跳转列表页面去的是Controller里面的列表页面

 // 此处可执行 Ajax 等操作$.ajax({url:"/role/addRole",type:"post",data:JSON.stringify(field),contentType: 'application/json',dataType:"json",success(res){if (res.code==200){//跳转页面location.href="/role/toRoleList"}},error(){alert("添加失败")}})return false; // 阻止默认 form 跳转

 七 : 删除/批删列表页面

        ①:  在列表页面正常写删除的按钮

        ②:  在要删除的实体类里面 写删除的集合

        ③:  在头工具栏里 case 里面添加 删除的 按钮字段(删除的按钮字段要一直)

        ④:  在case 里

                1. 定义数组 (批删数组)

                2. 循环获取选中的状态

                3. 添加进数组里面

                4.删除的ajax

// 头工具栏事件table.on('toolbar(ID-table-demo-search)', function(obj){var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态switch(obj.event){case 'Add':location.href = "/user/toUserAdd";break;case 'userDel'://定义数组var ids=[];//从循环中获取选中的id  循环获取到的状态for (let user of checkStatus.data) {//添加进数组里ids.push(user.userId);}//循环外填写删除的ajax$.ajax({url:"/user/userDel",type:"post",data:JSON.stringify(ids),contentType: "application/json",dataType:"json",success(res){//判断if (res.code===200){alert("删除成功")//刷新location.reload()}},error(){alert("删除失败")}})break;};});