#前言:
该项目的目的是做一个类似管理数据的系统,主要训练的是将数据库、前端、后端很好的对接起来,并且可以实现在前端页面就可以对数据进行一个增删改查,内容很详细,代码多有注释,建议先将我下面提及到的文件导入,再看代码会更加详细。如若有需要改正的地方,欢迎各位前来指正。后续会继续更新好文,欢迎大家前来关注!
一、项目前期配置准备:
1、配置数据库引擎:
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'booksystem',
'HOST':'127.0.0.1',
'USER':'root',
'PASSWORD':' '
}
}
2、配置静态文件的检索路径,在项目的根目录中创建 static 文件:
同样是在setting.py文件中:
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
创建文件:
3、导入 html 模板文件 和 静态文件数据:
导入静态文件数据:
静态文件数据在我的百度网盘中有:需要的可以直接去拿。
链接:https://pan.baidu.com/s/1teodItF9woC8EN5HuJ05zA
提取码:abmd
(注意将文件拿到后直接拖拽到static里面即可)
里面的代码:关于背景图之类的可以自行更改。
导入html模板文件:
关于html文件,我也已经有写的初版,可以先行将其导入。
在我的百度网盘可以自行免费拿:
链接:https://pan.baidu.com/s/1Xx54Z5yrrSv5DdOCBX0JxA
提取码:ammd
二、用户注册:
1、响应用户注册页面的视图:
class RegisterView(View):
'''
用户注册视图
'''
def get(self , request):
# 响应注册页面
return render(request , 'register.html')
2、定义用户数据模型类 , 保存用户注册的个人数据信息:
class User(models.Model):
'''
保存用户注册数据
'''
username = models.CharField(max_length=20)
password = models.IntegerField()
email = models.EmailField()
3、设置后端对用户注册数据进行验证,在对应的应用下创建一个 forms 的文件,实现数据验证:
注意,这里的forms文件中,主要是对在注册页面输入的数据进行验证是否符合规则,此时还没有与数据库进行对接。
而如何与视图文件响应,就是在类视图的将post请求得到的数据传输给forms组件中用来检测的类,然后调用。
注意,下述代码中:
首先,要对用户名,密码,再次输入密码进行验证长度是否正确。
其次,验证两次输入的密码是否一致。
最后验证邮箱的格式与用户名的格式。(用户名的格式采用的是正则表达式,而邮箱格式采用forms.EmailField,可以自行验证。)
from django import forms
import re
class RegisterForm(forms.Form):
'''
验证用户注册数据
'''
username = forms.CharField(max_length=15 , min_length=3,
error_messages={
"max_length":"用户名长度超出",
"min_length":"用户名长度不足",
"required":"用户名不允许为空",
})
password = forms.CharField(max_length=15 , min_length=6,
error_messages={
"max_length":"密码长度超出",
"min_length":"密码长度不足",
"required":"密码不允许为空",
})
resetpw = forms.CharField(max_length=15 , min_length=6,
error_messages={
"max_length":"密码长度超出",
"min_length":"密码长度不足",
"required":"密码不允许为空",
})
email = forms.EmailField(error_messages={'invalid':'邮箱格式不正确',
'required':'邮箱不允许为空'})
def clean_username(self):
name = self.cleaned_data.get("username")
if not re.match(r'^[A-Za-z0-9_]{3,15}$' , name):
self.add_error('username' , '用户名格式不正确')
return name
def clean(self):
pwd1 = self.cleaned_data.get('password')
pwd2 = self.cleaned_data.get('resetpw')
if pwd1 != pwd2:
self.add_error('resetpw' , '两次密码不一致')
return self.cleaned_data
4、在注册视图中接收用户注册数据,进行数据验证:
这个验证主要是针对当用户输入注册的数据合理时候,是否已经符合注册规则,包括验证码的识别。
此时注册视图类变为:
class RegisterView(View):
'''
用户注册视图
'''
def get(self,request):
return render(request,'register.html')
#响应注册页面
def post(self,request):
#接收用户注册输入的数据
#传递给forms组件中进行数据验证
register_form=RegisterForm(request.POST)#先获取这个POST请求的所有数据,然后在下面再进行判断
#判断forms组件是否返回异常
if register_form.is_valid():
#获取数据
username=register_form.cleaned_data.get('username')
password=register_form.cleaned_data.get('password')
email=register_form.cleaned_data.get('email')
else:
return render(request,'register.html',locals())
#用户不合法,数据返回前端页面
此时在负责响应上面内容的register.html页面中:
当用户数据异常不合法的情况下 ,后端将异常信息返回到前端。
<div class="form-group">
<i class="fa fa-user" aria-hidden="true"></i>
用户名:<input class="form-control required" type="text" name="username" id="username"
placeholder="请输入用户名" required v-model="username" @blur="check_name">
<span style="color: #a94442" v-show="error_username">[[ error_name_message ]]</span>
</div>
<div class="form-group">
<i class="fa fa-key" aria-hidden="true"></i>
密码:<input class="form-control required" type="password" name="password" id="password" placeholder="请输入密码"
required v-model="password" @blur="check_password">
<span style="color: #a94442">{{ register_form.password.errors.0 }}</span>
</div>
<div class="form-group">
<i class="fa fa-check-circle-o" aria-hidden="true"></i>
确认密码:<input class="form-control required" type="password" name="resetpw" id="resetpw" placeholder="请确认密码"
required v-model="resetpw" @blur="check_resetpw">
<span style="color: #a94442">{{ register_form.resetpw.errors.0 }}</span>
</div>
<div class="form-group">
<i class="fa fa-envelope" aria-hidden="true"></i>
邮箱:<input class="form-control required" type="email" name="email" id="email" placeholder="请输入邮箱">
<span style="color: #a94442">{{ register_form.email.errors.0 }}</span>
</div>
<div class="form-group">
<i class="fa fa-envelope" aria-hidden="true"></i>
验证码:<input class="form-control required" type="text" name="image_code" id="image_code" placeholder="请输入验证码">
<img v-bind:src="image_code_url" class="img_code" @click="image_code">
<span style="color: red">{{ code_error }}</span>
</div>
注意这里涉及到vue了所以在下面body标签下导入script标签导入静态文件中的js内容:
<script src="/static/bootstrap-3.4.1-dist/js/vue-2.5.16.js"></script>
<script src="/static/bootstrap-3.4.1-dist/js/axios-0.18.0.min.js"></script>
<script src="/static/bootstrap-3.4.1-dist/js/register.js"></script>
5、实现图片验证码
注意:
关于验证码的实现我在这儿再次提及一下:详细在我上篇博客中有讲解。
1.在当前的应用下创建包 —— ImageCode:
2.实现验证码的视图:
from PIL import Image,ImageDraw,ImageFont
from random import randint,choice
import os
import io
def get_random_code():
# 随机数字
number = str(randint(0,9))
# 随机大写字母
upper = chr(randint(65 , 90))
# 随机小写字母
lower = chr(randint(97 , 122))
# 在生成的大小写字母和数字中随机获取一个
code = choice([number , upper , lower])
return code
def get_color():
return (randint(0,255),randint(0,255),randint(0,255))
def create_image():
# 创建图片对象
image = Image.new(mode="RGB", size=(120, 30), color=get_color())
# 创建画笔工具
draw = ImageDraw.Draw(image)
# 设置字体 , 导入字体文件,设置字体大小
dir=os.path.join(os.path.dirname(__file__),'fonts','COOPBL.TTF')
font = ImageFont.truetype(dir, 24)
# 制作图片噪点
# 噪点
for i in range(100):
# point([图片坐标] , fill颜色)
draw.point([randint(0, 180), randint(0, 30)], fill=get_color())
# 噪线
for i in range(10):
draw.line([randint(0, 180), randint(0, 30), randint(0, 180), randint(0, 30)], fill=get_color())
# 弧线
x = randint(0, 180)
y = randint(0, 30)
for i in range(10):
draw.arc([x, y, x + 1, y + 1], 0, 90, fill=get_color())
#定义一个变量用来拼接生成的验证码;
text=''
# 生成验证码
for i in range(4):
c = get_random_code()
# 将获取到的验证码写入到图片中
draw.text((10 + 30 * i, 2), text=c, fill=get_color(), font=font)
text+=c#拼接后的验证码
# 图片保存为文件,这里不需要保存 就把他保存到内存中
out=io.BytesIO()
image.save(out, format='png')
return out.getvalue(),text
create_image()
响应验证码:
def CodeImage(request):
# 响应图片验证码视图
# 获取图片验证码
image,text = create_image()
# session 会话
# 将验证码数据保存到 session 会话中, 这个会话是以键值对的方式保存
request.session['code'] = text
# 将图片验证码响应到页面
return HttpResponse(image, content_type='image/png')
path('image_code/',views.CodeImage)
6、前端的数据校验,使用 vue 的框架进行数据校验:
在标签中板顶数据信息 , 以及对文本框绑定对应的方法
<div class="form-group">
<i class="fa fa-user" aria-hidden="true"></i>
用户名:<input class="form-control required" type="text" name="username" id="username"
placeholder="请输入用户名" required v-model="username" @blur="check_name">
<span style="color: red">{{ register_form.username.errors.0 }}</span>
</div>
在静态文件对应位置中创建 register.js 文件
在register.js文件中进行ajax请求以及数据验证:
let vm = new Vue({
el : '#app',
delimiters: ['[[' , ']]'],
data :{
username:'',
password:'',
resetpw:'',
image_code_url:'',
error_username:false,
error_password:false,
error_resetpw:false,
error_name_message:'',
},
// 这个方法会在 html 页面执行的时候 , 自动调用里面的内容
mounted(){
this.image_code();
},
// 定义检查方法
methods:{
// 生成图片验证码
image_code(){
// 短时间内路径一致的情况下,会无法响应成功
// 添加时间参数,保证在短时间内请求路由不一致
this.image_code_url = '/image_code/?'+ new Date().getTime()
},
// 验证用户名
check_name(){
// 定义用户名的规则范围
let re = /^[A-Za-z0-9_]{3,15}$/;
// 判断用户名是否满足定义的规则
if(re.test(this.username)){
// 用户名合法
this.error_username = false
} else {
// 用户名不合法
this.error_username = true;
this.error_name_message = '用户名不合法';
}
// 判断用户名是否重复
if(this.error_username == false){
// 发送 ajax 请求
axios.get(
'/count/'+this.username+'/',
{responseType:'json'}
)
// 请求成功
.then(response =>{
if (response.data.count > 0){
// 用户已存在
this.error_username = true;
this.error_name_message = '用户名已存在';
} else {
this.error_username = false;
}
})
// 请求失败
.catch(error => {
console.log(error.response)
})
}
},
// 校验密码
check_password(){
let re = /^[a-zA-Z0-9]{6,15}$/;
if(re.test(this.password)){
// 密码字符合法
this.error_password = false
} else {
this.error_password = true
}
},
// 校验两次密码输入是否一致
check_resetpw(){
if(this.password == this.resetpw){
this.error_resetpw = false
} else {
this.error_resetpw = true
}
}
}
})
7.校验用户名是否重复:
# 检查用户名重复
re_path('count/(?P<username>[A-Za-z0-9_]{3,15})/' , views.username_count),
def username_count(request , username):
# 从数据库中获取用户数据
count = User.objects.filter(username=username).count()
return JsonResponse({'code':200 , 'errmsg':"OK" , 'count':count})
此时的路由文件中:
path('admin/', admin.site.urls),
path('register/',views.RegisterView.as_view()),#用户注册
path('image_code/',views.CodeImage),#图片验证码
re_path('count/(?P<username>[A-Za-z0-9_]{3,15})/',views.username_count),#检查用户名重复
#这个路由是count/,而后面的内容是利用正则表达式将用户名传入校验过程,这个在register.js中将这个路由传递进去用了
此时的页面显示:
7、在注册视图中,实现图片验证码的校验:
def post(self , request):
# 接收用户注册输入的数据
# 传递给 forms 组件中进行数据验证
register_form = RegisterForm(request.POST)
# 判断 forms 组件是否有返回异常信息
if register_form.is_valid():
# 数据没问题,获取数据
username = register_form.cleaned_data.get('username')
password = register_form.cleaned_data.get('password')
email = register_form.cleaned_data.get('email')
# 获取用户输入的验证码
image_code = request.POST.get('image_code')
# 校验验证码,从 session 会话中获取保存的验证码
code = request.session['code']
if image_code == code:
# 验证码正确,将数据保存到数据库中,注册成功 ;否则注册失败
User.objects.create(username=username , password=password , email=email)
# 注册成功响应到登录页
return redirect('/login/')
else:
# 验证码错误
return render(request, 'register.html', {'code_error':'验证码错误'})
else:
# 用户数据不合法 , 将异常信息返回给前端页面
return render(request , 'register.html' , locals())
在验证了用户名密码验证码等之后,会将其传入一开始创建的数据库中。
三、用户登录:
1、用户登录视图:
# 用户登录
path('login/' , views.LoginView.as_view()),
class LoginView(View):
'''
用户登录
'''
def get(self , request):
return render(request , 'login.html')
2、接收用户登录的数据:
class LoginView(View):
'''
用户登录
'''
def get(self , request):
return render(request , 'login.html')
def post(self , request):
login_form = LoginForm(request.POST)
if login_form.is_valid():
username = login_form.cleaned_data.get('username')
password = login_form.cleaned_data.get('password')
# 到数据库进行查询用户数据是否存在
user = User.objects.filter(username=username , password=password)
if user:
# 登录成功 , 重定向到 首页
return redirect('/index/')
else:
return render(request, 'login.html', {'errormsg': '账号或者密码错误'})
else:
return render(request , 'login.html' , {'errormsg':'账号或者密码错误'})
3.检测用户登录数据:
同样在forms文件下:
class LoginForm(forms.Form):
#检测校验用户登录
username = forms.CharField(max_length=15, min_length=3,
error_messages={
"max_length": "用户名长度过长",
"min_length": "用户名长度不足",
"required": "用户名不能为空",
})
password = forms.CharField(max_length=15, min_length=6,
error_messages={
"max_length": "密码名长度过长",
"min_length": "密码名长度不足",
"required": "密码不能为空",
})
def clean_username(self):
name=self.cleaned_data.get("username")
if not re.match(r'^[A-Za-z0-9_]{3,15}$',name):
self.add_error('username','用户名格式不正确')
return name
4.响应首页面:
# 首页
path('index/' , views.index),
def index(request):
# 响应首页
return render(request , 'index.html')
此时的登录页:
四、机器人管理页面:
1、定义机器人模型类:
class PublishingHouse(models.Model):
'''
出版社的信息
'''
# 机器人的名称
name = models.CharField(max_length=25)
# 机器人类型
publisher_type = models.CharField(max_length=15)
# 机器人的工作时间
create_time = models.DateField()
# 机器人的工作的地址
address = models.CharField(max_length=50)
2、设置机器人信息页面:
{% block main%}
<table border="1" class="table table-hover table-bordered">
<thead>
<tr>
<td>序号</td>
<td>机器人名称</td>
<td>机器人类型</td>
<td>机器人工作时间</td>
<td>机器人地址</td>
<td>操作</td>
</tr>
</thead>
<thead>
{% for pub in publisher %}
<tr>
<td>{{ pub.id }}</td>
<td>{{ pub.name }}</td>
<td>{{ pub.publisher_type }}</td>
<td>{{ pub.create_time }}</td>
<td>{{ pub.address }}</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
{% endfor %}
</thead>
</table>
{% endblock %}
3、设置响应添加机器人数据后的类:
这个就是把数据库里面所有关于机器人的信息全部都响应出来,重新放到这个页面。
# 出版社列表页
path('publisher_list/' , views.publisher_list),
def publisher_list(request):
# 出版社列表
publisher = PublishingHouse.objects.all()
return render(request , 'publisher_list.html' , {'publisher':publisher})
4、添加机器人信息:
{% block main %}
<form method="post">
{% csrf_token %}
<P></P>
<p>机器人名称:<input type="text" name="name"></p>
<p>机器人类型:<input type="text" name="publisher_type"></p>
<p>机器人工作时间:<input type="date" name="create_time"></p>
<p>机器人地址:<input type="text" name="address"></p>
<p><button type="submit" class="btn">提交</button></p>
</form>
{% endblock %}
class AddPublishView(View):
'''
添加机器人信息
'''
def get(self,request):
return render(request,'add_publisher.html')
def post(self,request):
#拿数据
name=request.POST.get('name')
publisher_type=request.POST.get('publisher_type')
create_time=request.POST.get('create_time')
address=request.POST.get('address')
#保存到数据库
PublishingHouse.objects.create(
name=name,
publisher_type=publisher_type,
create_time=create_time,
address=address,
)
#数据保存成功,重定向到页表页面
return redirect('/publisher_list/')
此时的页面为:
5、修改机器人信息:
修改信息的主要思路为,将要修改的内容的ID先行找出,然后对其进行更改后响应到数据库当中,然后再将数据库内容重新全部响应到页面当中。
实现修改数据的模板页面:
{% block main %}
<form method="post">
{% csrf_token %}
<p><span>机器人名称:</span><input type="text" name="name" value="{{ edit_data.name }}"></p>
<p><span>机器人类型:</span><input type="text" name="publisher_type" value="{{ edit_data.publisher_type }}"></p>
<p><span>机器人工作时间:</span><input type="date" name="create_time" value="{{ edit_data.create_time }}"></p>
<p><span>机器人地址:</span><input type="text" name="address" value="{{ edit_data.address }}"></p>
<p><button type="submit" class="btn">提交</button></p>
</form>
{% endblock %}
class EditPublisherView(View):
'''
修改出版社信息
'''
def get(self , request):
# 获取用户要修改的机器人 id
id = request.GET.get('id')
edit_data = PublishingHouse.objects.get(id=id)
return render(request , 'edit_publisher.html' , {'edit_data':edit_data})
def post(self , request):
id = request.GET.get('id')
name = request.POST.get('name')
publisher_type = request.POST.get('publisher_type')
create_time = request.POST.get('create_time')
address = request.POST.get('address')
edit_data = PublishingHouse.objects.filter(id=id)
edit_data.update(
name=name,
publisher_type=publisher_type,
create_time=create_time,
address=address
)
return redirect('/publisher_list/')
注意响应到这个页面用的是get请求,所以先用get请求将它数据响应出来(主要是为了找到所修改的id),用post请求将修改后的数据改到数据库当中。
修改页:
5、删除机器人信息:
# 删除机器人信息
path('del_publisher/' , views.del_publisher),
def del_publisher(request):
id = request.GET.get('id')
PublishingHouse.objects.filter(id=id).delete()
return redirect('/publisher_list/')
注意:这一步很重要,将修改和删除的路由链接上:
五、机器人信息页面:
1、机器人信息的模型类:
class Book(models.Model):
'''
机器人信息
'''
name = models.CharField(max_length=20)
# 机器人名称
carrier = models.CharField(max_length=10)
# 功能
publisher_time = models.DateField()
# 图片:
book_image = models.CharField(max_length=20)
# 简介
book_intro = models.CharField(max_length=500)
# 价格
price = models.DecimalField(max_digits=5 , decimal_places=2)
inventory = models.IntegerField()
publisher = models.ForeignKey(to='PublishingHouse' , on_delete=models.CASCADE)
2、响应机器人列表页:
# 图书列表页
path('book_list/' , views.book_list),
def book_list(request):
book = Book.objects.all()
return render(request , 'book_list.html' , {'book':book})
前端页面:
{% endblock %}
{% block main %}
<table border="1" class="table table-hover table-bordered">
<thead>
<tr>
<td>序号</td>
<td>机器人名称</td>
<td>价格</td>
<td>机器人工作性质</td>
<td>库存</td>
<td>查询详情</td>
<td>操作</td>
</tr>
</thead>
<thead>
{% for b in book %}
<tr>
<td>{{ b.id }}</td>
<td>{{ b.name }}</td>
<td>{{ b.price }}</td>
<td>{{ b.carrier }}</td>
<td>{{ b.inventory }}</td>
<td><a href="/check_book/?id={{ b.id }}">查看</a></td>
<td>
<a href="/edir_publisher/?id={{ b.id }}">修改</a>
<a href="/del_publisher/?id={{ b.id }}">删除</a>
</td>
</tr>
{% endfor %}
</thead>
</table>
{% endblock %}
3.添加机器人信息:
class AddBookView(View):
'''
添加机器人信息
'''
def get(self , request):
# 获取机器人信息
publisher = PublishingHouse.objects.all()
return render(request , 'add_book.html' , {"publisher":publisher})
def post(self , request):
name = request.POST.get('name')
carrier = request.POST.get('carrier')
number = request.POST.get('number')
time = request.POST.get('time')
book_image = request.FILES.get('book_image')
book_intro = request.POST.get('book_intro')
price = request.POST.get('price')
inventory = request.POST.get('inventory')
publisher_id = request.POST.get('publisher_id')
# 在项目的静态文件夹中创建一个文件夹保存机器人的图片
if book_image:
# 获取文件名
book_image_name = book_image.name
# 获取到图片的保存位置
image_dir = os.path.join(STATICFILES_DIRS[0] , 'book_image' , book_image_name)
with open(image_dir , 'wb') as f:
for i in book_image:
f.write(i)
else:
book_image = '暂无.jpg'
if not book_intro:
book_intro = '暂无作品介绍, 正在整理中……'
Book.objects.create(
name=name,
carrier=carrier,
#number_of_words=number,
publisher_time=time,
book_image=book_image,
book_intro=book_intro,
price=price,
inventory=inventory,
publisher_id=publisher_id
)
return redirect('/book_list/')
{% endblock %}
{% block main %}
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<p>机器人名称:<input type="text" name="name"></p>
<p>功能:<input type="text" name="carrier"></p>
<p>推出时间:<input type="date" name="time"></p>
<p>图片:<input type="file" name="book_image"></p>
<p>简介:<textarea rows="12" cols="25" name="book_intro"></textarea></p>
<p>价格(/天):<input type="text" name="price"></p>
<p>库存:<input type="text" name="inventory"></p>
<p>类型:<select multiple name="publisher_id">
{% for foo in publisher %}
<option value="{{ foo.id }}">{{ foo.name }}</option>
{% endfor %}
</select>
</p>
<p><button type="submit" class="btn">提交</button></p>
</form>
{% endblock %}
此时的页面为:
六、总结:
该篇博客主要利用Django框架与Mysql实现一个项目操作,至于其它页面的实现,它的涉及思路都和上述页面实现一样,有兴趣可以自行扩充、优化。小编后续还会继续更新内容,欢迎各位大佬的指导