用 Python 撸一个 Web 服务器-第6章：完善 Todo List 应用

这一章，我们来完成 todo 管理功能的剩余部分：新增、修改和删除功能。

新增 todo

首先实现 Todo List 程序的新增功能。新增 todo 的逻辑如下：

  1. 在首页顶部的输入框中输入 todo 内容。

  2. 然后点击新建按钮。

  3. 将输入框中的 todo 内容通过 POST 请求传递到服务器端。

  4. 服务器端解析请求中的 todo 内容并存储到文件。

  5. 重新返回到程序首页。

接下来对这些步骤进行具体实现。

首页 HTML 中添加新增 todo 的输入框和新建按钮：

<!-- todo_list/todo/templates/index.html -->

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Todo List</title>
<!-- 引入外部 CSS 样式 -->
<link rel='stylesheet' href='/static/css/style.css'>
</head>
<body>
<h1 class='container'>Todo List</h1>
<div class='container'>
<ul>
<li>
<form class='new' action='/new' method='post'>
<input type='text' name='content'>
<button class='save'>新建</button>
</form>
</li>
<br>
{% for todo in todo_list %}
<li>
<div>{{ todo.content }}</div>
</li>
{% endfor %}
</ul>
</div>
</body>
</html>

代码中增加了一个 form 标签，用来新增 todo。请求路径地址为 /new，请求方法为 post。

将首页的 CSS 代码追加到 style.css 文件中：

/* todo_list/todo/static/css/style.css */

.container ul li:first-child {    background-color: #ffffff;    padding: 0;}

.container button {    width: 40px;    height: 28px;    padding: 4px;    cursor: pointer;}

.new {    width: 100%;    max-width: 600px;    height: 40px;    display: flex;    justify-content: space-between;    align-items: center;}

form input {    width: 90%;    height: 100%;}

此时首页效果如下：

修改 Request 类，使其能够解析 GET、POST 请求中携带的参数：

# todo_list/todo/utils.py

from urllib.parse import unquote_plus

...

class Request(object):
'''请求类'''

def __init__(self, request_message):
method, path, headers, args, form = self.parse_data(request_message)
self.method = method # 请求方法 GET、POST
self.path = path # 请求路径 /index
self.headers = headers # 请求头 {'Host': '127.0.0.1:8000'}
self.args = args # 查询参数
self.form = form # 请求体

def parse_data(self, data):
'''解析请求数据'''
# 用请求报文中的第一个 '\r\n\r\n' 做分割，将得到请求头和请求体
header, body = data.split('\r\n\r\n', 1)
method, path, headers, args = self._parse_header(header)
form = self._path_body(body)

return method, path, headers, args, form

def _parse_header(self, data):
'''解析请求头'''
# 拆分请求行和请求首部
request_line, request_header = data.split('\r\n', 1)

# 请求行拆包 'GET /index HTTP/1.1' -> ['GET', '/index', 'HTTP/1.1']
# 因为 HTTP 版本号没什么用，所以用一个下划线 _ 变量来接收
method, path_query, _ = request_line.split()
path, args = self._parse_path(path_query)

# 解析请求首部所有的键值对，组装成字典
headers = {}
for header in request_header.split('\r\n'):
k, v = header.split(': ', 1)
headers[k] = v

return method, path, headers, args

@staticmethod
def _parse_path(data):
'''解析请求路径、请求参数'''
args = {}
# 请求路径和 GET 请求参数格式: /index?edit=1&content=text
if '?' not in data:
path, query = data, ''
else:
path, query = data.split('?', 1)
for q in query.split('&'):
k, v = q.split('=', 1)
args[k] = v
return path, args

@staticmethod
def _path_body(data):
'''解析请求体'''
form = {}
if data:
# POST 请求体参数格式: username=zhangsan&password=mima
for b in data.split('&'):
k, v = b.split('=', 1)
# 前端页面中通过 form 表单提交过来的数据会被自动编码，使用 unquote_plus 来解码
form[k] = unquote_plus(v)
return form

为 Request 类新增了两个静态方法，_parse_path 方法用来拆分请求路径和请求参数。_path_body 用来提取请求体中的参数并转换为 dict。

在服务器端将新增的 todo 内存保存到文件后，程序需要重新回到首页。所以我们需要定义一个重定向函数：

# todo_list/todo/utils.py

...

def redirect(url, status=302):    '''重定向'''    headers = {        'Location': url,    }    body = ''    return Response(body, headers=headers, status=status)

重定向原理大致如下：

浏览器收到服务端的响应，如果状态码为 3XX，则表示重定向，浏览器会解析出响应头中的 Location 首部字段的值，然后通过 GET 请求方式访问这个 URL 地址。

重定向状态码最常见的两个就是 301、302，301 代表永久重定向，302 代表临时重定向。我们项目适合使用临时重定向，所以 redirect 函数的 status 参数默认值为 302。

同时还需要修改 Response 响应类，使其能够处理 302 状态码:

# todo_list/todo/utils.py

class Response(object):
'''响应类'''

# 根据状态码获取原因短语
reason_phrase = {
200: 'OK',
302: 'FOUND',
405: 'METHOD NOT ALLOWED',
}

...

在模型层，给 Todo 模型类新增一个 save 实例方法用来保存 todo 对象到文件中：

# todo_list/todo/models.py

import osimport json

from todo.config import BASE_DIR

class Todo(object):    '''    Todo 模型类    '''

    def __init__(self, **kwargs):        self.id = kwargs.get('id')        self.content = kwargs.get('content', '')

    @classmethod    def _db_path(cls):        '''获取存储 todo 数据文件的绝对路径'''        # 返回 'todo_list/todo/db/todo.json' 文件的绝对路径        path = os.path.join(BASE_DIR, 'db/todo.json')        return path

    @classmethod    def _load_db(cls):        '''加载 JSON 文件中所有 todo 数据'''        path = cls._db_path()        with open(path, 'r', encoding='utf-8') as f:            return json.load(f)

    @classmethod    def _save_db(cls, data):        '''将 todo 数据保存到 JSON 文件'''        path = cls._db_path()        with open(path, 'w', encoding='utf-8') as f:            json.dump(data, f, ensure_ascii=False, indent=4)

    @classmethod    def all(cls, sort=False, reverse=False):        '''获取全部 todo'''        # 这一步用来将所有从 JSON 文件中读取的 todo 数据转换为 Todo 实例化对象，方便后续操作        todo_list = [cls(**todo_dict) for todo_dict in cls._load_db()]        # 对数据按照 id 排序        if sort:            todo_list = sorted(todo_list, key=lambda x: x.id, reverse=reverse)        return todo_list

    def save(self):        '''保存 todo'''        # 查找出除 self 以外所有 todo        # todo.__dict__ 是保存了所有实例属性的字典        todo_list = [todo.__dict__ for todo in self.all(sort=True) if todo.id != self.id]

        # 自增 id        if self.id is None:            # 如果 todo_list 长度大于 0 说明不是第一条 todo，取最后一条 todo 的 id 加 1            if len(todo_list) > 0:                self.id = todo_list[-1]['id'] + 1            # 否则说明是第一条 todo，id 为 1            else:                self.id = 1

        # 将当前 todo 追加到 todo_list        todo_list.append(self.__dict__)        # 将所有 todo 保存到文件        self._save_db(todo_list)

在控制器层，编写一个 new 视图函数用来处理新增 todo 的业务逻辑：

# todo_list/todo/controllers.py

def new(request):
'''新建 todo 视图函数'''
form = request.form
print(f'form: {form}')

content = form.get('content')
# 这里判断前端传递过来的参数是否有内容，如果为空则说明不是一个有效的 todo，直接重定向到首页
if content:
todo = Todo(content=content)
todo.save()
return redirect('/index')

在 new 视图函数中判断如果前端传递过来的 todo 有效，就将其保存到文件，然后重定向到首页。

其实对于检查 todo 是否有效的逻辑前端也可以处理，只需要在输入 todo 的 input 标签加上 required 属性即可。这样当用户未输入任何内容就直接点击新建按钮时，浏览器会自动给出 请填写此字段。 的提示，在浏览器端做校验的好处是可以在请求未发送给后台服务器之前，由浏览器自动完成输入校验，这样能够减少发送请求的次数，避免无效的请求发送到服务器后台造成资源的浪费。

<form class='new' action='/new' method='post'>  <input type='text' name='content' required>  <button class='save'>新建</button></form>

现在就可以使用 Todo List 程序的新增功能来添加 todo 了：

修改 todo

修改 todo 的逻辑如下：

  1. 点击首页中想要修改的 todo 右侧的编辑按钮。

  2. 页面跳转到编辑页面。

  3. 修改这条 todo 内容，点击保存按钮。

  4. 将输入框中的 todo 内容通过 POST 请求传递到服务器端。

  5. 服务器端将修改后的 todo 保存到文件。

  6. 重新返回到程序首页。

需要注意的是，修改 todo 依然采用了 POST 请求方式来提交数据。在前面介绍 HTTP 请求方法时，我提到过 HTTP 常见请求方法有四个：POST、DELETE、PUT、GET 分别对应增、删、改、查四个操作。如果采用 RESTful 风格来开发 Web API 最好完全遵照 HTTP 请求方法和操作的对应关系，以便开发出更加语义化的接口。这里为了简单起见，Todo List 程序只使用了 GET、POST 两种请求方式，除了获取数据时采用 GET 请求，新增、修改、删除操作都采用 POST 请求方式。

  • todo 首页新增编辑按钮

编辑页面的 HTML 如下：

<!-- todo_list/todo/templates/edit.html -->

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Todo List | Edit</title>
<link rel='stylesheet' href='/static/css/style.css'>
</head>
<body>
<h1 class='container'>Edit</h1>
<div class='container'>
<form class='edit' action='/edit' method='post'>
<input type='hidden' name='id' value='{{ todo.id }}'>
<input type='text' name='content' value='{{ todo.content }}'>
<button>保存</button>
</form>
</div>
</body>
</html>

将编辑页面的 CSS 代码追加到 style.css 文件中：

/* todo_list/todo/static/css/style.css */

.new, .edit {    width: 100%;    max-width: 600px;    height: 40px;    display: flex;    justify-content: space-between;    align-items: center;}

在模型层，给 Todo 模型类新增两个查询 todo 的方法：

# todo_list/todo/models.py

class Todo(object):
'''
Todo 模型类
'''

...

@classmethod
def find_by(cls, limit=-1, ensure_one=False, sort=False, reverse=False, **kwargs):
'''查询 todo'''
result = []
todo_list = [todo.__dict__ for todo in cls.all(sort=sort, reverse=reverse)]
for todo in todo_list:
# 根据关键字参数查询 todo
for k, v in kwargs.items():
if todo.get(k) != v:
break
else:
result.append(cls(**todo))

# 查询给定条数的数据
if 0 < limit < len(result):
result = result[:limit]
# 查询结果集中的第一条数据
if ensure_one:
result = result[0] if len(result) > 0 else None

return result

@classmethod
def get(cls, id):
'''通过 id 查询 todo'''
result = cls.find_by(id=id, ensure_one=True)
return result

find_by 方法用来根据给定条件查询 todo，get 方法内部调用的还是 find_by 方法，只根据 id 来搜索，查询结果为单条数据，这两个方法均为类方法。

在控制器层，编写一个 edit 视图函数用来处理编辑 todo 的业务逻辑：

# todo_list/todo/controllers.py

def edit(request):    '''编辑 todo 视图函数'''    # 处理 POST 请求    if request.method == 'POST':        form = request.form        print(f'form: {form}')

        id = int(form.get('id', -1))        content = form.get('content')

        if id != -1 and content:            todo = Todo.get(id)            if todo:                todo.content = content                todo.save()        return redirect('/index')

    # 处理 GET 请求    args = request.args    print(f'args: {args}')

    id = int(args.get('id', -1))    if id == -1:        return redirect('/index')

    todo = Todo.get(id)    if not todo:        return redirect('/index')

    context = {        'todo': todo,    }    return render_template('edit.html', **context)

routes = {    ...    '/edit': (edit, ['GET', 'POST']),}

edit 视图函数跟之前编写的其他视图函数有些不同，它同时支持两种请求方法，GET 请求返回 HTML 页面，POST 请求用来处理修改 todo 的逻辑，并在修改完成后重定向到首页。

现在就可以使用 Todo List 程序的编辑功能来修改 todo 了：

删除 todo

删除 todo 的逻辑如下：

  1. 点击首页中想要删除的 todo 右侧的删除按钮。

  2. 将这条 todo 的 id 通过 POST 请求传递到服务器端。

  3. 服务器端通过得到的 id 查询并删除对应的 todo。

  4. 重新返回到程序首页。

首页 HTML 中添加删除按钮：

<!-- todo_list/todo/templates/index.html -->

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Todo List</title>
<!-- 引入外部 CSS 样式 -->
<link rel='stylesheet' href='/static/css/style.css'>
</head>
<body>
<h1 class='container'>Todo List</h1>
<div class='container'>
<ul>
<li>
<form class='new' action='/new' method='post'>
<input type='text' name='content' required>
<button class='save'>新建</button>
</form>
</li>
<br>
{% for todo in todo_list %}
<li>
<div>{{ todo.content }}</div>
<div>
<a href='/edit?id={{ todo.id }}'>
<button>编辑</button>
</a>
<form class='delete' action='/delete' method='post'>
<input type='hidden' name='id' value='{{ todo.id }}'>
<button>删除</button>
</form>
</div>
</li>
{% endfor %}
</ul>
</div>
</body>
</html>

将删除按钮的 CSS 代码追加到 style.css 文件中：

/* todo_list/todo/static/css/style.css */

.delete {    display: inline-block;}

在模型层，给 Todo 模型类新增一个 delete 实例方法用来从文件中删除 todo 对象：

# todo_list/todo/models.py

class Todo(object):
'''
Todo 模型类
'''

...

def delete(self):
'''删除 todo'''
todo_list = [todo.__dict__ for todo in self.all() if todo.id != self.id]
self._save_db(todo_list)

在控制器层，编写一个 delete 视图函数用来处理删除 todo 的业务逻辑：

# todo_list/todo/controllers.py

def delete(request):    '''删除 todo 视图函数'''    form = request.form    print(f'form: {form}')

    id = int(form.get('id', -1))    if id != -1:        todo = Todo.get(id)        if todo:            todo.delete()    return redirect('/index')

routes = {    ...    '/delete': (delete, ['POST']),}

现在就可以使用 Todo List 程序的删除功能来删除 todo 了：

至此，todo 的管理部分代码编写完成。

本章源码：chapter6

赞 (0)

相关推荐

  • 第47天：Web 开发 RESTful

    现在单页 Web 项目很流行,使用各种 Js 框架,通过 Ajax 和服务器的 Api 进行交互,实现类似原生 app 效果,很酷,对 Flask 来说小菜一碟,是时候了解下 Flask-RESTfu ...

  • 基于opencv实现模块化图像处理管道

    重磅干货,第一时间送达 在这篇文章中,我们将学习如何为图像处理实现一个简单的模块化管道,我们将使用 OpenCV 进行图像处理和操作,并使用 Python 生成器进行管道步骤. 图像处理管道是一组按预 ...

  • Python 流媒体播放器（基于VLC）

    阅读目录 环境准备 安装python-vlc 绑定 简单播放示例 VLC 监听器 视频加字幕 VLC的选项参数设置 在Tkinter中嵌入视频 跨平台 网上关于Python的音视频播放示例都集中在简单 ...

  • Appendix之setup.py：附录文件内容记录setup.py

    Appendix之setup.py:附录文件内容记录setup.py 附录文件内容记录setup.py from __future__ import print_function from distu ...

  • 用 Python 撸一个 Web 服务器-第8章：用户管理

    用户登录原理 用户登录与注册功能几乎已成为 Web 应用的标配.所以我们有必要给 Todo List 程序增加一个用户管理模块,以此来学习用户登录原理. HTTP 协议是无状态的,这意味着每个完整的 ...

  • 用 Python 撸一个 Web 服务器-第7章：重构——更好的组织代码

    通过前几章的学习,我们完成了 Todo List 程序的 todo 管理部分,实现了对 todo 的增.删.改.查基本操作,这也是几乎所有 Web 程序都具备的功能.我们当然可以按照目前的思路继续来实 ...

  • 用 Python 撸一个 Web 服务器-第5章：处理静态资源

    处理静态文件 由于我们实现的模板引擎不支持直接将 CSS 嵌入在 HTML 中的写法,所以要将 CSS 独立出来.在 todo/ 目录下新建 static/ 目录,专门用来存储 CSS.JavaScr ...

  • 用 Python 撸一个 Web 服务器-第4章：动态渲染数据

    上一章中为了尽快让 Todo List 程序跑起来,并没有完全按照 MVC 模式编写程序.这一章就让我们一起实现一个完整的 MVC 模式 Todo List 程序首页. 使用模型操作数据 我们来分析下 ...

  • 用 Python 撸一个 Web 服务器-第3章：使用 MVC 构建程序 ​

    Todo List 程序介绍 我们将要编写的 Todo List 程序包含四个页面,分别是注册页面.登录页面.首页.编辑页面.以下分别为四个页面的截图. 注册页面: 登录页面: 首页: 编辑页面: 程 ...

  • Python 撸一个 Web 服务器-第2章：Hello World

    从一个 Hello World 程序说起 要编写 Web 服务器,需要用到一个 Python 内置库 socket.Socket 是一个比较抽象的概念,中文叫套接字,它代表一个网络连接.两台计算机之间 ...

  • Ubuntu 18.04下使用Apache搭建一个web服务器

    几个必要的概念 https://blog.csdn.net/weixin_39212776/article/details/81192847 web服务器 以我之见,web服务器就是运行在计算机上的一 ...

  • 利用 PHP 快速建立一个 Web 服务器

    从 PHP 5.4.0 起, CLI SAPI 提供了一个内置的 Web 服务器.我们可以通过这个内置的 Web 服务器很方便的搭建一个本地开发环境. 启动 Web 服务器 默认情况下,URI 请求会 ...

  • Python做一个属于自己的web网站「下」

    原创 AI悦创 AI悦创 1周前 你好,我是悦创.昨天写了一篇:Python 做一个属于自己的web网站「上」,但有点小 bug ,什么 bug 呢?待会就说.开头这张图确实有点丑,不过奈何没办法,没 ...