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);
}
@Service
public class RoomServiceImpl implements RoomService {
@Autowired
private RoomRepository roomRepository;
@Override
public List<Room> findAll() {
return roomRepository.findAll();
}
@Override
public Room findById(Long id) {
return roomRepository.findById(id).orElse(null);
}
@Override
public Room save(Room room) {
return roomRepository.save(room);
}
@Override
public void deleteById(Long id) {
roomRepository.deleteById(id);
}
}
Controller层接口：
@RestController
@RequestMapping("/room")
public class RoomController {
@Autowired
private 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?id=' + 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);
}
@Service
public class OrderServiceImpl implements OrderService {
@Autowired
private OrderRepository orderRepository;
@Override
public List<Order> findAll() {
return orderRepository.findAll();
}
@Override
public Order findById(Long id) {
return orderRepository.findById(id).orElse(null);
}
@Override
public Order save(Order order) {
return orderRepository.save(order);
}
@Override
public void deleteById(Long id) {
orderRepository.deleteById(id);
}
}
OrderController接口：
@RestController
@RequestMapping("/order")
public class OrderController {
@Autowired
private 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 {
@Autowired
private 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知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。