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"; }
三: 登录在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
Demo ②: 在标记有请勿在项目正是环境中引用的地方改路径 记忆法: Sjj
③: 在标记有请勿在项目正是环境中引用的地方改路径 记忆法: sll
修改表头和字段
1. 在form下方的script标签里, table.render创建表格实例方法里
2. Field: 里写的是 字段名 title:里写的是表头
// 第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 中粘添加的按钮--%>②: 在body里==>form==>div 只留下一个
自己本身有多少个字段再复制几个留下来的div
③: 字段名
写字段的名字
④: inp 标签 相对应的字段
在inp标签里面==>name属性里面 写 相对应的字段
⑤: 添加按钮
layui==>表单组件==>综合演示==>打开源代码==>找添加按钮
在最后一个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; }; });
八 : 修改后台+页面
1. 修改方法的后台
Controller层
1. 两个注解
2. 修改是后台传值给页面 要写ajax,所以在Controller层修改方法传参时给注解
3. 调用修改的方法
/** * 用户修改 * @param user * @return */ @RequestMapping("userUpd") @ResponseBody public BaseResponse userUpd(@RequestBody User user){ //调用修改的方法 return userService.userUpd(user); }service层
1. 调用修改的方法
2. 处理返回值 使用工具类调用方法 输出执行信息
@Override public BaseResponse userUpd(User user) { //调用修改的mapper方法 userMapper.userUpd(user); //处理返回值 使用工具类调用方法 输出执行信息 return ResponseUtil.success("修改成功",200); }mapper层
sql语句
UPDATE t_user SET user_code = #{userCode}, user_name = #{userName}, user_phone = #{userPhone}, user_type = #{userType}, user_card = #{userCard} WHERE user_id = #{userId}; 2. 回显的后台
Controller层修改方法
1. 两个注解
2. 调用回显的方法
/** * 回显 * @param userId * @return */ @RequestMapping("userUp") @ResponseBody public ModelAndView userUp( Integer userId){ //调用回显的方法 return userService.userUp(userId); }service层修改方法
1. 新建 modelAndView
2. 需要根据id查询回显对象