前言：
基於html和JavaScript，利用layui爲界面設計，local storage存儲數據，爲一個虛構的酒店創建一個允許在線客戶訂購和管理的網站。
原文地址：點擊去原文
功能需求：
-
客戶可以:預訂酒店房間新客戶將不得不創建一個登錄和密碼更改或取消房間預訂登記入住房間，爲客房服務預訂膳食，退房，客戶必須支付總費用(包括房間預訂和退房餐)。在這個網站上，我們將忽略真正的支付處理，只是假裝顧客可以通過點擊一個按鈕來支付。
-
客房管理人員可以:根據房間是否清潔、是否可用、等
-
廚房工作人員可以:更改菜單上的食物列表 當飯做好並送出時，把訂單拿掉
-
酒店經理可以:查看和更改系統中的所有數據，添加新員工，包括設置他們的用戶名和密碼，添加新的房間供使用
-
其他要求:所有用戶必須登錄不同類型的用戶，不同的用戶有不同的能力，只能訪問與他們相關的信息，檢查無效的輸入，如空訂單、不存在的日期、負數等。一般來說，網站必須看起來和感覺真實。您有責任使用常識來確定需要什麼來滿足這個需求。例如，在收集新客戶詳細信息的頁面上，web頁面顯然需要詢問客戶的電話號碼和電子郵件地址，否則需要標記將丟失。
-
技術和軟件需求使用JavaScript localStorage(更新:而不是sessionStorage)和JSON來存儲
初始數據：
-
共有5間不同的房間，分2個不同的類別(如King, Double)不同的價格和照片
-
菜單上有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>
總結
需要整個工程的需要找博主，請支持一下博客的運行。
原文地址：點擊去原文