kejingfan/Principles_of_Database_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初步完成登录、注册、修改账号、主页内容

Browse Source
This commit is contained in:
Jingfan Ke
2024-06-13 13:53:54 +08:00
parent e48e752b91
commit ad767a806b
31 changed files with 1291 additions and 488 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
Project/templates/index.html
View File

@@ -3,34 +3,129 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的12306官网</title>
<title>KJF航班订票</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
<script src="{{ url_for('static', filename='js/index.js') }}" defer></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>
</head>
<body>
<header>
<h1>中国铁路12306</h1>
<nav>
<ul>
<li><a href="{{ url_for('index') }}">首页</a></li>
<li><a href="{{ url_for('signup') }}">注册</a></li>
<li><a href="{{ url_for('modify') }}">修改账号</a></li>
</ul>
</nav>
<div class="header-content">
<div class="logo">KJF航班订票</div>
<div class="nav-buttons">
<a href="{{ url_for('index') }}">首页</a>
<a href="{{ url_for('orders') }}">我的订单</a>
</div>
<div class="user-menu">
<span>{{ username }}</span>
<div class="dropdown">
<button class="dropbtn">▼</button>
<div class="dropdown-content">
<a href="{{ url_for('modify') }}">修改账户信息</a>
<a href="{{ url_for('logout') }}">退出登录</a>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="background-container">
<div class="content">
<h2>尽享精彩出行服务</h2>
<div class="links">
<a class="btn" href="{{ url_for('signup') }}">点击跳转注册</a>
<a class="btn" href="{{ url_for('modify') }}">点击跳转修改账号</a>
</div>
<div class="slides">
<ul id="slide-container">
{% for image in images %}
<li>
<a href="{{ image.link }}" target="_blank">
<img src="{{ image.src }}">
</a>
</li>
{% endfor %}
</ul>
</div>
<div class="content">
<div id="ticket" class="tabcontent" style="display: block;">
<form action="{{ url_for('search') }}" method="get" class="search-form" onsubmit="return validateForm()">
<div class="form-row">
<label for="departure">出发地:</label>
<select id="departure" name="departure">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
</div>
<div class="form-row">
<label for="destination">目的地:</label>
<select id="destination" name="destination">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
<div id="destination-warning" class="error-message"></div>
</div>
<div class="form-row">
<label for="departure-date">出发日期:</label>
<input type="date" id="departure-date" name="departure-date">
</div>
<div class="form-row">
<label for="passengers">乘客人数:</label>
<div class="passenger-input">
<button type="button" onclick="decrement()">-</button>
<input type="number" id="passengers" name="passengers" value="1" min="1" max="50">
<button type="button" onclick="increment()">+</button>
</div>
</div>
<div class="form-row">
<button type="submit" class="btn">立即查询</button>
</div>
</form>
</div>
</div>
</main>
<footer>
<p>&copy; 2024 中国铁路12306. 保留所有权利。</p>
<p>&copy; 2024 KJF航班订票. 保留所有权利。</p>
</footer>
<script src="{{ url_for('static', filename='js/slideshow.js') }}"></script>
<script>
function validateForm() {
var departure = document.getElementById('departure').value;
var destination = document.getElementById('destination').value;
var warning = document.getElementById('destination-warning');
if (departure === destination) {
warning.textContent = '出发地和目的地不能相同';
return false;
} else {
warning.textContent = '';
}
return true;
}
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
function increment() {
var passengers = document.getElementById("passengers");
var value = parseInt(passengers.value, 10);
if (value < 50) {
passengers.value = value + 1;
}
}
function decrement() {
var passengers = document.getElementById("passengers");
var value = parseInt(passengers.value, 10);
if (value > 1) {
passengers.value = value - 1;
}
}
</script>
</body>
</html>

47
Project/templates/login.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的航班订票官网</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
<script src="{{ url_for('static', filename='js/login.js') }}" defer></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>
</head>
<body>
<header>
<h1>KJF航班订票</h1>
</header>
<main>
<div class="slides">
<ul id="slide-container">
{% for image in images %}
<li>
<a href="{{ image.link }}" target="_blank">
<img src="{{ image.src }}">
</a>
</li>
{% endfor %}
</ul>
</div>
<div class="content">
<h2>尽享精彩出行服务</h2>
<div class="login-form">
<input type="text" id="mobileNo" placeholder="手机号">
<div id="mobileNoError" class="error-message"></div>
<input type="password" id="password" placeholder="密码">
<div id="loginError" class="error-message"></div>
<input type="hidden" id="encryptedPassword">
<div class="buttons">
<button onclick="submitForm()">登录</button>
<a class="btn" href="{{ url_for('signup') }}">注册</a>
</div>
</div>
</div>
</main>
<footer>
<p>&copy; 2024 KJF航班订票. 保留所有权利。</p>
</footer>
<script src="{{ url_for('static', filename='js/slideshow.js') }}"></script>
</body>
</html>

185
Project/templates/modify.html
View File

@@ -1,10 +1,12 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>修改账户</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>
<script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修改账户</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/modify.css') }}">
<script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>
<script>
window.onload = function() {
{% with messages = get_flashed_messages() %}
{% if messages %}
@@ -20,77 +22,112 @@
</head>
<body>
<form action="#" method="post">
<ul>
<div>
<div>证件号码：</div>
<input type="text" id="cardCode" name="cardCode" placeholder="请输入您的证件号码" required>
<header>
<div class="header-content">
<a href="{{ url_for('index') }}" class="btn-back">返回主页</a>
<h1>KJF航班订票</h1>
<div class="header-spacer"></div>
</div>
</li>
<li>
<div>
<div>登陆密码：</div>
<input type="password" id="password" placeholder="请输入您的密码" required>
<input id="encryptedPassword" name="encryptedPassword" type="hidden">
</header>
<main>
<div class="content">
<h2>修改账户信息</h2>
<form action="#" method="post" id="modify-form">
<div class="tab">
<button type="button" class="tablinks active" onclick="openTab(event, 'deleteAccount')">删除账户</button>
<button type="button" class="tablinks" onclick="openTab(event, 'modifyPassword')">修改密码</button>
<button type="button" class="tablinks" onclick="openTab(event, 'modifyPhone')">修改手机号</button>
<button type="button" class="tablinks" onclick="openTab(event, 'modifyUsername')">修改用户名</button>
</div>
<input type="hidden" id="modifyType" name="modifyType" value="删除账户">
<div class="form-group">
<div>登陆密码：</div>
<input type="password" id="password" placeholder="请输入您的密码" required>
<input id="encryptedPassword" name="encryptedPassword" type="hidden">
</div>
<div id="deleteAccount" class="tabcontent">
<p>删除账户将无法恢复，请确认。</p>
</div>
<div id="modifyPassword" class="tabcontent" style="display:none">
<div class="form-group">
<div>新密码：</div>
<input type="password" id="newPassword" placeholder="6-20位字母、数字或符号">
<input id="encryptedNewPassword" name="encryptedNewPassword" type="hidden">
</div>
<div class="form-group">
<div>确认密码：</div>
<input type="password" id="confirmPassword" placeholder="再次输入您的新密码">
</div>
</div>
<div id="modifyPhone" class="tabcontent" style="display:none">
<p>原手机号为：{{ current_user_phone }}</p>
<div class="form-group">
<div>新手机号：</div>
<input type="text" id="mobileNo" name="mobileNo" value title="手机号码" aria-label="手机号码" maxlength="11" placeholder="11位手机号">
</div>
</div>
<div id="modifyUsername" class="tabcontent" style="display:none">
<p>原用户名为：{{ current_username }}</p>
<div class="form-group">
<div>新用户名：</div>
<input type="text" id="username" name="username" placeholder="请输入新的用户名">
</div>
</div>
<div class="form-group">
<button type="submit" onclick="return submitForm()">确认</button>
</div>
</form>
</div>
</li>
<li>
<div>
<div>修改内容：</div>
<select id="modifyType" name="modifyType" onchange="modify.showModifyPassword()" aria-label="请选择您的修改内容" title="请选择您的修改内容" required>
<option value="1">删除账户</option>
<option value="2">修改密码</option>
<option value="3">修改手机号</option>
</select>
</div>
</li>
<li class="modifyPassword" style="display: none;">
<div>
<div>修改密码：</div>
<input type="password" id="newPassword" placeholder="6-20位字母、数字或符号">
<input id="encryptedNewPassword" name="encryptedNewPassword" type="hidden">
</div>
</li>
<li class="modifyPassword" style="display: none;">
<div>
<div>确认密码：</div>
<input type="password" id="confirmPassword" placeholder="再次输入您的修改密码">
</div>
</li>
<li class="modifymobileNo" style="display: none;">
<div>
<div>修改手机号：</div>
<input type="text" id="mobileNo" name="mobileNo" value title="手机号码" aria-label="手机号码" maxlength="11" placeholder="11位手机号">
</div>
</li>
<div>
<button type="submit" onclick="return submitForm()">确认</button>
</div>
</ul>
</main>
<footer>
<p>&copy; 2024 KJF航班订票. 保留所有权利。</p>
</footer>
</form>
<script src="{{ url_for('static', filename='js/checkInfo.js') }}"></script>
<script src="{{ url_for('static', filename='js/modify.js') }}"></script>
<script>
function submitForm() {
document.getElementById('encryptedPassword').value = md5(
document.getElementById('password').value
)
let modifyType = document.getElementById('modifyType').value
if (modifyType === '1') {
// document.getElementById('newPassword') = ''
return true
} else if (modifyType == '2') {
document.getElementById('encryptedNewPassword').value = md5(
document.getElementById('newPassword').value
)
return checkInfo.checkNewPassword()
} else if (modifyType == '3') {
return checkInfo.checkMobileNo()
}
}
</script>
<script src="{{ url_for('static', filename='js/checkInfo.js') }}"></script>
<script src="{{ url_for('static', filename='js/modify.js') }}"></script>
<script>
function submitForm() {
document.getElementById('encryptedPassword').value = md5(
document.getElementById('password').value
);
let modifyType = document.querySelector('.tablinks.active').textContent;
document.getElementById('modifyType').value = modifyType;
if (modifyType === '删除账户') {
return true;
} else if (modifyType === '修改密码') {
document.getElementById('encryptedNewPassword').value = md5(
document.getElementById('newPassword').value
);
return checkInfo.checkNewPassword();
} else if (modifyType === '修改手机号') {
return checkInfo.checkMobileNo();
} else if (modifyType === '修改用户名') {
return true;
}
}
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
document.addEventListener('DOMContentLoaded', function() {
let activeTab = document.querySelector('.tablinks.active');
if (activeTab) {
openTab({currentTarget: activeTab}, activeTab.getAttribute('onclick').split("'")[1]);
}
});
</script>
</body>
</html>
</html>

154
Project/templates/signup.html
View File

@@ -1,115 +1,51 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>我的12306注册</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>
<script>
window.onload = function() {
{% with messages = get_flashed_messages() %}
{% if messages %}
var message = "";
{% for msg in messages %}
message += "{{ msg }}\n";
{% endfor %}
alert(message);
{% endif %}
{% endwith %}
};
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册 - KJF航班订票</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/signup.css') }}">
<script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>
<script src="{{ url_for('static', filename='js/checkInfo.js') }}"></script>
<script src="{{ url_for('static', filename='js/signup.js') }}"></script>
</head>
<body>
<form action="#" method="post">
<ul>
<li>
<div>
<div>用 户 名：</div>
<input type="text" id="name" name="name" placeholder="用户名设置成功后不可修改" required>
</div>
</li>
<li>
<div>
<div>登陆密码：</div>
<input type="password" id="password" placeholder="6-20位字母、数字或符号" required>
<input id="encryptedPassword" name="encryptedPassword" type="hidden">
</div>
</li>
<li>
<div>
<div>确认密码：</div>
<input type="password" id="confirmPassword" placeholder="再次输入您的登录密码" required>
</div>
</li>
<li>
<div>
<div>证件类型：</div>
<input name="cardTypeCode" id="cardTypeCode" value="1" type="hidden">
<select id="cardType" aria-label="请选择您的证件类型" title="请选择您的证件类型" required>
<option value="1">中国居民身份证</option>
<option value="1">港澳台居民身份证</option>
</select>
</div>
</li>
<li>
<div>
<div>姓 名：</div>
<input type="text" id="regist_name" name="regist_name" placeholder="请输入姓名" required>
</div>
</li>
<li>
<div>
<div>证件号码：</div>
<input type="text" id="cardCode" name="cardCode" placeholder="请输入您的证件号码" maxlength="18" required>
</div>
</li>
<li>
<div>
<div>优惠（待）类型：</div>
<select id="passengerType" name="passengerType" aria-label="请选择旅客类型" title="请选择旅客类型" required>
<option value="1">成人</option>
<option value="2">儿童</option>
<option value="3">学生</option>
<option value="4">残疾军人</option>
</select>
</div>
</li>
<li style="height: 1px;border-top: 1px dashed #DEDEDE;margin: 15px 0;"></li>
<li>
<div>
<div>邮 箱：</div>
<input type="text" id="email" name="email" title="请正确填写邮箱地址" placeholder="请正确填写邮箱地址" aria-label="请正确填写邮箱地址" required>
</div>
</li>
<li>
<div>
<div>手机号码：</div>
<div>
<select id="mobileCode" name="mobileCode" required>
<option value="86">+86 中国</option>
</select>
<input type="text" id="mobileNo" name="mobileNo" value title="手机号码" aria-label="手机号码" maxlength="11" required>
</div>
</div>
</li>
<div>
<button type="submit" onclick="return submitForm()">下一步</button>
</div>
</ul>
</form>
<script src="{{ url_for('static', filename='js/checkInfo.js') }}"></script>
<script>
function submitForm() {
if (checkInfo.checkCardCode() && checkInfo.checkMobileNo() && checkInfo.checkPassword()) {
document.getElementById('encryptedPassword').value = md5(
document.getElementById('password').value
)
return true
}
return false
}
</script>
<form action="#" method="post" id="signupForm">
<ul>
<li>
<div>
<div>用户名：</div>
<input type="text" id="username" name="username" placeholder="请输入用户名" required>
<div class="error-message">{{ errors.username }}</div>
</div>
</li>
<li>
<div>
<div>手机号：</div>
<input type="text" id="mobileNo" name="mobileNo" placeholder="请输入手机号" maxlength="11" required>
<div class="error-message" id="mobileNoError">{{ errors.mobileNo }}</div>
</div>
</li>
<li>
<div>
<div>登录密码：</div>
<input type="password" id="password" placeholder="6-20位字母、数字或符号" required>
<input id="encryptedPassword" name="encryptedPassword" type="hidden">
<div class="error-message" id="passwordError">{{ errors.password }}</div>
</div>
</li>
<li>
<div>
<div>确认密码：</div>
<input type="password" id="confirmPassword" placeholder="再次输入您的登录密码" required>
<input id="encryptedConfirmPassword" name="encryptedConfirmPassword" type="hidden">
<div class="error-message" id="confirmPasswordError">{{ errors.confirmPassword }}</div>
</div>
</li>
<div>
<button type="submit" onclick="return submitForm()">注册</button>
</div>
</ul>
</form>
</body>
</html>
</html>