Todo1项目

简介:Todo1项目是数据库,html网页以及python3解释器结合的一个项目.
首先 我们创建一个模板,即生成一个新的数据库
这个数据库类似与上片文章的student1数据库,这里我给他起名叫Todo1。

1.建立数据库以及数据库表
在这里插入图片描述
在这里插入图片描述
这是任务表,这里用外键把任务与部门表里的id号,用户id号关联起来
每个表里的id号都是唯一的
状态用布尔值表示,默认为False 未完成

在这里插入图片描述

这是部门表,id和name依旧唯一
这里用反向引用连接user,todo表和department表
department为1 , todo,user为多

在这里插入图片描述
这是用户表
这里id为整形,个人简介为文本模式,剩下的是字符串

在这里插入图片描述
这是用户登录日志表
生成数据库表
在这里插入图片描述

2.初始化数据
在创建数据库表后
初始化数据
在这里插入图片描述
数据库表如下
在这里插入图片描述在这里插入图片描述在这里插入图片描述

有时我们数据库表中的密码不想被别人看到,就要加密,这里有hash加密法
在这里插入图片描述
返回如下
在这里插入图片描述
最后我们看数据库表
在这里插入图片描述
如此显示,加密成功

3.主函数
前面写的数据库代码为模板函数
定义三个路由
在这里插入图片描述这里有必要说明,要先进入列表页面才能添加任务
在这里插入图片描述这里设置了查看任务,添加任务,改变任务状态三个选项
注意:默认输入url地址时,最后面会添加一个 ‘/’,所以我们设置路由时最后也加一个‘/’;例如 ‘/todo/done/int:id/’,这样我们点击’未完成字样‘就会变成’已完成‘。**
list.html页面内容如下
在这里插入图片描述在这里插入图片描述在这里插入图片描述由于base.html前面多次出现,这里不再重复,这里的list.html和base.html都在templates目录里,而模板是models.py文件,主函数是views.py文件,执行函数是run.py文件

最终执行函数
在这里插入图片描述

4.显示效果
生成一个链接,点击进入list路由,我们可以看到
在这里插入图片描述
类中属性的内容写在网页中
添加任务后,默认为未完成如下
在这里插入图片描述这里我添加了ss,s,sss三个任务
同时我们可以看到数据库表也完成了同步
注意:python3中布尔值为False,同步到数据库中是 0

扫描二维码关注公众号,回复: 4056821 查看本文章

在这里插入图片描述

如果要改变任务状态,则更改url地址
更改为 todo/done/2
在这里插入图片描述
复原则是 todo/undo/2

5.补充删除功能和列表显示功能
1.列表显示功能:
因为任务会有很多,所以我们将任务分页显示
对list路由进行如下修改

      @app.route('/list/')
      @app.route('/list/<int:page>/')
      def   todo_list(page=1)  #page:用户想显示的页数
          #从数据库中查询
          #分页:第一个参数代表显示第几页的数据,第二个参数代表显示几条数据
          #默认显示第一页
         
          todos=Todo.query.paginate(page,5)
          parts=Department.query.all( )
          return   render_template('list.html' ,todos=todos,parts=parts )

有必要说明,同一个函数可以有两个路由修饰
同时在list.html里面添加(写在table后面),显示分页内容如下
这里利用了宏的特性

    /*显示分页*/
    {%from  'macro_page.html'    import  paginate %}
    {{  paginate('todo_list',todos) }}

这里的macro_page.html页面内容如下
在这里插入图片描述
这是判断是否有下一页以及上一页的代码
那么修改后数据库中数据不变,在网页上的显示如下
在这里插入图片描述
因为我创建了7个任务,所以有两页
这里 class=disabled 代表已经是最后一页或第一页,所以无法渲染
class=active 则相反,渲染为蓝色

2.删除功能
添加路由
在这里插入图片描述
这个相对较为简单
list.html添加删除按钮
在这里插入图片描述
这是在table里加的
实现删除功能可以在url地址处输入

        /todo/delete /任务id

或者点击删除按钮如下
在这里插入图片描述
这两种做法其实都是在跳转到路由函数delete,并且在数据库中对应删除
注意这里的任务id要和数据库中的id保持一致

当然这里也可以添加日志信息,如
在这里插入图片描述
这里的修改仅针对数据库
修改后可以在日志信息中查看到
这里我添加了学习任务
在这里插入图片描述
此处的request.remote_addr 是本机的ip地址
这样整个项目就完成了
整体显示页面如下
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_42719822/article/details/83624977
今日推荐