利用Flask开发一个Web程序

莫张周刘王  金牌会员 | 2024-11-26 21:53:26 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 912|帖子 912|积分 2736

开发情况 : Linux系统，语言： Python，Html， Css
利用Flask实现一个WatchList的Web程序，部分代码和图片都是来自：Flask 入门教程，我在此基础上修改了一下，末了的效果如下：

1. 安装 Flask和一些基本插件

  1. pip install flask
  2. pip install Flask-SQLAlchemy
  3. pip install pymysql
复制代码
假如安装比力慢的话，可以加上 -i https://pypi.tsinghua.edu.cn/simple
2. 创建项目布局

创建一个文件夹来存放你的项目文件。项目的基本布局如下：
  1. WatchList/{static/images style.css} {template/index.html login.html} app.py
复制代码
3.在WatchList目录下创建虚拟情况并进入虚拟情况

  1. python3 -m venv env
  2. scoure ./env/Scripts/activate
复制代码
4. 编写主应用文件 (app.py)

在 WatchList目录下创建一个名为 app.py 的文件，并编写以下代码：
  1. from flask import Flask, render_template, url_for, redirect, request, flash
  2. from flask_sqlalchemy import SQLAlchemy
  3. import click
  5. app = Flask(__name__)
  7. app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:123456@localhost/watchlist'
  8. app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
  9. app.secret_key = 'your_secret_key'  # 用于闪现消息
  11. db = SQLAlchemy(app)
  13. # 创建数据库命令
  14. @app.cli.command()
  15. def forge():
  16.     """Generate fake data."""
  17.     db.create_all()
  19.     name = 'BrokenOfViolet'
  20.     movies = [
  21.         {'title': 'My Neighbor Totoro', 'year': '1988'},
  22.         {'title': 'Dead Poets Society', 'year': '1989'},
  23.         {'title': 'A Perfect World', 'year': '1993'},
  24.         {'title': 'Leon', 'year': '1994'},
  25.         {'title': 'Mahjong', 'year': '1996'},
  26.         {'title': 'Swallowtail Butterfly', 'year': '1996'},
  27.         {'title': 'King of Comedy', 'year': '1999'},
  28.         {'title': 'Devils on the Doorstep', 'year': '1999'},
  29.         {'title': 'WALL-E', 'year': '2008'},
  30.         {'title': 'The Pork of Music', 'year': '2012'},
  31.     ]
  33.     user = User(username=name, password='password123')  # 设定一个默认密码
  34.     db.session.add(user)
  35.     for m in movies:
  36.         movie = Movie(title=m['title'], year=m['year'])
  37.         db.session.add(movie)
  39.     db.session.commit()
  40.     click.echo('Done.')
  42. # 数据库模型
  43. class User(db.Model):
  44.     username = db.Column(db.String(20), primary_key=True)
  45.     password = db.Column(db.String(20))
  47. class Movie(db.Model):
  48.     id = db.Column(db.Integer, primary_key=True)
  49.     title = db.Column(db.String(60))
  50.     year = db.Column(db.String(4))
  52. # 主页路由
  53. @app.route('/')
  54. def index():
  55.     user = User.query.first()  # 修复此处变量名
  56.     movies = Movie.query.all()
  57.     return render_template("index.html", user=user, movies=movies)
  59. # 404 错误处理路由
  60. @app.errorhandler(404)
  61. def page_not_found(e):
  62.     user = User.query.first()
  63.     return render_template('404.html', user=user), 404
  65. # 登录路由
  66. @app.route('/login', methods=['GET', 'POST'])
  67. def login():
  68.     if request.method == 'POST':
  69.         username = request.form['username']
  70.         password = request.form['password']
  71.         user = User.query.filter_by(username=username).first()
  73.         # 比对用户输入的密码和数据库中存储的密码
  74.         if user and user.password == password:
  75.             flash('Login successful!', 'success')
  76.             return redirect(url_for('index'))  # 假设登录成功后重定向到index
  77.         else:
  78.             flash('Invalid username or password.', 'danger')
  80.     return render_template('login.html')
  82. if __name__ == '__main__':
  83.     app.run(debug=True)
复制代码
  1.  
复制代码
5. 创建 HTML 模板文件



  • 主页templates/index.html
 在 templates 目录中创建一个名为 index.html 的文件，编写一个简单的 HTML 页面：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <link rel="stylesheet" href="{{url_for('static',filename='style.css')}}" type="text/css">
  6.     <title>{{ name }}'s Watchlist</title>
  7. </head>
  8. <body>
  9.     <h2>{{ name }}'s Watchlist
  10.         <img alt="Avatar" class="avator" src="{{url_for('static',filename='images/avatar.png')}}">
  11.     </h2>
  12.     {# 使用 length 过滤器获取 movies 变量的长度 #}
  13.     <p>{{ movies|length }} Titles</p>
  14.     <ul class="movie-list">
  15.         {% for movie in movies %}  {# 迭代 movies 变量 #}
  16.         <li>{{ movie.title }} - {{ movie.year }}</li>  {# 等同于 movie['title'] #}
  17.         {% endfor %}  {# 使用 endfor 标签结束 for 语句 #}
  18.     </ul>
  19.     <img alt="Totoro" class="totoro" src="{{url_for('static',filename='images/totoro.gif')}}"
  20. </body>
  21. </html>
复制代码


  • 登岸界面templates/login.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>Login</title>
  8.     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
  9. </head>
  10. <body>
  11.     <div class="login-container">
  12.         <h2>Login</h2>
  13.         {% with messages = get_flashed_messages(with_categories=true) %}
  14.           {% if messages %}
  15.             <ul class="flashes">
  16.               {% for category, message in messages %}
  17.                 <li class="{{ category }}">{{ message }}</li>
  18.               {% endfor %}
  19.             </ul>
  20.           {% endif %}
  21.         {% endwith %}
  22.         <form method="post" action="{{ url_for('login') }}">
  23.             <div class="input-group">
  24.                 <label for="username">Username</label>
  25.                 <input type="text" id="username" name="username" required>
  26.             </div>
  27.             <div class="input-group">
  28.                 <label for="password">Password</label>
  29.                 <input type="password" id="password" name="password" required>
  30.             </div>
  31.             <button type="submit">Login</button>
  32.         </form>
  33.     </div>
  34. </body>
  35. </html>
复制代码
6. 创建静态文件 (static/style.css)

在 static 目录中创建一个名为 style.css 的文件，添加一些简单的 CSS 样式：
  1. /* 页面整体 */
  2. body {
  3.     font-family: Arial, sans-serif;
  4.     background-color: #f0f0f0;
  5.     display: flex;
  6.     justify-content: center;
  7.     align-items: center;
  8.     height: 100vh;
  9.     margin: 0;
  10. }
  12. /* 页脚 */
  13. footer {
  14.     color: #888;
  15.     margin-top: 15px;
  16.     text-align: center;
  17.     padding: 10px;
  18. }
  20. /* 头像 */
  21. .avatar {
  22.     width: 40px;
  23. }
  25. /* 电影列表 */
  26. .movie-list {
  27.     list-style-type: none;
  28.     padding: 0;
  29.     margin-bottom: 10px;
  30.     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  31. }
  33. .movie-list li {
  34.     padding: 12px 24px;
  35.     border-bottom: 1px solid #ddd;
  36. }
  38. .movie-list li:last-child {
  39.     border-bottom:none;
  40. }
  42. .movie-list li:hover {
  43.     background-color: #f8f9fa;
  44. }
  46. /* 龙猫图片 */
  47. .totoro {
  48.     display: block;
  49.     margin: 0 auto;
  50.     height: 100px;
  51. }
  53. .login-container {
  54.     background-color: white;
  55.     padding: 20px;
  56.     border-radius: 10px;
  57.     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  58.     width: 300px;
  59.     text-align: center;
  60. }
  62. h2 {
  63.     margin-bottom: 20px;
  64. }
  66. .input-group {
  67.     margin-bottom: 15px;
  68.     text-align: left;
  69. }
  71. .input-group label {
  72.     display: block;
  73.     margin-bottom: 5px;
  74. }
  76. .input-group input {
  77.     width: 100%;
  78.     padding: 8px;
  79.     box-sizing: border-box;
  80. }
  82. button {
  83.     width: 100%;
  84.     padding: 10px;
  85.     background-color: #007BFF;
  86.     color: white;
  87.     border: none;
  88.     border-radius: 5px;
  89.     cursor: pointer;
  90.     font-size: 16px;
  91. }
  93. button:hover {
  94.     background-color: #0056b3;
  95. }
  97. .flashes {
  98.     list-style-type: none;
  99.     padding: 0;
  100. }
  102. .flashes li {
  103.     padding: 10px;
  104.     margin-bottom: 10px;
  105.     border-radius: 5px;
  106. }
  108. .flashes li.success {
  109.     background-color: #d4edda;
  110.     color: #155724;
  111. }
  113. .flashes li.danger {
  114.     background-color: #f8d7da;
  115.     color: #721c24;
  116. }
复制代码
 
6. 运行应用

在终端中，导航到 WatchList 目录并运行应用。由于在app.py中界说了forge函数用于提交数据，以是进行如下操作：
  1. flask forge
复制代码
末了直接运行 app.py 或者执行 flask run

 
 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

莫张周刘王

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表