分享一款前端小工具 Bootstrap可视化布局系统 代码实战 1. 创建Django项目
django-admin startproject report2. 修改基础配置, 打开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
- 在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目录
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(base_DIR, 'static'),
]
将新建的html文件放入templates, css、img、js等放入static, 注意Django模板语法 写好的index.html
简单示例
Hi This is
Fu zihao
A Back-end Developer and Student
Hi Guys!
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.
- 姓名 张三
- 年龄 23
- 性别 男
- 所在地 山东省青岛市
- 手机 + (00) 123 456 789
- 电子邮件 email@example.com
- 个人爱好 唱跳rap篮球
头像分析
头像动漫化
upload.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
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界面
404
404, 您访问的页面不存在
此时新的问题出现了，打开首页，发现图片不显示了！原因如下：
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 %}
第一次汇报
Hi This is
Fu zihao
A Back-end Developer and Student
{% block part1 %}
{% endblock %}
faceUpload.html
{% extends "base.html" %}
{% block part1 %}
{% endblock %}
faceAttributes.html
{% extends "base.html" %}
{% block part1 %}
面部分析结果
仅供娱乐
- 性别: {{ detectFace.gender }}
- 年龄: {{ detectFace.age }}
- 眼镜: {{ detectFace.glass }}
- 帽子: {{ detectFace.hat }}
- 口罩: {{ detectFace.mask }}
- 颜值评分: {{ detectFace.beauty }}
- 头发长度: {{ detectFace.hair_len }}
- 有无刘海: {{ detectFace.hair_bang }}
- 头发颜色: {{ detectFace.hair_color }}
{% endblock %}
faceCartoon.html
{% extends "base.html" %}
{% block part1 %}
{% endblock %}
面部分析部分截图
动漫化截图
{% endblock %} ```
faceCartoon.html
{% extends "base.html" %}
{% block part1 %}
{% endblock %}
面部分析部分截图
动漫化截图
