Django实战——待办事项清单

学习django整整10天辣！！虽然都是用碎片时间在学习，但是感觉还是学到了很多，这几天做了一个待办事项的demo，麻雀虽小五脏俱全，虽然前端真的很寒酸，但我的确没有那么多精力去美化前端了嘤嘤嘤。就用这篇博客记录整个源代码吧，然后再提取一些核心知识点方便以后查阅。

最终效果

1.项目目录

2.setting.py

3.urls

4.todolist_static

5.about.html

6.base.html

7.home.htm

8.newedit.html

9.apps.py

10.models.py

11.urls.py

12.views.py

总结

最终效果

1.项目目录

虽然是小demo，但是目录结构都是严格按照做大项目做的，所以创建了一个todolist的文件夹，实现todolist这个app的全部代码都在这里面。app外没有什么逻辑实现的代码，但是相关配置还是有的，所以就已截图的方式圈出我的改动，app里面的代码全部粘贴了。

2.setting.py

3.urls

4.todolist_static

base.css

body{background-color: #f7f9ff;
}
#topnav{font-size:1.35em;padding-left:5em;padding-right:5em;}nav input{width:70%!important}

edit.css

 #form-edit{margin-left:10em;margin-right:10em;}

home.css

 .no-underline>tr>td>a:hover{text-decoration:none;}#line-through{text-decoration:line-through;}

5.about.html

{% extends "todolist/base.html"%}{% block title%}
关于我们
{% endblock title%}{% block 关于高亮%}
active
{% endblock 关于高亮%}{% block main_content%}<h4>一款小巧、简洁的待办清单工具，帮你规划日常事务</h4>
{% endblock main_content%}

6.base.html

<!doctype html>
{%load static%}
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="description" content=""><meta name="author" content=""><link rel="icon" href="../../../../favicon.ico"><title>{% block title%}未命名{% endblock title%}</title><!--lable icon--><link href="{% static 'todolist/icons/icon_list.png' %}" rel="shortcut icon" /><!-- Bootstrap core CSS --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><!-- custom style for this template--><link rel="stylesheet" href="{% static 'todolist/css/base.css' %}"><link rel="stylesheet" href="{% block css%}{% endblock css%}"></head><body><nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4" id="topnav"><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarCollapse"><ul class="navbar-nav mr-auto"><li class="nav-item {% block 主页高亮%}{% endblock 主页高亮%}"><a class="nav-link" href="{% url 'todolist:主页'%}">待办清单</a></li><li class="nav-item {% block 关于高亮%}{% endblock 关于高亮%}"><a class="nav-link" href="{% url 'todolist:关于'%}">关于本站</a></li></ul><!--action 表单的信息发送到哪里去--><!--{% csrf_token %}防止跨站攻击-->{% block add%}{% endblock add%}</div></nav><main role="main" class="container"><br>{% block main_content%}{% endblock main_content%}</main><!-- Bootstrap core JavaScript================================================== --><!-- Placed at the end of the document so the pages load faster --><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script></body>
</html>

7.home.htm

{% extends "todolist/base.html"%}
{%load static%}{% block css%}{% static 'todolist/css/home.css' %}{% endblock css%}
{% block title%}你的个人待办清单{% endblock title%}
{% block 主页高亮%}active{% endblock 主页高亮%}{% block add%}<form class="form-inline mt-2 mt-md-0" method="POST" action="">{% csrf_token %}<input class="form-control mr-sm-2" type="text" placeholder="待办事项" aria-label="Search" name="待办事项"><button class="btn btn-outline-success my-2 my-sm-0" type="submit">添加</button></form>
{% endblock add%}{% block main_content%}{% if 警告%}
<div class="alert alert-warning alert-dismissible fade show" role="alert"><strong>{{ 警告 }}</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
{% endif %}{% if 信息%}
<div class="alert alert-warning alert-dismissible fade show" role="alert"><strong>{{ 信息 }}</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
{% endif %}<br><table class="table table-hover"><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 class="no-underline">{% for 每一件事 in 全部清单 %}{% if 每一件事.done%}<tr class="table-dark"><th scope="row" class="text-dark">{{forloop.counter}}</th><td class="text-dark" id="line-through">{{每一件事.thing}}</td><td><a class="text-secondary" href="#">不可编辑</a></td><td><form method="POST" action="{% url 'todolist:划掉' 每一件事.id %}">{% csrf_token %}<input name="完成状态" type="hidden" value="未完成" ><button type="submit" class="btn btn-outline-success my-2 my-sm-0" >撤销</button></form></td><td><!-- Button trigger modal --><button data-toggle="modal" data-target="#exampleModal" type="button" class="btn btn-outline-success my-2 my-sm-0" >删除</button><!-- Modal --><div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">请确认</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">确定要删除该未办事项吗？{{每一件事.thing}}</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button><form method="POST" action="{% url 'todolist:删除' 每一件事.id %}">{% csrf_token %}<button type="submit" class="btn btn-primary">确认</button></form></div></div></div></div></td></tr>{% else %}<tr><th scope="row">{{forloop.counter}}</th><td>{{每一件事.thing}}</td><td><a class="text-info" href="{% url 'todolist:新编辑' 每一件事.id %}"><button type="submit" class="btn btn-outline-success my-2 my-sm-0">编辑</button></a></td><td><form method="POST" action="{% url 'todolist:划掉' 每一件事.id %}">{% csrf_token %}<input name="完成状态" type="hidden" value="已完成" ><button type="submit" class="btn btn-outline-success my-2 my-sm-0">划掉</button></form></td><td><!-- Button trigger modal --><button data-toggle="modal" data-target="#exampleModal{{forloop.counter}}" type="button" class="btn btn-outline-success my-2 my-sm-0" >删除</button><!-- Modal --><div class="modal fade" id="exampleModal{{forloop.counter}}" tabindex="-1" role="dialog" aria-labelledby="exampleModal{{forloop.counter}}Label" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModal{{forloop.counter}}Label">请确认</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">确定要删除该未办事项吗？{{每一件事.thing}}</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button><form method="POST" action="{% url 'todolist:删除' 每一件事.id %}">{% csrf_token %}<button type="submit" class="btn btn-primary">确认</button></form></div></div></div></div></td></tr></tr>{% endif %}{% endfor %}</tbody>
</table>{% endblock main_content%}

8.newedit.html

{% extends "todolist/base.html"%}
{%load static%}{% block css%}{% static 'todolist/css/edit.css'%}{% endblock css%}{% block title%}
编辑页面
{% endblock title%}{% block main_content%}<form id="form-edit" method="POST" action="">{% csrf_token %}<div class="form-group"><label for="editTodo"></label><input name="已修改事项" class="form-control form-control-lg" id="editTodo" type="text" value="{{待修改事项}}"><small id="help" class="form-text text-muted">在这里编辑待办事项</small></div>{{警告}}<button type="submit" class="btn btn-primary btn-lg btn-block">提交</button></form>{% endblock main_content%}

9.apps.py

from django.apps import AppConfigclass TodolistConfig(AppConfig):name = 'todolist'

10.models.py

from django.db import models
#创建Model
#制作迁移文件
#真正迁移# Create your models here.
class Todo(models.Model):thing = models.CharField(max_length=50)done = models.BooleanField(default=False)def __str__(self):return self.thing

11.urls.py

from django.urls import path
from . import viewsapp_name='todolist'  # 与app同名,为了避免命名冲突
urlpatterns = [path('home/',views.home, name='主页'),path('about/',views.about, name='关于'),path('edit/', views.edit, name='编辑'),path('delete/<每一件事_id>', views.delete, name='删除'),path('cross/<每一件事_id>', views.cross, name='划掉'),path('newedit/<每一件事_id>', views.newedit, name='新编辑'),]
# !!!!delete传过来的地址后面加了数字，用<forloop_counter>代替，forloop_counter会传递到函数delete里面
# /delete/1

12.views.py

from django.shortcuts import render,redirect
from .models import Todo# Create your views here.# lst = [
#     {'待办事项': '遛狗', '已完成': False},
#     {'待办事项': '逛街', '已完成': False},
#     {'待办事项': '泡脚', '已完成': True},
# ]def home(request):if request.method == 'POST':if request.POST['待办事项'] == '':content = {'全部清单':Todo.objects.all(), '警告':'请输入内容！'}return render(request, "todolist/home.html", content)else:a_row = Todo(thing=request.POST['待办事项'])a_row.save()content = {'全部清单':Todo.objects.all(), '信息':'添加成功！'}return render(request,"todolist/home.html", content)elif request.method == 'GET':content = {'全部清单': Todo.objects.all()}return render(request, "todolist/home.html" ,content)  # 渲染出一个逻辑，返回给用户def about(request):return render(request,'todolist/about.html')  # 渲染出一个逻辑，返回给用户def edit(request):return render(request,'todolist/edit.html')  # 渲染出一个逻辑，返回给用户def newedit(request,每一件事_id):if request.method == 'POST':if request.POST['已修改事项'] =='':return render(request, 'todolist/newedit.html', {'警告':'请输入内容！'})else:a = Todo.objects.get(id=每一件事_id)a.thing = request.POST['已修改事项']a.save()return redirect("todolist:主页")elif request.method == 'GET':content1 = {'待修改事项': Todo.objects.get(id=每一件事_id).thing }return render(request,'todolist/newedit.html',content1)  # 渲染出一个逻辑，返回给用户def delete(request, 每一件事_id):  # 完成删除的逻辑处理，然后再把网页跳转到主页# 先要知道用户点的那个条记录，然后再删# 利用forloot_counter，从1开始计数的a = Todo.objects.get(id=每一件事_id)a.delete()return redirect("todolist:主页")# def cross(request, thing_id):  # 完成划掉的逻辑处理，然后再把网页跳转到主页
#     if request.POST['完成状态'] == '已完成':
#         lst[int(forloop_counter)-1]['已完成']=True
#         return redirect("todolist:主页")
#     else:
#         lst[int(forloop_counter) - 1]['已完成'] = False
#         return redirect("todolist:主页")def cross(request, 每一件事_id):  # 完成划掉的逻辑处理，然后再把网页跳转到主页if request.POST['完成状态'] == '已完成':a= Todo.objects.get(id=每一件事_id)a.done = Truea.save()return redirect("todolist:主页")else:a = Todo.objects.get(id=每一件事_id)a.done = Falsea.save()return redirect("todolist:主页")

总结

数据之间的传递用到了sqlite3数据库，是django自带的，很轻很好用，但可能不适合大型网站
数据库的表是通过model管理的，需要建立迁移文件，然后再迁移，如果model改变了，一定要记得再建一次迁移文件然后迁移
数据库的后台数据可以进入admin页面去查看，但在这之前要在cmd里面创建一个超级用户，admin后台管理也是django自带的，简直太强大了！
操作数据库中的数据，增加和修改都要调用一下save方法，这点非常容易忘记
用户的每一次点击，都需要给反馈，return或者redirect，这点也不要忘了
关于页面间数据传递，业务逻辑处理的的具体实现都在代码里面了，需要用的时候再来看吧
django这一块，到这里就阶段性收摊了...

Django实战——待办事项清单相关推荐

为什么待办事项清单不管用
为什么待办事项清单不管用时间管理 November 22nd, 2012 本文原文来自 Harvard Business Review,由 @换装迷宫tayy 翻译. 停止制作你的待办事项清单吧.它 ...
滴答清单 TickTick for Mac(待办事项清单)
小编为大家推荐Mac平台上一款高效的待办事项清单软件滴答清单 TickTick for Mac,有了它你就能够将自己所有所需要的待办事件和任务记录下来.滴答清单 mac专注于为用户进行任务管理和日程提 ...
如何建立工作待办事项?工作便签中的待办事项清单建立方法
每一份工作都不容易,对于大多数人来说,每天的工作堆成了山,这里面有大事也有小事,有紧急的事情也有不紧急的事情.如果不分主次一起干,很难有良好的效果.如果能列出待办事项清单,可以很容易知道现在该做什么事 ...
待办事项清单和提醒软件有哪些好用的每日待办提醒便签
待办事项清单在我们日常的工作生活中非常的实用,我们每天要做的事情太多太杂,甚至经常会忘记做一些事情.为了避免遗忘,我们可以将每天要做的事情列成待办清单,将完成的待办事项打勾标记,这样就再也不用担心重要 ...
2021制定计划待办事项清单的记事便签
2021年流行的制定计划和记录待办事项清单的记事便签有哪些呢?做事之前不列计划,不列出详细的待办清单,总觉得脑海里一团乱麻,临场发挥总会浪费好多时间,导致事倍功半. 研究表明,在设置目标上花费的时间, ...
vue实现ToDoList待办事项/清单
1.这个功能运用的知识点比较多,computed计算,watch监听,directives自定义指令和methods定义事件,还有一些属性绑定,列表渲染,表单绑定指令,按键修饰符,表单修饰符等... ...
哪个待办事项App好用?有没有好用的待办事项清单便签
对于每天事情比较多的人,列出待办清单非常有必要.那很多清单便签就可以列待办事项.除了有便签类型的分类外,还有专门的待办分类.待办分类页面非常简洁,便签在待办分类状态下,单击底部的+,就可以启动待办事 ...
原生vue.js实现待办事项清单，支持增删改查
源码部分: <!DOCTYPE html> <html lang="en"> <head> ...
android room_Android Room –待办事项清单应用程序
android room In this tutorial, we'll be discussing and implementing the Room library introduced by G ...

Django实战——待办事项清单

最终效果

1.项目目录

2.setting.py

3.urls

4.todolist_static

5.about.html

6.base.html

7.home.htm

8.newedit.html

9.apps.py

10.models.py

11.urls.py

12.views.py

总结

Django实战——待办事项清单相关推荐

最新文章

热门文章