ジャンゴベースのToDoアプリ


あなたのジャンゴアプリを設定する




このブログでは、私はDjangoプロジェクトと呼ばれるsimple_todo と呼ばれるdjangoアプリsimple_todo_app .
あなたのジャンゴプロジェクトの構造は以下のようになります
simple_todo
|
|--simple_todo
|--simple-todo-app
|--manage.py 
我々のアプリのインストールされたアプリの中で我々のアプリを加えましょうsettings.py .
INSTALLED_APPS = [ 
'django.contrib.admin',
...   
'simple_todo_app',
] 
HTML Webページを保持するためのテンプレートを作成します.テンプレートディレクトリと静的パスをsettings.py .
TEMPLATES = [   
 {       
...
'DIRS': [os.path.join(BASE_DIR,'templates')],      
....
 }
]
....
STATIC_URL = '/static/'
フォルダを作成するtemplates 主プロジェクトディレクトリの中.
simple_todo
|
|--simple_todo
|--simple-todo-app
|--manage.py
|--templates
我々のテンプレートフォルダの中でhome.html 我々のウェブページのためのファイル.
<!DOCTYPE html>
<html>
    <title></title>
    <!-- from rohith -->
    <body>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <nav class="nav">
            <a class="nav-link disabled" href="#">To-Do List</a>
        </nav>
        <div class="container">
            <div class="jumbotron">
            <form method="POST" action="/">
                <h1 class="container"><b>Add Task</b></h1>
                <p>
                <input type="text" name="content" placeholder="Enter your task here...">
                <input type="submit" value="submit" name="submit" class="btn btn-success"></p>
        </div></div>
        <form >
        <div class="container" >
        <p><b>list</b>
        <a href="" class="btn btn-danger float-right">DELETE</a>
        </p><br>
        </div>
        </form>
        <style>
            .nav{
                background-color: black;
                height: 110px;
                font-size: 60px;
                padding-right: 110px;
            }
            body{
                background-color: cadetblue;
            }

        </style>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    </body>
</html>
我々は、我々の必要なモデルmodels.pysimple_todo_app フォルダ.
from django.db import models

# Create your models here.
class Todolist(models.Model):
    task=models.CharField(max_length=9999)

    def __str__(self):
        return self.task
我々は、最初の移行を行います.移行後に移行しましょう.
python manage.py makemigrations
python manage.py migrate
ホームページのレンダリング、タスクの追加と削除のビューを作成しましょう.
from django.shortcuts import render,redirect
from django.http import HttpResponse,HttpResponseRedirect
from .models import Todolist

# Create your views here.
def home(request):

    tasks=Todolist.objects.all()
    return render(request,'home.html',context={"tasks":tasks})

def add_task(request):
    task_to_be_done=request.POST['content']
    t=Todolist(task=task_to_be_done)
    t.save()
    return redirect('/')
def delete_task(request,id):
    task_object=Todolist.objects.get(id=id).delete()
    return redirect('/')
さて、urls.py , 中simple_todo , のURLを特定のURLに同期しましょう.
from django.contrib import admin
from django.urls import path
from simple_todo_app import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',views.home,name='home'),
    path('delete/<int:id>/',views.delete_task,name='delete'),
    path('addtask/',views.add_task,name='add')
] 
修正しましょうhome.html テンプレートタグの使用
<!DOCTYPE html>
<html>
    <title></title>
    <!-- from rohith -->
    <body>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <nav class="nav">
            <a class="nav-link disabled" href="#">To-Do List</a>
        </nav>
        <div class="container">
            <div class="jumbotron">
            <form method="POST" action="addtask/">
                {% csrf_token %}
                <h1 class="container"><b>Add Task</b></h1>
                <p>
                <input type="text" name="content" placeholder="Enter your task here...">
                <input type="submit" value="submit" name="submit" class="btn btn-success"></p>
        </div></div>
        {% for i in tasks %}
        <form >
            {% csrf_token %}
        <div class="container" >
        <p><b>{{i}}</b>
        <a href="{% url 'delete' i.id %}" class="btn btn-danger float-right">DELETE</a>
        </p><br>
        </div>
        </form>
        {% endfor %}
        <style>
            .nav{
                background-color: black;
                height: 110px;
                font-size: 60px;
                padding-right: 110px;
            }
            body{
                background-color: cadetblue;
            }

        </style>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    </body>
</html>
次のコマンドを入力してサーバを起動します
python manage.py runserver
オープンhttp://127.0.0.1:8000/ あなたのアプリを参照してください.
礼儀正しい
ソースコード:

アラビンド2203 / シムラワントドウラントジャンゴ


これは、Django WebフレームワークのシンプルなToDoリストです。


シムラワントドウラントジャンゴ


これは、Django WebフレームワークのシンプルなToDoリストです.
これは完全にPythonでdjangoフレームワークで作られます.
私はスタイルとブートストラップを使用している.

サンプル画像



View on GitHub
私はこの記事が役に立つことを願っています.