学习flask之todo待办事项demo_使用flask开发待办事项网站-优快云博客

本文链接：https://blog.youkuaiyun.com/andux/article/details/133083342

做这个小demo碰到的小问题还不少。这个demo是用sqlite数据库来实现的，用了才发现，这个数据库是真方便，小demo的最佳选择，比access还轻便，数据库也非常小，就几kb，我滴个天sqlite是离线本地数据库文件，跟系统走，真的很便捷。

这个todo待办事项使用了模板中的模板嵌套，就是可以做一个共用的母版，其他的页面继承这个母版就可以了，一句命令extends继承就可以了。

添加待办事项：

修改待办事项：

母版文件todo_base.html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>待办事项</title>
    <link rel="stylesheet" href="../static/bootstrap-5.3.2-dist/css/bootstrap.css">
</head>
<body>
{% block body %}
{% endblock %}
<script src="../static/bootstrap-5.3.2-dist/js/bootstrap.js"></script>
{{ moment().include_moment() }}
</body>
</html>

更新todo页面todo_update.html:

{% extends 'todo_base.html' %}
{% block body %}
<h3 class="text-center"> 更新 待办事项 </h3>
<div class="container my-3">
    <form action="/update/{{todo.sno}}" method="post">
        <div class="mb-3">
            <label for="title" class="form-label">更新 待办事项</label>
            <input type="text" class="form-control" name="title" id="title" value="{{todo.title}}" aria-describedby="emailHelp">
        </div>
        <div class="mb-3">
            <label for="description" class="form-label">更新 事项说明</label>
            <input type="text" class="form-control" name="description" id="description" value="{{todo.description}}">
        </div>
        <button type="submit" class="btn btn-primary">更新</button>
    </form>
</div>
{% endblock %}

主要内容页面todo.html：

{% extends 'todo_base.html' %}
{% block body %}
<h3 class="text-center">待办事项</h3>
<div class="container my-3">
    <form action="/" method="post">
        <div class="mb-3">
            <label for="title" class="form-label">添加 待办事项</label>
            <input type="text" class="form-control" name="title" id="title" aria-describedby="emailHelp">
        </div>
        <div class="mb-3">
            <label for="description" class="form-label">添加 事项说明</label>
            <input type="text" class="form-control" name="description" id="description">
        </div>
        <button type="submit" class="btn btn-primary">添加</button>
    </form>
    <div class="my-3">
        {% if alltodo|length==0 %}
        没有待办事项。
        {% else %}
        <table class="table">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">待办事项</th>
                <th scope="col">事项说明</th>
                <th scope="col">时间</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody>
            {% for todo in alltodo %}
            <tr>
                <th scope="row">{{loop.index}}</th>
                <td>{{todo.title}}</td>
                <td>{{todo.description}}</td>
                <td>{{moment(todo.time).format('YYYY-MM-DD HH:mm:ss')}}</td>
                <td>
                    <a href="/update/{{todo.sno}}" type="button" class="btn btn-outline-success btn-sm mx-1">修改</a>
                    <a href="/delete/{{todo.sno}}" type="button" class="btn btn-outline-danger btn-sm">删除</a>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
        {% endif %}
    </div>
</div>

<script src="../static/bootstrap-5.3.2-dist/js/bootstrap.js"></script>
{% endblock %}

主要代码文件 todo.py：

from flask import Flask, render_template, request, redirect
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime
from flask_moment import Moment

app = Flask(__name__)
app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///todo.db"
db = SQLAlchemy(app)
moment = Moment(app)


class Todo(db.Model):
    sno = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(200), nullable=False)
    description = db.Column(db.String(500), nullable=False)
    time = db.Column(db.DateTime, nullable=False)


@app.route('/', methods=['GET', 'POST'])
def main():
    if request.method == 'POST':
        todo_title = request.form['title']
        todo_description = request.form['description']
        todo_time = datetime.utcnow()
        data = Todo(title=todo_title, description=todo_description, time=todo_time)
        db.session.add(data)
        db.session.commit()
        return redirect("/")
    alltodo = Todo.query.all()
    return render_template("todo.html", alltodo=alltodo)


@app.route('/update/<int:sno>', methods=['GET', 'POST'])
def update(sno):
    if request.method == 'POST':
        todo_title = request.form['title']
        todo_description = request.form['description']
        data = Todo.query.filter_by(sno=sno).first()
        data.title = todo_title
        data.description = todo_description
        db.session.commit()
        return redirect("/")
    todo = Todo.query.filter_by(sno=sno).first()
    return render_template("todo_update.html", todo=todo)


@app.route('/delete/<int:sno>')
def delete(sno):
    todo = Todo.query.filter_by(sno=sno).first()
    db.session.delete(todo)
    db.session.commit()
    return redirect("/")


if __name__ == "__main__":
    app.debug = True
    app.run(host='127.0.0.1', port=8000)

这次比上次那个入门的flask小项目复杂一些，有sqlite数据库存储数据。

在pycharm的设置里，有个项目，右边有加号可以添加依赖包：

这次这个项目使用了flask_sqlalchemy这个包实现模型的创建，并以此来生成sqlite数据库文件。具体步骤是：

1.先配置sqlite等

app = Flask(__name__)
app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///todo.db"
db = SQLAlchemy(app)
moment = Moment(app)

moment是控制时间显示格式的包。

2.设计数据库实体类：

class Todo(db.Model):
    sno = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(200), nullable=False)
    description = db.Column(db.String(500), nullable=False)
    time = db.Column(db.DateTime, nullable=False)

3.使用命令生成sqlite文件：

生成sqlite数据库文件的三句命令是：

from todo import db,app

app.app_context().push()

db.create_all()

第一句命令中的todo是todo.py文件名，如果是app.py，那么这里就写app，如果是index.py文件，那就是from index import db,app了。db就是定义的 SQLAlchemy(app)。

生成的sqlite文件放在根目录下的instance文件夹里。

在操作sqlite数据库时，记得使用了drop命令还是delete命令了，导致把生成的tobo表给删除了，就写不进数据库了，所以需要重新用这三个命令再生成一次数据库文件todo.db。

sqlite数据库一般工具打不开，可以使用在线的网站：SQLite Viewer Web App，直接拖放todo.db文件到网页上就可以了。

最后花时间比较多的就是时间格式的展示了。先是搜索python有没有字符串截取的，发现实现不了，后来有搜索js的字符串截取，还是没成功。最后还是死磕moment这个包了，把文档有搜索了一遍，发现自己想要的都在文档里，不搜索还真容易漏了过去。

使用moment需要在母版中添加jQuery的引用，因为使用bootstrap里已经包含了jQuery了，所以只要一句命令引用moment.js就可以了。

{{ moment().include_moment() }}

这句就是添加moment.js的命令了。

具体实现时间格式化的代码是：

<td>{{moment(todo.time).format('YYYY-MM-DD HH:mm:ss')}}</td>

还有一个需要注意的，生成时间的代码是：

todo_time = datetime.utcnow()

或者是：

todo_time = datetime.now()

使用moment进行时间处理的时候，会自动识别时区的，比如我们是+8时区，这个不知道在哪里进行设置的，所以需要使用utcnow()来生成时间。如果不使用moment来进行时间的处理，那么使用now()就可以了，那就是电脑上的实时时间，显示也是，不考虑时区了。