SSM框架之酒店管理系统十二（客房管理，layui富文本编辑器的使用和上传图片优化）
SSM框架之酒店管理系统十二（客房管理，layui富文本编辑器的使用和上传图片优化）
1、数据库表添加
原来已经有房间表的数据库了，只需要进行修改添加外键信息即可
create table t_room( idint auto_increment comment '房间id' primary key, photo varchar(255) null comment '房间图片', roomnum varchar(255) null comment '房间号', floorid int null comment '楼层外键', roomtypeId int null comment '房间类型外键', status int null comment '房间状态', roomdesc varchar(255) null comment '房间描述', roomrequirement varchar(255) null comment '房间要求', remark varchar(255) null comment '房间备注', constraint 房间类型外键 foreign key (roomtypeId) references t_room_type (id), constraint 楼层外键 foreign key (floorid) references t_floor (id));2、跳到房间管理控制器
/** * 去到房间管理页面 * @return */@RequestMapping("/toroomManager")public String toroomManager(){ return "admin/room/roomManager";}页面展示
3、添加实体类
public class Room { private Integer id; /** * 图片 */ private String photo; /** * 房间号 */ private String roomnum; /** * 房间类型id */ private Integer roomtypeid; /** * 楼层id */ private Integer floorid; //房间状态(1-已预订 2-已入住 3-可预订) private Integer status; private String statusStr; public String getStatusStr() { // 判断状态 if(status != null){ switch (status) { case 1: statusStr = "已预定"; break; case 2 : statusStr = "已入住"; break; case 3 :statusStr = "可预定";break; } } return statusStr; } public void setStatusStr(String statusStr) { this.statusStr = statusStr; } /** * 要求 */ private String roomrequirement; /** * 备注 */ private String remark; /** * 房间描述 */ private String roomdesc;}同时需要创建一个vo类继承当前创建的类，插件的模糊查询
4、查询房间列表数据
-
RoomMapper
/** * 项目名称：ssm_hotel * 描述：房间管理接口 * * @author zhong * @date 2022-05-21 10:12 */public interface RoomMapper { /** * 查询所有房间列表数据 * @param roomVo * @return */ List<Room> findRoomList(RoomVo roomVo);}映射文件编写
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.zcl.dao.RoomMapper"> <select id="findRoomList" resultType="com.zcl.entity.Room"> SELECT t1.*,t2.typeName,f.name FROM t_room t1 INNER JOIN t_room_type t2 on t1.roomTypeId = t2.id INNER JOIN t_floor f on f.id = t1.floorid <where> <if test="roomnum !=null and roomnum != ''"> and t1.roomnum like concat('%',#{roomnum},'%') </if> <if test="roomtypeid !=null"> and t1.roomtypeId = #{roomtypeid} </if> <if test="floorid !=null"> and t1.floorid = #{floorid} </if> <if test="status !=null"> and t1.status = #{status} </if> </where> order by id </select></mapper> -
RoomService
package com.zcl.service.impl;import com.zcl.dao.RoomMapper;import com.zcl.entity.Room;import com.zcl.entity.vo.RoomVo;import com.zcl.service.RoomService;import org.springframework.stereotype.Service;import org.springframework.transaction.annotation.Transactional;import javax.annotation.Resource;import java.util.List;/** * 项目名称：ssm_hotel * 描述： * * @author zhong * @date 2022-05-21 10:24 */@Service@Transactionalpublic class RoomServiceImpl implements RoomService { @Resource RoomMapper roomMapper; /** * 查询所有的数据列表 * @param roomVo * @return */ public List<Room> findRoomList(RoomVo roomVo) { return roomMapper.findRoomList(roomVo); }} -
RoomController
package com.zcl.controller.admin;import com.github.pagehelper.PageHelper;import com.github.pagehelper.PageInfo;import com.zcl.dao.RoomMapper;import com.zcl.entity.Room;import com.zcl.entity.RoomType;import com.zcl.entity.vo.RoomTypeVo;import com.zcl.entity.vo.RoomVo;import com.zcl.utils.DataGridViewResult;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import javax.annotation.Resource;import java.util.List;/** * 项目名称：ssm_hotel * 描述：房间管理控制器 * * @author zhong * @date 2022-05-21 10:27 */@RestController@RequestMapping("/admin/room")public class RoomController { @Resource RoomMapper roomMapper; /** * 查询房间列表控制器 * @param roomVo * @return */ @RequestMapping("/roomList") public DataGridViewResult roomList(RoomVo roomVo){ // 设置分页 PageHelper.startPage(roomVo.getPage(),roomVo.getLimit()); // 调用查询方法 List<Room> roomList = roomMapper.findRoomList(roomVo); // 封装分页数据 PageInfo<Room> page = new PageInfo<Room>(roomList); return new DataGridViewResult(page.getTotal(),page.getList()); }} -
前端页面
-
查询也页面的所有下来列表
-
房间类型下拉框
前端请求
// 查询房间类型下拉列表$.get("/admin/roomType/findAll",function(data) { var html = ''; for (let i = 0; i < data.length; i++) { html += '<option value="'+data[i].id+'">'+data[i].typename+'' } // 将数据渲染到下拉框 $("[name='roomtypeid']").append(html); // 刷新layui下拉框 form.render('select');},"json");后端控制器
/** * 查询所有的下拉列表 * @return */@RequestMapping("/findAll")public String findAll(){ List<RoomType> roomTypes = roomTypeService.roomList(null); return JSON.toJSONString(roomTypes);}因为数据已经有查询过的了，所以直接调用
-
楼层信息下拉框
与上面的一样的
-
5、添加房间数据
-
窗机打开事件
var layeditIndex; // 富文本编辑器// 添加窗口打开事件function openAddWindow() { mainIndex = layer.open({ type: 1, title:"添加房房间信息", area: ['800px', '800px'], maxmin: true, content:$("#addOrUpdateWindow"), success:function(){ $("#restBtn").click(); // 提交请求 url = "/admin/roomType/addRoomType"; // 重置上传的图片 $(".thumbImg").attr('src',"/hotel/show/images/defaultimg.jpg"); // 重置隐藏域文件的值 $("#photo").val("images/defaultimg.jpg"); } }); // 窗口最大化 layer.full(mainIndex); // 初始化富文本编辑器 layeditIndex = layedit.build('roomdesc');}// 窗口提交事件form.on('submit(doSubmit)', function (data) { // 添加信息中有富文本的编辑器，所以这里需要使用序列化的方式获取到值一次性的进行提交 // 将富文本编辑器的内容同步到文本域中，否则获取不到数据 layedit.sync(layeditIndex); // console.log($("#dataFrm").serialize()); $.post(url, $("#dataFrm").serialize(), function (result) { // 判断是否提交成功 if (result.succser) { // 刷新表格 tableIns.reload(); // 关闭窗口 layer.close(mainIndex); } // 提示成功信息 layer.msg(result.messages); }, "json") return false;}); -
文件上传事件是一样的，使用直接使用
-
RoomMapper
/** * 添加房间数据 * @param room * @return */int addRoom(Room room);映射文件编写
<insert id="addRoom"> insert into t_room (photo,roomnum,floorid,roomtypeId,status,roomdesc,roomrequirement,remark) values (#{photo},#{roomnum},#{floorid},#{roomtypeid},#{status},#{roomdesc},#{roomrequirement},#{remark});</insert> -
RoomService
/** * 添加房间 * @param room * @return */public int addRoom(Room room) { return roomMapper.addRoom(room);} -
RoomController
/** * 添加房间数据 * @param room * @return */@RequestMapping("/addRoom")public String addRoom(Room room){ HashMap<String, Object> map = new HashMap<String, Object>(); if(roomMapper.addRoom(room) > 0){ map.put(SystemConstant.SUCCESS,true); map.put(SystemConstant.MESSAGES,"房间信息添加成功"); }else{ map.put(SystemConstant.SUCCESS,false); map.put(SystemConstant.MESSAGES,"房间信息添加失败"); } return JSON.toJSONString(map);}注意开始的时候写的保存事件，不同与之前的数据提交，需要通过序列化否则提交获取不到编辑器里面的数据，造成空缺
-
富文本编辑器图片上传
富文本编辑器的上传文件的name值是
file是不可改变的，所以需要将原来上传文件的控制器的接收数据的参数添加个注解指定为file文件上传的控制器指定别名方式如下
public String uploadFile(@RequestParam(value = "file")MultipartFile attach){// 文件上传的内容}同时需要修改之前的前端页面上传文件的
file前端富文本编辑器修改如下，在点击打开窗口时中设置
// 初始化富文本编辑器layeditIndex = layedit.build('roomdesc',{ uploadImage:{ // 文件上传地址和提交方式 url:'/admin/file/uploadFile', type:'post' }});
6、编辑房间数据
-
编辑弹出回显数据
// 行编辑事件function openUpdateDept(data) { mainIndex = layer.open({ type: 1, maxmin: true, title: "编辑房间信息", area: ['800px', '800px'], content: $("#addOrUpdateWindow"), success: function () { // 数据回显 form.val("dataFrm", data); // 提交请求 url = "/admin/room/updateRoom"; // 图片回显 $(".thumbImg").attr('src',"/hotel/show/"+data.photo); // 设置隐藏域的值 $("#photo").val(data.photo); } }); // 窗口最大化 layer.full(mainIndex); // 初始化富文本编辑器 layeditIndex = layedit.build('roomdesc',{ uploadImage:{ // 文件上传地址和提交方式 url:'/admin/file/uploadFile', type:'post' } });} -
RoomMapper
/** * 修改房间数据 * @param room * @return */int updateRoom(Room room);映射文件
<update id="updateRoom"> update t_room <set> <if test="photo!=null and photo != ''"> photo = #{photo}, </if> <if test="roomnum!=null"> roomnum = #{roomnum}, </if> <if test="floorid!=null"> floorid = #{floorid}, </if> <if test="roomtypeid!=null"> roomtypeId = #{roomtypeid}, </if> <if test="status!=null"> status = #{status}, </if> <if test="roomdesc!=null and roomdesc != ''"> roomdesc = #{roomdesc}, </if> <if test="roomrequirement!=null and roomrequirement != ''"> roomrequirement = #{roomrequirement}, </if> <if test="remark!=null and remark != ''"> remark = #{remark} </if> </set> where id = #{id}</update> -
RoomService
/** * 修改房间数据 * @param room * @return */public int updateRoom(Room room) { return roomMapper.updateRoom(room);} -
RoomController
/** * 修改房间数据 * @param room * @return */@RequestMapping("/updateRoom")public String updateRoom(Room room){ HashMap<String, Object> map = new HashMap<String, Object>(); if(roomMapper.updateRoom(room) > 0){ map.put(SystemConstant.SUCCESS,true); map.put(SystemConstant.MESSAGES,"房间信息修改成功"); }else{ map.put(SystemConstant.SUCCESS,false); map.put(SystemConstant.MESSAGES,"房间信息修改失败"); } return JSON.toJSONString(map);}
7、删除房间
-
RoomMapper
/** * 删除房间数据 * @param roomId * @return */int deleteRoom(Integer roomId);映射文件
<delete id="deleteRoom"> delete from t_room where id = #{id};</delete> -
RoomService
/** * 根据房间id删除房间信息 * @param roomId * @return */public int deleteRoom(Integer roomId) { return roomMapper.deleteRoom(roomId);} -
RoomController
/** * 删除房间数据 * @param roomId * @return */@RequestMapping("/deltetRoom")public String deltetRoom(Integer roomId){ HashMap<String, Object> map = new HashMap<String, Object>(); if(roomMapper.deleteRoom(roomId) > 0){ map.put(SystemConstant.SUCCESS,true); map.put(SystemConstant.MESSAGES,"房间信息删除成功"); }else{ map.put(SystemConstant.SUCCESS,false); map.put(SystemConstant.MESSAGES,"房间信息删除失败"); } return JSON.toJSONString(map);} -
前端页面判断
// 行删除事件function deleteById(data) { // 判断当前的菜单是否有子菜单 if(data.status == 3){ // 提示用户是否删除该部门 layer.confirm('真的删除' + data.roomnum + '房间吗？', {icon: 3, title: "删除确认"}, function (index) { $.post("/admin/room/deltetRoom", {"roomId": data.id}, function (result2) { if (result2.exist) { // 刷新表格 table.reload('currentTableId'); // 关闭窗口 layer.close(mainIndex); } layer.msg(result2.messages); }, "json"); }); }else { layer.msg("只有可预定状态的房间才可以删除"); }}