django（7）modelform操作及验证、ajax操作普通表单数据提交、文件上传、富文本框基本使用

一、modelForm操作及验证

1.获取数据库数据，界面展示数据并且获取前端提交的数据，并动态显示select框中的数据

views.py

from django.shortcuts import render,HttpResponse
from app01 import models

from django import forms
from django.forms import fields as Ffields
from django.forms import widgets as Fwidgets
class UserInfoModelForm(forms.ModelForm):
class Meta:#必须添加
model = models.UserInfo#指定去UserInfo表里获取数据
fields = '__all__'  #在界面显示所有字段
# fields =  ['username','email']#只在界面显示'username','email'字段
# exclude = ['username']  #不在界面显示'username'字段

class UserInfoForm(forms.Form):
username = Ffields.CharField(max_length=32)
email = Ffields.EmailField()
user_type = Ffields.ChoiceField(
choices=models.UserType.objects.values_list('id','caption')#以'id','caption'为select框中的数据
)

def __init__(self, *args, **kwargs):
super(UserInfoForm,self).__init__(*args, **kwargs)
self.fields['user_type'].choices = models.UserType.objects.values_list('id','caption')#加上这个init函数
#后，就能将新添加到数据库中的数据动态显示到select框啦

def index(request):
if request.method == "GET":#将数据展示在界面
obj = UserInfoModelForm()
return render(request,'index.html',{'obj': obj})
elif request.method == "POST":#获取前端提交的数据
obj = UserInfoModelForm(request.POST)
if obj.is_valid():#obj.is_valid()只能为true或false
print(obj.is_valid())
print(obj.cleaned_data) #obj.cleaned_data以字典的形式展示前端提交的数据
print(obj.errors.as_json())#打印错误信息
return render(request,'index.html',{'obj': obj})

index.html

#!/usr/bin/env python
# -*- coding:utf-8 -*-

import random
from PIL import Image, ImageDraw, ImageFont, ImageFilter

_letter_cases = "abcdefghjkmnpqrstuvwxy"  # 小写字母，去除可能干扰的i，l，o，z
_upper_cases = _letter_cases.upper()  # 大写字母
_numbers = ''.join(map(str, range(3, 10)))  # 数字
init_chars = ''.join((_letter_cases, _upper_cases, _numbers))

def create_validate_code(size=(120, 30),
chars=init_chars,
img_type="GIF",
mode="RGB",
bg_color=(255, 255, 255),
fg_color=(0, 0, 255),
font_size=18,
font_type="Monaco.ttf",
length=4,
draw_lines=True,
n_line=(1, 2),
draw_points=True,
point_chance=2):
"""
@todo: 生成验证码图片
@param size: 图片的大小，格式（宽，高），默认为(120, 30)
@param chars: 允许的字符集合，格式字符串
@param img_type: 图片保存的格式，默认为GIF，可选的为GIF，JPEG，TIFF，PNG
@param mode: 图片模式，默认为RGB
@param bg_color: 背景颜色，默认为白色
@param fg_color: 前景色，验证码字符颜色，默认为蓝色#0000FF
@param font_size: 验证码字体大小
@param font_type: 验证码字体，默认为 ae_AlArabiya.ttf
@param length: 验证码字符个数
@param draw_lines: 是否划干扰线
@param n_lines: 干扰线的条数范围，格式元组，默认为(1, 2)，只有draw_lines为True时有效
@param draw_points: 是否画干扰点
@param point_chance: 干扰点出现的概率，大小范围[0, 100]
@return: [0]: PIL Image实例
@return: [1]: 验证码图片中的字符串
"""

width, height = size  # 宽高
# 创建图形
img = Image.new(mode, size, bg_color)
draw = ImageDraw.Draw(img)  # 创建画笔

def get_chars():
"""生成给定长度的字符串，返回列表格式"""
return random.sample(chars, length)

def create_lines():
"""绘制干扰线"""
line_num = random.randint(*n_line)  # 干扰线条数

for i in range(line_num):
# 起始点
begin = (random.randint(0, size[0]), random.randint(0, size[1]))
# 结束点
end = (random.randint(0, size[0]), random.randint(0, size[1]))
draw.line([begin, end], fill=(0, 0, 0))

def create_points():
"""绘制干扰点"""
chance = min(100, max(0, int(point_chance)))  # 大小限制在[0, 100]

for w in range(width):
for h in range(height):
tmp = random.randint(0, 100)
if tmp > 100 - chance:
draw.point((w, h), fill=(0, 0, 0))

def create_strs():
"""绘制验证码字符"""
c_chars = get_chars()
strs = ' %s ' % ' '.join(c_chars)  # 每个字符前后以空格隔开

font = ImageFont.truetype(font_type, font_size)
font_width, font_height = font.getsize(strs)

draw.text(((width - font_width) / 3, (height - font_height) / 3),
strs, font=font, fill=fg_color)

return ''.join(c_chars)

if draw_lines:
create_lines()
if draw_points:
create_points()
strs = create_strs()

# 图形扭曲参数
params = [1 - float(random.randint(1, 2)) / 100,
0,
0,
0,
1 - float(random.randint(1, 10)) / 100,
float(random.randint(1, 2)) / 500,
0.001,
float(random.randint(1, 2)) / 500
]
img = img.transform(size, Image.PERSPECTIVE, params)  # 创建扭曲

img = img.filter(ImageFilter.EDGE_ENHANCE_MORE)  # 滤镜，边界加强（阈值更大）

return img, strs

View Code
views.py

#!/usr/bin/env python
# -*- coding:utf-8 -*-
from io import BytesIO
from django.shortcuts import HttpResponse
from django.shortcuts import render
from utils.check_code import create_validate_code

def check_code(request):#该函数对应login.html中的src=/check_code.html
"""
验证码
:param request:
:return:
"""
# stream = BytesIO()
# img, code = create_validate_code()
# img.save(stream, 'PNG')
# request.session['CheckCode'] = code
# return HttpResponse(stream.getvalue())

# data = open('static/imgs/avatar/20130809170025.png','rb').read()
# return HttpResponse(data)

# 1. 创建一张图片 pip3 install Pillow
# 2. 在图片中写入随机字符串
# obj = object()
# 3. 将图片写入到制定文件
# 4. 打开制定目录文件，读取内容
# 5. HttpResponse(data)

stream = BytesIO()#生成一个内存对象
img, code = create_validate_code() #生成图片和验证码
img.save(stream,'PNG')#将图片保存到内存中，格式为png
request.session['CheckCode'] = code  #将验证码放到session里
return HttpResponse(stream.getvalue())#stream.getvalue()将图片从内存中取出，返回给前端

def login(request):
"""
登陆
:param request:
:return:
"""
# if request.method == "POST":
#     if request.session['CheckCode'].upper() == request.POST.get('check_code').upper():
#         pass
#     else:
#         print('验证码错误')
if  request.method == 'POST':
code = request.POST.get('check_code')
if code.upper() == request.session['CheckCode'].upper():
print('验证码正确')
else:
print('验证码错误')
return render(request, 'login.html')

def register(request):
"""
注册
:param request:
:return:
"""
return render(request, 'register.html')

def logout(request):
"""
注销
:param request:
:return:
"""
pass

login.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="/static/css/edmure.css"/>
<link rel="stylesheet" href="/static/css/commons.css"/>
<link rel="stylesheet" href="/static/css/account.css"/>
<style>

</style>
</head>
<body>
<div class="login">
<div style="font-size: 25px; font-weight: bold;text-align: center;">
用户登陆
</div>
<form role="form" action="/login.html" method="POST">
{% csrf_token %}
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control"  placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control"  placeholder="请输入密码">
</div>
<div class="form-group">
<label for="password">验证码</label>

<div class="row">
<div class="col-xs-7">
<input type="text" class="form-control" placeholder="请输入验证码" name="check_code">
</div>
<div class="col-xs-5">
<img src="/check_code.html" onclick="changeCheckCode(this);">
#绑定事件，点击图片生成新的验证码
</div>
</div>

</div>
<div class="checkbox">
<label>
<input type="checkbox"> 一个月内自动登陆
</label>
<div class="right">
<a href="#">忘记密码？</a>
</div>
</div>
<button type="submit" class="btn btn-default">登 陆</button>
</form>
</div>
<script>
function changeCheckCode(ths){
ths.src = ths.src +  '?';
{#            通过在url后边加问号的形式，实现点击验证码图片刷新页面获取新的验证码#}

}
</script>
</body>
</html>

五、富文本框使用

http://www.cnblogs.com/wupeiqi/articles/6307554.html 视频24天-17-KindEditor基本使用和文件操作