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

news/2024/7/10 0:54:17 标签: springboot, vue, mysql, mybatis, elementUI, 前后端分离

开发工具: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、管理员管理模块:管理员可以对管理员的账号行增删改查。

文档截图: 

前台截图: 

后台截图:

package com.wfuhui.modules.order.controller;

import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import com.wfuhui.common.utils.DateUtils;
import com.wfuhui.common.utils.Query;
import com.wfuhui.common.utils.R;
import com.wfuhui.modules.room.service.HouseService;
import com.wfuhui.modules.member.service.MemberService;
import com.wfuhui.modules.order.entity.OrderEntity;
import com.wfuhui.modules.order.service.OrderService;


/**
 * 订单
 * 

 */
@RestController
@RequestMapping("/order")
public class OrderController {
	@Autowired
	private OrderService orderService;
	@Autowired
	private HouseService roomService;
	@Autowired
	private MemberService memberService;
	
	/**
	 * 列表
	 */
	@RequestMapping("/list")
	public R list(@RequestParam Map<String, Object> params){
		//查询列表数据
        Query query = new Query(params);

		List<OrderEntity> orderList = orderService.queryList(query);
		int total = orderService.queryTotal(query);
		
		return R.ok().put("rows", orderList).put("total", total);
	}
	
	
	/**
	 * 信息
	 */
	@RequestMapping("/info/{id}")
	public R info(@PathVariable("id") Integer id){
		OrderEntity order = orderService.queryObject(id);
		return R.ok().put("order", order);
	}
	
	/**
	 * 保存
	 */
	@RequestMapping("/save")
	public R save(@RequestBody OrderEntity order){
		orderService.save(order);
		return R.ok();
	}
	
	/**
	 * 修改
	 */
	@RequestMapping("/update")
	public R update(@RequestBody OrderEntity order){
		orderService.update(order);
		
		return R.ok();
	}
	
	/**
	 * 删除
	 */
	@RequestMapping("/delete")
	public R delete(@RequestBody Integer[] ids){
		orderService.deleteBatch(ids);
		
		return R.ok();
	}
	
	/**
	 * 预订房间
	 * @param orderId
	 * @param roomNumber
	 * @return
	 */
	@RequestMapping("/orderRoom/{id}")
	public R orderRoom(@PathVariable("id")Integer id, String roomNumber) {
		OrderEntity order = new OrderEntity();
		order.setId(id);
		order.setOrderStatus(3);
		order.setRoomNumber(roomNumber);
		orderService.orderRoom(order);
		return R.ok();
	}
	
	/**
	 * 退房
	 * @param orderId
	 * @param roomNumber
	 * @return
	 */
	@RequestMapping("/returnRoom/{id}")
	public R returnRoom(@PathVariable("id")Integer id) {
		OrderEntity order = new OrderEntity();
		order.setId(id);
		order.setOrderStatus(4);
		orderService.returnRoom(order);
		//减少已售
		orderService.delHouseVolume(order.getId());
		return R.ok();
	}
	
}
<template>
    <div>
        <el-container>
            <el-header><mainHeader></mainHeader>
            </el-header>
            <el-container>
                <mainSidebar :active="active"></mainSidebar>
                <el-main>
                     <div v-if="showList">
                    <el-form :inline="true" :model="q" class="demo-form-inline">
                        <el-form-item label="客房名称">
                            <el-input v-model="q.houseName" placeholder="客房名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="query">查询</el-button>
                            <el-button type="success" @click="add">新增</el-button>
                            <el-button type="warning" @click="update">修改</el-button>
                            <el-button type="danger" @click="del">删除</el-button>
                        </el-form-item>
                    </el-form>
                        <el-table
                        :data="houseList"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column
                          type="selection"
                          width="55">
                        </el-table-column>
                        <el-table-column
                            prop="picUrl"
                            label="图片"
                            >
                            <template slot-scope="scope">
                                <el-image
                                    style="width: 100px; height: 80px"
                                    :src="scope.row.picUrl"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="houseName"
                            label="客房名称"
                            >
                        </el-table-column>
                        <el-table-column
                            prop="category.categoryName"
                            label="分类">
                        </el-table-column>
                        <el-table-column
                            prop="price"
                            label="价格">
                        </el-table-column>
                        <el-table-column
                            prop="stock"
                            label="房间数量">
                        </el-table-column>
                        <el-table-column
                            prop="createTime"
                            label="创建时间">
                        </el-table-column>
                        </el-table>
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="q.page"
                            :page-sizes="[10, 50, 100]"
                            :page-size="q.limit"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                     </div>
                        <div v-if="!showList">
                        <el-form :model="house" label-width="120px">
                            <el-form-item label="图片">
                                <el-upload
                                class="avatar-uploader"
                                action="http://127.0.0.1:10001/api/fileupload/upload"
                                list-type="picture-card"
                                multiple
                                :file-list="fileList"
                                :on-success="handleAvatarSuccess"
                                :on-remove="imgRemove"
                                :before-upload="beforeAvatarUpload">
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>

                            </el-form-item>
                        <el-form-item label="客房名称">
                            <el-input v-model="house.houseName"></el-input>
                        </el-form-item>
                        <el-form-item label="分类">
                            <el-select v-model="house.categoryId" placeholder="请选择">
                                <el-option
                                v-for="item in categoryList"
                                :key="item.id"
                                :label="item.categoryName"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="价格">
                            <el-input v-model="house.price"></el-input>
                        </el-form-item>
                        <el-form-item label="房间数量">
                            <el-input v-model="house.stock"></el-input>
                        </el-form-item>
                        <el-form-item label="详情">
                            <quill-editor ref="text" v-model="house.describe" :options="editorOption" style="height: 300px; margin-bottom: 50px;" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">保存</el-button>
                            <el-button @click="cancel">取消</el-button>
                        </el-form-item>
                        </el-form>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import {quillRedefine} from 'vue-quill-editor-upload'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.bubble.css'
import 'quill/dist/quill.snow.css'
import mainHeader from '../../../components/admin-main-header'
import mainSidebar from '../../../components/admin-main-sidebar'
export default {
  name: "House",
  data() {
    return {
      total: 0,
      houseList: [],
      categoryList: [],
      q: {
        houseName: '',
        page: this.currentPage,
        limit: this.pageSize
      },
      asideStyle: {
        height: '500px'
      },
      house: {
          picUrl: ''
      },
      active: '5',
      showList: true,
      editorOption: {},
      fileList: [],
      ids: []
    };
  },
  components: {
    quillEditor,
    quillRedefine,
    mainHeader,
    mainSidebar
  },
  methods:{
      handleSizeChange(e){
          //console.log(e)
          this.q.limit = e;
          this.query();
      },
      handleCurrentChange(e){
          //console.log(e)
          this.q.page = e;
          this.query();
      },
      query(){
        var that = this;
        this.$axios.get(this.domain + '/house/list',
        { headers:{ token: localStorage.getItem("atoken") },
          params: that.q
        }).then(function(res){
            if(res.data.code == 0){//成功
              that.houseList = res.data.rows
              that.total = res.data.total
            }else{

            }
        })
      },
      queryCategory(){
        var that = this;
        this.$axios.get(this.domain + '/category/listAll',
        {
            headers:{ token: localStorage.getItem("atoken") }
        }).then(function(res){
            if(res.data.code == 0){//成功
              that.categoryList = res.data.categoryList
            }else{

            }
        })
      },
      queryHouse(id){
        var that = this;
        this.$axios.get(this.domain + '/house/info/'+id,
        {
            headers:{ token: localStorage.getItem("atoken") }
        }).then(function(res){
            if(res.data.code == 0){//成功
              that.house = res.data.house
              that.initImage(res.data.house.picUrls)
            }else{

            }
        })
      },
      initImage(picUrls){
        this.fileList=[];
        let urlList = picUrls.map(function(item, index){
          return {url: picUrls[index]}
        });
        for (let url in urlList){
          this.fileList.push(urlList[url]);
        }
      },
      onSubmit(e){
        var that = this;
        var data = this.house;
        data.picUrls = this.fileList.map(function(item, index){
            return item.url
        })
        data.picUrl = data.picUrls[0]
        var action = data.id == null ? "save" : "update";
        this.$axios.post(this.domain + '/house/'+action,
            data,
            {
                headers: {'token': localStorage.getItem("atoken")}
            }
        ).then(function(res){
            //console.log(res)
            if(res.data.code == 0){//成功
              that.showList = true;
              that.query();
            }else{
              that.errorMsg = res.data.msg;
              that.$message.error(res.data.msg);
            }
        })
      },
      add(){
          this.showList = false
          this.fileList = []
          this.house = {
              picUrls: []
          }
      },
      cancel(){
          this.showList = true
      },
      update(){
        if(this.ids.length != 1){
            this.$message.info("请选择一条数据");
            return;
        }
        this.showList = false;
        this.queryHouse(this.ids[0]);
      },
      del(){
        if(this.ids.length == 0){
            this.$message.info("请选择数据");
            return;
        }
        var that = this;
        this.$axios.post(this.domain + '/house/delete',
            that.ids, {
            headers: {'token': localStorage.getItem("atoken")}
        }).then(function(res){
            //console.log(res)
            if(res.data.code == 0){//成功
              that.query();
            }else{
              that.errorMsg = res.data.msg;
              that.$message.error(res.data.msg);
            }
        })
      },
      handleAvatarSuccess(e){
          this.fileList.push({
              url: e.url
          });
      },
      imgRemove(file, fileList){
          this.fileList = fileList;
      },
      beforeAvatarUpload(e){

      },
      handleSelectionChange(e){
        var ids = [];
        for(var i = 0; i < e.length; i++){
            ids.push(e[i].id)
        }
        this.ids = ids;
      }
  },
  created(){
    var docHeight = document.documentElement.clientHeight;
    this.asideStyle.height = docHeight - 76 + "px";
    var user = localStorage.getItem("auser");
    if(user){
        this.user = JSON.parse(user);
    }else{
        this.$router.push("admin_login");
    }
    this.query();
    this.queryCategory();
    this.editorOption = quillRedefine(
    {
        // 图片上传的设置
        uploadConfig: {
        action: this.domain + '/api/fileupload/upload',  // 必填参数 图片上传地址
        size: 500,  // 可选参数   图片限制大小,单位为Kb, 1M = 1024Kb
        accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon',  // 可选参数 可上传的图片格式
        // 必选参数  res是一个函数,函数接收的response为上传成功时服务器返回的数据
        // 你必须把返回的数据中所包含的图片地址 return 回去
        res: (respnse) => {
            return respnse.url
        },
        name: 'file'  // 图片上传参数名
        }
    }
    )
    //console.log(this.editorOption)

  }
};
</script>

<style scoped>

</style>


http://www.niftyadmin.cn/n/5107770.html

相关文章

C++之this指针

前言 C中对象模型和this指针是面向对象编程中的重要概念。对象模型描述了对象在内存中的布局和行为&#xff0c;包括成员变量、成员函数的存储方式和访问权限。this指针是一个隐含的指针&#xff0c;指向当前对象的地址&#xff0c;用于在成员函数中引用当前对象的成员变量和成…

如何在CentOS 7中卸载Python 2.7,并安装3.X

Python是一种常用的编程语言&#xff0c;但是如果您不需要在服务器上使用Python 2.7&#xff0c;那么本文将详细介绍如何在CentOS 7上卸载Python 2.7。 一、检查Python版本 在卸载Python 2.7之前&#xff0c;必须检查系统上的Python版本。 在终端中执行以下命令&#xff1a;…

JS基本小知识:函数

目录 函数的基本概念 函数的定义和调用 函数的定义 函数的调用 函数的参数和返回值 参数的作用域和生命周期 返回值的作用和使用场景 匿名函数和箭头函数 匿名函数 本文将介绍 JavaScript 中的一个知识点&#xff1a;函数。函数是 JavaScript 中非常重要的一个概念&am…

postman发送soap报文示例

一、SOAP和WSDL SOAP是一种基于XML的协议 WSDL&#xff08;网络服务描述语言&#xff0c;Web Services Description Language&#xff09;是一门基于 XML 的语言&#xff0c;用于描述 Web Services 以及如何对它们进行访问 二、postman发送soap请求 1、发送post请求&#x…

Qt第六十四章:QSplitter(分离部件)的使用

目录 一、效果图 二、qtDesigner 一、效果图 二、qtDesigner 相关Qss background-color: rgb(238, 242, 255); border:2px solid rgb(255, 255, 255); border-radius:15px

Python---循环---while循环

Python中的循环 包括 while循环与for循环&#xff0c;本文以while循环为主。 Python中所有的知识点&#xff0c;都是为了解决某个问题诞生的&#xff0c;就好比中文的汉字&#xff0c;每个汉字都是为了解决某种意思表达而诞生的。 1、什么是循环 现实生活中&#xff0c;也有…

C进阶-语言文件操作

本章重点&#xff1a; 什么是文件 文件名 文件类型 文件缓冲区 文件指针 文件的打开和关闭文件的顺序读写文件的随机读写文件结束的判定 1. 什么是文件 磁盘上的文件是文件。 但是在程序设计中&#xff0c;我们一般谈的文件有两种&#xff1a;程序文件、数据文件 1.1 程序文件…

RabbitMQ官方案例学习记录

官方文档&#xff1a;RabbitMQ教程 — RabbitMQ (rabbitmq.com) 一、安装RabbitMQ服务 直接使用docker在服务器上安装 docker run -it -d --name rabbitmq -p 5672:5672 -p 15672:15672 rabbitmq:3.12-management 安装完成后&#xff0c;访问15672端口&#xff0c;默认用户…