SpingBoot+LayUI 实现酒店管理系统编写

✅作者简介：2022年博客新星 第八。热爱国学的Java后端开发者，修心和技术同步精进。
个人主页：Java Fans的博客
个人信条：不迁怒，不贰过。小知识，大智慧。
当前专栏：Java案例分享专栏
✨特色专栏：国学周更-心性养成之路
本文内容：如何入门Python——学习Python的指南针

文章目录

• • 1、整体分析
  • 2、客房模块
  • 3、订单模块
  • 4、财务模块

1、整体分析

首先，需要明确酒店管理系统的功能需求，包括但不限于客房管理、订单管理、财务管理等。然后，根据需求设计数据库表结构，并使用Springboot框架搭建后端服务，实现数据的增删改查等操作。最后，使用layui框架编写前端页面，与后端服务进行交互，实现完整的酒店管理系统。

以下是具体步骤及代码编写：

1.1、设计数据库表结构

根据需求，设计数据库表结构，包括但不限于以下表：

• 客房表（room）：包括客房编号、客房类型、客房状态等字段。
• 订单表（order）：包括订单编号、客房编号、入住时间、离店时间、订单状态等字段。
• 财务表（finance）：包括财务编号、订单编号、收入、支出等字段。

1.2、使用Springboot框架搭建后端服务

使用Springboot框架搭建后端服务，实现数据的增删改查等操作。具体步骤如下：

• 创建Springboot项目，引入相关依赖。
• 创建实体类，对应数据库表结构。
• 创建DAO层接口，定义数据操作方法。
• 创建Service层接口及实现类，实现业务逻辑。
• 创建Controller层接口，处理HTTP请求，调用Service层方法，返回JSON数据。

2、客房模块

2.1 后端实现

实体类：

@Entity@Table(name = "room")public class Room {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;private String roomNo;private String roomType;private String status;// getter/setter方法省略}

DAO层接口：

public interface RoomRepository extends JpaRepository<Room, Long> {}

Service层接口及实现类：

public interface RoomService {List<Room> findAll();Room findById(Long id);Room save(Room room);void deleteById(Long id);}

@Servicepublic class RoomServiceImpl implements RoomService {@Autowiredprivate RoomRepository roomRepository;@Overridepublic List<Room> findAll() {return roomRepository.findAll();}@Overridepublic Room findById(Long id) {return roomRepository.findById(id).orElse(null);}@Overridepublic Room save(Room room) {return roomRepository.save(room);}@Overridepublic void deleteById(Long id) {roomRepository.deleteById(id);}}

Controller层接口：

@RestController@RequestMapping("/room")public class RoomController {@Autowiredprivate RoomService roomService;@GetMapping("/list")public List<Room> findAll() {return roomService.findAll();}@GetMapping("/{id}")public Room findById(@PathVariable Long id) {return roomService.findById(id);}@PostMapping("/")public Room save(@RequestBody Room room) {return roomService.save(room);}@DeleteMapping("/{id}")public void deleteById(@PathVariable Long id) {roomService.deleteById(id);}}

2.2 使用layui框架编写前端页面

使用layui框架编写前端页面，与后端服务进行交互，实现完整的酒店管理系统。具体步骤如下：

• 引入layui框架及相关依赖。
• 编写HTML页面，包括表格、表单等组件。
• 编写JavaScript代码，使用jQuery库与后端服务进行交互，实现数据的增删改查等操作。

以下是示例代码：

HTML页面：

<table id="roomTable" lay-filter="roomTable"></table><script type="text/html" id="toolbar"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="add">添加客房</button></div></script><script type="text/html" id="statusTpl">{{# if(d.status === '0'){ }}<span class="layui-badge layui-bg-gray">未入住</span>{{# } else if(d.status === '1'){ }}<span class="layui-badge layui-bg-green">已入住</span>{{# } else if(d.status === '2'){ }}<span class="layui-badge layui-bg-orange">已预订</span>{{# } else if(d.status === '3'){ }}<span class="layui-badge layui-bg-red">已退房</span>{{# } }}</script>

JavaScript代码：

layui.use(['table', 'layer'], function() {var table = layui.table;var layer = layui.layer;// 渲染表格table.render({elem: '#roomTable',url: '/room/list',toolbar: '#toolbar',cols: [[{type: 'checkbox'},{field: 'id', title: 'ID', width: 80},{field: 'roomNo', title: '客房编号', width: 120},{field: 'roomType', title: '客房类型', width: 120},{field: 'status', title: '客房状态', width: 120, templet: '#statusTpl'},{fixed: 'right', title: '操作', width: 120, toolbar: '#operateBar'}]],page: true});// 监听工具条table.on('toolbar(roomTable)', function(obj) {if (obj.event === 'add') {layer.open({type: 2,title: '添加客房',content: '/room/add',area: ['500px', '400px']});}});// 监听行工具条table.on('tool(roomTable)', function(obj) {var data = obj.data;if (obj.event === 'edit') {layer.open({type: 2,title: '编辑客房',content: '/room/edit" />+ data.id,area: ['500px', '400px']});} else if (obj.event === 'delete') {layer.confirm('确定删除该客房吗？', function(index) {$.ajax({url: '/room/delete/' + data.id,type: 'DELETE',success: function(res) {if (res.code === 0) {layer.msg('删除成功');obj.del();} else {layer.msg('删除失败');}}});layer.close(index);});}});});

3、订单模块

3.1 设计数据库表结构

根据需求，设计订单表（order）的数据库表结构，包括但不限于以下字段：

• 订单编号（id）：主键，自增长。
• 客房编号（room_id）：外键，关联客房表的客房编号字段。
• 入住时间（checkin_time）：入住时间。
• 离店时间（checkout_time）：离店时间。
• 订单状态（status）：订单状态，包括未入住、已入住、已预订、已退房等。

3.2 后端实现

• 创建Order实体类，对应订单表的数据库表结构。
• 创建OrderRepository接口，继承JpaRepository，定义数据操作方法。
• 创建OrderService接口及实现类，实现业务逻辑。
• 创建OrderController接口，处理HTTP请求，调用Service层方法，返回JSON数据。

以下是示例代码：

Order实体类：

@Entity@Table(name = "order")public class Order {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;@ManyToOne@JoinColumn(name = "room_id")private Room room;@Column(name = "checkin_time")private Date checkinTime;@Column(name = "checkout_time")private Date checkoutTime;private Integer status;// getter/setter方法省略}

OrderRepository接口：

public interface OrderRepository extends JpaRepository<Order, Long> {}

OrderService接口及实现类：

public interface OrderService {List<Order> findAll();Order findById(Long id);Order save(Order order);void deleteById(Long id);}

@Servicepublic class OrderServiceImpl implements OrderService {@Autowiredprivate OrderRepository orderRepository;@Overridepublic List<Order> findAll() {return orderRepository.findAll();}@Overridepublic Order findById(Long id) {return orderRepository.findById(id).orElse(null);}@Overridepublic Order save(Order order) {return orderRepository.save(order);}@Overridepublic void deleteById(Long id) {orderRepository.deleteById(id);}}

OrderController接口：

@RestController@RequestMapping("/order")public class OrderController {@Autowiredprivate OrderService orderService;@GetMapping("/list")public List<Order> findAll() {return orderService.findAll();}@GetMapping("/{id}")public Order findById(@PathVariable Long id) {return orderService.findById(id);}@PostMapping("/")public Order save(@RequestBody Order order) {return orderService.save(order);}@DeleteMapping("/{id}")public void deleteById(@PathVariable Long id) {orderService.deleteById(id);}}

3.3 前端实现

在HTML页面中添加订单表格，包括订单编号、客房编号、入住时间、离店时间、订单状态等字段。
在JavaScript代码中使用jQuery库与后端服务进行交互，实现数据的增删改查等操作。

以下是示例代码：

HTML页面：

<table id="orderTable" lay-filter="orderTable"></table><script type="text/html" id="toolbar"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="add">添加订单</button></div></script><script type="text/html" id="statusTpl">{{# if(d.status === 0){ }}<span class="layui-badge layui-bg-gray">未入住</span>{{# } else if(d.status === 1){ }}<span class="layui-badge layui-bg-green">已入住</span>{{# } else if(d.status === 2){ }}<span class="layui-badge layui-bg-orange">已预订</span>{{# } else if(d.status === 3){ }}<span class="layui-badge layui-bg-red">已退房</span>{{# } }}</script>

JavaScript代码：

layui.use(['table', 'layer'], function() {var table = layui.table;var layer = layui.layer;// 渲染表格table.render({elem: '#orderTable',url: '/order/list',toolbar: '#toolbar',cols: [[{type: 'checkbox'},{field: 'id', title: 'ID', width: 80},{field: 'room.roomNo', title: '客房编号', width: 120},{field: 'checkinTime', title: '入住时间', width: 180},{field: 'checkoutTime', title: '离店时间', width: 180},{field: 'status', title: '订单状态', width: 120, templet: '#statusTpl'},{fixed: 'right', title: '操作', width: 120, toolbar: '#operateBar'}]],page: true});// 监听工具条table.on('toolbar(orderTable)', function(obj) {if (obj.event === 'add') {layer.open({type: 2,title: '添加订单',content: '/order/add',area: ['500px', '400px']});}});// 监听行工具条table.on('tool(orderTable)', function(obj) {var data = obj.data;if (obj.event === 'edit') {layer.open({type: 2,title: '编辑订单',content: '/order/edit?id=' + data.id,area: ['500px', '400px']});} else if (obj.event === 'delete') {layer.confirm('确定删除该订单吗？', function(index) {$.ajax({url: '/order/delete/' + data.id,type: 'DELETE',success: function(res) {if (res.code === 0) {layer.msg('删除成功');obj.del();} else {layer.msg('删除失败');}}});layer.close(index);});}});});

4、财务模块

4.1 设计数据库表结构

根据需求，设计财务表的数据库表结构，包括但不限于以下字段：

• 财务编号（id）：主键，自增长。
• 订单编号（orderId）：外键，关联订单表的订单编号字段。
• 收入（income）：财务收入金额。
• 支出（expense）：财务支出金额。

4.2 后端实现

• 创建财务表的实体类，对应数据库表结构。
• 创建财务表的DAO层接口，继承JpaRepository接口，实现数据的增删改查等操作。
• 创建财务表的Service层接口，定义业务逻辑。
• 创建财务表的Controller层接口，实现对外提供的RESTful API。

以下是示例代码：

实体类：

@Entity@Table(name = "finance")public class Finance {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;private Long orderId;private BigDecimal income;private BigDecimal expense;// getter and setter}

DAO层接口：

public interface FinanceRepository extends JpaRepository<Finance, Long> {}

Service层接口：

public interface FinanceService {List<Finance> findAll();Finance findById(Long id);Finance save(Finance finance);void deleteById(Long id);}

Controller层接口：

@RestController@RequestMapping("/finances")public class FinanceController {@Autowiredprivate FinanceService financeService;@GetMapping("")public List<Finance> findAll() {return financeService.findAll();}@GetMapping("/{id}")public Finance findById(@PathVariable Long id) {return financeService.findById(id);}@PostMapping("")public Finance save(@RequestBody Finance finance) {return financeService.save(finance);}@DeleteMapping("/{id}")public void deleteById(@PathVariable Long id) {financeService.deleteById(id);}}

4.3 前端实现

• 在HTML页面中添加财务表的展示组件，如表格。
• 使用jQuery或者axios等库，与后端服务进行交互，实现数据的展示、增删改查等操作。
  以下是示例代码：

HTML页面：

<table id="financeTable" lay-filter="financeTable"></table><script>layui.use(['table', 'layer'], function() {var table = layui.table;var layer = layui.layer;table.render({elem: '#financeTable',url: '/finances',cols: [[{field: 'id', title: 'ID', width: 80},{field: 'orderId', title: '订单编号', width: 120},{field: 'income', title: '收入', width: 120},{field: 'expense', title: '支出', width: 120},{fixed: 'right', title: '操作', toolbar: '#operateBar', width: 120}]],page: true});table.on('tool(financeTable)', function(obj) {var data = obj.data;if (obj.event === 'edit') {layer.open({type: 2,title: '编辑财务',content: '/finance/edit?id=' + data.id,area: ['500px', '400px']});} else if (obj.event === 'delete') {layer.confirm('确定删除该财务吗？', function(index) {$.ajax({url: '/finance/delete?id=' + data.id,type: 'DELETE',success: function(res) {if (res.code === 0) {layer.msg('删除成功');obj.del();} else {layer.msg('删除失败');}}});layer.close(index);});}});});</script>

  码文不易，本篇文章就介绍到这里，如果想要学习更多Java系列知识，点击关注博主，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。