django 写的一个在网页上对学生信息进行操作，用到了ajax，jquery操作表格等，还有 bootstrap，和 font-awesome（图标），这些框架写好了各种各样的网页元素，用起来十分的方便，
下面是效果图，
#models.py 文件 的建表信息
from django.db import models
# Create your models here.
class Classes(models.Model):
title = models.CharField(max_length=32)
m = models.ManyToManyField("Teacher")
class Teacher(models.Model):
name = models.CharField(max_length=32)
class Student(models.Model):
username = models.CharField(max_length=32)
age = models.IntegerField()
gender = models.NullBooleanField()
cs = models.ForeignKey("Classes",on_delete=models.CASCADE)
路由分发文件，
# urls.py 路由文件
from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
path('admin/', admin.site.urls),
path("students.html/", views.students),
path("add_student/", views.add_student),
path("del_students/", views.del_students),
path("edit_student/", views.edit_student),
]
这个是视图函数文件，处理URL分发的事件
# views.py 文件
from django.shortcuts import render
from django.shortcuts import HttpResponse
from app01 import models
import json
# Create your views here.
def students(request):
all_students = models.Student.objects.all()
all_classes = models.Classes.objects.all()
return render(request, "students.html",{
"all_students": all_students,
"all_classes": all_classes,
})
def add_student(request):
response = {'status':True,"message":None,"nid":None}
try:
username = request.POST.get("username")
age = request.POST.get("age")
gender = request.POST.get("gender")
cls_id = request.POST.get("cls_id")
print(username,age,gender,cls_id)
obj = models.Student.objects.create(
username=username,
age=age,
gender=gender,
cs_id=cls_id,
)
response["nid"] = obj.id
except Exception as e:
response["status"] = False
response["message"] = "用户输入错误"
import json
response_json = json.dumps(response)
return HttpResponse(response_json)
def del_students(request):
if request.method == "POST":
response = {"status":True}
try:
nid = request.POST.get("nid")
models.Student.objects.filter(id=nid).delete()
except Exception as e:
response["status"] = False
response_ret = json.dumps(response)
return HttpResponse(response_ret)
def edit_student(request):
response = {'code':1000, 'message': None}
if request.method == "POST":
try:
nid = request.POST.get("nid")
username = request.POST.get("username")
age = request.POST.get("age")
gender = request.POST.get("gender")
cs_id = request.POST.get("cls_id")
print(nid,username,age,gender,cs_id)
models.Student.objects.filter(id=nid).update(
username=username,
age=age,
gender=gender,
cs_id=cs_id,
)
except Exception as e:
response["code"] = 1001
response["message"] = str(e)
return HttpResponse(json.dumps(response))
下面这个是主文件了，就只有一个html文件，主要通信都是用ajax
# 这个是 student.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css">
<style>
.aa {
font-size: 20px;
margin-right: 20px;
}
.mybtn {
width: 80px;
font-size: 20px;
}
</style>
</head>
<body class="container">
<a class="btn btn-success mybtn" id="myadd">添加</a>
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>班级</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
{% for foo in all_students %}
<tr nid="{{ foo.id }}">
<td na="nid">{{ foo.id }}</td>
<td na="username">{{ foo.username }}</td>
<td na="age">{{ foo.age }}</td>
{% if foo.gender %}
<td na="gender">男</td>
{% else %}
<td na="gender">女</td>
{% endif %}
<td na="cs_id" cls_id="{{ foo.cs.id }}">{{ foo.cs.title }}</td>
<td>
<a class="aa glyphicon glyphicon-remove" aria-hidden="true"></a>
<a class="fa fa-spoon fa-2x edit-row" aria-hidden="true"></a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<!-- Moda 添加框 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">创建学生</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="姓名" name="username">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="age" placeholder="年龄" name="age">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<div class="radio">
<label>
<input type="radio" name="gender" value="1">
男
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="0">
女
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">班级</label>
<div class="col-sm-10">
<select class="form-control" name="cls_id" id="sele">
{% for foo in all_classes %}
<option value="{{ foo.id }}">{{ foo.title }}</option>
{% endfor %}
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<span style="color: red" id="error"></span>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="save">保存</button>
</div>
</div>
</div>
</div>
<!-- Modal 删除框-->
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">是否删除学生信息？</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<h3>=========<input type="hidden" id="nid"></h3>
</form>
</div>
<div class="modal-footer">
<span style="color: red" id="error"></span>
<button type="button" class="btn btn-info" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-danger" id="delComfirm">确定</button>
</div>
</div>
</div>
</div>
<!-- Modal 编辑框-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">编辑学生信息</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="hidden" name="nid">
<input type="text" class="form-control" placeholder="姓名" name="username">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="年龄" name="age">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<div class="radio">
<label>
<input type="radio" name="gender" value="1">
男
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="0">
女
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">班级</label>
<div class="col-sm-10">
<select class="form-control" name="cls_id" id="sele">
{% for foo in all_classes %}
<option value="{{ foo.id }}">{{ foo.title }}</option>
{% endfor %}
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<span style="color: red" id="error"></span>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary editConfirm" id="save">保存</button>
</div>
</div>
</div>
</div>
<script src="/static/js/jquery-3.3.1.min.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.js"></script>
<script>
$(function () { //当页面加载完成后给按钮绑定事件
bindEvent();
getData();
delEvent();
delConfirm();
editEvent();
editConfirm();
});
function delConfirm() { //删除确定按钮，确定删除就只需要把对应的id发送到后台就行了
$("#delComfirm").click(function () { // 给删除框的确定按钮绑定事件，
nid = $("#nid").val();
console.log(nid);
$.ajax({
url: "/del_students/",
type: "POST",
data: {"nid":nid},
success:function (arg) {
ret = JSON.parse(arg); // server 发过来的就是json字符串
if(ret.status){
$('tr[nid="'+nid+'"]').remove(); // 不刷新页面用js移除删除的tr
$("#delModal").modal("hide");
}else{
alert("删除失败")
}
}
})
})
}
function bindEvent() {
$("#myadd").click(function () {
$("#addModal").modal("show"); // 给页面上的添加按钮绑定事件，为显示添加框
})
}
function getData() { // 获取输入框的值，并用ajax发送到后台
var postData = {};
$("#save").click(function () {
$("#addModal").find("input,select").each(function () { //找到所有的input ，select框
var n = $(this).attr("name");
if(n == "gender"){ // gender 的 radio 单选框要处理一下，而select不必处理，会直接取到选定的值
if($(this).prop("checked")){ //选中的为 true
var v = $(this).val();
postData[n] = v;
}
}else{
var v = $(this).val();
postData[n] = v;
}
});
console.log(postData); // 所有的数据都在字典内了，
$.ajax({
url: "/add_student/",
type: "POST",
data: postData,
success:function (arg) {
message = JSON.parse(arg);
console.log(message);
if(message["status"]){
// window.location.reload(); // 刷新页面
create_table(postData,message["nid"]); // 不刷新页面就要自己用js建一个个td拼成一个tr，添加到table
$("#addModal").modal("hide"); // 添加完毕就让添加框消失，
}else{
$("#error").html(message["message"]) //出错就会有提示信息出现在按钮旁边，看图片
}
}
})
});
}
function create_table(postData, nid) { // 创建一个一个标签，拼接起来
var tr_ele = document.createElement("tr");
$(tr_ele).attr('nid',nid);
var td_id = document.createElement("td");
td_id.innerHTML = nid;
$(tr_ele).append(td_id);
var td_user = document.createElement("td");
td_user.innerHTML = postData["username"];
$(tr_ele).append(td_user);
var td_age = document.createElement("td");
td_age.innerHTML = postData["age"];
$(tr_ele).append(td_age);
var td_gender = document.createElement("td");
if(postData["gender"]==0) {
var gend = "女";
}else{
var gend = "男"
}
td_gender.innerHTML = gend;
$(tr_ele).append(td_gender);
var td_cls_id = document.createElement("td");
title = $("#sele").find('option[value="'+postData["cls_id"]+'"]').text();
td_cls_id.innerHTML = title;
$(tr_ele).append(td_cls_id);
// 那两个a标签，也就是删除按钮和编辑按钮用字符串的话就相对来说方便一些
var a_td = '<td><a class="aa glyphicon glyphicon-remove" aria-hidden="true"></a><a class="fa fa-spoon fa-2x" aria-hidden="true"></a> </td>';
$(tr_ele).append(a_td);
$("#tb").append(tr_ele);
}
function delEvent() { // 为删除按钮绑定事件
$("#tb").on('click','.aa',function () {
$("#delModal").modal("show");
var nid = $(this).parent().parent().attr("nid"); // 删除一个记录就必须要用到id了，
$("#nid").val(nid); // 把获取的的id赋值到删除提示框的一个隐藏input中，待到按下确认删除按钮时发送
})
}
function editEvent() { // 绑定编辑按钮的点击事件
$("#tb").on("click",".edit-row",function () { // 动态绑定事件，我们必须考虑到动态添加的标签一般绑定下
$("#editModal").modal("show"); // 是不会有事件的，就要用到动态绑定，也就是在按下按钮时绑定事件并触发
$(this).parent().siblings().each(function () { // 编辑的话就要获取table上某一行的数据了
var v = $(this).text();
var n = $(this).attr("na"); // 把相对应的键值赋给na（随意的名称），直接取出来对应就行了
if(n=="cs_id"){ // 这样的话之后添加和删除某个选项就不必痛苦了。。。
var cid = $(this).attr("cls_id");
$("#editModal select[name='cls_id']").val(cid)
}else if(n=='gender'){
if(v=="男"){
$("#editModal :radio[value='1']").prop('checked',true); // 选中 radio 的某一个
}else{
$("#editModal :radio[value='0']").prop('checked',true);
}
}
else{
$("#editModal input[name='"+n+"']").val(v);
}
});
})
}
function editConfirm() { // 编辑跟添加类似，
var postData = {};
$(".editConfirm").click(function () {
$("#editModal").find("input,select").each(function () {
var n = $(this).attr("name");
var v = $(this).val();
if(n=="gender"){
if($(this).prop("checked")){
postData[n] = v;
}
}else{
postData[n] = v;
}
});
console.log(postData);
$.ajax({
url: "/edit_student/",
type: "POST",
data: postData,
success:function (arg) {
ret = JSON.parse(arg);
if(ret["code"]==1000){ // ret['code'] 等于 1000 就是为true了
window.location.reload();
$("#editModal").modal("hide"); // 这里就不用js删除了，直接刷新页面
}else{
alert(ret['message'])
}
}
})
})
}
</script>
</body>
</html>
添加按钮提示框，当用户输入有问题时就会提示 ’ 用户输入错误 ‘ ，
下面这个是编辑框，点击打开某个学生时会默认选中，
整个总体来说写的还是存在一个bug，例如在添加学生信息时，页面上是用 js 创建tr表格的，各种属性没有添加上去，
页面信息有时候用js添加比较好，不用刷新整个页面，而有时候是页面整个刷新为好，看各种情况了。
下面是总结呵，
1.
Python序列化
字符串 = json.dumps(对象) 对象->字符串
对象 = json.loads(字符串) 字符串->对象
JavaScript:
字符串 = JSON.stringify(对象) 对象->字符串
对象 = JSON.parse(字符串) 字符串->对象
应用场景：
数据传输时，
发送：字符串
接收：字符串 -> 对象
2. ajax
$.ajax({
url: 'http//www.baidu.com',
type: 'GET',
data: {'k1':'v1'},
success:function(arg){
// arg是字符串类型
// var obj = JSON.parse(arg)
}
})
$.ajax({
url: 'http//www.baidu.com',
type: 'GET',
data: {'k1':'v1'},
dataType: 'JSON',
success:function(arg){
// arg是对象
}
})
$.ajax({
url: 'http//www.baidu.com',
type: 'GET',
data: {'k1':[1,2,3,4]},
dataType: 'JSON',
success:function(arg){
// arg是对象
}
})
发送数据时：
data中的v
a. 只是字符串或数字
$.ajax({
url: 'http//www.baidu.com',
type: 'GET',
data: {'k1':'v1'},
dataType: 'JSON',
success:function(arg){
// arg是对象
}
})
b. 包含属组
$.ajax({
url: 'http//www.baidu.com',
type: 'GET',
data: {'k1':[1,2,3,4]},
dataType: 'JSON',
traditional: true, //// 要加这一句
success:function(arg){
// arg是对象
}
})
c. 传字典，或者将其转换成字符串
b. 包含属组
$.ajax({
url: 'http//www.baidu.com',
type: 'GET',
data: {'k1': JSON.stringify({}) },
dataType: 'JSON',
success:function(arg){
// arg是对象
}
})
3. 事件委托
$('要绑定标签的上级标签').on('click','要绑定的标签',function(){})
$('要绑定标签的上级标签').delegate('要绑定的标签','click',function(){})
4. 编辑
5. 总结
新URL方式： //也就是跳转到新页面的方式
- 独立的页面
- 数据量大或条目多
对话框方式：
- 数据量小或条目少
-增加，编辑
- Ajax: 考虑，当前页；td中自定义属性
- 页面（***）
删除：
对话框
这个就到这里了。路漫漫其修远兮
django 分页
补充：
写一个对页面分页的类，django的内置分页太丑了
# tests.py 文件，建立自定制的类
class couPaginator(object):
def __init__(self,totalCount,CurrentPage,perPageItemNum=30,maxPageNum=8):
# 数据总个数
self.total_count = totalCount
# 当前页
self.current_page = CurrentPage
# 每页最多显示的条数
self.per_page_item_num = perPageItemNum
# 最多显示页面
self.max_page_num = maxPageNum
self.check()
def check(self): # 检查数据，
try:
self.total_count = int(self.total_count)
self.current_page = int(self.current_page)
if self.current_page > self.num_pages: # 如果当前页大于最大页数
self.current_page=self.num_pages
if self.current_page <= 1: # 如果当前页小于等于1
self.current_page=1
except Exception as e:
pass
@property # 装饰器，可以使得函数不加 () 直接调用
def num_pages(self):
a,b=divmod(self.total_count,self.per_page_item_num) # 总数目/每页显示数据，返回整除和余数
if b==0:
return a
else:
return a+1
def start(self): # 返回 开始
return (self.current_page-1)*self.per_page_item_num
def end(self): # 返回结束
return self.current_page*self.per_page_item_num
@property
def pager_num_range(self): # 这个是分页函数，也就是页面下面的一排跳转页面
if self.num_pages <= self.max_page_num:
return range(1,self.num_pages+1)
if self.current_page <= self.max_page_num/2:
return range(1,self.max_page_num+1)
part = int(self.max_page_num/2)
if self.current_page+part>=self.num_pages+1:
return range(self.num_pages-self.max_page_num+1,self.num_pages+1)
return range(self.current_page-part,self.current_page+part)
def page_str(self): # 对上面的分页函数转成html，可以直接在模版渲染出来，不用再做另外的转换
test_list=[]
if self.current_page==1:
prev = "<li><a href='#'>上一页</a></li>"
else:
prev = "<li><a href='/index2?p=%s'>上一页</a></li>" %(self.current_page-1)
if self.current_page==self.max_page_num:
next = "<li><a href='#'>下一页</a></li>"
else:
next = "<li><a href='/index2?p=%s'>下一页</a></li>" %(self.current_page+1)
test_list.append(prev)
test_list.append(next)
for i in self.pager_num_range:
if i == self.current_page:
temp = "<li class='active'><a href='/index2?p=%s'>%s</a></li>" %(i,i)
else:
temp = "<li><a href='/index2?p=%s'>%s</a></li>" %(i,i)
test_list.append(temp)
first = "<li><a href='/index2?p=1'>首页</a></li>"
last = "<li><a href='/index2?p=%s'>尾页</a></li>" %(self.num_pages)
test_list.append(first)
test_list.append(last)
return ' '.join(test_list)
模版文件
# index2.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/bootstrap.css">
</head>
<body>
{% for foo in data %}
<p>{{ foo.name }} - {{ foo.age }}</p>
{% endfor %}
<ul class="pagination">
{{ test.page_str|safe }}
</ul>
</body>
</html>
视图函数
# 视图函数，views.py 文件
test_list = [] # 创建数据
for i in range(999):
temp = {'name':'root'+str(i),'age':i}
test_list.append(temp)
def index2(request):
p = request.GET.get("p")
from app01.tests import couPaginator
test = couPaginator(999,p,perPageItemNum=10)
return render(request,"index2.html",{
"data":test_list[test.start():test.end()],
"test":test,
})
不要忘记在 urls.py 文件中添加路由导航，还有要在静态文件下添加bootstrap 文件，静态文件目录也需要配置
2.分页组件
- Django内置分页
- Paginator、 Page
- 页面：include
- 扩展Django的内置分页
- CustomPaginator(Paginator)
传入：
- 所有数据
- 当前页
- 每页显示30条
- 最多页面7个
- 自定义分页
传入：
- 所有数据的个数
- 当前页
- 每页显示30条
- 最多页面7个
form 表单验证，基本
调用 django 内置的 Form 组件，对前端的输入进行验证和返回错误提示信息，
# views.py 文件下的
from django import forms
from django.forms import fields
class F1form(forms.Form):
user = fields.CharField(
max_length=18, # 最长
min_length=6, # 最短
required=True, # 限制不能为空
error_messages={ # 自定制返回到前端的错误提示信息
"required": "用户名不能为空",
"max_length": "用户名太长",
"min_length": "用户名太短",
}
)
pwd = fields.CharField(
min_length=32,
required=True,
error_messages={
"min_length": "最短32个字符",
"required": "密码不能为空",
}
)
age = fields.IntegerField(
required=True,
error_messages={
"required": "年龄不能为空",
"invalid": "必须为数字",
}
)
email = fields.EmailField(
required=True,
error_messages={
"required": "邮箱不能为空",
"invalid": "邮箱格式错误",
}
)
def fm(request):
if request.method == "GET":
return render(request,"fm.html")
if request.method == "POST":
# user = request.POST.get("user")
# age = request.POST.get("age")
# pwd = request.POST.get("pwd")
# email = request.POST.get("email")
# print(user,age,pwd,email)
obj = F1form(request.POST)
if obj.is_valid():
print(obj.cleaned_data) # 验证通过获取到用户输入的数据
else:
print(obj.errors) # 验证失败返回错误信息
return render(request,"fm.html",{"obj":obj})
前端的html文件
# fm.html 文件，用obj.errors.user.0 来取到user错误信息的第一个，因为一个输入框会不止一个错误提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/bootstrap.css">
</head>
<body>
<form action="/fm.html/" method="post" id="fm">
<p><input type="text" name="user" placeholder="user">{{ obj.errors.user.0 }}</p>
<p><input type="text" name="pwd" placeholder="pwd">{{ obj.errors.pwd.0 }}</p>
<p><input type="text" name="age" placeholder="age">{{ obj.errors.age.0 }}</p>
<p><input type="text" name="email" placeholder="email">{{ obj.errors.email.0 }}</p>
<p><input type="submit" value="提交" class="btn btn-primary"></p>
</form>
</body>
</html>
在URL路由文件urls.py 文件下要添加路径导航，
path('fm.html/', views.fm),
要注释掉 form 的锁 csrf
django内置的 forms 还能自己生成html代码，也就是输入框，所以， views.py 和 fm.html 文件也可以改成下面的，
# views.py 文件
def fm(request):
if request.method == "GET":
obj = F1form() # 改动的地方
return render(request,"fm.html",{"obj":obj}) # 还有这里
if request.method == "POST":
# user = request.POST.get("user")
# age = request.POST.get("age")
# pwd = request.POST.get("pwd")
# email = request.POST.get("email")
# print(user,age,pwd,email)
obj = F1form(request.POST)
if obj.is_valid():
print(obj.cleaned_data)
else:
print(obj.errors)
return render(request,"fm.html",{"obj":obj})
# html 文件中的 input 输入框就可以用 django 中的来代替了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/bootstrap.css">
</head>
<body>
<form action="/fm.html/" method="post" id="fm">
<p>{{ obj.user }}{{ obj.errors.user.0 }}</p>
<p>{{ obj.pwd }}{{ obj.errors.pwd.0 }}</p>
<p>{{ obj.age }}{{ obj.errors.age.0 }}</p>
<p>{{ obj.email }}{{ obj.errors.email.0 }}</p>
<p><input type="submit" value="提交" class="btn btn-primary"></p>
</form>
</body>
</html>
form 也可以验证ajax提交的数据，因为ajax提交的数据到服务器也是用post提取的，（具体看你ajax中type的设置了）
Form组件
- 对用户请求的验证
- AJax
- Form
- 生成HTML代码
a. 创建一个类
b. 类中创建字段（包含正则表达式）
c. GET
obj = Fr()
obj.user = > 自动生成HTML
d. POST
obj = Fr(request.POST)
if obj.is_valid():
obj.cleaned_data
else:
obj.errors
return .... obj
form 提交数据，验证数据的有效性，
我们可以自定制正则，也可以用django内置的规则，
# models.py 创建一个表格
from django.db import models
# Create your models here.
class userInfo(models.Model):
username = models.CharField(max_length=32)
email = models.EmailField(max_length=32)
# urls.py
from django.contrib import admin
from django.urls import path
from app01 import views
from django.conf.urls import url
urlpatterns = [
path('admin/', admin.site.urls),
path('users/', views.users),
path('add_user/', views.add_user),
url("^edit_user-(\d)$", views.edit_user), #这个是之前版本的路由导航
]
# fm.py 自创建的文件，放置 form 类
from django import forms
from django.forms import fields
class UserForm(forms.Form):
username = fields.CharField(
max_length=32,
required=True,
error_messages={ # 自定制错误提示信息
"required":"请输入用户名",
"max_length": "必须输入32个字符",
}
)
email = fields.EmailField(
required=True,
error_messages={
"required": "必须输入邮箱",
"invalid": "不是正确的邮箱格式",
}
)
# views.py
from django.shortcuts import render
from django.shortcuts import redirect
from app01 import models
from app01 import fm
def users(request): # 返回所有的数据，也就是所有表格的信息
data_list = models.userInfo.objects.all()
return render(request,"users.html",{"data_list":data_list})
def add_user(request): # 添加数据，跳转到add_user.html,
if request.method == "GET":
obj = fm.UserForm()
return render(request,"add_user.html",{"obj":obj})
if request.method == "POST": # post 接收数据，用form检测格式
obj = fm.UserForm(request.POST)
if obj.is_valid():
print(obj.cleaned_data)
models.userInfo.objects.create(**obj.cleaned_data) # 检测通过创建数据
return redirect("/users.html")
else:
return render(request,"add_user.html",{"obj":obj}) # 错误提示，返回错误信息
def edit_user(request,nid): # 编辑信息，使用form为我们写好的生成html，在edit_user.html中
if request.method == "GET":
data = models.userInfo.objects.filter(id=nid)[0] # nid 在ulrs.py 文件正则取得
obj = fm.UserForm({"username":data.username,"email":data.email})
return render(request,"edit_user.html",{"obj": obj,"nid":nid})
if request.method == "POST":
obj = fm.UserForm(request.POST)
if obj.is_valid():
print(obj.cleaned_data)
models.userInfo.objects.filter(id=nid).update(**obj.cleaned_data)
return redirect("/users")
else:
print(obj.errors) # 记得，返回错误信息时还要返回一次nid
return render(request,"edit_user.html",{"obj":obj,"nid":nid})
# users.html ----》user 函数（对应）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="/add_user/">添加</a>
{% for foo in data_list %}
<p>
<span> {{ foo.id }} </span>
<span> {{ foo.username }} </span>
<span> {{ foo.email }} </span>
<a href="/edit_user-{{ foo.id }}">编辑</a>
</p>
{% endfor %}
</body>
</html>
# add_user.html ----》add_user 函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/add_user/" method="post" novalidate>
<p>{{ obj.username }}{{ obj.errors.username.0 }}</p>
<p>{{ obj.email }}{{ obj.errors.email.0 }}</p>
<input type="submit">
</form>
</body>
</html>
# edit_user.html ----》edit_user
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/edit_user-{{ nid }}" method="post" novalidate>
<p>{{ obj.username }}{{ obj.errors.username.0 }}</p>
<p>{{ obj.email }}{{ obj.errors.email.0 }}</p>
<input type="submit" value="提交">
</form>
</body>
</html>
Form组件
- form表单（验证；保留上次内容）
-
- Ajax（验证；无需上次内容）
- 返回HttpResponse
- 前端：跳转或错误信息
所谓的扩展
1. Form组件扩展：
1.简单扩展
利用Form组件自带的正则扩展：
a. 方式一
from django.forms import Form
from django.forms import widgets
from django.forms import fields
from django.core.validators import RegexValidator
class MyForm(Form):
user = fields.CharField(
error_messages={'invalid': '...'},
validators=[RegexValidator(r'^[0-9]+$', '请输入数字'), RegexValidator(r'^159[0-9]+$', '数字必须以159开头')],
)
b. 方式二
from django.forms import Form
from django.forms import widgets
from django.forms import fields
from django.core.validators import RegexValidator
class MyForm(Form):
user = fields.RegexField(r'^[0-9]+$',error_messages={'invalid': '...'})
2.基于源码流程
a. 单字段
from django.core.exceptions import NON_FIELD_ERRORS, ValidationError
class AjaxForm(forms.Form):
username = fields.CharField()
user_id = fields.IntegerField(
widget=widgets.Select(choices=[(0,'alex'),(1,'刘皓宸'),(2,'杨建'),])
)
# 自定义方法 clean_字段名
# 必须返回值self.cleaned_data['username']
# 如果出错：raise ValidationError('用户名已存在')
def clean_username(self):
v = self.cleaned_data['username']
if models.UserInfo.objects.filter(username=v).count():
# 整体错了
# 自己详细错误信息
raise ValidationError('用户名已存在')
return v
def clean_user_id(self):
return self.cleaned_data['user_id']
b. 整体错误验证
class AjaxForm(forms.Form):
username = fields.CharField()
user_id = fields.IntegerField(
widget=widgets.Select(choices=[(0,'alex'),(1,'刘皓宸'),(2,'杨建'),])
)
# 自定义方法 clean_字段名
# 必须返回值self.cleaned_data['username']
# 如果出错：raise ValidationError('用户名已存在')
def clean_username(self):
v = self.cleaned_data['username']
if models.UserInfo.objects.filter(username=v).count():
# 整体错了
# 自己详细错误信息
raise ValidationError('用户名已存在')
return v
def clean_user_id(self):
return self.cleaned_data['user_id']
def clean(self):
value_dict = self.cleaned_data
v1 = value_dict.get('username')
v2 = value_dict.get('user_id')
if v1 == 'root' and v2==1:
raise ValidationError('整体错误信息')
return self.cleaned_data
PS: _post_clean
form结束了，就这些东西，扩展也并不是很多内容
2. Django序列化
a.对象
b.字典
c.元祖
===================================
首先能完成任务，
亮点，分为两种，一参加过某种大型的架构，二某种东西研究得特别深，那就研究，
1.笔试：
2.面试
方向：
- 基础
- 亮点
基础：
1.设计程序
2.开发
亮点：
某框架的源码：
Tornado - 异步非堵塞（IO多路复用）
关于序列化问题，也就是 Queryset 类型转成 json 类型，可以参考
博客：http://www.cnblogs.com/wupeiqi/articles/5246483.html
http://www.cnblogs.com/wupeiqi/articles/6144178.html
今天在简书编辑后丢了很多东西，好气啊
关于 NON_FIELD_ERRORS，也就是 all 了，下面是一个补充：
from django.shortcuts import render
from django.shortcuts import HttpResponse
from app01 import models
from django import forms
from django.forms import fields
from django.forms import widgets
from django.core.exceptions import ValidationError
class LoginForm(forms.Form):
username = fields.CharField(
max_length=32,
required=True,
error_messages={
'required':'请输入用户名',
'max_length':'最长输入32个字符',
},
widget=widgets.TextInput()
)
# def clean_username(self):
# v1 = self.cleaned_data['username']
# v2 = models.User.objects.filter(username=v1).first()
# if not v2:
# raise ValidationError("用户名错误") # 这个引发的错误会在errors.username显示
# return v1
password = fields.CharField(
max_length=32,
required=True,
error_messages={
'required':'请输入密码',
'max_length':'最长输入32个字符'
},
widget=widgets.PasswordInput()
)
def clean(self):
v1 = self.cleaned_data.get('username')
v2 = self.cleaned_data.get('password')
obj = models.User.objects.filter(username=v1).first()
if not obj:
raise ValidationError("用户名错误")
elif obj.password != v2:
raise ValidationError("密码错误")
return self.cleaned_data
from django.core.exceptions import NON_FIELD_ERRORS
def login(request):
if request.method == "GET":
obj = LoginForm()
return render(request,"login.html",{"obj":obj})
else:
obj = LoginForm(request.POST)
all_code = None
if obj.is_valid():
print(obj.cleaned_data)
return HttpResponse("登陆成功")
else:
print(obj.errors)
all_code = obj.errors[NON_FIELD_ERRORS]
# 在 template中没有 NON_FIELD_ERRORS，我只想到这个办法来传过去
return render(request,"login.html",{"obj":obj,"all_code":all_code})
