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

菜鸟学Python

共 3779字,需浏览 8分钟

 ·

2021-08-30 22:24




入门: 最全的零基础学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行代码做了一个语音壁纸切换器天天看小姐姐!


年度爆款文案


点阅读原文,领AI全套资料

浏览 1
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报