Python项目（超详细）

#前言：

该项目的目的是做一个类似管理数据的系统，主要训练的是将数据库、前端、后端很好的对接起来，并且可以实现在前端页面就可以对数据进行一个增删改查，内容很详细，代码多有注释，建议先将我下面提及到的文件导入，再看代码会更加详细。如若有需要改正的地方，欢迎各位前来指正。后续会继续更新好文，欢迎大家前来关注！

一、项目前期配置准备：

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：

上面各个文件的内容可以查看博客：Django之图片验证码的创建（超详细）-CSDN博客

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实现一个项目操作，至于其它页面的实现，它的涉及思路都和上述页面实现一样，有兴趣可以自行扩充、优化。小编后续还会继续更新内容，欢迎各位大佬的指导，也欢迎各位关注我坐等后续，您的支持是我变强的最大动力！！