前言：

基于html和JavaScript，利用layui为界面设计，local storage存储数据，为一个虚构的酒店创建一个允许在线客户订购和管理的网站。

原文地址：点击去原文

功能需求：

  1. 客户可以:预订酒店房间新客户将不得不创建一个登录和密码更改或取消房间预订登记入住房间，为客房服务预订膳食，退房，客户必须支付总费用(包括房间预订和退房餐)。在这个网站上，我们将忽略真正的支付处理，只是假装顾客可以通过点击一个按钮来支付。

  2. 客房管理人员可以:根据房间是否清洁、是否可用、等

  3. 厨房工作人员可以:更改菜单上的食物列表 当饭做好并送出时，把订单拿掉

  4. 酒店经理可以:查看和更改系统中的所有数据，添加新员工，包括设置他们的用户名和密码，添加新的房间供使用

  5. 其他要求:所有用户必须登录不同类型的用户，不同的用户有不同的能力，只能访问与他们相关的信息，检查无效的输入，如空订单、不存在的日期、负数等。一般来说，网站必须看起来和感觉真实。您有责任使用常识来确定需要什么来满足这个需求。例如，在收集新客户详细信息的页面上，web页面显然需要询问客户的电话号码和电子邮件地址，否则需要标记将丢失。

  6. 技术和软件需求使用JavaScript localStorage(更新:而不是sessionStorage)和JSON来存储

初始数据：

  1. 共有5间不同的房间，分2个不同的类别(如King, Double)不同的价格和照片

  2. 菜单上有5种不同的食物可供选择，每一种都有不同的价格照片

效果图：

1、登录界面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TdYLiw5k-1575968317699)(https://img.xygeng.cn/upload/2019/12/10/qzorg1.png)]

2、用户界面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fBFOIMGr-1575968317701)(https://img.xygeng.cn/upload/2019/12/10/qzow2e.png)]

3、订单界面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZQfH8hbl-1575968317701)(https://img.xygeng.cn/upload/2019/12/10/qzovi3.png)]

4、房间管理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kdwMw0pc-1575968317703)(https://img.xygeng.cn/upload/2019/12/10/qzouxe.png)]

5、菜单管理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FUfR2GPY-1575968317705)(https://img.xygeng.cn/upload/2019/12/10/qzp3wh.png)]

部分代码：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>木芽落酒店 - 登录</title>
	<link rel="stylesheet" href="layui/css/layui.css" media="all">
	<link rel="stylesheet" href="css/style.css" media="all">
	<script src="js/index.js"></script>
	<script>
		//判断是否登录
		var user = ReadJson("muya_user");
		if (user) {
			if (user.level == 0) {
				location.href = "user.html";
			} else {
				location.href = "admin.html";
			}
		}
	</script>
</head>

<body>
	<div class="main" id="login">
		<div class="login-form">
			<h1>Member Login</h1>
			<div class="head">
				<img src="images/user.png" alt="" />
			</div>
			<form>
				<input type="text" id="name" class="text" value="USERNAME" onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = 'USERNAME';}">
				<input type="password" id="password" value="Password" onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = 'Password';}">
				<div class="submit">
					<input type="button" id="loginbtn" value="LOGIN">
				</div>
				<p><a href="javascript:reg()">Register ?</a></p>
			</form>
		</div>
	</div>
	<div class="main" id="reg">
		<div class="login-form">
			<h1>Member Register</h1>
			<div class="head">
				<img src="images/user.png" alt="" />
			</div>
			<form>
				<input type="text" id="regname" class="text" value="USERNAME" onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = 'USERNAME';}">
				<input type="password" id="regpass" value="Password" onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = 'Password';}">
				<input type="text" id="email" value="Email" onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = 'email';}">
				<input type="text" id="tell" value="Tellphone" onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = 'tellphone';}">
				<div class="submit">
					<input type="button" id="regbtn" value="Register">
				</div>
				<p><a href="javascript:login()">Login</a></p>
			</form>
		</div>
	</div>
	<script src="js/login.js"></script>
</body>

</html>

总结

需要整个工程的需要找博主，请支持一下博客的运行。

原文地址：点击去原文

Logo
欢迎使用若依开源

快速构建 Web 应用程序

更多推荐

深入 Composer autoload

这几天看到 phphub 上面有人开始进坑怒看 laravel 源代码，于是我也凑个热闹来看下这个故事。众所周知 composer 是现代PHP 项目的基石， 与古老的 pear 不同， composer 并不是一款专注于系统级别php 管理的包管理系统，而是基于项目的一个库管理系统。这就好比 npminstall -g 和 npminstall 的区别。而且最主要

avatar RuoYi 若依

实体类（VO，DO，DTO）的划分

经常会接触到VO，DO，DTO的概念，本文从领域建模中的实体划分和项目中的实际应用情况两个角度，对这几个概念进行简析。得出的主要结论是：在项目应用中，VO对应于页面上需要显示的数据（表单），DO对应于数据库中存储的数据（数据表），DTO对应于除二者之外需要进行传递的数据。一、实体类百度百科中对于实体类的定义如下：实体类的主要职责是存储和管理系统内部的信息，它也可以有行为，甚至很复杂的行为，但这些行

avatar RuoYi 若依

计算机课如何断开学生端,极域课堂管理系统怎么连接老师 学生端连接问题解决方法...

现在的大学课堂都紧跟着时代的步伐，选择用电子教室代替传统的教室，电子教室的好处就是可以让坐在角落的同学也能清楚的看到老师的每一个操作，除此之外还可以电子举手，提交作业获得老师的及时反馈，学习效率倍增。如果你发现自己的电脑出现连接不上电脑的情况的，来看看小编是怎么解决的把！类别：教育管理 大小：16.38M 语言：简体中文评分：61、首先，正常的学生机器是开机就会自动的连接老师端的，如果...

avatar RuoYi 若依