商贸行业网站建设哪家前端开发
一: 在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判断的
- 先判断用户实体类是否存在
- 判断登录的账户名称是否正确
- 判断登录密码是否正确
- 调用mapper层方法把登录名称传过去
- 对用户名称判空处理
- 对用户密码判空处理
- 传session
- 最后给出登录成功的提示
@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. 在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', // 页码的参数名称，默认：pagelimitName: '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;};});