一、项目说明
学习django版本1.8.2,把之前零散学习的知识整合下，主要涉及到：
项目开始，ajax数据调用，注册，数据录入，数据修改，数据删除，数据建模等完成一个完整的前后台功能简单的web。数据库默认用sqlite
1、创建djano项目：
|
1
2
3
4
5
|
$
cd
/data1/DjangoProject/
$django-admin startproject School
$
cd
School
$python manage.py startapp student
$
mkdir
template static
|
用pycharm打开School项目结构如图：
2、基础配置
$cd /data1/DjangoProject/School/School
$vim settings.py
添加App student 如图：
修改template路径 如图：
修改static 路径 如图：
3、数据库(sqlite)建模：
在student目录下新建 models.py内容如下：
|
1
2
3
4
5
6
7
8
9
10
11
|
#coding:utf-8
from
django.db
import
models
# Create your models here.
class
Student(models.Model):
name
=
models.CharField(max_length
=
32
,verbose_name
=
"姓名"
)
Gender
=
models.CharField(max_length
=
16
, verbose_name
=
"性别"
)
Age
=
models.IntegerField(verbose_name
=
"年龄"
)
Birthday
=
models.DateField(verbose_name
=
"生日"
)
Grade
=
models.CharField(max_length
=
32
, verbose_name
=
"年级"
)
subject
=
models.CharField(max_length
=
32
, verbose_name
=
"专业"
)
city
=
models.CharField(max_length
=
32
, verbose_name
=
"城市"
)
|
4、同步数据库
$/data1/DjangoProject/School
$python manage.py validate 如图：
$python manage.py makemigrations 如图：
$python manage.py syncdb 如图：
二、完成注册功能register.html
1、form表单定义：
在student app目录下创建form.py 内容如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
#coding:utf-8
from
django
import
forms
class
StudentForm(forms.Form):
name
=
forms.CharField(max_length
=
32
,label
=
"姓名"
,widget
=
forms.TimeInput(attrs
=
{
"class"
:
"form-contorl"
}))
Gender
=
forms.CharField(max_length
=
16
, label
=
"性别"
,widget
=
forms.TimeInput(attrs
=
{
"class"
:
"form-contorl"
}))
Age
=
forms.IntegerField(label
=
"年龄"
,widget
=
forms.TimeInput(attrs
=
{
"class"
:
"form-contorl"
}))
#required = False 表示可为空
Birthday
=
forms.DateField(label
=
"生日"
,widget
=
forms.TimeInput(attrs
=
{
"class"
:
"form-contorl"
}),required
=
False
)
Grade
=
forms.CharField(max_length
=
32
, label
=
"年级"
,widget
=
forms.TimeInput(attrs
=
{
"class"
:
"form-contorl"
}))
subject
=
forms.CharField(max_length
=
32
, label
=
"专业"
,widget
=
forms.TimeInput(attrs
=
{
"class"
:
"form-contorl"
}))
city
=
forms.CharField(max_length
=
32
, label
=
"城市"
,widget
=
forms.TimeInput(attrs
=
{
"class"
:
"form-contorl"
}))
def
clean_name(
self
):
##函数名必须是clear_上面的字段 固定格式
name
=
self
.cleaned_data[
"name"
]
if
name[
0
].isalpha():
return
name
else
:
raise
forms.ValidationError(
"The first must be character."
)
|
2、简单register.html
在template目录创建register.html刚开始内容可为空
3、为register.hmtl创建视频和路由
视图views.py中定义register视图函数内容如下:
|
1
2
3
4
5
6
7
8
|
#coding:utf-8
from
models
import
Student
from
form
import
StudentForm
from
django.shortcuts
import
render
from
django.shortcuts
import
render_to_response
# Create your views here.
def
register(request):
return
render(request,
"register.html"
,
locals
())
|
在/data1/DjangoProject/School/School/urls.py中添加 内容如下图：
开启项目访问：http://127.0.0.1:8000/register 得到一个空白页
三、完善register.html
1、在/data1/DjangoProject/School/static/目录下分别创建 css目录放入bootstrap.min.css
js目录放入jquery-3.1.1.min.js vue.min.js img目录中有两张图片， 目录结构如图:
以上内容主到http://down.51cto.com/data/2334389下载
2、register.html网页内容
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>用户注册</
title
>
<
script
type
=
"text/javascript"
src
=
"/static/js/jquery-3.1.1.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"/static/js/vue.min.js"
></
script
>
<
link
rel
=
"stylesheet"
href
=
"/static/css/bootstrap.min.css"
type
=
"text/css"
>
}
</
head
>
<
body
background
=
"/static/img/bg2.png"
>
<
h1
style
=
"text-align: center;color:white"
>
Student Register
<
hr
/>
</
h1
>
<
form
class
=
"form-inline"
style
=
"text-align: center"
method
=
"post"
>
{% csrf_token %}
<!-- post方法csrf 标识 -->
{{ sForm.as_p }}
<
input
class
=
"form-control"
type
=
"submit"
value
=
"注册"
>
</
form
>
<!--ajax 表单验证用户名-->
<
script
>
$(
function () {
$("#id_name").blur(
function () {
var name = $("#id_name").val()
$.ajax(
{
url:"/valide_name/",
type:"get",
data:{"name":name},
success:function (data) {
// $("#id_name").val("name is exsit")
console.log(data)
},
error:function (err) {
console.log(err)
}
}
)
}
)
}
)
</
script
>
</
body
>
</
html
>
|
3、修改views.py中的register视图函数
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
#coding:utf-8
from
models
import
Student
from
form
import
StudentForm
from
django.http
import
JsonResponse
from
django.shortcuts
import
render
from
django.shortcuts
import
render_to_response
# Create your views here.
def
register(request):
if
request.method
=
=
"POST"
and
request.POST:
#判断提交的数据方式是Post并且有数据
sForm
=
StudentForm(request.POST)
#将post数据交给form表单进行验证
if
sForm.is_valid():
#判断form表单提交的数据是否正确
clean_data
=
sForm.cleaned_data
#获取验证过的数据
s
=
Student()
s.name
=
clean_data[
"name"
]
s.Gender
=
clean_data[
"Gender"
]
s.Age
=
clean_data[
"Age"
]
s.Birthday
=
clean_data[
"Birthday"
]
s.Grade
=
clean_data[
"Grade"
]
s.subject
=
clean_data[
"subject"
]
s.city
=
clean_data[
"city"
]
s.save()
else
:
pass
else
:
sForm
=
StudentForm()
return
render(request,
"register.html"
,
locals
())
#对name值限制必须以字符开头,函数固定格式valide_field
def
valide_name(request):
if
request.method
=
=
"GET"
and
request.GET:
name
=
request.GET[
'name'
]
if
Student.objects.
filter
(name
=
name):
# if name == id_name:
name
=
"we have a %s"
%
name
else
:
name
=
name
else
:
name
=
"No name"
result
=
{
"data"
:name}
return
JsonResponse(result)
|
四、访问验证
打开浏览器访问http://172.16.3.140:8000/register/如图：添加几条测试数据
类似添加完几条后打开sqlite数据库数据如下：
2、验证ajax对name的焦点移开请求验证是否存在
打开浏览器F12调试功能
先再次输入san 移开鼠标 会看到console中出现we have san 如图：
换成其他的用户名如 ling520如图：
到此一个带sqlite数据库 结合django 的注册页面 通过 ajax完成验证功能完成，其他内容后续补充。
