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>