基于Vue和SpringBoot的宾馆管理系统的设计和实现(二)

简介: 基于Vue和SpringBoot的宾馆管理系统的设计和实现

5系统功能与界面的实现

5.1登陆注册模块的设计和实现

登录注册模块包括了基础的用户登录和用户注册功能,用户通过这个模块进行认证,从而进入到宾馆管理系统。

图5.1是宾馆管理系统的登陆界面,用户需要输入登录账号、密码和图形验证码进入系统。

登陆模块使用 Vue 快速构建了登陆界面,使用 View UIinput 组件,用于存放登陆账号、登陆密码和验证码,验证码图片使用 img 标签,显示后端返回的验证码内容,用户点击登陆后,前端通过 Axios 像后端请求登陆接口,根据后端返回的内容判定是否运行登录。

登陆前端逻辑代码如下:

this.$refs.usernameLoginForm.validate(valid => {
    if (valid) {
        this.loading = true;
        login({
            username: this.form.username,
            password: this.form.password,
            code: this.form.imgCode,
            captchaId: this.captchaId,
            saveLogin: this.saveLogin
        }).then(res => {
            if (res.success) {
                this.afterLogin(res);
            } else {
                this.loading = false;
                this.getCaptchaImg();
            }
        });
    }
});

用户输入正确的账号密码后,即可进入宾馆管理系统,首页中存放了很多图,这些图使用了百度的Echert,套用了现有模板进行实现,如图5.2所示。

若用户没有登陆账号,可以点击超链接跳转到注册界面,注册界面和登陆一样,也是采用了view ui的input组件存放相应字段,用户点击注册后,请求后端的注册接口,根据接口返回的字段决定是否完成注册,如图5.3所示。

注册前端逻辑代码如下:

if (!this.form.code) {
    this.errorCode = "验证码不能为空";
    return;
} else {
    this.errorCode = "";
}
this.loading = true;
regist(this.form).then(res => {
    console.log(res);
    this.loading = false;
    if (res.success) {
        let query = {
            username: this.form.username
        };
        this.$router.push({
            name: "regist-result",
            query: query
        });
    } else {
        vaptchaObject.reset();
    }
});

5.2宾馆管理模块的设计和实现

宾馆管理模块用于对宾馆信息的管理,提高了宾馆管理的准确性和精密度,减轻了宾馆前台工作人员的工作量。管理员可以对宾馆进行查看、增加、删除、编辑、修改、导出Excel操作等操作,如图5.4所示。

管理员可以点击添加按钮,进入宾馆添加界面,这个模块使用了view ui的input组件,用于存放相应字段,用户点击保存按钮后,系统将自动将表单数据提交给后端接口,后端保存到数据库,从而实现宾馆的新增,如图5.5所示。

管理员也可以点击每一行的编辑按钮,更新宾馆的基本信息,如图5.6所示。

查询宾馆后端逻辑代码如下:

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "分页获取")
public Result<IPage<Dormitory>> getByPage(@ModelAttribute Dormitory dormitory,@ModelAttribute PageVo page){
    QueryWrapper<Dormitory> qw = new QueryWrapper<>();
    if(!ZwzNullUtils.isNull(dormitory.getTitle())) {
        qw.like("title",dormitory.getTitle());
    }
    if(!ZwzNullUtils.isNull(dormitory.getType())) {
        qw.eq("type",dormitory.getType());
    }
    if(!ZwzNullUtils.isNull(dormitory.getBreakfast())) {
        qw.eq("breakfast",dormitory.getBreakfast());
    }
    IPage<Dormitory> data = iDormitoryService.page(PageUtil.initMpPage(page),qw);
    return new ResultUtil<IPage<Dormitory>>().setData(data);
}

5.3宾馆评论模块的设计和实现

当用户消费完成后,可以对宾馆的环境和服务进行评论,以方便其他顾客对宾馆有一个初步的了解,顾客可以对宾馆的某个房间进行评论,其他顾客可以看到关于单个房间的评论信息。系统在加载宾馆数据的同时,会额外读取宾馆评论表中的数据,并将每个宾馆对应的评论放入宾馆实体类,用于前端表格中的数据显示,如图5.7所示。

用户可以点击每一行宾馆数据的评论按钮,就会触发一个vue事件,将一个变量的值改为true,从而弹框的v-modol字段会因为数据双向绑定而显示,也就是说系统会给与弹框反馈,这样对用户交互非常友好,如图5.8所示。

用户添加完成评论后,系统将评论内容发送至添加评论的API接口,后端自动获取登陆用户,再将两者信息存入到数据库,数据存入成功后,系统会给与成功提示,如图5.9所示。

新增评论后端逻辑代码如下:

@RequestMapping(value = "/addMyDiscuss", method = RequestMethod.POST)
@ApiOperation(value = "新增评论")
public Result<Object> addMyDiscuss(@RequestParam String id,@RequestParam String reply,@RequestParam String text){
    Dormitory dormitory = iDormitoryService.getById(id);
    if(dormitory == null) {
        return ResultUtil.error("宾馆不存在");
    }
    User currUser = securityUtil.getCurrUser();
    DormitoryDiscuss discuss = new DormitoryDiscuss();
    discuss.setUserId(currUser.getId());
    discuss.setUserName(currUser.getNickname());
    discuss.setReply(reply);
    discuss.setDormitoryId(dormitory.getId());
    discuss.setDiscussTime(DateUtil.now());
    discuss.setContent(text);
    iDormitoryDiscussService.saveOrUpdate(discuss);
    return ResultUtil.success("OK");
}

5.4宾馆预定模块的设计和实现

宾馆预定模块保存顾客的宾馆下单信息,即预约订单数据。当顾客对某个宾馆进行预约后,系统应当自动生成预订单,顾客可以进入到宾馆预定模块,对订单进行支付,也可以查询自己的历史下单数据。

用户点击宾馆列表的预约按钮,系统给与预约日期的弹框,如图5.10所示。

用户预定成功后,用户可以在我的预定模块查询自己的预定宾馆信息,如图5.11所示。

宾馆预定后端逻辑代码如下:

@RequestMapping(value = "/addMyOrder", method = RequestMethod.POST)
@ApiOperation(value = "新建订单")
public Result<Object> addMyOrder(@RequestParam String id,@RequestParam String date){
    Dormitory dormitory = iDormitoryService.getById(id);
    if(dormitory == null) {
        return ResultUtil.error("宾馆不存在");
    }
    QueryWrapper<DormitoryOrder> qw = new QueryWrapper<>();
    qw.eq("dormitory_id",id);
    qw.eq("order_date",date);
    long count = iDormitoryOrderService.count();
    if(count > 0) {
        return ResultUtil.error("宾馆当日已被预定");
    }
    User currUser = securityUtil.getCurrUser();
    DormitoryOrder order = new DormitoryOrder();
    order.setUserId(currUser.getId());
    order.setUserName(currUser.getNickname());
    order.setOrderTime(DateUtil.now());
    order.setPayFlag("否");
    order.setDormitoryId(dormitory.getId());
    order.setPrice(dormitory.getPrice());
    order.setRemark("");
    order.setDormitoryName(dormitory.getTitle());
    order.setOrderDate(date);
    iDormitoryOrderService.saveOrUpdate(order);
    return ResultUtil.success();
}

5.5宾馆资讯模块的设计和实现

宾馆管理员可以根据自己的需求,发布关于宾馆的新闻信息,新闻资讯应包括了新闻图片、文字,管理员发布后,用户可以看到这些内容,系统同样采用了view ui的input组件,用于承载输入表单的数据。

宾馆管理员可以增删改查宾馆的资讯,如图5.12所示,更新完成后,用户就可以看到这些资讯信息。

查询宾馆新闻后端逻辑代码如下:

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "分页获取")
public Result<IPage<DormitoryNews>> getByPage(PageVo page){
    IPage<DormitoryNews> data = iDormitoryNewsService.page(PageUtil.initMpPage(page));
    return new ResultUtil<IPage<DormitoryNews>>().setData(data);
}

总结与展望

本文档介绍并设计了一个宾馆管理系统。从系统的总体结构出发,介绍了宾馆管理系统的六大功能模块。经过3个月的开发,宾馆管理系统最终完成。

在设计之初,通过大量国内外文献的收集和比较,对宾馆管理系统的现状进行了分析,阐述了研究的背景和意义,分析了其优缺点和国内外现状。同时介绍了宾馆管理系统开发中使用的具体技术,并说明了这些技术的优缺点。在此基础上完成了数据库的设计。

在开发实现阶段,使用 Idea开发工具编写实现代码,并引入 SpringBoot框架来简化 Web开发。 数据层使用 MyBATIS持久性框架和 MySQL数据库。

本文件设计的宾馆管理系统能有效地满足宾馆的相关需求。 工艺合理,操作简单,界面简洁美观。 适合宾馆经理。 但是,由于个人水平等因素的欠缺,目前仍存在许多问题和研究差距。 例如,本文设计的宾馆管理系统使用 MySQL来存储系统生成的数据,但是随着信息量的增加,可能会影响以后的性能。 稍后,考虑添加缓存以增加数据存储量。 其次,确保客人信息的安全也是当务之急,宾馆员工的信息安全也极为重要。 本文不讨论信息安全。 要有一个完整的系统,我们需要深入研究信息安全。 此外,由于系统本身与离线宾馆没有连接,导致现有的离线宾馆订单信息无法查询。

此外,系统没有黑客攻击场景模块,缺乏防御黑客攻击的措施。 因此,一旦宾馆管理系统被黑客攻击,很可能导致系统瘫痪、宾馆预订数据丢失或客户信息泄露,这是我们不希望看到的,所以要完善宾馆管理系统,还需要对安全性方面深入探讨

参考文献

[1]马雪莲.宾馆管理信息化系统设计与实现[D].天津:天津大学,2012

[2]王海群.大型宾馆商店形象对顾客满意与忠诚的影响研究[D].浙江:浙江大学,2006

[3]高妮娜.基于J2EE的东营胜大宾馆信息管理系统的设计与实现[D].成都:电子科技大学,2013.

[4]J2EE开发框架[EB/OL].http://baike.sogou.com/v54230260.htm,2014

[5]尹汉东,任邵东等.基于J2EE的Web应用的MVC架构实现[J].北京:计算机仿真,2004,

[6]张勇.基于MVC的J2EE架构研究与设计[D].上海:华东师范大学,2006

[7]Spring简介[EB/OL].http://baike.sogou.com/v25116.htm?sp=SSTSpring,2014

[8]夏宽理.Java语言程序设计[M].北京:机械工业出版社,2008.

[9]郑阿奇,殷红先,张为民.PowerBuilder实用教程[M].北京:电子工业出版社,2013.

[10]陈承欢.SQLServer2014数据库应用、管理与设计[M].北京:电子工业出版社,2016.

致 谢

毕业设计是对四年教育中学到的知识具体应用的机会。通过这次毕业设计,我不仅复习了课上所学的专业知识,而且在老师和同学的帮助下,学习和体验了软件结构设计的基本技能和概念。我非常感谢三年来训练和指导我的老师们,特别是在我的研究设计过程中细心陪伴我的老师和学生们。

首先,我要感谢我的导师和导师们,是他们在我毕业的最后关头给了我们巨大的帮助和鼓励,给了我很多解决问题的思路。谨向您表示衷心的祝贺和感谢。

在结构规划方面,我注意到理论知识的缺乏。许多细节都是模糊的,这可能会在设计的每个阶段造成大大小小的问题。然而,在老师们的不断指导和指导下,在同学们的帮助和努力下,所有的问题都一个一个地解决了,现在这些知识真的是我的了。

关于毕业设计,教授给了我最重要的建议和帮助。我不仅学到了很多专业知识,更重要的是,我学到了很多做人、学习和工作的知识。我们也要感谢所有学生的合作和支持。在这段时间里,我们一起学习、讨论、进步,并建立了深厚的友谊。

在大学里,教师和学生互相学习,互相帮助,一起度过了美好而难忘的时光。我们也感谢我们的商界朋友和同事提供的鼓舞人心的材料。我们也要感谢参考文献的作者。多亏了您的研究结果,我的研究主题有了一个很好的出发点。

最后,感谢你们的辛勤工作。我非常感谢家人、同学、朋友和同事对我的支持和鼓励。


引用说明:

引用以上内容的用户,必须同意以下内容,否则请勿引用!

  1. 出于自愿而使用本文,了解引用本文的风险,且同意自己承担引用本文的风险。
  2. 利用本文内容构建的任何信息内容以及导致的任何版权纠纷和法律争议及后果和作者无关,作者对此不承担任何责任。
  3. 在任何情况下,对于因引用本文而导致的任何难以合理预估的损失(包括但不仅限于商业利润损失、业务中断与业务信息丢失),作者概不承担任何责任。
  4. 必须了解使用本文内容的风险,作者不对其提供二次维护服务,也不提供任何有关资料。

相关文章
|
7天前
|
存储 JavaScript 前端开发
基于 SpringBoot 和 Vue 开发校园点餐订餐外卖跑腿Java源码
一个非常实用的校园外卖系统,基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化,提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合,但并不是一个完全分离的项目。 前端视图通过JS的方式引入了Vue和Element UI,既能利用Vue的快速开发优势,
52 13
|
14天前
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码,采用SpringBoot、Vue、MySQL技术开发
基于B/S架构,采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统,适用于三甲医院,支持二次开发。该系统能自动监测全院患者药物不良反应,通过移动端和PC端实时反馈,提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块,确保精准、高效地处理ADR事件。
|
1月前
|
XML Java 数据库连接
SpringBoot集成Flowable:打造强大的工作流管理系统
在企业级应用开发中,工作流管理是一个核心组件,它能够帮助我们定义、执行和管理业务流程。Flowable是一个开源的工作流和业务流程管理(BPM)平台,它提供了强大的工作流引擎和建模工具。结合SpringBoot,我们可以快速构建一个高效、灵活的工作流管理系统。本文将探讨如何将Flowable集成到SpringBoot应用中,并展示其强大的功能。
187 1
|
1月前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
45 0
|
3月前
|
SQL 监控 druid
springboot-druid数据源的配置方式及配置后台监控-自定义和导入stater(推荐-简单方便使用)两种方式配置druid数据源
这篇文章介绍了如何在Spring Boot项目中配置和监控Druid数据源,包括自定义配置和使用Spring Boot Starter两种方法。
|
2月前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
223 2
|
3天前
|
NoSQL Java Redis
Spring Boot 自动配置机制:从原理到自定义
Spring Boot 的自动配置机制通过 `spring.factories` 文件和 `@EnableAutoConfiguration` 注解,根据类路径中的依赖和条件注解自动配置所需的 Bean,大大简化了开发过程。本文深入探讨了自动配置的原理、条件化配置、自定义自动配置以及实际应用案例,帮助开发者更好地理解和利用这一强大特性。
37 14
|
26天前
|
缓存 IDE Java
SpringBoot入门(7)- 配置热部署devtools工具
SpringBoot入门(7)- 配置热部署devtools工具
42 1
SpringBoot入门(7)- 配置热部署devtools工具
|
1月前
|
缓存 IDE Java
SpringBoot入门(7)- 配置热部署devtools工具
SpringBoot入门(7)- 配置热部署devtools工具
43 2
 SpringBoot入门(7)- 配置热部署devtools工具
|
20天前
|
监控 Java 数据安全/隐私保护
如何用Spring Boot实现拦截器:从入门到实践
如何用Spring Boot实现拦截器:从入门到实践
38 5
下一篇
DataWorks