前端页面设计（三）
前端页面布局
（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）
{#templates/base.html#}
{% load staticfiles %}<!DOCTYPE html><!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ --><html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">{# <link rel="icon" href="https://v3.bootcss.com/favicon.ico">#} <title>PerfectCRM</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="{% static 'css/ie10-viewport-bug-workaround.css' %}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static 'css/dashboard.css' %}" rel="stylesheet">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{% static 'js/ie-emulation-modes-warning.js' %}"></script>
</head>
<body>
{% block body %}
{% endblock %} <!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{% static 'js/jquery.min.js' %}"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{% static 'js/bootstrap.min.js' %}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{% static 'js/ie10-viewport-bug-workaround.js' %}"></script></body></html>base.html此时目录
image
（3）配置url
PerfectCRM/urls.py
# PerfectCRM/urls.pyfrom django.conf.urls import url,includefrom django.contrib import admin
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^crm/', include('crm.urls')),
]crm/urls.py
# crm/urls.pyfrom django.conf.urls import url,includefrom 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只留一个就好
图片.png
index.html
{#templates/index.html#}
{% extends 'base.html' %}
{% block body %}<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">{% block pro_name %}Project name{% endblock %}</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Dashboard</a></li>
</ul>
</div>
</div></nav><div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="https://v3.bootcss.com/examples/dashboard/#">Overview <span class="sr-only">(current)</span></a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Reports</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Analytics</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Export</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h2 class="page-header">Dashboard</h2>
</div>
</div></div>{% endblock %}
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生成表，然后注册到后台
crm/admin.py
from django.contrib import adminfrom crm import modelsadmin.site.register(models.Role)admin.site.register(models.CustomerInfo)admin.site.register(models.Student)admin.site.register(models.CustomerFollowUp)admin.site.register(models.Course)admin.site.register(models.ClassList)admin.site.register(models.CourseRecord)admin.site.register(models.StudyRecord)admin.site.register(models.Branch)admin.site.register(models.Menus)admin.site.register(models.UserProfile)
开始创建菜单，角色，用户之前
首先修改UserProfile的user字段为OneToOneField
image
然后还要有登录界面
登录页面开发
`
（1）templates/login.html
{#templates/login.html#}
{% extends 'index.html' %}
{% load staticfiles %}
{% block extra-css %} <link rel="stylesheet" href="{% static 'css/signIn.css' %}">{% endblock %}
{% block body %} <div class="container">
<form class="form-signin" method="post">
{% csrf_token %} <h2 class="form-signin-heading">仙剑奇侠传</h2>
<label for="inputEmail" class="sr-only">Username</label>
<input type="text" id="" name="username" class="form-control" placeholder="Username" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me </label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div> <!-- /container -->{% 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.pyfrom django.shortcuts import renderdef acc_login(request): return render(request,'login.html')
访问：http://127.0.0.1:8000/login/
image
（5）登陆验证
PerfectCRM/views.py
# PerfectCRM/views.pyfrom django.shortcuts import render,redirectfrom django.contrib.auth import authenticate,logindef 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}}
<li><a href="https://v3.bootcss.com/examples/dashboard/#">{{ request.user }}</a></li>（6）登出
Bootstrap3/起步 -->> https://v3.bootcss.com/examples/navbar-static-top/#
image
image
右键-->>copy-->>copy element,放到index.html里面
<ul class="nav navbar-nav navbar-right">
<li><a href="https://v3.bootcss.com/examples/dashboard/#"></a></li>
<li class="dropdown open">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="true">{{ request.user }} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">个人信息</a></li>
<li><a href="{% url 'logout' %}">Logout</a></li>
</ul>
</li>
</ul>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登录界面
image
image
<ul class="nav navbar-nav navbar-right">
<li class="dropdown ">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">{{ request.user }} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">个人信息</a></li>
<li><a href="{% url 'logout' %}">Logout</a></li>
</ul>
</li>
</ul>（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渲染
image
（9）有的页面只有登录后才能访问
crm/views.py
# crm/views.pyfrom django.shortcuts import renderfrom django.contrib.auth.decorators import login_required@login_requireddef dashboard(request): return render(request,'crm/dashboard.html')
settings中设置如果没登录访问跳转的地方
settings.py
#登录才能访问的页面，如果没登录直接跳转到login界面LOGIN_URL = '/login/'
现在没登录状态访问：http://127.0.0.1:8000/crm/
跳到了login界面
image
PerfectCRM/views.py
修改acc_login的redirect
#如果有next值就获取next值，没有就跳转到首页
return redirect(request.GET.get('next','/'))没登录状态访问/crm/,跳到login，登录后（获取next=/crm/）跳到/crm/页面
动态菜单生成
首先获取登录的用户（User）
通过User反向查找到UsrProfile
然后通过UserProfile找到用户关联的所有角色
最后通过角色循环遍历出用户所有的菜单
image
image
index.html
<ul class="nav nav-sidebar">
<li class="active"><a href="https://v3.bootcss.com/examples/dashboard/#">Overview <span
class="sr-only">(current)</span></a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Reports</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Analytics</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Export</a></li>
{% for role in request.user.userprofile.role.select_related %}
{% for menu in role.menus.select_related %} <li><a href="{% if menu.url_type == 0 %}{{ menu.url_name }}{% else %}{% url menu.url_name %}{% endif %}">{{ menu.name }}</a></li>
{% endfor %}
{% endfor %} </ul>如果是静态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）添加菜单
image
url中name一致
# crm/urls.pyfrom django.conf.urls import url,includefrom crm import views urlpatterns = [ url(r'^$', views.dashboard,name='sales_dashboard'), ]
再添加两个菜单（静态url）
image
image
（2）添加角色
添加sales和students两个角色
image
image
（3）关联用户
image
image
（4）动态菜单查看
现在用不同的角色登录后，就可以实现动态菜单功能了
用derek账户登录(sales的菜单)
image
用kebi账户登录（students菜单）
作者：Zhang_derek
链接：https://www.jianshu.com/p/5a687e75f4bf
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
点击查看更多内容
3人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦