一、项目前端模板的套用
1.为什么使用前端模板
因为我们开发ObCRM系统使用的是Django项目,而我们知道,Django框架是一个全面的重量级的框架,并不是全后端分离的,所以涉及到的页面需要我们用到前端的知识,但是我们并不是专业的前端工程师,很多页面的搭建对我们说还是有点吃力。
其实在很多实际工作中开发,前端页面都是通过网络上寻找相应的模板,这样就可以避免在前端样式上调整的时间浪费,我们只需要继承别人写好的模板文件来快速开发自己的前端页面,专心投入自己的后端开发代码中。
2.admin前端模板
刚我们说使用别人写好的模板文件,有利于我们快速开发项目;我们写的这个项目也是使用了git上一个开源的前端模板,大家可以去git搜索adminLTE,如果你没有用过,点击这里https://github.com/ColorlibHQ/AdminLTE,将代码下载到本地就可以愉快的使用了。
我们解压后得到一个AdminLTE-master文件夹,文件夹路径结构如下:
目录下的文件内容如上,一般比较规范的模板文件,核心的js和css代码会放在dist路径下。
首先,我们先配置项目使用的静态文件夹,在项目路径下新建statics文件夹,settings中配置静态文件的路径,
STATIC_URL = '/static/'
STATICFILES_DIRS = [ # 项目静态文件的配置
os.path.join(BASE_DIR,"statics")
]
其实我们使用模板文件就是使用它的核心js和css以及对应写好的html页面,我们这个项目中使用了adminLTE的一些其他html页面,也就是说还需要使用bowser_components、plugins文件,这里我就将这三个文件拷贝到statics下的新建adminlte文件夹下。
如下是我这个项目的静态文件目录结构
- adminlte:用于存放模板的js和css文件
- bootstrap:存放的bootstrap核心js和css
- jquery:存放jquery文件
- css:自己根据具体需求写的一些css文件
- js:自己根据具体需求写的一些js文件
- font:项目用到的字体文件
二、登录页面的实现
1.初始超级用户
还记得我们的ObCRM系统的用户表使用是django项目中user的扩展表把,为什么使用Django用户提供的user表来扩展呢?是因为我们想要使用Django框架内置的auth认证模块,auth认证模块可以密文存储用户密码,快速简便的查询用户信息进行验证。
auth模块知识点回顾点这里!:Django框架—auth认证模块
在实现登录功能之前,我们先要有一个用户账号,就作为我们项目的超级管理帐号把。创建账号的时候要注意,不能直接在数据库添加记录,因为这样账号密码是明文存储的。
创建超级用户的方式,是在django的manage环境下,执行如下命令
createsuperuser # 要通过这个指令来创建用户,因为这个指令会将你的密码加密
我们创建一个超级用户,这里我创建的用户帐号密码:ryxiong,ryxiong520
2.登录页面实现
登录url设置
因为我么项目涉及到多应用,所以需要使用到路由分发,用户登录输入rbac应用,所以我们在项目下url设置路由分发,将用户登录的url分发到rbac应用下。
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^rbac/', include("rbac.urls")),
url(r'^customer/', include("customer.urls")),
url(r'^education/', include("education.urls")),
]
rbac应用下创建urls.py
注意:我们项目中实现验证码登录的功能,所以配置登录url还需要配置验证码url
from django.conf.urls import url,include
from rbac.views import account
urlpatterns = [
# 用户登录url
url(r'^login/', account.Login.as_view(), name="login"),
# 验证码url
url(r'^get_auth_img/', account.GetAuthImg.as_view(), name="get_auth_img"),
]
视图函数
对于登录用到的验证码获取我单独提炼了一个文件,放在rbac应用下的utils文件中的auth_code.py文件
get_authcode_img函数的作用是生成随机字符串,并通过内存操作符中读取出来,存储在session中,这样每个用户就可以根据携带自己的用户验证码请求后端,而不会和别人的验证码冲突。
import os
import string
import random
from io import BytesIO
from PIL import Image,ImageDraw,ImageFont
from ObCRM import settings # 项目中的settings文件,配置了BASEDIR路径,在这里无需关注
def get_authcode_img(request):
"""
获取随机验证码,带干扰噪点,
:param request: request请求,用于将验证码存放在session中
:return: 返回验证码图片的数据内容
"""
def get_background_color(): # 定义一个获取图片背景/噪点颜色的函数,产生浅色
color = tuple((random.choices(range(160,256),k=3)))
return color
def get_content_color(): # 定义一个获取文字颜色的函数,产生深色
color = tuple((random.choices(range(0,100),k=3)))
return color
img_obj = Image.new("RGB",(117,34),get_background_color()) # 创建一个图片对象
draw_obj = ImageDraw.Draw(img_obj) # 通过图片对象生成一个画笔对象
font_path = os.path.join(settings.BASE_DIR,"statics","font","cerepf__.ttf") # 获取字体,注意有些字体无法显示数字
font_obj = ImageFont.truetype(font_path,32) # 创建一个字体对象
random_code = '' # 用户验证的字符串
all_char = string.ascii_letters+string.digits
for i in range(4):
a = random.choice(all_char)
random_code += a
draw_obj.text((22,-3),random_code,fill=get_content_color(),font=font_obj)
width = 117
height = 34
# 添加噪线
for i in range(5): # 添加5条干扰线
# 两个坐标点确定一条线
x1 = random.randint(0,width)
y1 = random.randint(0,height)
x2 = random.randint(0,width)
y2 = random.randint(0,height)
draw_obj.line((x1,y1,x2,y2),fill=get_background_color()) # 画噪线
# 添加噪点
for i in range(30):
draw_obj.point((random.randint(0,width),random.randint(0,height)),fill=get_background_color())
f = BytesIO() # 生成内存操作符-句柄
img_obj.save(f,"png") # 将图片存在内存中
data = f.getvalue()
# 获取句柄中的内容
# # 存验证码方式:1.存在全局变量(不可取,多个用户会顶替)2.存在各自客户的session中
# # 方式1
# global valid_str
# valid_str = random_code
# 方式二,推荐
request.session["authcode"] = random_code
return data
rbac视图文件,我们在应用下创建了views文件夹,文件中新建account来处理帐号相关的视图。
from django import views
from django.contrib import auth
from django.http import JsonResponse
from django.shortcuts import (
render, redirect, reverse, HttpResponse
)
from rbac.utils import authcode
# 用户登录视图类
class Login(views.View):
def get(self, request):
# get请求返回登录页面
return render(request, "login.html")
def post(self, request):
data = request.POST
# 获取用户登录信息
authcode = data.get("authcode")
username = data.get("username")
password = data.get("password")
# 验证码不正确
if request.session.get("authcode").upper() != authcode.upper():
return JsonResponse({
"status": "1"})
else:
# 使用django的auth模块进行用户名密码验证
user = auth.authenticate(username=username, password=password)
if user:
# 将用户名存入session中
request.session["user"] = username
auth.login(request, user) # 将用户信息添加到session中
return JsonResponse({
"status": "2"})
else:
return JsonResponse({
"status": "3"})
# 验证码视图类
class GetAuthImg(views.View):
"""获取验证码视图类"""
def get(self, request):
data = authcode.get_authcode_img(request)
print("验证码:",request.session.get("authcode"))