• (N-128)基于springboot,vue酒店管理系统

    开发工具：IDEA

    服务器：Tomcat9.0， jdk1.8

    项目构建：maven

    数据库：mysql5.7

    系统分前后台，项目采用前后端分离

    前端技术：vue+elementUI

    服务端技术：springboot+mybatis

    本系统功能包括： 

    一、前台功能： 

    1、用户注册模块：用户可以输入用户名、密码、昵称、姓名、手机来 进行注册。

    2、用户登录模块：用户可以根据用户名、密码进行登录。

    3、前台首页模块：包括广告、房间信息、酒店新闻。

    4、酒店新闻模块：展示酒店标题，创建时间，详情。

    5、酒店预订模块：展示了客房的详情以及评价，用户输入入住日期以及入住天数进行预订。

    6、用户信息模块：展示了用户的头像、昵称、姓名、手机号码、性别并可进行修改。

    7、个人订单模块：展示了全部订单、待付款订单、待入住、已入住，已退房的客房信息。

    二、后台功能： 

    1、管理员登录模块：管理员可以根据用户名、密码进行登录。

    2、统计分析模块：管理员可以直观的查看近一周的客房数量、订单数量、用户数量。

    3、会员管理模块：管理员可以查看用户的基本信息。

    4、广告管理模块：管理员可以对酒店广告进行新增修改删除。

    5、分类管理模块：管理员可以对客房的分类进行新增修改删除。

    6、客房管理模块： 管理员可以对客房信息行增删改查。

    7、房间管理模块：管理员可以查看目前所有房间的状态并对其进行增删改查。

    8、订单管理模块：管理员可以找到用户提交的预订信息并进行开房和退房、查看的操作。

    9、评价管理模块：管理员可以对用户的评价进行查询删除。

    10、新闻管理模块：管理员可以对用户端新闻进行增删改查。

    11、管理员管理模块：管理员可以对管理员的账号行增删改查。

    文档截图： 

    N-128基于springboot,vue酒店管理系统

    前台截图： 

    后台截图：

    1. package com.wfuhui.modules.order.controller;
    2.  
    3. import java.util.ArrayList;
    4. import java.util.Date;
    5. import java.util.HashMap;
    6. import java.util.List;
    7. import java.util.Map;
    8.  
    9. import org.springframework.beans.factory.annotation.Autowired;
    10. import org.springframework.web.bind.annotation.GetMapping;
    11. import org.springframework.web.bind.annotation.PathVariable;
    12. import org.springframework.web.bind.annotation.RequestBody;
    13. import org.springframework.web.bind.annotation.RequestMapping;
    14. import org.springframework.web.bind.annotation.RequestParam;
    15. import org.springframework.web.bind.annotation.RestController;
    16.  
    17. import com.wfuhui.common.utils.DateUtils;
    18. import com.wfuhui.common.utils.Query;
    19. import com.wfuhui.common.utils.R;
    20. import com.wfuhui.modules.room.service.HouseService;
    21. import com.wfuhui.modules.member.service.MemberService;
    22. import com.wfuhui.modules.order.entity.OrderEntity;
    23. import com.wfuhui.modules.order.service.OrderService;
    24.  
    25.  
    26. /**
    27.  * 订单
    28.  * 
    30.  */
    31. @RestController
    32. @RequestMapping("/order")
    33. public class OrderController {
    34. 	@Autowired
    35. 	private OrderService orderService;
    36. 	@Autowired
    37. 	private HouseService roomService;
    38. 	@Autowired
    39. 	private MemberService memberService;
    40. 	
    41. 	/**
    42. 	 * 列表
    43. 	 */
    44. 	@RequestMapping("/list")
    45. 	public R list(@RequestParam Map params){
    46. 		//查询列表数据
    47.         Query query = new Query(params);
    48.  
    49. 		List orderList = orderService.queryList(query);
    50. 		int total = orderService.queryTotal(query);
    51. 		
    52. 		return R.ok().put("rows", orderList).put("total", total);
    53. 	}
    54. 	
    55. 	
    56. 	/**
    57. 	 * 信息
    58. 	 */
    59. 	@RequestMapping("/info/{id}")
    60. 	public R info(@PathVariable("id") Integer id){
    61. 		OrderEntity order = orderService.queryObject(id);
    62. 		return R.ok().put("order", order);
    63. 	}
    64. 	
    65. 	/**
    66. 	 * 保存
    67. 	 */
    68. 	@RequestMapping("/save")
    69. 	public R save(@RequestBody OrderEntity order){
    70. 		orderService.save(order);
    71. 		return R.ok();
    72. 	}
    73. 	
    74. 	/**
    75. 	 * 修改
    76. 	 */
    77. 	@RequestMapping("/update")
    78. 	public R update(@RequestBody OrderEntity order){
    79. 		orderService.update(order);
    80. 		
    81. 		return R.ok();
    82. 	}
    83. 	
    84. 	/**
    85. 	 * 删除
    86. 	 */
    87. 	@RequestMapping("/delete")
    88. 	public R delete(@RequestBody Integer[] ids){
    89. 		orderService.deleteBatch(ids);
    90. 		
    91. 		return R.ok();
    92. 	}
    93. 	
    94. 	/**
    95. 	 * 预订房间
    96. 	 * @param orderId
    97. 	 * @param roomNumber
    98. 	 * @return
    99. 	 */
    100. 	@RequestMapping("/orderRoom/{id}")
    101. 	public R orderRoom(@PathVariable("id")Integer id, String roomNumber) {
    102. 		OrderEntity order = new OrderEntity();
    103. 		order.setId(id);
    104. 		order.setOrderStatus(3);
    105. 		order.setRoomNumber(roomNumber);
    106. 		orderService.orderRoom(order);
    107. 		return R.ok();
    108. 	}
    109. 	
    110. 	/**
    111. 	 * 退房
    112. 	 * @param orderId
    113. 	 * @param roomNumber
    114. 	 * @return
    115. 	 */
    116. 	@RequestMapping("/returnRoom/{id}")
    117. 	public R returnRoom(@PathVariable("id")Integer id) {
    118. 		OrderEntity order = new OrderEntity();
    119. 		order.setId(id);
    120. 		order.setOrderStatus(4);
    121. 		orderService.returnRoom(order);
    122. 		//减少已售
    123. 		orderService.delHouseVolume(order.getId());
    124. 		return R.ok();
    125. 	}
    126. 	
    127. }
    1. <template>
    2.     <div>
    3.         <el-container>
    4.             <el-header><mainHeader>mainHeader>
    5.             el-header>
    6.             <el-container>
    7.                 <mainSidebar :active="active">mainSidebar>
    8.                 <el-main>
    9.                      <div v-if="showList">
    10.                     <el-form :inline="true" :model="q" class="demo-form-inline">
    11.                         <el-form-item label="客房名称">
    12.                             <el-input v-model="q.houseName" placeholder="客房名称">el-input>
    13.                         el-form-item>
    14.                         <el-form-item>
    15.                             <el-button type="primary" @click="query">查询el-button>
    16.                             <el-button type="success" @click="add">新增el-button>
    17.                             <el-button type="warning" @click="update">修改el-button>
    18.                             <el-button type="danger" @click="del">删除el-button>
    19.                         el-form-item>
    20.                     el-form>
    21.                         <el-table
    22.                         :data="houseList"
    23.                         style="width: 100%"
    24.                         @selection-change="handleSelectionChange">
    25.                         <el-table-column
    26.                           type="selection"
    27.                           width="55">
    28.                         el-table-column>
    29.                         <el-table-column
    30.                             prop="picUrl"
    31.                             label="图片"
    32.                             >
    33.                             <template slot-scope="scope">
    34.                                 <el-image
    35.                                     style="width: 100px; height: 80px"
    36.                                     :src="scope.row.picUrl">el-image>
    37.                             template>
    38.                         el-table-column>
    39.                         <el-table-column
    40.                             prop="houseName"
    41.                             label="客房名称"
    42.                             >
    43.                         el-table-column>
    44.                         <el-table-column
    45.                             prop="category.categoryName"
    46.                             label="分类">
    47.                         el-table-column>
    48.                         <el-table-column
    49.                             prop="price"
    50.                             label="价格">
    51.                         el-table-column>
    52.                         <el-table-column
    53.                             prop="stock"
    54.                             label="房间数量">
    55.                         el-table-column>
    56.                         <el-table-column
    57.                             prop="createTime"
    58.                             label="创建时间">
    59.                         el-table-column>
    60.                         el-table>
    61.                         <el-pagination
    62.                             @size-change="handleSizeChange"
    63.                             @current-change="handleCurrentChange"
    64.                             :current-page="q.page"
    65.                             :page-sizes="[10, 50, 100]"
    66.                             :page-size="q.limit"
    67.                             layout="total, sizes, prev, pager, next, jumper"
    68.                             :total="total">
    69.                         el-pagination>
    70.                      div>
    71.                         <div v-if="!showList">
    72.                         <el-form :model="house" label-width="120px">
    73.                             <el-form-item label="图片">
    74.                                 <el-upload
    75.                                 class="avatar-uploader"
    76.                                 action="http://127.0.0.1:10001/api/fileupload/upload"
    77.                                 list-type="picture-card"
    78.                                 multiple
    79.                                 :file-list="fileList"
    80.                                 :on-success="handleAvatarSuccess"
    81.                                 :on-remove="imgRemove"
    82.                                 :before-upload="beforeAvatarUpload">
    83.                                 <i class="el-icon-plus avatar-uploader-icon">i>
    84.                                 el-upload>
    85.  
    86.                             el-form-item>
    87.                         <el-form-item label="客房名称">
    88.                             <el-input v-model="house.houseName">el-input>
    89.                         el-form-item>
    90.                         <el-form-item label="分类">
    91.                             <el-select v-model="house.categoryId" placeholder="请选择">
    92.                                 <el-option
    93.                                 v-for="item in categoryList"
    94.                                 :key="item.id"
    95.                                 :label="item.categoryName"
    96.                                 :value="item.id">
    97.                                 el-option>
    98.                             el-select>
    99.                         el-form-item>
    100.                         <el-form-item label="价格">
    101.                             <el-input v-model="house.price">el-input>
    102.                         el-form-item>
    103.                         <el-form-item label="房间数量">
    104.                             <el-input v-model="house.stock">el-input>
    105.                         el-form-item>
    106.                         <el-form-item label="详情">
    107.                             <quill-editor ref="text" v-model="house.describe" :options="editorOption" style="height: 300px; margin-bottom: 50px;" />
    108.                         el-form-item>
    109.                         <el-form-item>
    110.                             <el-button type="primary" @click="onSubmit">保存el-button>
    111.                             <el-button @click="cancel">取消el-button>
    112.                         el-form-item>
    113.                         el-form>
    114.                     div>
    115.                 el-main>
    116.             el-container>
    117.         el-container>
    118.     div>
    119. template>
    120. <script>
    121. import { quillEditor } from 'vue-quill-editor'
    122. import {quillRedefine} from 'vue-quill-editor-upload'
    123. import 'quill/dist/quill.core.css'
    124. import 'quill/dist/quill.bubble.css'
    125. import 'quill/dist/quill.snow.css'
    126. import mainHeader from '../../../components/admin-main-header'
    127. import mainSidebar from '../../../components/admin-main-sidebar'
    128. export default {
    129.   name: "House",
    130.   data() {
    131.     return {
    132.       total: 0,
    133.       houseList: [],
    134.       categoryList: [],
    135.       q: {
    136.         houseName: '',
    137.         page: this.currentPage,
    138.         limit: this.pageSize
    139.       },
    140.       asideStyle: {
    141.         height: '500px'
    142.       },
    143.       house: {
    144.           picUrl: ''
    145.       },
    146.       active: '5',
    147.       showList: true,
    148.       editorOption: {},
    149.       fileList: [],
    150.       ids: []
    151.     };
    152.   },
    153.   components: {
    154.     quillEditor,
    155.     quillRedefine,
    156.     mainHeader,
    157.     mainSidebar
    158.   },
    159.   methods:{
    160.       handleSizeChange(e){
    161.           //console.log(e)
    162.           this.q.limit = e;
    163.           this.query();
    164.       },
    165.       handleCurrentChange(e){
    166.           //console.log(e)
    167.           this.q.page = e;
    168.           this.query();
    169.       },
    170.       query(){
    171.         var that = this;
    172.         this.$axios.get(this.domain + '/house/list',
    173.         { headers:{ token: localStorage.getItem("atoken") },
    174.           params: that.q
    175.         }).then(function(res){
    176.             if(res.data.code == 0){//成功
    177.               that.houseList = res.data.rows
    178.               that.total = res.data.total
    179.             }else{
    180.  
    181.             }
    182.         })
    183.       },
    184.       queryCategory(){
    185.         var that = this;
    186.         this.$axios.get(this.domain + '/category/listAll',
    187.         {
    188.             headers:{ token: localStorage.getItem("atoken") }
    189.         }).then(function(res){
    190.             if(res.data.code == 0){//成功
    191.               that.categoryList = res.data.categoryList
    192.             }else{
    193.  
    194.             }
    195.         })
    196.       },
    197.       queryHouse(id){
    198.         var that = this;
    199.         this.$axios.get(this.domain + '/house/info/'+id,
    200.         {
    201.             headers:{ token: localStorage.getItem("atoken") }
    202.         }).then(function(res){
    203.             if(res.data.code == 0){//成功
    204.               that.house = res.data.house
    205.               that.initImage(res.data.house.picUrls)
    206.             }else{
    207.  
    208.             }
    209.         })
    210.       },
    211.       initImage(picUrls){
    212.         this.fileList=[];
    213.         let urlList = picUrls.map(function(item, index){
    214.           return {url: picUrls[index]}
    215.         });
    216.         for (let url in urlList){
    217.           this.fileList.push(urlList[url]);
    218.         }
    219.       },
    220.       onSubmit(e){
    221.         var that = this;
    222.         var data = this.house;
    223.         data.picUrls = this.fileList.map(function(item, index){
    224.             return item.url
    225.         })
    226.         data.picUrl = data.picUrls[0]
    227.         var action = data.id == null ? "save" : "update";
    228.         this.$axios.post(this.domain + '/house/'+action,
    229.             data,
    230.             {
    231.                 headers: {'token': localStorage.getItem("atoken")}
    232.             }
    233.         ).then(function(res){
    234.             //console.log(res)
    235.             if(res.data.code == 0){//成功
    236.               that.showList = true;
    237.               that.query();
    238.             }else{
    239.               that.errorMsg = res.data.msg;
    240.               that.$message.error(res.data.msg);
    241.             }
    242.         })
    243.       },
    244.       add(){
    245.           this.showList = false
    246.           this.fileList = []
    247.           this.house = {
    248.               picUrls: []
    249.           }
    250.       },
    251.       cancel(){
    252.           this.showList = true
    253.       },
    254.       update(){
    255.         if(this.ids.length != 1){
    256.             this.$message.info("请选择一条数据");
    257.             return;
    258.         }
    259.         this.showList = false;
    260.         this.queryHouse(this.ids[0]);
    261.       },
    262.       del(){
    263.         if(this.ids.length == 0){
    264.             this.$message.info("请选择数据");
    265.             return;
    266.         }
    267.         var that = this;
    268.         this.$axios.post(this.domain + '/house/delete',
    269.             that.ids, {
    270.             headers: {'token': localStorage.getItem("atoken")}
    271.         }).then(function(res){
    272.             //console.log(res)
    273.             if(res.data.code == 0){//成功
    274.               that.query();
    275.             }else{
    276.               that.errorMsg = res.data.msg;
    277.               that.$message.error(res.data.msg);
    278.             }
    279.         })
    280.       },
    281.       handleAvatarSuccess(e){
    282.           this.fileList.push({
    283.               url: e.url
    284.           });
    285.       },
    286.       imgRemove(file, fileList){
    287.           this.fileList = fileList;
    288.       },
    289.       beforeAvatarUpload(e){
    290.  
    291.       },
    292.       handleSelectionChange(e){
    293.         var ids = [];
    294.         for(var i = 0; i < e.length; i++){
    295.             ids.push(e[i].id)
    296.         }
    297.         this.ids = ids;
    298.       }
    299.   },
    300.   created(){
    301.     var docHeight = document.documentElement.clientHeight;
    302.     this.asideStyle.height = docHeight - 76 + "px";
    303.     var user = localStorage.getItem("auser");
    304.     if(user){
    305.         this.user = JSON.parse(user);
    306.     }else{
    307.         this.$router.push("admin_login");
    308.     }
    309.     this.query();
    310.     this.queryCategory();
    311.     this.editorOption = quillRedefine(
    312.     {
    313.         // 图片上传的设置
    314.         uploadConfig: {
    315.         action: this.domain + '/api/fileupload/upload',  // 必填参数 图片上传地址
    316.         size: 500,  // 可选参数   图片限制大小，单位为Kb, 1M = 1024Kb
    317.         accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon',  // 可选参数 可上传的图片格式
    318.         // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
    319.         // 你必须把返回的数据中所包含的图片地址 return 回去
    320.         res: (respnse) => {
    321.             return respnse.url
    322.         },
    323.         name: 'file'  // 图片上传参数名
    324.         }
    325.     }
    326.     )
    327.     //console.log(this.editorOption)
    328.  
    329.   }
    330. };
    331. script>
    332.  
    333. <style scoped>
    334.  
    335. style>

  • 相关阅读:
    【Tensorflow深度学习】优化算法、损失计算、模型评估、向量嵌入、神经网络等模块的讲解（超详细必看）
    微擎模块 啦啦外卖跑腿小程序最新版14.3 带最新跑腿前端+教学视频 完整包
    stm32cubemx hal学习记录：FreeRTOS信号量
    1696D. Permutation Graph 思维
    Python图像处理算法实战【1】超详细整理 | 新手入门实用指南 | 图像处理基础
    Linux 入门教程 by 程序员鱼皮
    PMP致命三问：考PMP需要报培训班吗？对于没有做过项目管理的人来说，考这个难度大吗？考试具体要准备什么资料？
    Pytorch 实战 LESSON 4 张量的线性代数运算
    SpringBoot整合MongoDB 并进行增删改查
    温故而知新一（C++）
  • 原文地址：https://blog.csdn.net/qq_35334787/article/details/133955681