CRM客户关系管理系统（二）
第三章、前端页面设计
3.1.前端页面布局
Bootstrap模板下载
（1）静态文件
新建statics目录（存放css/fonts/imgs/js/plugins）
settings配置
复制代码
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'statics'),
)
复制代码
（2）模板文件
templates下新建crm目录，把Dashboard Template for Bootstrap.html放到里面，命名为dashboard.html
复制代码
{#templates/crm/dashboard.html#}
{% extends 'index.html' %}
复制代码
templates下新建base.html（主要存放css和js）
base.html
templates下新建index.html（body里面的代码）
此时目录
（3）配置url
PerfectCRM/urls.py
复制代码
# PerfectCRM/urls.py
from django.conf.urls import url,include
from django.contrib import admin
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^crm/', include('crm.urls')),
]
复制代码
crm/urls.py
复制代码
# crm/urls.py
from django.conf.urls import url,include
from crm import views
urlpatterns = [
url(r'^$', views.dashboard),
]
复制代码
现在访问http://127.0.0.1:8000/crm/，就可以显示正常页面了
（4）index.html修改
删除search+右上角留一个就好
左侧project改成block
Dashboard改成h2,删除class “row placeholders”里面的内容
删除class “sub-header“”里面的内容
左边ul只留一个就好
index.py
（5）动态菜单生成
销售，学生，讲师访问页面时。显示的应该是对应角色的菜单，所以需要动态生成菜单
crm/models.py
添加Menus
复制代码
class Menus(models.Model):
'''动态菜单'''
name = models.CharField(max_length=64)
#绝对url和动态url
url_type_choices = ((0,'absolute'),(1,'dynamic'))
url_type = models.SmallIntegerField(choices=url_type_choices,default=0)
url_name = models.CharField(max_length=128)
def __str__(self):
return self.name
class Meta:
unique_together = ('name','url_name')
复制代码
在Role中关联Menus
复制代码
class Role(models.Model):
'''角色表'''
name = models.CharField(max_length=64,unique=True) #不能重
#一个角色可以访问多个菜单，一个菜单可以被多个角色访问
menus = models.ManyToManyField('Menus',blank=True,verbose_name='动态菜单')
def __str__(self):
return self.name
复制代码
models.py
生成表，然后注册到后台
admin.site.register(models.Menus)
crm/admin.py
开始创建菜单，角色，用户之前
首先修改UserProfile的user字段为OneToOneField
然后还要有登录界面
3.2.登录页面开发
Bootstrap登录组件
（1）templates/login.html
复制代码
{#templates/login.html#}
{% extends 'index.html' %}
{% load staticfiles %}
{% block extra-css %}
{% endblock %}
{% block body %}
{% endblock %}
复制代码
（2）statics/css/signin.css
复制代码
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .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-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
复制代码
（3）PerfectCRM/urls.py
url(r'^login/', views.acc_login),
（4）PerfectCRM/views.py
复制代码
# PerfectCRM/views.py
from django.shortcuts import render
def acc_login(request):
return render(request,'login.html')
复制代码
访问：http://127.0.0.1:8000/login/
（5）登陆验证
PerfectCRM/views.py
复制代码
# PerfectCRM/views.py
from django.shortcuts import render,redirect
from django.contrib.auth import authenticate,login
def acc_login(request):
if request.method == 'POST':
username = request.POST.get('username',None)
password = request.POST.get('password',None)
#user是一个对象
#验证
user = authenticate(username=username,password=password)
if user:
#登录（已生成session）
login(request,user)
return redirect('/crm/')
return render(request,'login.html')
复制代码
index.html中显示登录的用户名{{request.user}}
{{ request.user }}
（6）登出
Bootstrap3/起步 -->> https://v3.bootcss.com/examples/navbar-static-top/#
右键-->>copy-->>copy element,放到index.html里面
复制代码
复制代码
PerfectCRM/urls.py
url(r'^logout/', views.acc_logout,name='logout'),
PerfectCRM/views.py
复制代码
def acc_logout(request):
logout(request)
return redirect("/login/")
复制代码
现在可以点“logout”跳到login登录界面
复制代码
复制代码
（8）添加错误信息
PerfectCRM/views.py
复制代码
def acc_login(request):
error_msg = ''
if request.method == 'POST':
username = request.POST.get('username',None)
password = request.POST.get('password',None)
#user是一个对象
#验证
user = authenticate(username=username,password=password)
if user:
#登录（已生成session）
login(request, user)
return redirect('/crm/')
else:
error_msg = '用户名或密码错误！'
return render(request,'login.html',{'error_msg':error_msg})
复制代码
login.html渲染
（9）有的页面只有登录后才能访问
crm/views.py
复制代码
# crm/views.py
from django.shortcuts import render
from django.contrib.auth.decorators import login_required
@login_required
def dashboard(request):
return render(request,'crm/dashboard.html')
复制代码
settings中设置如果没登录访问跳转的地方
settings.py
#登录才能访问的页面，如果没登录直接跳转到login界面
LOGIN_URL = '/login/'
现在没登录状态访问：http://127.0.0.1:8000/crm/
跳到了login界面
PerfectCRM/views.py
修改acc_login的redirect
#如果有next值就获取next值，没有就跳转到首页
return redirect(request.GET.get('next','/'))
acc_login
没登录状态访问/crm/,跳到login，登录后（获取next=/crm/）跳到/crm/页面
3.3.动态菜单生成
首先获取登录的用户（User）
通过User反向查找到UsrProfile
然后通过UserProfile找到用户关联的所有角色
最后通过角色循环遍历出用户所有的菜单
index.html
复制代码
复制代码
如果是静态url直接获取，动态url就{% url menu.url_name%}获取
OneToOneField和ForeignKey反向获取
OneToOneField反向查，直接request.user.userprofile 后面跟反向的表明（小写）就可以
如果是FK，直接request.user.userprofile_set 后面跟反向的表明（小写）+“_set” 就可以
request.user.userprofile.role.select_related等价于request.user.userprofile.role.all
下面开始添加菜单，角色，关联用户
（1）添加菜单
url中name一致
复制代码
# crm/urls.py
from django.conf.urls import url,include
from crm import views
urlpatterns = [
url(r'^$', views.dashboard,name='sales_dashboard'),
]
复制代码
再添加两个菜单（静态url）
（2）添加角色
添加sales和students两个角色
（3）关联用户
（4）动态菜单查看
现在用不同的角色登录后，就可以实现动态菜单功能了
用derek账户登录(sales的菜单)
用kebi账户登录（students菜单）
本章节代码 github下载 （commit4:num2 前端页面布局，登录页面开发和动态菜单设计）
其实人跟树一样，越是向往高处的阳光，它的根就越要伸向黑暗的地底。https://www.cnblogs.com/derek1184405959/p/8955249.html