Django课堂实战_django实战-CSDN博客

本文链接：https://blog.csdn.net/weixin_51062176/article/details/120741907

总体计划：

在这里插入图片描述

Django目录结构

分享一款前端小工具

Bootstrap可视化布局系统

代码实战

1. 创建Django项目

django-admin startproject report

2. 修改基础配置, 打开settings.py文件

在这里插入图片描述

3. 查看是否安装成功

python manage.py runserver

成功界面

4. 创建第一个视图

创建子应用并在settings.py中注册

python manage.py startapp app01 // 创建名为app01的子应用

在settings.py中注册：

在app01/views.py中创建一个简单的视图函数

from django.http import HttpResponse
from django.shortcuts import render

# Create your views here.

def index(request):
    return HttpResponse("This is my first app index!")

在app01目录下新建urls.py子文件，加入views.py中的函数路由

from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

app01中的urls.py文件添加进report/urls.py中

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('app01/', include('app01.urls')),
]

启动服务，运行成功截图

修改默认数据库为mysql

settings.py中

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'report',
        'USER': 'root',
        'PASSWORD': 'xxxxxx',
        'HOST': 'localhost',
        'PORT': '3306'
    }
}

_ init_ _.py中添加

import pymysql

pymysql.install_as_MySQLdb()

启动服务，查看是否成功

创建配置templates、static

在项目根目录下创建文件夹templates、static
在settings.py中配置templates目录路径


TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')], 
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]


STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

将新建的html文件放入templates, css、img、js等放入static, 注意Django模板语法

写好的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>简单示例</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
    <!-- Fonts -->
    <link rel="stylesheet" type="text/css" href="../static/fonts/font-awesome.min.css">
    <!-- Icon -->
    <link rel="stylesheet" type="text/css" href="../static/fonts/simple-line-icons.css">
    <!-- Slicknav -->
    <link rel="stylesheet" type="text/css" href="../static/css/slicknav.css">
    <!-- Nivo Lightbox -->
    <link rel="stylesheet" type="text/css" href="../static/css/nivo-lightbox.css">
    <!-- Animate -->
    <link rel="stylesheet" type="text/css" href="../static/css/animate.css">
    <!-- Main Style -->
    <link rel="stylesheet" type="text/css" href="../static/css/main.css">
    <!-- Responsive Style -->
    <link rel="stylesheet" type="text/css" href="../static/css/responsive.css">

</head>
<body>

<!-- Header Area wrapper Starts -->
<header id="header-wrap">
    <!-- Navbar Start -->
    <nav class="navbar navbar-expand-lg fixed-top scrolling-navbar indigo">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar"
                        aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                    <span class="icon-menu"></span>
                    <span class="icon-menu"></span>
                    <span class="icon-menu"></span>
                </button>
                <a href="index.html" class="navbar-brand"><img src="../static/img/favicon.ico" alt=""></a>
            </div>
            <div class="collapse navbar-collapse" id="main-navbar">
                <ul class="onepage-nev navbar-nav mr-auto w-100 justify-content-end clearfix">
                    <li class="nav-item active">
                        <a class="nav-link" href="#hero-area">
                            Home
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">
                            About
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#services">
                            Services
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#resume">
                            Resume
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#portfolios">
                            Work
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">
                            Contact
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Mobile Menu Start -->
        <ul class="onepage-nev mobile-menu">
            <li>
                <a href="#home">Home</a>
            </li>
            <li>
                <a href="#about">about</a>
            </li>
            <li>
                <a href="#services">Services</a>
            </li>
            <li>
                <a href="#resume">resume</a>
            </li>
            <li>
                <a href="#portfolio">Work</a>
            </li>
            <li>
                <a href="#contact">Contact</a>
            </li>
        </ul>
        <!-- Mobile Menu End -->
    </nav>
    <!-- Navbar End -->

    <!-- Hero Area Start -->
    <div id="hero-area" class="hero-area-bg">
        <div class="overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 text-center">
                    <div class="contents">
                        <h5 class="script-font wow fadeInUp" data-wow-delay="0.2s">Hi This is</h5>
                        <h2 class="head-title wow fadeInUp" data-wow-delay="0.4s">Fu zihao</h2>
                        <p class="script-font wow fadeInUp" data-wow-delay="0.6s">A Back-end Developer and Student</p>

                        <div class="header-button wow fadeInUp" data-wow-delay="1s">
                            <a href="#" class="btn btn-common">Simple Demo</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Hero Area End -->

</header>
<!-- Header Area wrapper End -->

<!-- About Section Start -->
<section id="about" class="section-padding">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="img-thumb wow fadeInLeft" data-wow-delay="0.3s">
                    <img class="img-fluid" src="../static/img/about/about-1.jpg" alt="">
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="profile-wrapper wow fadeInRight" data-wow-delay="0.3s">
                    <h3>Hi Guys!</h3>
                    <p>Est diam venenatis arcu lacus ad. Duis quis eros. Cursus et rutrum eleifend sollicitudin lacinia
                        justo id turpis. Nec convallis integer. Odio eget duis. Nulla aenean et. Blandit varius
                        sollicitudin. Pellentesque leo primis neque urna magnis. Elit ut sollicitudin. Et est a nam
                        dolores eget itaque sagittis et parturient duis est eleifend sociis rutrum odio viverra
                        integer.</p>
                    <div class="about-profile">
                        <ul class="admin-profile">
                            <li><span class="pro-title"> 姓名 </span> <span class="pro-detail">张三</span></li>
                            <li><span class="pro-title"> 年龄 </span> <span class="pro-detail">23</span></li>
                            <li><span class="pro-title"> 性别 </span> <span class="pro-detail">男</span></li>
                            <li><span class="pro-title"> 所在地 </span> <span class="pro-detail">山东省青岛市</span></li>
                             <li><span class="pro-title"> 手机 </span> <span
                                    class="pro-detail">+ (00) 123 456 789</span></li>
                            <li><span class="pro-title"> 电子邮件 </span> <span
                                    class="pro-detail">email@example.com</span></li>
                            <li><span class="pro-title"> 个人爱好 </span> <span class="pro-detail">唱跳rap篮球</span></li>
                        </ul>
                    </div>
                    <a href="#" class="btn btn-common"> 头像分析</a>
                    <a href="#" class="btn btn-danger">头像动漫化</a>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- Counter Area Start-->
<section class="counter-section section-padding">
    <div class="container">
        <div class="row">
            <!-- Counter Item -->
            <div class="col-md-3 col-sm-6 work-counter-widget text-center">
                <div class="counter wow fadeInDown" data-wow-delay="0.3s">
                    <div class="icon"><i class="icon-briefcase"></i></div>
                    <div class="counterUp">250</div>
                    <p>Project Working</p>
                </div>
            </div>
            <!-- Counter Item -->
            <div class="col-md-3 col-sm-6 work-counter-widget text-center">
                <div class="counter wow fadeInDown" data-wow-delay="0.6s">
                    <div class="icon"><i class="icon-check"></i></div>
                    <div class="counterUp">950</div>
                    <p>Project Done</p>
                </div>
            </div>
            <!-- Counter Item -->
            <div class="col-md-3 col-sm-6 work-counter-widget text-center">
                <div class="counter wow fadeInDown" data-wow-delay="0.9s">
                    <div class="icon"><i class="icon-diamond"></i></div>
                    <div class="counterUp">150</div>
                    <p>Awards Received</p>
                </div>
            </div>
            <!-- Counter Item -->
            <div class="col-md-3 col-sm-6 work-counter-widget text-center">
                <div class="counter wow fadeInDown" data-wow-delay="1.2s">
                    <div class="icon"><i class="icon-heart"></i></div>
                    <div class="counterUp">299</div>
                    <p>Happy Clients</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Counter Area End-->


<!-- Footer Section Start -->
<footer class="footer-area section-padding">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="footer-text text-center wow fadeInDown" data-wow-delay="0.3s">
                    <p>Copyright © 版权所有.</p>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- Footer Section End -->

<!-- Go to Top Link -->
<a href="#" class="back-to-top">
    <i class="icon-arrow-up"></i>
</a>

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="../static/js/jquery-min.js"></script>
<script src="../static/js/popper.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/jquery.mixitup.js"></script>
<script src="../static/js/jquery.counterup.min.js"></script>
<script src="../static/js/waypoints.min.js"></script>
<script src="../static/js/wow.js"></script>
<script src="../static/js/jquery.nav.js"></script>
<script src="../static/js/jquery.easing.min.js"></script>
<script src="../static/js/nivo-lightbox.js"></script>
<script src="../static/js/jquery.slicknav.js"></script>
<script src="../static/js/main.js"></script>
<style>
    .copyrights {
        text-indent: -9999px;
        height: 0;
        line-height: 0;
        font-size: 0;
        overflow: hidden;
    }
</style>

</body>
</html>

upload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/css/login.css">
    <title>个人信息</title>
</head>
<body>
<div class="container">
    <div class="login-form">
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div class="text">个人信息</div>
        <div class="form-item">
            <form action="{% url 'doUpload' %}" method="post" enctype="multipart/form-data">
                <table>
                {% csrf_token %}
                <label>
                    <input type="text" placeholder="姓名" name="name">
                </label>
                <label>
                    <input type="text" placeholder="年龄" name="age">
                    <p style="font-weight: bold; color: #acb7c9; margin-left: -451px; font-size: 13px">性别</p>
                    <form>
                        <label>
                            <input type="radio" name="sex" value="男" style="margin-left: -430px" checked>
                        </label>男<br>
                        <label>
                            <input type="radio" name="sex" value="女" style="margin-left: -430px;">
                        </label>女
                        <hr style="width: 490px; background-color:  #f495956b">
                    </form>
                </label>
                <input type="text" placeholder="地址" name="location">
                <input type="text" placeholder="手机号码" name="phone">
                <input type="text" placeholder="电子邮箱" name="email">
                <input type="text" placeholder="个人爱好" name="hobby">
                <div style="font-weight: bold; color: #acb7c9; margin-left: 25px; font-size: 13px">头像
                    <input type="file" name="avatar"/>
                </div>
                <input class="btn" type="submit" value="提交"/>
                <input class="btn" type="reset" value="重置"/>
                </table>
            </form>
        </div>
    </div>
</div>

</body>
</html>

根据需求建数据表， app01/models.py中

from django.db import models


# Create your models here.

class User(models.Model):
    '''创建个人信息对应的Model类'''
    id = models.AutoField(primary_key=True)  # 默认主键自增id字段可不写
    name = models.CharField(max_length=16)
    age = models.SmallIntegerField()
    sex = models.CharField(max_length=6)
    location = models.CharField(max_length=30)
    phone = models.CharField(max_length=15)
    email = models.CharField(max_length=30)
    hobby = models.TextField()
    avatar = models.ImageField(upload_to='static/img/avatar', unique=True)

    def toDict(self):
        return {'uname': self.uname, 'age': self.age, 'sex': self.sex, 'location': self.location,
                'phone': self.phone, 'email': self.email, 'hobby': self.hobby, 'avatar': self.avatar}

    # 自定义表名，默认为app01_user
    class Meta:
        db_table = 'user'

执行数据迁移

python manage.py makemigrations # 生成迁移文件
python manage.py migrate # 执行迁移

迁移成功如下

在这里插入图片描述

app01/views.py中编写上传视图函数

from django.http import HttpResponse
from django.shortcuts import render, redirect
from .models import User


# Create your views here.

# 首页
def index(request):
    return render(request, 'index.html')


# 上传界面
def upload(request):
    return render(request, 'upload.html')

# 执行上传
def doUpload(request):
    user = User()
    try:
        user.name = request.POST['name']
        user.age = request.POST['age']
        user.sex = request.POST['sex']
        user.location = request.POST['location']
        user.phone = request.POST['phone']
        user.email = request.POST['email']
        user.hobby = request.POST['hobby']
        user.avatar = request.FILES['avatar']
        user.save()
    except:
        pass
    return redirect(reverse('index'))

将视图函数注册到app01/urls.py中

urlpatterns = [
    path('', views.index, name='index'),
    path('upload', views.upload, name='upload'),
    path('doUpload', views.doUpload, name='doUpload'),
]

修改upload.html表单提交路由，启动服务，进入upload页面并填写信息提交，查看数据库，检查信息是否上传成功

接下来进行信息展示

改写index()函数，查询数据库数据并传到前端

# 首页
def index(request):
    users = User.objects.all()
    context = {'users': users}
    return render(request, 'index.html', context)

启动服务，查看首页，能看到所有用户信息

此时，DEBUG模式还处于开启状态，后台报错信息（如404）会显示在前端，我们需要设置DEBUG=False，编写自定义404界面

<!DOCTYPE html>
<html>
<head>
    <title>404</title>
</head>
<body>
    <center>
        <h2 style="color: red">404, 您访问的页面不存在</h2>
    </center>
</body>
</html>

此时新的问题出现了，打开首页，发现图片不显示了！原因如下：

Django框架仅在开发模式下提供静态文件服务。开启DEBUG模式时，Django内置的服务器是提供静态文件的服务的，所以css等文件访问都没有问题，但是关闭DEBUG模式后，Django便不提供静态文件服务了

解决方式，使用下面命令启动服务

python manage.py runserver --insecure

接下来是人脸识别部分

数据库表

class Face(models.Model):
    '''上传的人脸图片链接地址'''
    pictUrl = models.CharField(max_length=500)

    class Meta:
        db_table = 'face'

urls.py路由

path('faceUpload', views.faceUpload, name='faceUpload'),
path('doFaceUpload', views.doFaceUpload, name='doFaceUpload'),
path('faceAttribute', views.faceAttribute, name='faceAttribute'),
path('faceCartoon', views.faceCartoon, name='faceCartoon'),

属性检测和动漫化的视图函数



# 人脸上传界面
def faceUpload(request):
    return render(request, 'faceUpload.html')


# 执行图片上传
def doFaceUpload(request):
    face = Face()
    face.pictUrl = request.POST['pictUrl']
    face.save()
    return redirect(reverse('faceAttribute'))


# 人脸属性检测结果
def faceAttribute(request):
    face = Face.objects.last()
    url = face.pictUrl
    context = {'url': url, 'detectFace': detectFace(url)}
    return render(request, 'faceAttributes.html', context)


# 人脸动漫化
def faceCartoon(request):
    face = Face.objects.last()
    url = face.pictUrl
    context = {'url': faceCartoonPic(url)}
    return render(request, 'faceCartoon.html', context)

base.html

{% load static %}
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>第一次汇报</title>
    <link rel="icon" type="image/png" sizes="144x144" href="../static/img/favicon.ico"/>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
    <!-- Fonts -->
    <link rel="stylesheet" type="text/css" href="../static/fonts/font-awesome.min.css">
    <!-- Icon -->
    <link rel="stylesheet" type="text/css" href="../static/fonts/simple-line-icons.css">
    <!-- Slicknav -->
    <link rel="stylesheet" type="text/css" href="../static/css/slicknav.css">
    <!-- Nivo Lightbox -->
    <link rel="stylesheet" type="text/css" href="../static/css/nivo-lightbox.css">
    <!-- Animate -->
    <link rel="stylesheet" type="text/css" href="../static/css/animate.css">
    <!-- Main Style -->
    <link rel="stylesheet" type="text/css" href="../static/css/main.css">
    <!-- Responsive Style -->
    <link rel="stylesheet" type="text/css" href="../static/css/responsive.css">

</head>
<body>

<!-- Header Area wrapper Starts -->
<header id="header-wrap">
    <!-- Navbar Start -->
    <nav class="navbar navbar-expand-lg fixed-top scrolling-navbar indigo">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar"
                        aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                    <span class="icon-menu"></span>
                    <span class="icon-menu"></span>
                    <span class="icon-menu"></span>
                </button>
                <a href="index.html" class="navbar-brand"><img src="../static/img/favicon.ico" alt=""></a>
            </div>
            <div class="collapse navbar-collapse" id="main-navbar">
                <ul class="onepage-nev navbar-nav mr-auto w-100 justify-content-end clearfix">
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'index' %}">
                            首页
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'index' %}">
                            列表
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'upload' %}">
                            个人信息上传
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'faceUpload' %}">
                            人脸图片上传
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'faceAttribute' %}">
                            人脸属性
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'faceCartoon' %}">
                            人脸动漫化
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Mobile Menu Start -->
        <ul class="onepage-nev mobile-menu">
            <li>
                <a href="#home">首页</a>
            </li>
            <li>
                <a href="#about">列表</a>
            </li>
            <li>
                <a href="{% url 'faceAttribute' %}">人脸属性</a>
            </li>
            <li>
                <a href="{% url 'faceCartoon' %}">人脸动漫化</a>
            </li>
        </ul>
        <!-- Mobile Menu End -->
    </nav>
    <!-- Navbar End -->

    <!-- Hero Area Start -->
    <div id="hero-area" class="hero-area-bg">
        <div class="overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 text-center">
                    <div class="contents">
                        <h5 class="script-font wow fadeInUp" data-wow-delay="0.2s">Hi This is</h5>
                        <h2 class="head-title wow fadeInUp" data-wow-delay="0.4s">Fu zihao</h2>
                        <p class="script-font wow fadeInUp" data-wow-delay="0.6s">A Back-end Developer and Student</p>

                        <div class="header-button wow fadeInUp" data-wow-delay="1s">
                            <a href="#" class="btn btn-common">Simple Demo</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Hero Area End -->

</header>
<!-- Header Area wrapper End -->

{% block part1 %}


{% endblock %}


<!-- Counter Area Start-->
<section class="counter-section section-padding">
    <div class="container">
        <div class="row">
            <!-- Counter Item -->
            <div class="col-md-3 col-sm-6 work-counter-widget text-center">
                <div class="counter wow fadeInDown" data-wow-delay="0.3s">
                    <div class="icon"><i class="icon-briefcase"></i></div>
                    <div class="counterUp">250</div>
                    <p>Project Working</p>
                </div>
            </div>
            <!-- Counter Item -->
            <div class="col-md-3 col-sm-6 work-counter-widget text-center">
                <div class="counter wow fadeInDown" data-wow-delay="0.6s">
                    <div class="icon"><i class="icon-check"></i></div>
                    <div class="counterUp">950</div>
                    <p>Project Done</p>
                </div>
            </div>
            <!-- Counter Item -->
            <div class="col-md-3 col-sm-6 work-counter-widget text-center">
                <div class="counter wow fadeInDown" data-wow-delay="0.9s">
                    <div class="icon"><i class="icon-diamond"></i></div>
                    <div class="counterUp">150</div>
                    <p>Awards Received</p>
                </div>
            </div>
            <!-- Counter Item -->
            <div class="col-md-3 col-sm-6 work-counter-widget text-center">
                <div class="counter wow fadeInDown" data-wow-delay="1.2s">
                    <div class="icon"><i class="icon-heart"></i></div>
                    <div class="counterUp">299</div>
                    <p>Happy Clients</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Counter Area End-->


<!-- Footer Section Start -->
<footer class="footer-area section-padding">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="footer-text text-center wow fadeInDown" data-wow-delay="0.3s">
                    <p>Copyright © 版权所有.</p>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- Footer Section End -->

<!-- Go to Top Link -->
<a href="#" class="back-to-top">
    <i class="icon-arrow-up"></i>
</a>

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="../static/js/jquery-min.js"></script>
<script src="../static/js/popper.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/jquery.mixitup.js"></script>
<script src="../static/js/jquery.counterup.min.js"></script>
<script src="../static/js/waypoints.min.js"></script>
<script src="../static/js/wow.js"></script>
<script src="../static/js/jquery.nav.js"></script>
<script src="../static/js/jquery.easing.min.js"></script>
<script src="../static/js/nivo-lightbox.js"></script>
<script src="../static/js/jquery.slicknav.js"></script>
<script src="../static/js/main.js"></script>
<style>
    .copyrights {
        text-indent: -9999px;
        height: 0;
        line-height: 0;
        font-size: 0;
        overflow: hidden;
    }
</style>

</body>
</html>

faceUpload.html

{% extends "base.html" %}

{% block part1 %}
<!-- About Section Start -->
<section id="about" class="section-padding">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="img-thumb wow fadeInLeft" data-wow-delay="0.3s">
                    <br>
                    <br>
                    <img class="img-fluid"
                         src="http://m.qpic.cn/psc?/V11MAmC2300aWU/45NBuzDIW489QBoVep5mcX5.p3qUhIt5bwp2b*Zn2fC6fbrRnZudNuQGFzrsfMha1BMe46CEIJ.gd1Zp*VPhtfrC*oqFzI*phKiJYUOhunM!/b&bo=LQMnAi0DJwIBGT4!&rf=viewer_4"
                         style="width: 540px; height: 405px" alt="">
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="profile-wrapper wow fadeInRight" data-wow-delay="0.3s">
                    <form action="{% url 'doFaceUpload' %}" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <table width="66%" border="1">
                            <tr>
                                <td>图片URL:</td>
                                <td><label>
                                    <input type="text" name="pictUrl"/>
                                </label></td>
                            </tr>
                        </table>
                        <input type="submit" value="提交" style="width: 120px; height: 30px"/>
                        <input type="reset" value="重置" style="width: 120px; height: 30px"/>

                    </form>
                    <a href="{% url 'faceAttribute' %}" class="btn btn-common"> 头像分析</a>
                    <a href="#" class="btn btn-danger">头像动漫化</a>
                </div>
            </div>
        </div>
        <hr>
    </div>
</section>
{% endblock %}

faceAttributes.html

{% extends "base.html" %}

{% block part1 %}

<section id="about" class="section-padding">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="img-thumb wow fadeInLeft" data-wow-delay="0.3s">
                    <br>
                    <br>
                    <img class="img-fluid" src="{{ url }}" style="width: 540px; height: 405px" alt="">
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="profile-wrapper wow fadeInRight" data-wow-delay="0.3s">
                    <h3>面部分析结果</h3>
                    <p>仅供娱乐</p>
                    <div class="about-profile">
                        <ul class="admin-profile">
                            <li><span class="pro-title"> 性别: </span> <span
                                    class="pro-detail">{{ detectFace.gender }}</span></li>
                            <li><span class="pro-title"> 年龄: </span> <span
                                    class="pro-detail">{{ detectFace.age }}</span></li>
                            <li><span class="pro-title"> 眼镜: </span> <span
                                    class="pro-detail">{{ detectFace.glass }}</span></li>
                            <li><span class="pro-title"> 帽子: </span> <span
                                    class="pro-detail">{{ detectFace.hat }}</span>
                            </li>
                            <li><span class="pro-title"> 口罩: </span> <span
                                    class="pro-detail">{{ detectFace.mask }}</span></li>
                            <li><span class="pro-title"> 颜值评分: </span> <span
                                    class="pro-detail">{{ detectFace.beauty }}</span></li>
                            <li><span class="pro-title"> 头发长度: </span> <span class="pro-detail">{{ detectFace.hair_len }}</span>
                            </li>
                            <li><span class="pro-title"> 有无刘海: </span> <span class="pro-detail">{{ detectFace.hair_bang }}</span>
                            </li>
                            <li><span class="pro-title"> 头发颜色: </span> <span class="pro-detail">{{ detectFace.hair_color }}</span>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <hr>
    </div>
</section>
{% endblock %}

faceCartoon.html

{% extends "base.html" %}

{% block part1 %}

<section id="about" class="section-padding">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="img-thumb wow fadeInLeft" data-wow-delay="0.3s">
                    <br>
                    <br>
                    <img class="img-fluid" src="{{ url }}" style="width: 540px; height: 405px" alt="">
                </div>
            </div>
        </div>
        <hr>
    </div>
</section>
{% endblock %}

面部分析部分截图

动漫化截图

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <hr>
</div>

{% endblock %} ```

faceCartoon.html

{% extends "base.html" %}

{% block part1 %}

<section id="about" class="section-padding">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="img-thumb wow fadeInLeft" data-wow-delay="0.3s">
                    <br>
                    <br>
                    <img class="img-fluid" src="{{ url }}" style="width: 540px; height: 405px" alt="">
                </div>
            </div>
        </div>
        <hr>
    </div>
</section>
{% endblock %}