【Django】开发日报_11_Day：手机号码管理系统（9）

0、Django开发回顾

如果使用sqlite3（文件数据库）可以省略很多前面的数据库配置操作

setting.py中的数据库路径不需要修改：

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}

创建注册App后，

startapp app01

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app01.apps.App01Config',
]

在models.py中创建表

from django.db import models

# Create your models here.
class Student(models.Model):
    """学生表"""
    stu_name = models.CharField(verbose_name="姓名", max_length=32)
    stu_age = models.CharField(verbose_name="年龄", max_length=16)
    stu_sex = models.CharField(verbose_name="性别",max_length=16)

实现数据库迁移

makemigrations
migrate

可以看到在项目的根目录下出现了数据库文件

在右侧点击连接数据库下载好驱动后就可以在pycharm中操作数据了，非常轻便

数据库配置完成之后：

1、Ajax请求页面完善

task.py

import json
from django.http import JsonResponse
from django.shortcuts import render, redirect, HttpResponse
from django.views.decorators.csrf import csrf_exempt
from app01.utils.form import TaskModelForm
from app01 import models
from app01.utils.pagination import Pagination

def task_list(request):
    """任务列表"""
    #去数据库获取所有的任务
    queryset = models.Task.objects.all().order_by('-id')
    form = TaskModelForm()
    page_object = Pagination(request, queryset)
    # 参数字典
    context = {
        "form":form,
        "queryset": page_object.page_queryset,  # 分完页的数据
        "page_string": page_object.html(),  # 生成的页码
    }
    return render(request, "task_list.html", context)


@csrf_exempt
def task_ajax(request):
    print(request.GET)
    print(request.POST)
    data_dict = {
        "status": True,
        "data": [1, 2, 3, 4]
    }
    json_string = json.dumps(data_dict)
    return HttpResponse(json_string)


@csrf_exempt
def task_add(request):
    """添加任务"""
    #print(request.POST)
    # 
    # 1、对用户发送的数据表单进行校验（此处使用ModelForm进行校验）
    form = TaskModelForm(data=request.POST)
    if form.is_valid():
        form.save()
        data_dict = {"status": True}
        return JsonResponse(data_dict)
    data_dict = {
        "status": False,
        "error": form.errors
    }
    return JsonResponse(data_dict)

task_list,html

{% extends "template.html" %}

{% block content %}
    <div class="container">
        <!--实际案例-->
        <div class="panel panel-default">
            <div class="panel-heading">表单</div>
            <div class="panel-body">
                <form id="formAdd">
                    <div class="clearfix"><!--与栅格连用-->
                        {% for obj in form %}
                            <div class="col-xs-6"><!--栅格为6-->
                                <div class="form-group" style="position: relative;margin-bottom: 20px;">
                                    <label> {{ obj.label }} </label>
                                    {{ obj }}
                                    <span class="error-msg" style="color:red;position: absolute;"></span>
                                </div>
                            </div>
                        {% endfor %}
                        <div class="col-xs-6">
                            <button id="btnAdd" type="button" class="btn btn-primary">提 交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!--列表-->
        <div class="panel-heading">
            <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
            任务列表
        </div>
        <table class="table table-bordered">
            <thead>
            <th>ID</th>
            <th>标题</th>
            <th>级别</th>
            <th>负责人</th>
            <th>操作</th>
            </thead>
            <tbody>
            {% for query in queryset %}
                <tr>
                    <th>{{ query.id }}</th>
                    <td>{{ query.title }}</td>
                    <td>{{ query.get_level_display }}</td>
                    <td>{{ query.user.username }}</td>

                    <td>
                        <a class="btn btn-primary btn-xs" href="#">编辑</a>
                        <!--<a class="btn btn-danger btn-xs" href="/admin/delete/?nid={ qurey.id }">删除</a>-->
                        <a class="btn btn-danger btn-xs" href="#">删除</a>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <ul class="pagination">
            {{ page_string }}
        </ul>
        <div style="height: 1000px"></div>
        <!--学习样例-->
        <hr/>
        <h1>Ajax学习</h1>
        <h3>示例1</h3>
        <input type="button" id="btn1" class="btn btn-primary" value="点击"/>
        <h3>示例2</h3>
        <input type="text" id="txtName" placeholder="姓名"/>
        <input type="text" id="txtAge" placeholder="年龄"/>
        <input id="btn2" type="button" class="btn btn-primary" value="提交">
        <h3>示例3</h3>
        <form id="form3">
            <input type="text" name="name" placeholder="姓名"/>
            <input type="text" name="age" placeholder="年龄"/>
            <input type="text" name="email" placeholder="邮箱"/>
            <input type="text" name="more" placeholder="个人介绍"/>
        </form>
        <input id="btn3" type="button" class="btn btn-primary" value="发送">
    </div>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        $(function () {
            //页面框架加载完成之后代码自动执行
            //学习案例
            bindBtn1Event();
            bindBtn2Event();
            bindBtn3Event();
            //实际案例
            bindBtnAddEvent();
        })

        function bindBtn1Event() {
            $("#btn1").click(function () {
                $.ajax({
                    url: '/task/ajax/',
                    type: "post",
                    data: {
                        n1: 123,
                        n2: 456
                    },
                    dataTypes: "JSON",
                    success: function (res) {
                        console.log(res);
                        console.log(res.status);
                        console.log(res.data);
                    }
                })
            })
        }

        function bindBtn2Event() {
            $("#btn2").click(function () {
                $.ajax({
                    url: '/task/ajax/',
                    type: "post",
                    data: {
                        name: $("#txtName").val(),
                        age: $("#txtAge").val(),
                    },
                    dataTypes: "JSON",
                    success: function (res) {
                        console.log(res);
                        console.log(res.status);
                        console.log(res.data);
                    }
                })
            })
        }

        function bindBtn3Event() {
            $("#btn3").click(function () {
                $.ajax({
                    url: '/task/ajax/',
                    type: "post",
                    data: $("#form3").serialize(),
                    dataTypes: "JSON",
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
        }

        function bindBtnAddEvent() {
            $("#btnAdd").click(function () {//绑定按钮

                $("#btnAdd").click(function () {
                    $(".error-msg").empty();
                })

                $.ajax({
                    url: '/task/add/',
                    type: "post",
                    data: $("#formAdd").serialize(),//表单数据
                    dataTypes: "JSON",
                    success: function (res) {

                        console.log(res.status);
                        if (res.status) {
                            alert("添加成功");
                            //用JS实现页面刷新
                            location.reload();
                        } else {
                            console.log(res.error);
                            $.each(res.error, function (name, data) {
                                console.log(name.data);
                                $("#id_" + name).next().text(data[0]);
                            })
                        }
                    }
                })
            })
        }
    </script>
{% endblock %}

当前页面