Flask CSS JSON SESSION





app.py

from flask import Flask,render_template,url_for,redirect,request,json,session

app=Flask(__name__)
app.secret_key= b'abcd1234'

@app.route('/')
def index():
return render_template('index.html')

@app.route('/second')
def test():
return render_template('test.html')

@app.route('/third')
def testThird():
return redirect(url_for('index'))

@app.route('/postExample',methods=['POST','GET'])
def postExample():
    if request.method == 'POST':
        if request.values['send']== '送出':
            return render_template('postExample.html',name=request.values['user'])
    return render_template('postExample.html',name="")

@app.route('/register',methods=['POST','GET'])
def register():
with open('./member.json','r') as file_object:
member = json.load(file_object)
if request.method=='POST':
if request.values['send']=='送出':
if request.values['userid'] in member:
for find in member:
if member[find]['nick']==request.values['username']:
return render_template('register.html',alert='this account and nickname are used.')
return render_template('register.html',alert='this account is used.',nick=request.values['username'])
else:
for find in member:
if member[find]['nick']==request.values['username']:
return render_template('register.html',alert='this nickname are used.',id=request.values['userid'],pw=request.values['userpw'])
member[request.values['userid']]={'password':request.values['userpw'],'nick':request.values['username']}
with open('./member.json','w') as f:
json.dump(member, f)
return render_template('index.html')
return render_template('register.html')

@app.route('/login',methods=['GET','POST'])
def login():
if request.method== 'POST' :
with open('./member.json','r') as file_object:
member = json.load(file_object)
            
if request.values['userid'] in member:
if member[request.values['userid']]['password']==request.values['userpw']:
session['username']=request.values['userid']
return redirect ( url_for ( 'index' ))
else:
return render_template('login.html',alert="Your password is wrong, please check again!")
else:
return render_template('login.html',alert="Your account is unregistered.")
return render_template('login.html')

@app.route('/logout',methods=['GET','POST'])
def logout ():
if request.method=='POST':
if request.values['send']=='確定':
session.pop('username',None)
return redirect(url_for('index'))
return render_template('logout.html')    
 
 
if __name__ == '__main__':
app.run(host='0.0.0.0',port='5000',debug=True)


register.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/nav_bar.css')}}">
<title>ironman album</title>
</head>
<style>
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

table{
background-color:plum;
border-radius:5px;
padding-bottom: 10px;
padding-top: 15px;
padding-right: 10px;
margin-top:20px;
width:70%;
}

input{
font-size: initial;
}

span {
background-color:#FFC8B4;
box-shadow:1px 1px 3px red;
margin-right:8px;
}

@media screen and (max-width: 400px){
table{
width:90%;
}
}

.button {
  border:0;
  background-color:darkviolet;
  color:#fff;
  border-radius:20px;
  cursor:pointer;
  width:90px;
  height:30px;
}

.button:hover{
  color:black;
  background-color: lavender;
}
</style>
<body>
<form method="post">
<ul class="computer" id="topnav">
<li><a href="../" class="active">首頁</a></li>
<li><a href="../album">相簿</a></li>
<li><a href="../register">註冊</a></li>
<li><a href="../login">登入</a></li>
<li style="float:right"><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
</ul>
<div style="padding-top: 100px">    
  <table align="center">
    <tr>
    <td colspan="2" align="right"><span>{{alert}}</span></td>
    </tr>
    <tr>
      <th width="15%">account</th>
      <td><input class="w3-input w3-border w3-round-large" type='text' name="userid" value={{id}}></td>
    </tr>
    <tr>
      <th>password</th>
      <td><input class="w3-input w3-border w3-round-large" type='password' name="userpw" value={{pw}}></td>
    </tr>
    <tr>
      <th>Nick Name</th>
      <td><input class="w3-input w3-border w3-round-large" type='text' name="username" value={{nick}}></td>
    </tr>
    <tr>
      <td colspan="2" align="right"><input class="button" value="送出" type='submit' name="send"></td>
    </tr>
  </table>
</div>


</form>
<script>
function myFunction() {
  var x = document.getElementById("topnav");
  if (x.className === "computer") {
    x.className = "phone";
  } else {
    x.className = "computer";
  }
}
</script>


</body>
</html>

login.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/nav_bar.css')}}">
<title>ironman album</title>
</head>
<style>
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

table{
background-color:plum;
border-radius:5px;
padding-bottom: 10px;
padding-top: 15px;
padding-right: 10px;
margin-top:20px;
width:70%;
}

input{
font-size: initial;
}

span {
background-color:#FFC8B4;
box-shadow:1px 1px 3px red;
margin-right:8px;
}

@media screen and (max-width: 400px){
table{
width:90%;
}
}

.button {
  border:0;
  background-color:darkviolet;
  color:#fff;
  border-radius:20px;
  cursor:pointer;
  width:90px;
  height:30px;
}

.button:hover{
  color:black;
  background-color: lavender;
}
</style>
<body>
<ul class="computer" id="topnav">
<li><a href="../" class="active">首頁</a></li>
<li><a href="../album">相簿</a></li>
<li><a href="../register">註冊</a></li>
<li><a href="../login">登入</a></li>
<li style="float:right"><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
</ul>
<form method="post">
<div style="padding-top: 100px">    
  <table align="center">
    <tr>
    <td colspan="2" align="right"><span>{{alert}}</span></td>
    </tr>
    <tr>
      <th width="15%">account</th>
      <td><input class="w3-input w3-border w3-round-large" type='text' name="userid" value={{id}}></td>
    </tr>
    <tr>
      <th>password</th>
      <td><input class="w3-input w3-border w3-round-large" type='password' name="userpw" value={{pw}}></td>
    </tr>
    <tr>
      <td colspan="2" align="right"><input class="button" value="登入" type='submit' name="send"></td>
    </tr>
  </table>
</div>
</form>
<script>
function myFunction() {
  var x = document.getElementById("topnav");
  if (x.className === "computer") {
    x.className = "phone";
  } else {
    x.className = "computer";
  }
}
</script>


</body>
</html>


logout.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/nav_bar.css')}}">
<title>ironman album</title>
</head>
<style>
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

table{
background-color:plum;
border-radius:5px;
padding-bottom: 10px;
padding-top: 15px;
padding-right: 10px;
margin-top:20px;
width:70%;
}

input{
font-size: initial;
}

span {
background-color:#FFC8B4;
box-shadow:1px 1px 3px red;
margin-right:8px;
}

@media screen and (max-width: 400px){
table{
width:90%;
}
}

.button {
  border:0;
  background-color:darkviolet;
  color:#fff;
  border-radius:20px;
  cursor:pointer;
  width:90px;
  height:30px;
}

.button:hover{
  color:black;
  background-color: lavender;
}
</style>
<body>
<form method="post">
<ul class="computer" id="topnav">
<li><a href="../" class="active">首頁</a></li>
<li><a href="../album">相簿</a></li>
<li><a href="../upload">上傳</a></li>
  <li><a href="../logout">登出</a></li>
  <li style="float:right"><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
</ul>
<div style="padding-top: 80px;padding-left:20px">
  <h2>確認登出嗎？</h2>
  <p> </p>
  <p><input class="button" value="確定" type='submit' name="send">
  <input class="button" value="取消" type='submit' name="send"></p>
</div>


</form>
<script>
function myFunction() {
  var x = document.getElementById("topnav");
  if (x.className === "computer") {
    x.className = "phone";
  } else {
    x.className = "computer";
  }
}
</script>


</body>
</html>

json

{"carlos": {"nick": "carloshphk", "password": "1234"}, "yueh860304": {"nick": "Charlotte", "password": "1234"}, "yueh970304": {"nick": "Longwind", "password": "1234"}}





留言

張貼留言

這個網誌中的熱門文章

香港袐密行動

圖片
  好多朋友話, 時間過去, 記憶變得濛糊, 當日的好友, 今日好像已經忘記誰是誰了. 我更加向大家對薦這一本書. 我不會講書中的故事, 因為大家都有自己的故事. 當中你會回憶當年的你, 而你我的回憶不同, 雖然我們曾經在時空交雜過, 可是我們在事件上找到各自各的位置, 發揮各自各的功能. 如果你覺得書中的故事荒謬 (OnL9), 不真實, 吹水. 那麼回想5年前, 天台的風景。 你有想像過TG 的氣味? 你有想像過路上滿是路障? 你有想像過一街之距, 兩個世界? 這是他們的回憶，他們見到的。 5年過去, 離散的我更珍惜相敍的時光, 因為這是我們學到的. 也更珍惜當下. 人生苦短, 比起回頭, 我更喜歡向前, 因為回望了過去, 向前行就更明確. 看書吧. 一齊加油.
閱讀完整內容

要老是忘記, 我更記不起

圖片
  黃昏，您誤入我的房間，我開門請您回去，一度的寧靜，期待著夜幕到來。早上陽光把我叫醒，我看著您眼定定看著窗邊，當涼風從窗邊透出，您回去了，沒有回頭，也沒有說話。 我們也是大家的過客，大家借過大家的溫度。過去和幻想組織了美好的回憶。那怕只有片段，時間和回憶可以成正比，也可以沒有關係。“不借得太多也想借點火，就算不說一句都很清楚，雙方都經過太多。“ 這本書就是一連串愛情的小故事，可能有相似的，也可能有別人的。很多人說，愛情總是可以令成長，我不同意，不論有否成長，我的角度，每一個您的出現，也改變了我的習慣。習慣了密碼用上您的生日，習慣耐心溫柔地弄乾您的長頭髮，習慣了冰凍的茶味。 “不應講的死也不說 是否等於欺騙 衷心的欺騙 我真心想你快活如蜜甜“ 愛情不須要將來，須要的只有回憶。 我說昨晚的“您“，是隻蜜蜂， 大家請不要過份FF , 感謝閱讀 😚😚😚
閱讀完整內容