create table `t_user` ( `id` bigint(20) not null auto_increment comment '用户编号', `loginName` varchar(50) collate utf8_bin default null comment '登录账号', `password` varchar(100) collate utf8_bin default null comment '登录密码', `realName` varchar(50) collate utf8_bin default null comment '真实姓名', `idCard` varchar(20) collate utf8_bin default null comment '身份证号码', `phone` varchar(20) collate utf8_bin default null comment '电话号码', `email` varchar(100) collate utf8_bin default null comment '邮箱', `status` int(11) default null comment '状态1-可用 0-异常', `createDate` datetime default null comment '注册时间', `salt` varchar(100) collate utf8_bin default null comment '盐值', primary key (`id`) )2、C端注册实现
- 创建数据库实体
C端的开始使用Lombok创建实体的一些get和set方法,需要导入如下的坐标信息
org.projectlombok lombok 1.18.20 provided User实体类编写
package com.zcl.entity; import lombok.Data; import java.util.Date; @Data public class User { private Long id; private String loginName; private String password; private String realName; private String idCard; private String phone; private String email; private Integer status; private Date createDate; private String salt; } - UserMapper
package com.zcl.dao; import com.zcl.entity.User; public interface UserMapper { User findUserByPhone(String phone); User findUserByName(String loginName); int AddUsers(User user); }映射文件
select * from t_user where phone = #{phone}; - UserScevice
package com.zcl.service.impl; import com.zcl.dao.UserMapper; import com.zcl.entity.User; import com.zcl.service.UserService; import com.zcl.utils.PasswordUtil; import com.zcl.utils.SystemConstant; import com.zcl.utils.UUIDUtils; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; import javax.annotation.Resource; @Service @Transactional public class UserServiceImpl implements UserService { @Resource UserMapper userMapper; public User findUserByPhone(String phone) { return userMapper.findUserByPhone(phone); } public User findUserByName(String loginName) { return userMapper.findUserByName(loginName); } public int AddUsers(User user) { // 自动生成盐值 user.setSalt(UUIDUtils.randomUUID()); // 密码加密 user.setPassword(PasswordUtil.md5(user.getPassword(),user.getSalt(), SystemConstant.PASSWORD_COUNT)); return userMapper.AddUsers(user); } } - UserController
==注意点:==目前C端不象后端那样只需要返回静态数据,所以用户的控制器就不在使用全局的一个静态返回值了,而是通过@Controller注解声明是控制器,当具体的控制器中需要返回的是静态数据时可以使用@ResponseBody注解进行指定返回
package com.zcl.controller; import com.alibaba.fastjson.JSON; import com.zcl.entity.User; import com.zcl.service.UserService; import com.zcl.utils.SystemConstant; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.bind.annotation.RestController; import javax.annotation.Resource; import java.util.HashMap; @Controller @RequestMapping("/user") public class UserController { @Resource UserService userService; @ResponseBody @RequestMapping("/checkPhone") public String checkPhone(String phone){ HashMapmap = new HashMap (); if(userService.findUserByPhone(phone) != null){ map.put(SystemConstant.EXIST,true); map.put(SystemConstant.MESSAGES,"该手机号已被注册,请重新输入"); }else{ map.put(SystemConstant.EXIST,false); } return JSON.toJSONString(map); } @ResponseBody @RequestMapping("/checkName") public String checkName(String loginName){ HashMap map = new HashMap (); if(userService.findUserByName(loginName) != null){ map.put(SystemConstant.EXIST,true); map.put(SystemConstant.MESSAGES,"该用户名已经存在,请重新输入"); }else{ map.put(SystemConstant.EXIST,false); } return JSON.toJSONString(map); } @ResponseBody @RequestMapping("/addUser") public String addUsers(User user){ HashMap map = new HashMap (); if(userService.AddUsers(user) > 0){ map.put(SystemConstant.SUCCESS,true); map.put(SystemConstant.MESSAGES,"账号注册成功"); }else{ map.put(SystemConstant.SUCCESS,false); map.put(SystemConstant.MESSAGES,"账号注册失败"); } return JSON.toJSONString(map); } } - 前端页面数据请求
// 用户名是否存在标识,true标识存在 var flage = false; var flage2 = false; // 登录名称失去焦点事件出发查询 $("#mNickname").blur(function(){ // 获取用户名 var loginName = $(this).val().trim(); // 判断当前用户名不为空的时候,发送请求验证数据 if(loginName.length > 0){ $.get("/user/checkName",{"loginName":loginName},function (result) { if(result.exist){ layer.open({ content: result.messages, yes: function(index, layero){ flage2 = true; $("#mNickname").val(""); layer.close(index); //如果设定了yes回调,需进行手工关闭 } }); } else { flage = false; } },"json"); } }); // 手机号失去焦点事件出发查询 $("#phone").blur(function(){ // 获取用户名 var phone = $(this).val().trim(); // 判断当前用户名不为空的时候,发送请求验证数据 if(phone.length > 0){ $.get("/user/checkPhone",{"phone":phone},function (result) { if(result.exist){ layer.open({ content: result.messages, yes: function(index, layero){ flage2 = true; $("#phone").val(""); layer.close(index); //如果设定了yes回调,需进行手工关闭 } }); } else { flage2 = false; } },"json"); } }); // 表单提交事件 form.on("submit(register)",function (data) { if(!flage && !flage2){ // 发生请求 $.post("/user/addUser",data.field,function (result) { if(result.succser){ layer.alert(result.messages,{icon:6}); // 重置表单 $("#resetBtn").click(); }else { layer.alert(result.messages,{icon:5}); } },"json"); }else { layer.alert("用户名或手机号已存在,请重新输入",{icon:5}); } return false; });
- UserService登录业务层
因为注册的时候已经写过条件查询用户的数据了,所以直接调用即可
public User login(String loginName, String password) { // 调用查询用户信息 User loginUser = userMapper.findUserByName(loginName); // 判断查询的数据是否为空 if(loginUser!=null){ // 获取查询数据的盐对密码进行加密 String newPassword = PasswordUtil.md5(password,loginUser.getSalt(),SystemConstant.PASSWORD_COUNT); // 比较密码是否正确 if(loginUser.getPassword().equals(newPassword)){ return loginUser; } } return null; } - UserController登录控制器
@ResponseBody @RequestMapping("/login") public String login(String loginName, String password, HttpSession session){ HashMapmap = new HashMap (); User login = userService.login(loginName, password); if(login != null){ map.put(SystemConstant.EXIST,true); // 清空密码 login.setPassword(null); // 保存登录数据到session会话中 session.setAttribute(SystemConstant.LOGINUSER,login); }else{ map.put(SystemConstant.EXIST,false); } return JSON.toJSONString(map); } -
1
- 前端页面请求数据
// 登录事件 form.on("submit(login)", function(data){ $.post("/user/login",data.field,function(result){ if(result.exist){ // 跳转到首页 location.href = "/index.html"; }else { layer.alert(result.messages,{icon:5}); } },"json"); return false; });
- 定义IndexControllerC端首页的控制器
package com.zcl.controller; import com.zcl.entity.RoomType; import com.zcl.service.RoomTypeService; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import javax.annotation.Resource; import java.util.List; @Controller public class IndexController { @Resource RoomTypeService roomTypeService; @RequestMapping(value = {"/index.html"}) public String index(Model model){ // 调用查询房间类型数据 ListroomTypesList = roomTypeService.roomList(null); // 返回模型数据 model.addAttribute("roomTypesList",roomTypesList); return "forward:/index.jsp"; } } 上面登录的请求数据登录成功之后,就会跳转到当前的页面进行数据展示
- 前端注意事项
当遍历roomTypesList模型数据的时候,一定需要引入<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>否则无法在jsp页面直接遍历数据
重点:
因为我们控制器中声明的访问路径是index.html,而jsp默认的请求是index.jsp页面这样就会造成一个冲突,会先访问index.jsp页面那么我们的主页模型roomTypesList就不会有查询出来的数据是,而是有个空的,需要到web.xml配置文件中声明一下默认的访问路径如下:
/index.html
- IndexController控制器的修改
@Controller public class IndexController { @Resource RoomTypeService roomTypeService; @Resource FloorService floorService; @RequestMapping(value = {"/index.html"}) public String index(Model model){ // 1、调用查询房间类型数据 ListroomTypesList = roomTypeService.roomList(null); // 2、调用查询所有楼层数据 List floorList = floorService.findFloorList(null); // 返回模型数据 model.addAttribute("roomTypesList",roomTypesList); model.addAttribute("floorList",floorList); return "forward:/index.jsp"; } } 目前使用的是之前写好分页的方法,建议重新写过查询所有的持久层
- 前端jsp页面展示
需要细节的是有一个背景是灰色的
- C端首页跳转问题解决
问题:
index.jsp是用户访问的官网地址,当我们重新启动的时候不会直接访问到设定重新index.html控制器查询页面数据,会显示404
解决方法:
将原来的index.jsp页面改名为home.jsp
新建一个index.jsp页面,tomcat会默认进行访问,在index里面填写跳转路径即可如下
location.href = "/index.html";
同时注释web.xml里面的访问地址
页面的jsp建在webapp.WEB-INF.jsp文件下,命名为detail.jsp
-
跳转房间详情控制器编写
在admin中也有一个RoomController控制器,如果这里也设置一个的同名的话启动项目就会报错,需要修改其中一个的控制器名称,这里就修改了admin包下的重命名为roomAdminController
package com.zcl.controller; import com.zcl.service.RoomService; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import javax.annotation.Resource; @Controller @RequestMapping("/room") public class RoomController { @Resource RoomService roomService; @RequestMapping("/{id}.html") public String detail(@PathVariable Integer id, Model model){ Room room = roomService.findById(id); model.addAttribute("room",room); // 跳转到房间详情页面 return "detail"; } } -
修改home.jsp页面中点击房间的a标签进行跳转到房间详情页
- RoomMapper
Room findById(Integer id);
映射文件
注意:
上面的查询语句中,返回的是Room类型的实体数据,那么我们连表查询的typeName、price、bedNum、name这几个属性一定要有否则是返回不到查询的数据的,前端页面也会获取不到
- RoomService
public Room findById(Integer id) { return roomMapper.findById(id); }UserController控制器直接调用查询方法即可,目前在上面的控制器中已经调用了的
新建列表的hotelList.jsp页面在webapp.WEV-INF.jsp包下
- RoomController控制器的修改
@Resource RoomTypeService roomTypeService; @RequestMapping("/roomList.html") public String roomList(Model model){ // 查询所有的房间类型 ListroomTypeList = roomTypeService.roomList(null); // 创建查询条件的vo类作为查询可预定的房间状态 RoomVo roomVo = new RoomVo(); roomVo.setStatus(3); // 查询所有的房间列表数据 List roomList = roomService.findRoomList(roomVo); model.addAttribute("roomTypeList",roomTypeList); model.addAttribute("roomList",roomList); return "hotelList"; } 跳转到指定的列表视图,调用了查询房间列表的方法,因为原来就写有了就可以重复的使用
前端页面拿到模型roomList就可以循环获取到各项数据并显示出来
- 顶部的房型筛选
点击房间类查询搜索符合房型的数据
- RoomController控制器修改
@RequestMapping("/roomList/{id}.html") public String roomList(@PathVariable Integer id, Model model){ // 查询所有的房间类型 ListroomTypeList = roomTypeService.roomList(null); // 创建查询条件的vo类 RoomVo roomVo = new RoomVo(); roomVo.setRoomtypeid(id); // 查询所有的房间列表数据 List roomList = roomService.findRoomList(roomVo); model.addAttribute("roomTypeList",roomTypeList); model.addAttribute("roomList",roomList); return "hotelList"; } 使用了重置的方式,前端页面点击的请求为
${roomType.typename}
楼层的查询也是一样的
- RoomController控制器修改



