Layui页面粘贴的方法
一: 在Controller层 注解的注意点 :
1.先写一个大的 RequestMapping ()
() 里面的的是 : (这些你写的那个实体类的方法,在这取名是什么 比如 用户类 user)
2. 在Controller层 需要写一个 Controller的注解
3. @Autowired 就相当与 之前new的 全局的serviceImpl 的方法
4.在写每个方法的时候, 都要写一个RequestMapping () 和 @ResponseBody 注解
RequestMapping () 的()里面 每一个新的里面写的是 增删改查的方法名
@Controller @RequestMapping("user") public class UserController { @Autowired public 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") @ResponseBody public BaseResponse userList(User user){ //调用 用户列表的方法 return userService.userList(user); } /** * 用户登录 * @param user * @return */ @RequestMapping("login") @ResponseBody public BaseResponse login(@RequestBody User user){ return userService.login(user); } /** * 用户添加 * @param user * @return */ @RequestMapping("userAdd") @ResponseBody public BaseResponse userAdd(@RequestBody User user){ //调用添加的方法 return userService.userAdd(user); } /** * 用户修改 * @param userId * @return */ @RequestMapping("userUpd") @ResponseBody public BaseResponse userUpd(Integer userId){ //调用修改的方法 return userService.userUpd(userId); } /** * 删除的方法 * @param userId * @return */ @RequestMapping("userDel") @ResponseBody public 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判断的
- 先判断用户实体类是否存在
- 判断登录的账户名称是否正确
- 判断登录密码是否正确
- 调用mapper层方法把登录名称传过去
- 对用户名称判空处理
- 对用户密码判空处理
- 传session
- 最后给出登录成功的提示
@Autowired private HttpServletRequest request; /** * 登录 * @param user * @return */ @Override public 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. 在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: "用户证件号"}, ]],
在写完表头下面 310的位置下面 写 分页
分页默认字段是在 layui里==>表格==>异步属性==>Request里找
page: true, height: 310, toolbar: '#demo-toolbar-setRowChecked', request: { pageName: 'pageNum', // 页码的参数名称，默认：page limitName: 'pageSize' // 每页数据条数的参数名，默认：limit },
分页下方必须写的 是 parseData 方法
parseData 方法在 layui里==>表格==>异步属性==>parseData==>最后一个模块里
parseData: function(res){ // res 即为原始返回的数据 return { "code": 0, // 解析接口状态 "msg": res.message, // 解析提示文本 "count": res.data.total, // 解析数据长度 "data": res.data.list // 解析数据列表 }; },
Limit 是自定义分页条数
自定义分页条数在 layui里==>分页==>自定义每条页数的选择项
// toolbar: '#template-id', //分页 limit:3, limits:[1,3,5]
五: 粘登录页面的步骤:
- 和列表一样,在title标签下面,修改路径 记忆法: slcl
- 在form表单里面修改自己建表里用户名称/用户密码的字段
- 在下方的脚本里面 写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. 在头工具栏中 找到工具栏模版 在列表页面 给添加按钮
// 头工具栏 //
// 头工具栏事件 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; }; });// 列表添加按钮 在更改路径上面 //
<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>②: 在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>⑤: 添加按钮
在最后一个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的路径
七 : 删除/批删列表页面
①: 在列表页面正常写删除的按钮
②: 在要删除的实体类里面 写删除的集合
③: 在头工具栏里 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; }; });