宾馆客房管理系统-vue前端开发
文章目录
- 1.项目简介
- 2.需求分析
- 3 项目内容与设计方案
- 4 设计开发方法（技术方案）
- 一、数据库设计与检验
- 1.1针对上述业务流程，设计以下，实体集与各自属性：
- 1.2 er图
- 1.3 关系图：（E-R图向关系模型的转换，在数据库中的真实体现形式）
- 1.4视图设计
- 1.5存储过程设计(展示部分)
- 二.数据后台设计（node）
- （1）设计入口文件app.js
- （2）设置databaseOperation，db.js用于对数据库进行操作
- （3）设置router，router.js设置路由（接口），用于客户端数据展示与修改
- 三、Ui设计（Adobe XD）
- 四、前端功能设计（vue，element-ui，vuex，aioxs，mint-ui）
- vue使用教程
- 项目创建
- 安装依赖项
- 卡片式图片（用于显示房间与价格）
- 解决跨域问题
- cell点击问题
- 5.参考资料
1.项目简介
随着宾馆规模的不断扩大，客房数量的急剧增加，有关客房的各种信息量也在不断成倍增长。面对庞大的信息量，就需要有宾馆客房管理系统来提高宾馆管理工作的效率。传统手工的管理方式，管理过程繁琐而复杂，执行效率低，并且易于出错。通过这样的系统，我们可以做到信息的规范管理和快速查询，实现了客房信息管理的系统化、规范化和自动化，这样不仅减少了管理工作量，还提高了管理效率，降低了管理成本。
2.需求分析
宾馆客房管理系统包含三种操作人员，管理员、客户、前台人员。针对三个不同的操作人员，宾馆客房管理系统将开放不同的权限。管理员可以对房型与房屋信息进行管理，房型信息包含——房型（如单人房、双人房等）、数量、价格、图片等信息，房屋信息则包含了该客房的具体位置、状态等信息。客户端系统，客户可以在该系统查询房源信息，客户想进行住房可以有两种选择：一、提前预约线上支付后到宾馆进行登记方可入房。二、未进行预约，到宾馆内进行登记付款后入房。前台人员可以根据客户提供的个人信息查询到客户的预约信息，并修改客房状态表以及登记入住信息表，在客户未进行提前预约情况下，前台人员可以查看现有客房信息，针对客户要求筛选房屋并进行收款登记，当客户进行退房时，对信息表进行登记等操作。
宾馆客房管理系统业务流程图
3 项目内容与设计方案
针对宾馆客房管理系统的开发，首先确认开发流程：
（1） 项目需求分析
（2） 需求分析确认
（3） 数据库设计与检验（Mysql）
（4） 数据后台设计（node）
（5） Ui设计（ui交互软件XD）
（6） 前端功能设计（vue，element-ui，vuex，aioxs，mint-ui）
（7） 检验bug
4 设计开发方法（技术方案）
一、数据库设计与检验
宾馆客房管理系统业务流程图
1.1针对上述业务流程，设计以下，实体集与各自属性：
房型信息表（房型id、房型（单、双）、价格、折扣、图片）
房屋信息表（房屋id、房型id、地点（如6栋203）、状态（2.：已住、1：预约、0：空闲））
用户端注册表(用户id，用户账户(手机)，用户密码，用户昵称，用户头像)
用户客户信息表(用户id，客户id)
客户信息表（客户id、客户手机、客户姓名、客房身份证）
员工信息表（员工id、员工账户、员工密码）
预约信息表（预约信息id、客户id、、房户id、注册id、订单id、预约时间、预约状态（0：未入住、1：已完成、2.：已取消、3:超时））
住房登记表（住房id、客户id、房户id、注册id、订单id、住房时间、住房状态（0：在住，1：已退房））
订单表（订单id、订单时间、订单状态（0：表示支付成功，1：表示待支付，2：表示支付失败）、订单金额）
1.2 er图
1.3 关系图：（E-R图向关系模型的转换，在数据库中的真实体现形式）
1.4视图设计
客户：
客户在客户端可以查看不同房间的余量，价格、图片以及说明等
当客户进行预约操作时，预约表将显示客户以前所保留的信息（身份证、电话）
1.5存储过程设计(展示部分)
1. //客户进行注册(传入手机号与密码,返回状态码显示是否已注册，0表示已注册，1表示注册成功)
2. DELIMITER $$
3.
4. USE `HotelSystem`$$
5.
6. DROP PROCEDURE IF EXISTS `client_register`$$
7.
8. CREATE PROCEDURE `client_register`(IN client_phone VARCHAR(11),IN client_password VARCHAR(16),OUT state INT)
9. BEGIN
10. DECLARE client_id INT DEFAULT NULL;
11. # 先查找手机号是否存在
12. SELECT client_id INTO client_id
13. FROM client_registry
14. WHERE client_phone=client_phone;
15. # 如果账户存在 返回状态码0
16. IF ISNULL(client_id)=0 THEN
17. SET state=0;
18. ELSE
19. # 插入账户
20. INSERT INTO client_registry (client_id,client_phone,client_password)
21. VALUE
22. (0,client_phone,client_password);
23. SET state=1;
24. END IF;
25. END $$
26.
27. DELIMITER ;
28.
29. CALL client_register('13385877395','123456',@state);
30. SELECT @state;
二.数据后台设计（node）
后端设计主要采用node+express框架搭建
（1）设计入口文件app.js
1. var express= require("express")
2. var app = express()
3. var path = require('path')
4. var router = require('./router')
5. var bodyParser = require('body-parser')
6. // parse application/x-www-form-urlencoded
7. app.use(bodyParser.urlencoded({ extended: false }))
8.
9. // parse application/json
10. app.use(bodyParser.json())
11.
12.
13. //加载cookies模块
14. var cookies = require("cookies");
15. // view engine setup
16. app.engine('html', require('express-art-template'));
17.
18.
19.
20. // 开放静态资源
21. // 1.当以/public/开头的时候，去./public/目录中找对应资源
22. // 访问：http://127.0.0.1:3000/public/login.html
23. app.use('/public/',express.static('./public/'))
24. app.use(express.static('./views/'));
25. //设置cookie
26. app.use(function (req,res,next) {
27. req.cookies = new cookies(req,res);
28. req.userInfo = {};
29.
30. if(req.cookies.get("userInfo")){
31. try {
32. req.userInfo = JSON.parse(req.cookies.get("userInfo"));
33. } catch (error) {
34.
35. }
36. }
37.
38.
39. next();
40. })
41.
42.
43.
44. app.use(router)
45.
46.
47.
48.
49. app.listen(3000,function () {
50. console.log(`Example app listening at http://localhost:3000`)
51. }) Router挂载请求路由和处理响应数据
bodyParser：用于获取Post请求的json数据，通过req.body获取
1. app.use('/public/',express.static('./public/'))
设置静态资源，可以直接通过http://localhost:3000/public/…png 访问数据，该功能可以使客户端直接通过url访问图片数据，数据库保存url的相对路径
1. //设置cookie
2. app.use(function (req,res,next) {
3. req.cookies = new cookies(req,res);
4. req.userInfo = {};
5.
6. if(req.cookies.get("userInfo")){
7. try {
8. req.userInfo = JSON.parse(req.cookies.get("userInfo"));
9. } catch (error) {
10.
11. }
12. } 通过该方法拦截请求设置请求cookie，用于实现用户登陆状态的展示
（2）设置databaseOperation，db.js用于对数据库进行操作
Mysql数据库搭建在阿里云云服务器上，通过函数封装connect操作
1. function connect() {
2. var connection = mysql.createConnection({
3. host: '***********',
4. user: 'root',
5. password: '*********',
6. database: 'HotelSystem'
7. });
8.
9.
10.
11. connection.connect(function (err) {
12. if (err) {
13. console.error('error connecting: ' + err.stack);
14. return;
15. }
16.
17. });
18.
19. return connection;
20. } 数据处理采用回调方式
1. exports.findUser = function (user_data, callback) {
2. //采用回调的方法处理
3. connection = connect();
4. commit = "SELECT * FROM `user_data` where phone='" + user_data.userName + "'"
5.
6. connection.query(commit, function (error, results, fields) {
7. if (error) {
8. callback(error, null)
9. } else {
10. if (results.length >= 1) {
11. callback(null, REGISTED)
12. } else {
13. callback(null, USERUNRIGISTER)
14. }
15. }
16. connection.end();
17. });
18.
19. } Tip：数据库连接后必须使用connection.end(); 方法关闭数据连接，否则会造成数据连接过多导致数据库无法正常使用，出现 too many connection 错误，当出现该错误时，可以通过重启数据库，删除连接进程解决。
（3）设置router，router.js设置路由（接口），用于客户端数据展示与修改
1. router.post('/index',function (req,res) {
2. res.header("Access-Control-Allow-Origin", "*");
3. DB.login(req.body,function(err,data){
4. if(err){
5. res.status=500
6. res.send('数据库存储错误')
7. }else{
8. switch (data) {
9. case DB.SUCCESS:
10. req_body={
11. code:DB.SUCCESS,
12. userInfo:escape(req.body.userName)
13. }
14. req.cookies.set("userInfo",escape(req.body.userName));
15.
16. res.json(req_body)
17.
18. break;
19. case DB.PASSWORDERROR:
20. req_body={
21. code:DB.PASSWORDERROR
22. }
23. res.json(req_body)
24. break;
25. case DB.USERUNRIGISTER:
26. req_body={
27. code:DB.USERUNRIGISTER
28. }
29. res.json(req_body)
30. break;
31. default:
32. break;
33. }
34. }
35. })
36.
37. }) 三、Ui设计（Adobe XD）
Ui设计是敏捷性开发必不可少的一个部分，ui设计可以给前端开发人员在设计的时候节省很多时间。
使用的ui设计软件为：Adobe XD
Adobe XD可以快速开发ui界面，可进行交互展示以及界面逻辑跳转设计
四、前端功能设计（vue，element-ui，vuex，aioxs，mint-ui）
vue使用教程
vue官网
vue教程
项目创建
安装好vue-cil后，打开cmd输入
vue create ui
选择Manual 设置（手动设置）
选择router、css配置后一路next
安装依赖项
打开项目目录，安装mint-ui
npm i mint-ui -S
mint-ui教程
按需引入
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：
npm install babel-plugin-component -D
用单纯的HTML+CSS构建网页，大概耗时2个小时完成了以下界面
<!-- 展示我的界面 -->
<template><div class="myPage"><div class="user_info"><img src="../assets/logo.png" class="user_icon"><p class="user_name">name</p><p class="user_phone">13385877395</p><img src="../assets/客服.png" class="serve icon" alt=""><img src="../assets/设置.png" class="setting icon" alt=""></div><hr/><div class="order_info"><p class="order_des">我的订单</p><p class="order_all">查看全部订单 ></p></div><div class="setting_info"><p class="setting_des">我的工具</p></div><mt-button id ="logout" type="primary" size="large">退出登陆</mt-button></div>
</template><script>
export default {name: "myPage",data() {return {msg:"lalala"};}};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
// 用户信息展示.myPage{margin: 12px;}.user_info{height: 80px;}.user_icon{width: 60px;height: 60px;display: flex;border-radius: 50%;align-items: center;justify-content: center;border: 1px solid #777;overflow: hidden;position:absolute;left:12px;top:30px;
}
.user_name{margin: 0px;display: inline;position:absolute;left:100px;top:30px;font-size: 24px;}
.user_phone{display: inline;position:absolute;left:100px;top:70px;margin:0px;
}
.icon{width: 24px;height: 24px;display: flex;border-radius: 50%;align-items: center;justify-content: center;overflow: hidden;
}
.serve{position:absolute;right:12px;top:30px;
}
.setting{position:absolute;right:50px;top:30px;
}
// 订单信息展示
.order_info{background-color:aliceblue;height: 120px;border-radius:5px
}.order_des{margin: 0px;display: inline;position:absolute;left:30px;top:120px;font-size: 16px;
}
.order_all{margin: 0px;display: inline;position:absolute;right:20px;top:123px;font-size: 12px;color: #777;
}
//工具栏展示
.setting_info{margin-top: 12px;background-color:aliceblue;height: 120px;border-radius:5px
}
.setting_des{margin: 0px;display: inline;position:absolute;left:30px;top:250px;font-size: 16px;
}#logout{margin-top: 12px;
}
</style>可以看出，使用自定义的HTML和CSS不容易调试，且费时
于是我用了bootstrap组件对ui进行开发
bootstrap官网
命令行打开项目路径，输入进行安装
npm install bootstrap@3
卡片式图片（用于显示房间与价格）
学习网址
学习网址2
解决跨域问题
参考资料
cell点击问题
cell之外有button，控件会监听button的事件而不是cell的
解决办法:
@click.native
5.参考资料
[1] https://cn.vuejs.org/v2/guide/
[2] https://mint-ui.github.io/#!/zh-cn
[3] https://www.sogou.com/link?url=hedJjaC291OyMkFqh2HEUyPL72QNcRsobhhp9J6i36M.
[4] https://www.runoob.com/vue2/vuejs-ajax-axios.html
[5] https://blog.csdn.net/Xidian2850/article/details/105047241
[6] https://blog.csdn.net/muchforest/article/details/52121503
[7] https://blog.csdn.net/zhanghl150426/article/details/90665423
[8] https://blog.csdn.net/sukifan/article/details/99569046
[9] https://blog.csdn.net/qq_43363884/article/details/95948884
[10] https://www.bilibili.com/video/BV1nx411X7oA
[11] https://www.bilibili.com/video/BV1GW411b7vb
宾馆客房管理系统-vue前端开发相关推荐
- 计算机毕设Python+Vue业俊宾馆客房管理系统（程序+LW+部署）
项目运行 环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
- [附源码]java+ssm计算机毕业设计业俊宾馆客房管理系统【源码+数据库+LW+部署】
项目运行 环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
- [附源码]SSM计算机毕业设计宾馆客房管理系统JAVA
项目运行 环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
- thinkphp后台管理系统+vue前端H5 app
thinkphp后台管理系统+vue前端H5 app 众包接单型App 全部源码已发布,欢迎star, 移步码云 前言 1.帮朋友做的一个接单类型的后台管理系统(朋友的需求是淘宝好评刷管理) 2.目前 ...
- PHP-MYSQL宾馆客房管理系统（附源码）
PHP-MYSQL宾馆客房管理系统(附源码) 主要功能 主要语言 部分界面 获取方式 分为 前台用户和 后台管理员两个角色,功能完善,界面优美,运行良好. (文末有获取源代码方式) 主要功能 用户: ...
- 宾馆客房管理系统正文
宾馆客房管理系统正文 1 引言 随着人员流动规模的不断扩大,宾馆数量的急剧增加,有关客房管理的各种信息量也在不断成倍增长.面对庞大的信息量,就需要有客房信息管理系统来提高客房管理工作的效率.通过这样 ...
- 基于宾馆客房管理系统数据库实现
文章只截取部分代码,想要完整源码的小伙伴在评论区留言 目录 1 概述 1.2相关技术分析 2 系统功能设计 3数据库设计 3.1 概念结构设计 3.2逻辑结构设计 3.2.1 E-R图向关系模式的转换 ...
- vue 一个页面多个router-view如何配置子路由_浅谈vue前端开发架构
通常我们开发出来的网页大都是通过.html文件,渲染与浏览器,也就是UI呈现给用户的. 一个UI page,一般会涉及到资源文件,样式排版,UI交互: 多个UI page,就涉及到UI交互响应: 那么 ...
- 视频教程-VUE前端开发/前后端分离-Java
VUE前端开发/前后端分离 13年软件开发经验,设计开发30多个大型软件,涉及政府.银行.电信.能源等大型软件项目. 精通J2EE体系架构,熟练使用Struts.Spring.hibernate.ib ...
- 【源码及课件分享】Java实战项目之酒店客房管理系统_Java项目开发_Java项目实战
Java实战项目又双叒叕来咯~小伙伴们请查收~酒店客房管理系统![源码及课件分享]Java实战项目之酒店客房管理系统_Java项目开发_Java项目实战_Java毕业设计https://www.bil ...
最新文章
- LeetCode Regular Expression Matching
- jQuery获取Select选择的Text和 Value(转)
- linux elf命令,linux strings 命令——ELF文件格式与“链接和装载”
- Loadrunner中socket协议中的三个关联函数
- 初步探讨WPF的ListView控件(涉及模板、查找子控件)
- #Java小案例 随机产生数
- Android中Service的使用
- java基础—Calendar类方法演示
- 在马来西亚做it总监_IT行业40岁以上的人都去哪儿了？
- linux xftp，xshell免费下载
- 深度学习后向算法的直观理解_强化学习的直观介绍
- brother打印机清零步骤_兄弟打印机清零方法兄弟打印机清零方法步骤
- Linux 系统升级蝉道
- 接入Internet的技术有哪几种？各有什么特点？
- win10多台计算机共享文件夹设置密码,win10系统给共享文件夹设置密码的操作方法...
- AcWing 143. 最大异或对 —— 神奇的二进制
- 致远oa系统报价_致远oa价格（致远oa系统登录）
- 龙讯|LT8911EXB高性能MIPI转EDP分辨率1080P@60
- Spring Boot使用宝兰德BES进行改造和部署
- javascript合并多层级数组