beautiful school
1、项目介绍
- 用户登录和注册系统是所有网页设计都需要的一个模块，
导航栏+登录+注册，在这个的基础上再来实现其他各个功能模块，所以，掌握这一个章节对Django的网页设计至关重要。 - 同时对MTV的设计过程更加的了解，
数据库的设计，url路由设计，Views视图的设计，Templates模板的设计，forms.py前端模板的设计。也了解了表单、图片验证、Session会话、密码加密这些功能。对Django 的学习很有帮助。
2、搭建项目环境
(1) 创建虚拟环境
开始一个新的项目，搭建新的独立的隔离的虚拟环境
>> mkdir for_video # 新建文件夹
>> cd for_video # 进入该文件，准备安装虚拟环境
>> virtualenv --no-site-packages mysite_env # 创建项目的虚拟环境
#和系统安装的python有联系，系统中python.exe 删除，这个也不能使用了
# --no-site-packages，指定只需要一个干净的环境，不要原来带的各种第三方库
>> cd mysite_env/Script # 只能在这里打开虚拟环境
>> acitvate.bat # 开启虚拟环境
>> deactivate.bat # 退出虚拟环境
（2）安装Django
在虚拟环境中：
(mysite_env)>> pip install django==1.11.8 # 这里使用的是django1.11版本，此版本可长期使用
（3）创建工程和APP
(mysite_env)>> django-admin startproject mysite
(mysite_env)>> cd mysite
(mysite_env)/mysite/>> django-admin manage.py startapp login
(4)设置时区和语言
Django默认使用美国时间和英语，要改成亚洲/上海时间和汉语：
settings.py:
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
改成：
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
(5) 开启服务器验证
# 进入/mysite/
> python manage.py runserver
> python manage.py runserver 0.0.0.0:8000 # 浏览时用本机IP：8000端口号，需要更改将`host['*']`
3、模型设计（数据库设计）
（1）数据库模型设计
用户登录和注册项目，需要一种用户表User保存用户信息：
- 用户名
- 密码
- 性别
- 创建时间
login/models.py:
from django.db import models
class User(models.Model):
gender = (
('male', "男"),
('female', "女"),
)
name = models.CharField(max_length=128, unique=True)
password = models.CharField(max_length=256)
email = models.EmailField(unique=True)
sex = models.CharField(max_length=32, choices=gender, default="男")
c_time = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.name
class Meta:
ordering = ["-c_time"]
verbose_name = "用户"
verbose_name_plural = "用户"
- name： 必填，最长不超过128个字符，并且唯一，不同名
- password： 必填，最长不超过256个字符
- sex: 使用了一个choice，只能选择男/女，默认为男
- str，人性化显示对象信息
- 元数据中定义是按照用户创建时间的反序排列
（2）设置数据库后端
定义好了模型，就要选择用来保存数据的数据库。Django支持Mysql，SQLite，Oracle，等。
这里可以不用修改，就用自带的sqlite3数据库
settings.py:
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
（3）注册app
settings.py:
INSTALLED_APPS = [
'login',
]
(4) 创建记录和数据表
(mysite_env) /mysite/>python mange.py makemigrations # 保存数据迁移，也就是创建了User模型
(mysite_env) /mysite/>python mange.py migrate # 在数据库内创建真实的数据表
4、admin 后台
在admin后台管理界面测试和开发
(1) 在admin中注册模型
login/admin.py:
from . import models
admin.site.register(models.User)
(2)创建超级管理员
可以进入后台操作
> python manage.py createsuperuser
(3)启动开发服务器
开启服务器，访问http://127.0.0.0:8000/admin/地址
5、url路由和视图
url路由-->视图-->前端模板
(1) 路由设置
| URL | 视图 | 模板 | 说明 |
|---|---|---|---|
| /index/ | login.views.index() | index.html | 主页 |
| /login// | login.views.login() | login.html | 登录界面 |
| /register/ | login.views.register() | register.html | 注册界面 |
| /logout/ | login.views.logout() | 不需要 | 退出界面 |
mysite/urls.py:
from django.conf.urls import url
from django.contrib import admin
from login import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index/', views.index),
url(r'^login/', views.login),
url(r'^register/', views.register),
url(r'^logout/', views.logout),
]
(2) 架构初步视图
login/views.py:
from django.shortcuts import render
from django.shortcuts import redirect
def index(request):
pass
return render(request, 'login/index.html')
def login(request):
pass
return render(request, 'login/login.html')
def register(request):
pass
return render(request, 'login/register.html')
def logout(request):
pass
return redirect("/index/")
(3) 创建HTML页面文件
login/templates/login下创建三个文件index.html
login.html以及register.html，模板如下：
首页
首页！
(4) 测试路由视图
启动服务器，在浏览器访问http://127.0.0.1:8000/index/等页面，看能否正常显示
6、前端页面设计
(1) 引入Bootstrap
- 到
Bootstrap官网中，下载“用于生产环境”的包，bootstrap-3.3.7-dist，包含css、js和font（字体文件）。 - 到
jquery官网中，下载jquery.js文件 - 在Django的根目录下新建一个static目录，整体拷贝
(2) 静态文件设置
用于指定静态文件的搜索目录：
settings.py :
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
(3) 创建base.html 模板
需要引入bootstap模板导航条+引入Bootstrap+jquery静态文件
{% load staticfiles %}
{% block title %}base{% endblock %}
{% block css %}{% endblock %}
{% block content %}{% endblock %}
(4) 设计登录界面login.html
login/templates/login/login.html:
{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}登录{% endblock %}
{% block css %}{% endblock %}
{% block content %}
{% endblock %}
在static/css目录中新建一个login.css样式文件:
body {
background-color: #eee;
}
.form-login {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-login .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.form-login .form-control:focus {
z-index: 2;
}
.form-login input[type="text"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-login input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
7、登录视图
(1) 登录视图
用户通过login.html中的表单来填写用户名和密码，并且以POST的方式发送到服务器的/login/地址。服务器通过/login/views.py中的login()视图函数，接收并且处理这一请求。
/login/views.py:
def login(request):
if request.method == "POST":
username = request.POST.get('username')
password = request.POST.get('password')
print(username, password)
return redirect('/index/')
return render(request, 'login/login.html')
CSRF验证：
login.html: