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)
# <QueryDict: {'level': ['1'], 'title': ['111'], 'detail': ['11'], 'user': ['1']}>
# 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
扫描二维码关注公众号，回复：
14536907 查看本文章
{
% 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 %}
当前页面
