Flask Todo项目

Posted 2021-04-12 Flask学习笔记

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flask Todo项目相关的知识，希望对你有一定的参考价值。

10343

`Flask Todo`代办事项项目

1.展示

https://www.bilibili.com/video/BV1Ra4y1J7NR/

2.创建基本视图

0.代码

代码:https://github.com/ningwenyan/Flask_Todo_Demo/tree/v1.01

1.初始化项目

使用git初始化整个项目

❯ cd Todo_demo
❯ git init
❯ git add .
❯ git commit -m "初始化项目"

2.创建基本蓝图

这一步主要创建出Todo项目的基本逻辑结构.

主要逻辑如下:

├── app  # Flask主要文件
│   ├── auth      # 用户验证蓝图
│   │   ├── forms.py
│   │   ├── __init__.py
│   │   └── views.py
│   ├── __init__.py  # 工厂函数app
│   ├── main    # 业务逻辑蓝图
│   │   ├── forms.py
│   │   ├── __init__.py
│   │   └── views.py
│   ├── static
│   └── templates
│       ├── auth
│       ├── base.html
│       └── index.html
├── config.py         # 主要配置文件
└── TodoList.py  # 可扩展项目文件

在这里引入工厂函数.在单个文件中开发程序很方便,但是无法动态的修改配置,运行脚本时,程序实例已经创建.为了可扩展性.可以使用工厂函数(create_app)

主要的运行放置在TodoList.py中,在这个文件中,还可以使用flask.cli来做一些测试,修改等等..

# app/__init__.py

from flask import Flask
import config
from .auth import auth_bp
from .main import main_bp


def create_app():
 app = Flask(__name__)
 app.config.from_object(config)


 # 注册蓝图
 app.register_blueprint(auth_bp)
 app.register_blueprint(main_bp)

 return app

# TodoList.py
from app import create_app

if __name__ == '__main__':
 app = create_app()
 app.run(host='192.168.0.110', port=8080)

如果想要使用域名,还可以在config文件中,创建SEVER_NAME.(如果是测试域名,需要在本机上设置hosts文件指向)

$ sudo  vim /etc/hosts

192.168.0.110 kwenyan.online

# config.py
# 基本配置文件
DEBUG = True
TEMPLATES_AUTO_RELOAD = True

# 设置主域名
SERVER_NAME = "kwenyan.online:8080"

业务逻辑全部放在main蓝图中,它的url_prefix指向了根目录

# main/__init__.py
from flask import Blueprint

main_bp = Blueprint('main',__name__, url_prefix='/')

from . import views
from . import forms

3.使用`base.html`模板(`Flask-bootstrap`)

项目的全程使用bootstrap的样式.而且继承自base.html(使用jinja2来渲染前端页面).

首先引入flask-bootstrap

在 app目录中创建 python package– commons作为公共文件的蓝图.
创建 exts.py做第三方引入
在 exts.py中创建 bootstrap
在 app/__init__.py中引入 bootstrap
在 config中配置主题

# config.py

# 设置bootstrap主题
# BOOTSTRAP_BOOTSWATCH_THEME = 'slate'

这里我使用的是slate主题,它的全部样式在:https://bootswatch.com/slate/中,所有的前端渲染都会依据slate主题.

设置完毕后,我们来考虑一下base.html要渲染的样式.

包含一个导航栏 munu:利用它可以导航到其他页面

如果没有登录,显示登录和注册按钮
如果已经登录,显示用户基本信息

包含基本的判断用户登录逻辑
可包含搜索框,利用它可以搜索到想要的内容

包含页面主体部分 main:利用它可以显示前端的业务逻辑
包含页脚部分 footer:利用页脚显示网站的基本信息,统计数据等等.

10339

有了基本的构想,我们就可以利用slate主题中提供的样式来创建内容.(为了访问的速度,所有的js/css文件将使用本地文件)

全部的icon使用bootstrap4的免费图标库https://icons.bootcss.com/

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        {% block title %}
        
        {% endblock %}
    </title>
    {# 加载favicon.ico #}
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    {# 加载bootstrap文件 css: slate 4.5.2; js: 3.5.1 包含全部,不是slim,包含AJAX; popper: 1.16.0: bootstrap js: 4.5.0 #}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/popper.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
    {% block js %}

    {% endblock %}
    {% block css %}

    {% endblock %}
</head>
<body>
    {# 全局导航栏, 加载自 slate主题 #}
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <a class="navbar-brand" href="#">
            <span style="margin-right: 6px">
                <svg width="31" height="31" viewBox="0 0 16 16" class="bi bi-card-checklist" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
                    <path fill-rule="evenodd" d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
                </svg>
            </span>TodoList
        </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

        <div class="collapse navbar-collapse" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
                </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search">
                <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>
    {# 隔离导航和主体 #}
    <header style="height:55px; width:auto">

    </header>
    {# 主体部分 #}
    <main class="container">
        {% block content %}
        {% endblock %}
    </main>
    {# 底部footer #}
    <footer class="text-center" style="margin:20px 0">
        <div class="container">
            {% block footer %}
                <h5> &copy; 2020–<script>document.write(new Date().getFullYear())</script> <a href="https://wenyan.online" title="Written by Wen Yan">Wen Yan</a></h5>
            {% endblock %}
        </div>
    </footer>
</body>
</html>

index.html

{% extends 'base.html' %}
{% block title %}
    首页
{% endblock %}

{% block content %}
    {# 使用 slate主题 containers #}
    <div class="jumbotron">
        <h1 class="display-3">欢迎使用TodoList</h1>
        <p class="lead">这是一个代办事项网站.</p>
        <hr class="my-4">
        <p>https://wenyan.online</p>
        <p class="lead">
            <a class="btn btn-primary btn-lg" href="https://wenyan.online" role="button">更多</a>
        </p>
    </div>
{% endblock %}