30分钟！用Django做一个迷你的Todolist！下篇！

入门: 最全的零基础学Python的问题  | 零基础学了8个月的Python  | 实战项目 |学Python就是这条捷径
干货:爬取豆瓣短评，电影《后来的我们》 | 38年NBA最佳球员分析 |   从万众期待到口碑扑街！唐探3令人失望  | 笑看新倚天屠龙记 | 灯谜答题王 ｜用Python做个海量小姐姐素描图 ｜碟中谍这么火，我用机器学习做个迷你推荐系统电影
趣味:弹球游戏  | 九宫格  | 漂亮的花 | 两百行Python《天天酷跑》游戏!

大家好，我是菜鸟哥！

前几天打算做了一个todolist小应用，我写了一个上篇，算是完成了整个web的一小部分(30分钟！用Django做一个迷你的Todolist！上篇！)，刚刚把框架搭起来。今天我们要完成剩下的主要的功能，要完成页面的设计和css的样式，我们一起来看一下。

1.主页的设计

我们看一下我们的主页最终的效果，我们是要做成这样的，整个页面有3部分组成:

• 主页面标题
  

• form表单

• 一个task列表

1).增加一个forms.py

我们需要增加一个forms文件，来设计我们的表单的内容，在tasks文件夹里面增加这个forms文件。

django里面自带了很多很多现成的轮子，比如form组件，我们直接引用然后继承即可。这里我们就一个属性title ，然后模型就用我们前面设计的modle里面的task即可。

2).在views里面增加todolist内容

在上篇里面我们只是让views显示hello world 。现在我们要让它显示整个表单和tasks里面的内容。

这里我们从Task模型里面读取所有的tasks(我们已经admin后台插入了几条任务数据了)。然后把tasks和form都传到我们的tasks/index.html里面进行渲染。

3).编写index.html

我们需要在tasks文件夹下增加一个templates/tasks，然后在下面新建一个index.html。这里html我们简单的写一下整个页面的布局。

整个页面分3部分：页面的标题，页面的form表单，循环读取tasks的内容。

完成上面的编写之后，我们看一下效果，启动python3 manager.py runserver

4).修改后台admin数据表单

为了显示的效果，我们在后天的admin里面打开我们已经写入的2条数据，我们把其中的一条数据complete属性改为已经完成。

5).修改html内容

增加update和delele这两个a标签，为我们下一步设计更新和删除页面做准备。

我们把表单和tasks的内容分别用div进行包裹进去。然后在tasks里面增加了update和delele 跳转，并且对我们的task的属性是否完成进行判断，如果完成了，那我就加一条下划线。然后我们看一下效果:

2.Update页面设计

我们也类似前面主页的设计，需要给update页面增加路由url,视图views和template/tasks/update.html。

1).增加update的路由

因为update是我们在点击主页的一个task之后，进行跳转的，所以会带一个update/id进来，这样我们才知道用户点击的是哪一个task。

2).增加update的响应

当用户点击update之后，会进行跳转到我们的update更新页面。所以我们在路由添加好了之后，需要增加views部分的处理。

然后我们刷新我们的网站，输入http://127.0.0.1:8000/update/1 之后就会看到我们的task的内容

好，说明update的路由已经通了，我们继续修改views里面的update函数。让它渲染html的内容。

3).新增update.html文件

上面只是把update的路由和视图全部打通了，下面我们增加真正的update页面的html内容。

其实就是把我们点击的task转为form表单的数据显示，然后我们进行修改之后就可以提交了。我们输入127.0.0.1:8000/update/1 看一下

确实获取了task的信息。然后当我们更新了task的信息之后，点击提交就相当于用post的方法把form表单里面的信息提交到了views视图里面的update函数去处理，所以我们下面要更新update函数。

4).修改视图里面的update函数

我们要增加update函数里面的表单提交相应的功能。当用户在页面点击“提交”之后就会把表单数据提交过来，我们判断request是否POST,如果是的话进行出来，然后把修改好的form直接save，然后重定向到主页。

然后我们在主页的udpate里面增加了update跳转链接。

这样的话，我们的更新页面就完成了。大家可以重启一下服务测试一下，我们进入我们的主页。

点击update 进行修改，然后我们就会跳转到update页面

选择complete打一个勾，然后点击提交按钮就会重新回到主页，并且显示第二天的task已经完成了，如下图所示：

好到了，这里我们的更新页面也完成了。但是整个页面非常丑，我们需要增加一些css样式，下面就来美化页面。

3.美化页面

前面房子都已经盖好了，下面就要开始刷油漆贴墙纸进行美化了，这里我们用简单的bootstrap3.4的来美化一下。

1).新建task.css

task.css里面设计一些我们的css样式。比如一些input标签，a标签，button按钮的样式，还有页面的布局。

2).在主页index.html里面应用css样式

在index.html的开头引入bootstrap3的组件，然后调用我们的task.css文件。注意这个文件一定是要在tasks/static/tasks/xxx.css 这样才能引用到。

update页面也是一样的修改。

然后我们看一下效果：

然后随意点击一个item 跳转进入update页面

4.总结：

限于篇幅，我们只完成了主页和更新页面的设计，详情页和删除页面也是很类似的。其实整个的todolist主要就是覆盖了增删改查的功能，很多大的项目其实也类似，只是逻辑和内容更复杂一点而已。希望小伙伴自己动手去做一下，相信会收获很多，毕竟编程还是实战性非常强的，一定一定要动手去敲一边。

如果需要源码的同学，也可以在后台输入：django，获取完整的源码。

推荐阅读:入门: 最全的零基础学Python的问题  | 零基础学了8个月的Python  | 实战项目 |学Python就是这条捷径干货:爬取豆瓣短评，电影《后来的我们》 | 38年NBA最佳球员分析 |   从万众期待到口碑扑街！唐探3令人失望  | 笑看新倚天屠龙记 | 灯谜答题王 ｜用Python做个海量小姐姐素描图 ｜碟中谍这么火，我用机器学习做个迷你推荐系统电影趣味:弹球游戏  | 九宫格  | 漂亮的花 | 两百行Python《天天酷跑》游戏!AI: 会做诗的机器人 | 给图片上色 | 预测收入 | 碟中谍这么火，我用机器学习做个迷你推荐系统电影小工具: Pdf转Word，轻松搞定表格和水印！ | 一键把html网页保存为pdf！|  再见PDF提取收费！ | 用90行代码打造最强PDF转换器，word、PPT、excel、markdown、html一键转换 | 制作一款钉钉低价机票提示器！ ｜60行代码做了一个语音壁纸切换器天天看小姐姐！｜年度爆款文案1).卧槽！Pdf转Word用Python轻松搞定！2).学Python真香！我用100行代码做了个网站，帮人PS旅行图片，赚个鸡腿吃3).首播过亿，火爆全网，我分析了《乘风破浪的姐姐》，发现了这些秘密 4).80行代码！用Python做一个哆来A梦分身 5).你必须掌握的20个python代码，短小精悍，用处无穷 6).30个Python奇淫技巧集 7).我总结的80页《菜鸟学Python精选干货.pdf》,都是干货 8).再见Python！我要学Go了！2500字深度分析！9).发现一个舔狗福利！这个Python爬虫神器太爽了，自动下载妹子图片点阅读原文,领AI全套资料