Django To Do App

Django To Do App

这篇文章主要帮助了解如何使用Python Django框架开发一个简单的网络应用程序，主要包括前端、后端和数据库的搭建。

Django基础概念

Django 的系统架构是MVT (Model View Template)，不同于MVC(Model View Controller) 。

1. Model：与MVC中的M功能相同，负责和数据库的交互，进行数据处理。
2. View：与MVC中的C功能相同，接受请求，进行业务处理，返回应答。在view层，可以根据request，从数据库获取结果，进行数据处理，然后进行response，通常是HTTP redirect，HTTP error(404) 或者加载一个template。
3. Template：与MVC中的V功能相同，负责封装构造要返回的html。
4. Settings：配置文件拥有app所有的配置信息，包括密钥secret key，页面路径templates directories，中间价middleware(security)，静态文件static files(css, js)，数据库设置信息database settings。
5. Url：设置routing路径的，帮助连接view页面和url。

具体步骤

Step1：下载Django
Step2：开始一个新项目 New Project
Step3：创建一个应用App
Step4：创建一个Template
Step5：创建一个Model
Step6：完成items的显示和item的添加
Step7：完成item的删除

Step 1: 下载Django

打开命令行窗口cmd，输入以下命令：

pip install django

Step 2: 开始一个新项目Project

cd到要保存项目的路径下，然后输入以下命令，todoproject是新项目的名称：

django-admin startproject todoproject

然后就可以看到新建文件夹todoproject被创建，可以用文本编辑器，比如atom或者vscode打开：

然后cd进入到头都project文件夹：

cd todoproject

可以用以下命令运行看服务器是否可以正常运行：

python manage.py runserver

一个URL地址就会出现，你可以copy到浏览器中打开就可以看到如下页面：

Step 3: 创建一个app

在Django项目中，我们可以把一个功能individual functionality称为一个app。
然后在todoproject目录下创建一个app，命令如下：

python manage.py startapp todoapp

现在需要更改以下配置文件“settings.py”，需要在 INSTALLED_APPS列表里面注明你新穿件的todoapp：

Step 4：创建一个Template

这是前端的部分，也就是给应用程序搭建一个html页面。
在todoapp目录下创建一个templates文件夹，命令如下：

mkdir templates

然后可以在这个文件夹下创建一个html页面‘todolist.html’，可以写入一行代码：

<h1>My To Do List</h1> 

然后可以去views.py文件下写一下该页面的处理逻辑，这个文件在todoapp文件夹下：

from django.shortcuts import render
def todoappView(request):
    return render(request, 'todolist.html')

然后我们需要把这个view和url联系起来，在‘url.py’文件中写如下代码：

from django.contrib import admin
from django.urls import path
from todoapp.views import todoappView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('todoapp/', todoappView),
] 

然后去settings.py文件中修改TEMPLATES列表

'DIRS': [os.path.join(BASE_DIR, 'templates')], 

现在运行服务器，然后输入URL/todoapp，就可以看到界面了。

Step 5：创建一个Model

Django默认采用了sqlite3，可以该用其他数据库。

创建一个model可以表示数据库中todolist表的数据，这个model可以用来和数据库进行交互，在model.py文件中写如下代码：

from django.db import models
class TodoListItem(models.Model):
    content = models.TextField() 

在Django中，当我们改变了数据库的配置之后，要做迁移工作do migrations，打开cmd，输入如下命令：

python manage.py makemigrations

执行后输入下一条命令：

python manage.py migrate

然后我们就可以在命令行中看到数据库的改变：

当迁移migration完成， 我们就可以使用数据库了。

Step 6：完成items的显示和添加item到页面

现在让我们获取数据库中的items，然后显示到界面上。
在views.py中写如下代码：

from django.shortcuts import render
from .models import TodoListItem 

def todoappView(request):
    all_todo_items = TodoListItem.objects.all()
    return render(request, 'todolist.html',
    {'all_items':all_todo_items}) 

现在数据已经从后端传到了前端，我们可以去前端取数据然后进行显示，在 todolist.html 中写如下代码：

<ul>
    {% for i in all_items %} 
    <li>{{i.content}}
    </li>
    {% endfor %}
</ul> 

现在我们需要一个输入框可以帮助我们添加新的item：

<form action="/addTodoItem/" method = "post">{% csrf_token %}
    <input type="text" name="content">
    <input type="submit" value="Add Todo Item">
</form> 

action=”/addTodoItem/” 将发送请求HTTP request到URL，我们使用post请求， tag {% csrf_token %}是为了安全的目的。

现在我们去views.py完成这个请求的处理逻辑：

from django.http import HttpResponseRedirect 

def addTodoView(request):
    x = request.POST['content']
    new_item = TodoListItem(content = x)
    new_item.save()
    return HttpResponseRedirect('/todoapp/') 

然后给这个view创建一个url：

from todoapp.views import todoappView, addTodoView 

path('addTodoItem/',addTodoView), 

Step 7：完成items的删除

首先去 todolist.html中给每个列表项添加一个删除按钮

<form action="/deleteTodoItem/{{i.id}}/" method = "post">{% csrf_token %}
            <input type="submit" value="Delete">
</form>  

这段代码需要添加到

• 标签中，每个content之后。

• 现在我们去view.py中为这个HTTP request添加一个处理逻辑：

  def deleteTodoView(request, i):
      y = TodoListItem.objects.get(id= i)
      y.delete()
      return HttpResponseRedirect('/todoapp/') 
  

  然后为这个view添加一个新的url：

  from todoapp.views import todoappView, addTodoView, deleteTodoView
  
  path('deleteTodoItem/<int:i>/', deleteTodoView), 
  

  现在整个App就已经完成了，可以启动服务器，输入url去看看啦！