整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
站登陸是很常用的功能，如果你希望進(jìn)行用戶管理，對(duì)不同用戶區(qū)別顯示不同內(nèi)容,那么就必然使用用戶登陸功能。
python開發(fā)的網(wǎng)站實(shí)現(xiàn)用戶登陸非常簡單，尤其是使用flask的開發(fā)。
本例是用flask實(shí)現(xiàn)的一個(gè)簡單實(shí)例：用最簡單的代碼實(shí)現(xiàn)網(wǎng)站登陸的基本功能。文末附源碼下載方法，你可以進(jìn)一步修改實(shí)現(xiàn)自己需要的各種功能。
本例中：同樣的一個(gè)頁面，如果未登陸的用訪問顯示的是花花草草圖片，頁面下方顯示登陸對(duì)話框。但是用戶登陸狀態(tài)下訪問同樣的頁面見到的是美女圖片，下方的登陸對(duì)話框也變成了登出按鈕。
本例代碼簡單，python代碼40行左右實(shí)現(xiàn)了全部功能，基于這樣的模式，你可以進(jìn)一步修改實(shí)現(xiàn)各種需要的功能，例如開發(fā)一個(gè)公司主頁，讓未登錄的訪客只能看到對(duì)外宣傳文檔，一旦用戶登陸為員工則提供內(nèi)部文件和消息顯示。 如此等等... ...
完整的演示代碼，包括目錄結(jié)構(gòu)和html文件模板打包，已經(jīng)上傳在百度盤。請(qǐng)加關(guān)注后用私信發(fā)送"20180303"字樣，系統(tǒng)會(huì)自動(dòng)在私信中回復(fù)您下載地址。
請(qǐng)及時(shí)關(guān)注頭條號(hào)“有只狗狗叫多多”，后續(xù)將介紹python更多參考代碼，稍做修改即能使用，學(xué)習(xí)python不要錯(cuò)過哦。。。。
個(gè)登錄界面可能有一點(diǎn)點(diǎn)。。。[黑線]
源碼放著了，要自己拿去吧[奸笑]
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
body {
background-color: #000;
color: #fff;
text-align: center;
padding-top: 100px;
font-family: 'Courier New', Courier, monospace;
}
h1 {
font-size: 50px;
margin-bottom: 30px;
color: #ff0000;
text-shadow: 0 0 10px #ff0000;
}
table {
margin: 0 auto;
width: 400px;
}
th,
td {
padding: 10px;
}
input[type="text"],
input[type="date"] {
width: 300px;
padding: 5px;
border-radius: 5px;
border: 1px solid #ff0000;
background-color: #000;
color: #ff0000;
}
input[type="submit"] {
margin-top: 20px;
padding: 10px;
background-color: #ff0000;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
animation: pulseEffect 1s infinite;
}
input[type="submit"]:hover {
background-color: #ff6666;
animation: none;
}
.success-message {
margin-top: 30px;
display: none;
animation: fadeInEffect 2s;
}
.checkbox-option {
margin-top: 20px;
animation: slideInEffect 2s;
}
.contact-info {
margin-top: 40px;
animation: bounceEffect 1.5s infinite;
}
/* Animations */
@keyframes pulseEffect {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
@keyframes fadeInEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideInEffect {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
@keyframes bounceEffect {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
}
</style>
<script>
window.onload=function () {
document.querySelector('form').addEventListener('submit', function (event) {
event.preventDefault();
var successMessage=document.getElementById('successMessage');
successMessage.style.display='block';
successMessage.style.animation='fadeInEffect 2s forwards';
var submitButton=document.getElementById('submitButton');
submitButton.disabled=true;
});
document.getElementById('closeButton').addEventListener('click', function () {
var successMessage=document.getElementById('successMessage');
successMessage.style.display='none';
});
}
</script>
</head>
<body>
<h1>死亡協(xié)議</h1>
<form>
<table>
<tr>
<th>受害者姓名</th>
<td><input type="text"></td>
</tr>
<tr>
<th>身份證號(hào)碼</th>
<td><input type="text"></td>
</tr>
<tr>
<th>iphone</th>
<td><input type="text"></td>
</tr>
<tr>
<th>郵箱</th>
<td><input type="text"></td>
</tr>
<tr>
<th>預(yù)定日期</th>
<td><input type="date"></td>
</tr>
</table>
<input id="submitButton" type="submit" value="簽署協(xié)議">
</form>
<div id="successMessage" class="success-message">
<p>最近自殺人數(shù)較多，可能會(huì)延期</p>
<button id="closeButton">關(guān)閉</button>
</div>
<div class="checkbox-option">
<input type="checkbox" id="agreementCheckbox">
<label for="agreementCheckbox">我同意所有要求</label>
</div>
<div class="contact-info">
<p>客服：LHTZ173@163.com</p>
</div>
</body>
效果圖
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
