devbox
寸_铁
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【Python】flask实现登录注册_flask登录注册

作者：寸_铁 | 2024-06-22 21:34:38

赞

踩

flask登录注册

一、jinjia2

1、控制结构

控制结构 Flask中的Jinja2模板提供了多种控制结构，通过这些控制结构可以改变模板的渲染过程。例如，下面展示的条件控制语句。

2、使用flask成功渲染到模板

【首先你要】

  1. 首先要创建一个templates目录，这里面放想要渲染到的html页面，再创建一个与templates目录同级py文件，py文件是渲染的效果；也就是说，py文件里是"骨架"，templates里面的html文件是“血肉”，最终实现的效果；

  2. 导入Flask包

  3. 创建一个Flask对象

  4. 声明路由，只由声明一个路由才能访问到页面

    1. 在该路由下定义一个函数，将你想呈现的效果封装在这个函数里，在函数的最后一行return render_template

  5. 想要渲染成功必须使用

    render_template('index.html', title='hello world', list2=list1, my_list=my_list)

    将title，list2，render_template这三个变量的内容渲染到index.html页面中

  6. 定义过滤器，也就是一个函数

  7. 注册过滤器

    1. # 第一个参数是函数名，第二个是过滤器的名字，可在所有模板上使用这个函数
    2. app.add_template_filter(do_listreverse, 'listreverse')

  8. 运行Flask对象

【举个栗子】 

main.py

  1. from turtle import title
  2. from flask import Flask, render_template
  3.  
  4. app = Flask(__name__)
  5.  
  6.  
  7. @app.route('/')
  8. def index():
  9.     list1 = list(range(10))
  10.     my_list = [
  11.         {'id': 1, 'value': '我爱工作'},
  12.         {'id': 2, 'value': '工作使人快乐'},
  13.         {'id': 3, 'value': '沉迷工作无法自拔'},
  14.         {'id': 4, 'value': '日渐消瘦'},
  15.         {'id': 5, 'value': '以梦为马，不负韶华'}, ]
  16.     # 将title，list2，render_template这三个变量的内容渲染到index.html页面中
  17.     return render_template('index.html', title='hello world', list2=list1, my_list=my_list)
  18.  
  19.  
  20. # 自定义过滤器
  21. def do_listreverse(aa):
  22.     temp_li = list(aa)
  23.     temp_li.reverse()  # 将列表反转
  24.     return temp_li
  25.  
  26.  
  27. # 注册过滤器
  28. # 第一个参数是函数名，第二个是过滤器的名字，可在所有模板上使用这个函数
  29. app.add_template_filter(do_listreverse, 'listreverse')
  30.  
  31. if __name__ == '__main__':
  32.     app.run()

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10. <!--接收从main.py传递的参数-->
  11. <!--通过listreverse过滤器将传递过来的参数反转并且转成大写-->
  12.     <h1>{{title | listreverse | upper}}</h1>
  13.     <br>
  14. <!--无序列表，ol是有序列表-->
  15.     <ul>
  16. <!--# 使用for循环遍历传过来的参数-->
  17.         {% for item in my_list %}
  18. <!--# 使用列表标签将内容一行一行显示，在main.py里mylist是一个大列表嵌套很多小的字典，其中id是k值，value是v值-->
  19.         <li>{{item.id}}----{{item.value}}</li>
  20.         {% endfor %}
  21.     </ul>
  22.     <ul>
  23.     {% for item in my_list %}
  24. <!--# loop是jinjia2里的内置循环变量，loop.index是从1开始升序（循环迭代）-->
  25.         {% if loop.index == 1 %}
  26.             <li style="background-color: red;">{{loop.index}}----{{item.get('value')}}</li>
  27.         {% elif loop.index == 2 %}
  28.             <li style="background-color: gray;">{{loop.index}}----{{item.get('value')}}</li>
  29.         {% elif loop.index == 3 %}
  30.             <li style="background-color: blue;">{{loop.index}}----{{item.get('value')}}</li>
  31.         {% else %}
  32.             <li style="background-color: yellow;">{{loop.index}}----{{item.get('value')}}</li>
  33.         {% endif %}
  34.     {% endfor %}
  35.     </ul>
  36. </body>
  37. </html>

 

二、简单的登录成功后跳转到指定页面：

main2.py

  1. from turtle import title
  2.  
  3. import requests
  4. from flask import Flask, render_template, request, redirect, url_for, flash, session
  5.  
  6. app = Flask(__name__)
  7. # 添加会话一定要设置密钥
  8. app.secret_key = 'asdffbgsc'
  9.  
  10. @app.route('/')
  11. def index():
  12.     list1 = list(range(10))
  13.     my_list = [
  14.         {'id': 1, 'value': '我爱工作'},
  15.         {'id': 2, 'value': '工作使人快乐'},
  16.         {'id': 3, 'value': '沉迷工作无法自拔'},
  17.         {'id': 4, 'value': '日渐消瘦'},
  18.         {'id': 5, 'value': '以梦为马，不负韶华'}, ]
  19.     # 将title，list2，render_template这三个变量的内容渲染到index.html页面中
  20.     return render_template('index.html', title='hello world', list2=list1, my_list=my_list, username=session.get('username'), password=session.get('password'))
  21.  
  22.  
  23. # 自定义过滤器
  24. def do_listreverse(aa):
  25.     temp_li = list(aa)
  26.     temp_li.reverse()  # 将列表反转
  27.     return temp_li
  28.  
  29.  
  30. @app.route('/login', methods=['GET', 'POST'])
  31. def login():
  32.     if request.method == 'POST':
  33.         username = request.form.get('username')
  34.         password = request.form.get('password')
  35.         if username == 'admin' and password == '123':
  36.             print("登录成功！")
  37.             # 设置会话，拿到全局的内容
  38.             session['username']=username
  39.             session['password'] =password
  40.             return redirect('/')
  41.         # else:
  42.         #     flash("用户名或密码错误")
  43.     return render_template('login.html')
  44.  
  45.  
  46. # 注册过滤器
  47. # 第一个参数是函数名，第二个是过滤器的名字，可在所有模板上使用这个函数
  48. app.add_template_filter(do_listreverse, 'listreverse')
  49.  
  50. if __name__ == '__main__':
  51.     app.run(debug=True)

login.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. 	<meta charset="UTF-8">
  6. 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. 	<title>Document</title>
  8. 	<style>
  9. 		* {
  10. 			margin: 0;
  11. 			padding: 0;
  12. 		}
  13.  
  14. 		a {
  15. 			text-decoration: none;
  16. 		}
  17.  
  18. 		input,
  19. 		button {
  20. 			background: transparent;
  21. 			border: 0;
  22. 			outline: none;
  23. 		}
  24.  
  25. 		body {
  26. 			height: 100vh;
  27. 			background: linear-gradient(#141e30, #243b55);
  28. 			display: flex;
  29. 			justify-content: center;
  30. 			align-items: center;
  31. 			font-size: 16px;
  32. 			color: #03e9f4;
  33. 		}
  34.  
  35. 		.loginBox {
  36. 			width: 400px;
  37. 			height: 364px;
  38. 			background-color: #0c1622;
  39. 			margin: 100px auto;
  40. 			border-radius: 10px;
  41. 			box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .6);
  42. 			padding: 40px;
  43. 			box-sizing: border-box;
  44. 		}
  45.  
  46. 		h2 {
  47. 			text-align: center;
  48. 			color: aliceblue;
  49. 			margin-bottom: 30px;
  50. 			font-family: 'Courier New', Courier, monospace;
  51. 		}
  52.  
  53. 		.item {
  54. 			height: 45px;
  55. 			border-bottom: 1px solid #fff;
  56. 			margin-bottom: 40px;
  57. 			position: relative;
  58. 		}
  59.  
  60. 		.item input {
  61. 			width: 100%;
  62. 			height: 100%;
  63. 			color: #fff;
  64. 			padding-top: 20px;
  65. 			box-sizing: border-box;
  66. 		}
  67.  
  68. 		.item input:focus+label,
  69. 		.item input:valid+label {
  70. 			top: 0px;
  71. 			font-size: 2px;
  72. 		}
  73.  
  74. 		.item label {
  75. 			position: absolute;
  76. 			left: 0;
  77. 			top: 12px;
  78. 			transition: all 0.5s linear;
  79. 		}
  80.  
  81. 		.btn {
  82. 			padding: 10px 20px;
  83. 			margin-top: 30px;
  84. 			color: #03e9f4;
  85. 			position: relative;
  86. 			overflow: hidden;
  87. 			text-transform: uppercase;
  88. 			letter-spacing: 2px;
  89. 			left: 35%;
  90. 		}
  91.  
  92. 		.btn:hover {
  93. 			border-radius: 5px;
  94. 			color: #fff;
  95. 			background: #03e9f4;
  96. 			box-shadow: 0 0 5px 0 #03e9f4,
  97. 				0 0 25px 0 #03e9f4,
  98. 				0 0 50px 0 #03e9f4,
  99. 				0 0 100px 0 #03e9f4;
  100. 			transition: all 1s linear;
  101. 		}
  102.  
  103. 		.btn>span {
  104. 			position: absolute;
  105. 		}
  106.  
  107. 		.btn>span:nth-child(1) {
  108. 			width: 100%;
  109. 			height: 2px;
  110. 			background: -webkit-linear-gradient(left, transparent, #03e9f4);
  111. 			left: -100%;
  112. 			top: 0px;
  113. 			animation: line1 1s linear infinite;
  114. 		}
  115.  
  116. 		@keyframes line1 {
  117.  
  118. 			50%,
  119. 			100% {
  120. 				left: 100%;
  121. 			}
  122. 		}
  123.  
  124. 		.btn>span:nth-child(2) {
  125. 			width: 2px;
  126. 			height: 100%;
  127. 			background: -webkit-linear-gradient(top, transparent, #03e9f4);
  128. 			right: 0px;
  129. 			top: -100%;
  130. 			animation: line2 1s 0.25s linear infinite;
  131. 		}
  132.  
  133. 		@keyframes line2 {
  134.  
  135. 			50%,
  136. 			100% {
  137. 				top: 100%;
  138. 			}
  139. 		}
  140.  
  141. 		.btn>span:nth-child(3) {
  142. 			width: 100%;
  143. 			height: 2px;
  144. 			background: -webkit-linear-gradient(left, #03e9f4, transparent);
  145. 			left: 100%;
  146. 			bottom: 0px;
  147. 			animation: line3 1s 0.75s linear infinite;
  148. 		}
  149.  
  150. 		@keyframes line3 {
  151.  
  152. 			50%,
  153. 			100% {
  154. 				left: -100%;
  155. 			}
  156. 		}
  157.  
  158. 		.btn>span:nth-child(4) {
  159. 			width: 2px;
  160. 			height: 100%;
  161. 			background: -webkit-linear-gradient(top, transparent, #03e9f4);
  162. 			left: 0px;
  163. 			top: 100%;
  164. 			animation: line4 1s 1s linear infinite;
  165. 		}
  166.  
  167. 		@keyframes line4 {
  168.  
  169. 			50%,
  170. 			100% {
  171. 				top: -100%;
  172. 			}
  173. 		}
  174. 	</style>
  175. </head>
  176.  
  177. <body>
  178. 	<div class="loginBox">
  179. 		<h2>login</h2>
  180. 		<form action="/login" method="post">
  181. 			<div class="item">
  182. 				<input type="text" required name="username">
  183. 				<label >用户名</label>
  184. 			</div>
  185. 			<div class="item">
  186. 				<input type="password" required name="password">
  187. 				<label >密码</label>
  188. 			</div>
  189. 			<button class="btn">登录
  190. 				<span></span>
  191. 				<span></span>
  192. 				<span></span>
  193. 				<span></span>
  194. 			</button>
  195. 		</form>
  196. 	</div>
  197. </body>
  198. </html>

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9.  
  10. <p align="right">欢迎 {{username}} 登录本系统，密码为{{password}}</p>
  11. <!--使表格居中，长度自适应为60%-->
  12.     <table border = 1 style="margin: auto;" width="60%">
  13.         {% for item in my_list  %}
  14.         <tr>
  15. <!--列是id，行是value-->
  16.         <th> {{ item.id }} </th>
  17.         <td> {{ item.value }}</td>
  18.         </tr>
  19.         {% endfor %}
  20.     </table>
  21.  
  22.  
  23.     <ul>
  24.     {% for item in my_list %}
  25. <!--# loop是jinjia2里的内置循环变量，loop.index是从1开始升序（循环迭代）-->
  26.         {% if loop.index == 1 %}
  27.             <li style="background-color: red;">{{loop.index}}----{{item.get('value')}}</li>
  28.         {% elif loop.index == 2 %}
  29.             <li style="background-color: gray;">{{loop.index}}----{{item.get('value')}}</li>
  30.         {% elif loop.index == 3 %}
  31.             <li style="background-color: blue;">{{loop.index}}----{{item.get('value')}}</li>
  32.         {% else %}
  33.             <li style="background-color: yellow;">{{loop.index}}----{{item.get('value')}}</li>
  34.         {% endif %}
  35.     {% endfor %}
  36.     </ul>
  37. </body>
  38. </html>

三、简单的注册登录页面

逻辑：

main.py：

因为有三个html页面，所以必须有三个路由，这里我设置了如下三个路由：

  • /路由
    • 根路由下绑定了有关登录成功html的函数
  • /login路由
    • login路由下的绑定了有关验证登录的函数：
      • ①使用request.form.get()方法拿到用户输入的用户名和密码，（在login.html页面和register.html页面中用户输入的用户名和密码都是在input标签中写的，使用name属性唯一确定它们的值，在request.form.get()里输入name值，就可以拿到）
      • ②创建表
      • ③连接数据库，如果用户输入的用户名和密码在数据库中，则登录成功，跳转到登录成功后的界面；如果用户输入的用户名和密码不在数据库中跳转到login界面
  • /register路由
    • /register路由下的绑定了有关验证登录的函数：
      • ①连接数据库
      • ②创建表
      • ③连接数据库，使用request.form.get()方法拿到用户输入的用户名和密码，如果不在数据库中则注册成功；（但是我没有实现判断用户输入的用户名和密码是否在数据库中，这里要靠JS实现用户唯一）

main2.py

  1. from turtle import title
  2.  
  3. import requests
  4. from flask import Flask, render_template, request, redirect, url_for, flash, session
  5. import pymysql
  6.  
  7. app = Flask(__name__)
  8. # 添加会话一定要设置密钥
  9. app.secret_key = 'asdffbgsc'
  10.  
  11.  
  12. @app.route('/')
  13. def index():
  14.     list1 = list(range(10))
  15.     my_list = [
  16.         {'id': 1, 'value': '我爱工作'},
  17.         {'id': 2, 'value': '工作使人快乐'},
  18.         {'id': 3, 'value': '沉迷工作无法自拔'},
  19.         {'id': 4, 'value': '日渐消瘦'},
  20.         {'id': 5, 'value': '以梦为马，不负韶华'}, ]
  21.     # 将title，list2，render_template这三个变量的内容渲染到index.html页面中
  22.     return render_template('index.html', title='hello world', list2=list1, my_list=my_list,
  23.                            username=session.get('username'), password=session.get('password'))
  24.  
  25.  
  26. # 自定义过滤器
  27. def do_listreverse(aa):
  28.     temp_li = list(aa)
  29.     temp_li.reverse()  # 将列表反转
  30.     return temp_li
  31.  
  32.  
  33. # 验证登录
  34. @app.route('/login', methods=['GET', 'POST'])
  35. def login():
  36.     if request.method == 'POST':
  37.         connect_db = pymysql.connect(host='192.168.198.142',
  38.                                      port=3306,
  39.                                      user='root',
  40.                                      password='Nebula@123',
  41.                                      database='Python_Test')
  42.         connect_course = connect_db.cursor()
  43.         select_query = 'select * from user_info'
  44.         connect_course.execute(select_query)
  45.         user_info = connect_course.fetchall()
  46.         username = request.form.get('username')
  47.         password = request.form.get('password')
  48.         for row in user_info:
  49.  
  50.             user_name.append(row[1])
  51.             user_password.append(row[2])
  52.             if username in user_name and password in user_password:
  53.                 print("登录成功！")
  54.                 # 设置会话，拿到全局的内容
  55.                 session['username'] = username
  56.                 session['password'] = password
  57.                 return redirect('/')
  58.             else:
  59.                 flash("用户名或密码错误")
  60.     return render_template('login.html')
  61.  
  62.  
  63. # 注册
  64. user_id = []
  65. user_name = []
  66. user_password = []
  67.  
  68.  
  69. @app.route('/register', methods=['GET', 'POST'])
  70. def register():
  71.     if request.method == 'POST':  # 要和methods里面的POST一致
  72.         # 创建链接
  73.         connect_db = pymysql.connect(host='192.168.198.142',
  74.                                      port=3306,
  75.                                      user='root',
  76.                                      password='Nebula@123',
  77.                                      database='Python_Test')
  78.         connect_course = connect_db.cursor()
  79.         # 创建表
  80.         create_table_sql = "create table if not exists user_info(id int NOT NULL auto_increment primary key," \
  81.                            "user_name varchar(30)," \
  82.                            "user_pass varchar(20))"
  83.         connect_course.execute(create_table_sql)
  84.         select_query = 'select * from user_info'
  85.         connect_course.executemany(select_query)
  86.         rows = connect_course.fetchall()
  87.         # print(rows)
  88.         for row in rows:
  89.             user_id.append(row[0])
  90.             user_name.append(row[1])
  91.             user_password.append(row[2])
  92.             user_list = list(map(list, zip(user_id, user_name, user_password)))
  93.             for user in user_list:
  94.                 username = request.form.get('username')
  95.                 password = request.form.get('password')
  96.                 # print(username,password)
  97.                 # 如果用户不存在，插入信息
  98.                 if username != user[1]:
  99.                     try:
  100.                         insert_query = 'insert into user_info values(NULL,%s,%s);'
  101.                         user_datas = [(username, password)]
  102.                         # 它是一个列表所以使用executemany
  103.                         connect_course.executemany(insert_query, user_datas)
  104.                         connect_db.commit()
  105.                         print('插入成功！')
  106.                         # print(rows)
  107.                     except Exception as e:
  108.                         print(e, '插入失败！')
  109.                     connect_db.close()
  110.                     return render_template('login.html')
  111.                 else:
  112.                     flash('用户名已存在请重新输入')
  113.  
  114.     return render_template('register.html')
  115.  
  116.  
  117. # 注册过滤器
  118. # 第一个参数是函数名，第二个是过滤器的名字，可在所有模板上使用这个函数
  119. app.add_template_filter(do_listreverse, 'listreverse')
  120.  
  121. if __name__ == '__main__':
  122.     app.run(debug=True)

登录页面：login.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. 	<meta charset="UTF-8">
  6. 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. 	<title>登录</title>
  8. 	<style>
  9. 		* {
  10. 			margin: 0;
  11. 			padding: 0;
  12. 		}
  13.  
  14. 		a {
  15. 			text-decoration: none;
  16. 		}
  17.  
  18. 		input,
  19. 		button {
  20. 			background: transparent;
  21. 			border: 0;
  22. 			outline: none;
  23. 		}
  24.  
  25. 		body {
  26. 			height: 100vh;
  27. 			background: linear-gradient(#141e30, #243b55);
  28. 			display: flex;
  29. 			justify-content: center;
  30. 			align-items: center;
  31. 			font-size: 16px;
  32. 			color: #03e9f4;
  33. 		}
  34.  
  35. 		.loginBox {
  36. 			width: 400px;
  37. 			height: 364px;
  38. 			background-color: #0c1622;
  39. 			margin: 100px auto;
  40. 			border-radius: 10px;
  41. 			box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .6);
  42. 			padding: 40px;
  43. 			box-sizing: border-box;
  44. 		}
  45.  
  46. 		h2 {
  47. 			text-align: center;
  48. 			color: aliceblue;
  49. 			margin-bottom: 30px;
  50. 			font-family: 'Courier New', Courier, monospace;
  51. 		}
  52.  
  53. 		.item {
  54. 			height: 45px;
  55. 			border-bottom: 1px solid #fff;
  56. 			margin-bottom: 40px;
  57. 			position: relative;
  58. 		}
  59.  
  60. 		.item input {
  61. 			width: 100%;
  62. 			height: 100%;
  63. 			color: #fff;
  64. 			padding-top: 20px;
  65. 			box-sizing: border-box;
  66. 		}
  67.  
  68. 		.item input:focus+label,
  69. 		.item input:valid+label {
  70. 			top: 0px;
  71. 			font-size: 2px;
  72. 		}
  73.  
  74. 		.item label {
  75. 			position: absolute;
  76. 			left: 0;
  77. 			top: 12px;
  78. 			transition: all 0.5s linear;
  79. 		}
  80.  
  81. 		.btn {
  82. 			padding: 10px 20px;
  83. 			margin-top: 30px;
  84. 			color: #03e9f4;
  85. 			position: relative;
  86. 			overflow: hidden;
  87. 			text-transform: uppercase;
  88. 			letter-spacing: 2px;
  89. 			left: 35%;
  90. 		}
  91.  
  92. 		.btn:hover {
  93. 			border-radius: 5px;
  94. 			color: #fff;
  95. 			background: #03e9f4;
  96. 			box-shadow: 0 0 5px 0 #03e9f4,
  97. 				0 0 25px 0 #03e9f4,
  98. 				0 0 50px 0 #03e9f4,
  99. 				0 0 100px 0 #03e9f4;
  100. 			transition: all 1s linear;
  101. 		}
  102.  
  103. 		.btn>span {
  104. 			position: absolute;
  105. 		}
  106.  
  107. 		.btn>span:nth-child(1) {
  108. 			width: 100%;
  109. 			height: 2px;
  110. 			background: -webkit-linear-gradient(left, transparent, #03e9f4);
  111. 			left: -100%;
  112. 			top: 0px;
  113. 			animation: line1 1s linear infinite;
  114. 		}
  115.  
  116. 		@keyframes line1 {
  117.  
  118. 			50%,
  119. 			100% {
  120. 				left: 100%;
  121. 			}
  122. 		}
  123.  
  124. 		.btn>span:nth-child(2) {
  125. 			width: 2px;
  126. 			height: 100%;
  127. 			background: -webkit-linear-gradient(top, transparent, #03e9f4);
  128. 			right: 0px;
  129. 			top: -100%;
  130. 			animation: line2 1s 0.25s linear infinite;
  131. 		}
  132.  
  133. 		@keyframes line2 {
  134.  
  135. 			50%,
  136. 			100% {
  137. 				top: 100%;
  138. 			}
  139. 		}
  140.  
  141. 		.btn>span:nth-child(3) {
  142. 			width: 100%;
  143. 			height: 2px;
  144. 			background: -webkit-linear-gradient(left, #03e9f4, transparent);
  145. 			left: 100%;
  146. 			bottom: 0px;
  147. 			animation: line3 1s 0.75s linear infinite;
  148. 		}
  149.  
  150. 		@keyframes line3 {
  151.  
  152. 			50%,
  153. 			100% {
  154. 				left: -100%;
  155. 			}
  156. 		}
  157.  
  158. 		.btn>span:nth-child(4) {
  159. 			width: 2px;
  160. 			height: 100%;
  161. 			background: -webkit-linear-gradient(top, transparent, #03e9f4);
  162. 			left: 0px;
  163. 			top: 100%;
  164. 			animation: line4 1s 1s linear infinite;
  165. 		}
  166.  
  167. 		@keyframes line4 {
  168.  
  169. 			50%,
  170. 			100% {
  171. 				top: -100%;
  172. 			}
  173. 		}
  174. 	</style>
  175. </head>
  176.  
  177. <body>
  178. 	<div class="loginBox">
  179. 		<h2>login</h2>
  180. 		<form action="/login" method="post">
  181. 			<div class="item">
  182. 				<input type="text" required name="username">
  183. 				<label >用户名</label>
  184. 			</div>
  185. 			<div class="item">
  186. 				<input type="password" required name="password">
  187. 				<label >密码</label>
  188. <!--使标签居右-->
  189. 				 <div class="son">
  190. <!--					 href通过路由跳转到register界面-->
  191. 					<a style="display: block;text-align:right;" href="/register" target="_blank">没有账号？去注册</a>
  192.     			</div>
  193. 			</div>
  194. 			<button class="btn">登录
  195. 				<span></span>
  196. 				<span></span>
  197. 				<span></span>
  198. 				<span></span>
  199. 			</button>
  200. 		</form>
  201. 	</div>
  202. </body>
  203. </html>

登录成功的页面：index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10. <!--接收从main.py传递的参数-->
  11. <!--通过listreverse过滤器将传递过来的参数反转并且转成大写-->
  12. <!--    <h1>{{title | listreverse | upper}}</h1>-->
  13. <!--    <br>-->
  14. <!--&lt;!&ndash;无序列表，ol是有序列表&ndash;&gt;-->
  15. <!--    <ul>-->
  16. <!--&lt;!&ndash;# 使用for循环遍历传过来的参数&ndash;&gt;-->
  17. <!--        {% for item in my_list %}-->
  18. <!--&lt;!&ndash;# 使用列表标签将内容一行一行显示，在main.py里mylist是一个大列表嵌套很多小的字典，其中id是k值，value是v值&ndash;&gt;-->
  19. <!--        <li>{{item.id}}&#45;&#45;&#45;&#45;{{item.value}}</li>-->
  20. <!--        {% endfor %}-->
  21. <!--    </ul>-->
  22. <p align="right">欢迎 {{username}} 登录本系统，密码为{{password}}</p>
  23. <!--使表格居中，长度自适应为60%-->
  24.     <table border = 1 style="margin: auto;" width="60%">
  25.         {% for item in my_list  %}
  26.         <tr>
  27. <!--列是id，行是value-->
  28.         <th> {{ item.id }} </th>
  29.         <td> {{ item.value }}</td>
  30.         </tr>
  31.         {% endfor %}
  32.     </table>
  33.  
  34.  
  35.     <ul>
  36.     {% for item in my_list %}
  37. <!--# loop是jinjia2里的内置循环变量，loop.index是从1开始升序（循环迭代）-->
  38.         {% if loop.index == 1 %}
  39.             <li style="background-color: red;">{{loop.index}}----{{item.get('value')}}</li>
  40.         {% elif loop.index == 2 %}
  41.             <li style="background-color: gray;">{{loop.index}}----{{item.get('value')}}</li>
  42.         {% elif loop.index == 3 %}
  43.             <li style="background-color: blue;">{{loop.index}}----{{item.get('value')}}</li>
  44.         {% else %}
  45.             <li style="background-color: yellow;">{{loop.index}}----{{item.get('value')}}</li>
  46.         {% endif %}
  47.     {% endfor %}
  48.     </ul>
  49. </body>
  50. </html>

注册页面：register.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. 	<meta charset="UTF-8">
  6. 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. 	<title>注册</title>
  8. 	<style>
  9. 		* {
  10. 			margin: 0;
  11. 			padding: 0;
  12. 		}
  13.  
  14. 		a {
  15. 			text-decoration: none;
  16. 		}
  17.  
  18. 		input,
  19. 		button {
  20. 			background: transparent;
  21. 			border: 0;
  22. 			outline: none;
  23. 		}
  24.  
  25. 		body {
  26. 			height: 100vh;
  27. 			background: linear-gradient(#141e30, #243b55);
  28. 			display: flex;
  29. 			justify-content: center;
  30. 			align-items: center;
  31. 			font-size: 16px;
  32. 			color: #03e9f4;
  33. 		}
  34.  
  35. 		.loginBox {
  36. 			width: 400px;
  37. 			height: 364px;
  38. 			background-color: #0c1622;
  39. 			margin: 100px auto;
  40. 			border-radius: 10px;
  41. 			box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .6);
  42. 			padding: 40px;
  43. 			box-sizing: border-box;
  44. 		}
  45.  
  46. 		h2 {
  47. 			text-align: center;
  48. 			color: aliceblue;
  49. 			margin-bottom: 30px;
  50. 			font-family: 'Courier New', Courier, monospace;
  51. 		}
  52.  
  53. 		.item {
  54. 			height: 45px;
  55. 			border-bottom: 1px solid #fff;
  56. 			margin-bottom: 40px;
  57. 			position: relative;
  58. 		}
  59.  
  60. 		.item input {
  61. 			width: 100%;
  62. 			height: 100%;
  63. 			color: #fff;
  64. 			padding-top: 20px;
  65. 			box-sizing: border-box;
  66. 		}
  67.  
  68. 		.item input:focus+label,
  69. 		.item input:valid+label {
  70. 			top: 0px;
  71. 			font-size: 2px;
  72. 		}
  73.  
  74. 		.item label {
  75. 			position: absolute;
  76. 			left: 0;
  77. 			top: 12px;
  78. 			transition: all 0.5s linear;
  79. 		}
  80.  
  81. 		.btn {
  82. 			padding: 10px 20px;
  83. 			margin-top: 30px;
  84. 			color: #03e9f4;
  85. 			position: relative;
  86. 			overflow: hidden;
  87. 			text-transform: uppercase;
  88. 			letter-spacing: 2px;
  89. 			left: 35%;
  90. 		}
  91.  
  92. 		.btn:hover {
  93. 			border-radius: 5px;
  94. 			color: #fff;
  95. 			background: #03e9f4;
  96. 			box-shadow: 0 0 5px 0 #03e9f4,
  97. 				0 0 25px 0 #03e9f4,
  98. 				0 0 50px 0 #03e9f4,
  99. 				0 0 100px 0 #03e9f4;
  100. 			transition: all 1s linear;
  101. 		}
  102.  
  103. 		.btn>span {
  104. 			position: absolute;
  105. 		}
  106.  
  107. 		.btn>span:nth-child(1) {
  108. 			width: 100%;
  109. 			height: 2px;
  110. 			background: -webkit-linear-gradient(left, transparent, #03e9f4);
  111. 			left: -100%;
  112. 			top: 0px;
  113. 			animation: line1 1s linear infinite;
  114. 		}
  115.  
  116. 		@keyframes line1 {
  117.  
  118. 			50%,
  119. 			100% {
  120. 				left: 100%;
  121. 			}
  122. 		}
  123.  
  124. 		.btn>span:nth-child(2) {
  125. 			width: 2px;
  126. 			height: 100%;
  127. 			background: -webkit-linear-gradient(top, transparent, #03e9f4);
  128. 			right: 0px;
  129. 			top: -100%;
  130. 			animation: line2 1s 0.25s linear infinite;
  131. 		}
  132.  
  133. 		@keyframes line2 {
  134.  
  135. 			50%,
  136. 			100% {
  137. 				top: 100%;
  138. 			}
  139. 		}
  140.  
  141. 		.btn>span:nth-child(3) {
  142. 			width: 100%;
  143. 			height: 2px;
  144. 			background: -webkit-linear-gradient(left, #03e9f4, transparent);
  145. 			left: 100%;
  146. 			bottom: 0px;
  147. 			animation: line3 1s 0.75s linear infinite;
  148. 		}
  149.  
  150. 		@keyframes line3 {
  151.  
  152. 			50%,
  153. 			100% {
  154. 				left: -100%;
  155. 			}
  156. 		}
  157.  
  158. 		.btn>span:nth-child(4) {
  159. 			width: 2px;
  160. 			height: 100%;
  161. 			background: -webkit-linear-gradient(top, transparent, #03e9f4);
  162. 			left: 0px;
  163. 			top: 100%;
  164. 			animation: line4 1s 1s linear infinite;
  165. 		}
  166.  
  167. 		@keyframes line4 {
  168.  
  169. 			50%,
  170. 			100% {
  171. 				top: -100%;
  172. 			}
  173. 		}
  174. 	</style>
  175. </head>
  176.  
  177. <body>
  178. 	<div class="loginBox">
  179. 		<h2>register</h2>
  180. 		<form action="/register" method="post">
  181. 			<div class="item">
  182. 				<input type="text" required name="username">
  183. 				<label >用户名</label>
  184. 			</div>
  185. 			<div class="item">
  186. 				<input type="password" required name="password">
  187. 				<label >密码</label>
  188. 			</div>
  189. 			<button class="btn">注册
  190. 				<span></span>
  191. 				<span></span>
  192. 				<span></span>
  193. 				<span></span>
  194. 			</button>
  195. 		</form>
  196. 	</div>
  197. </body>
  198. </html>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/747701
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号