天天看点
返回

前端页面field_前端页面设计（三）

前端页面布局

(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 %}html>

{#    #}    

PerfectCRM

{% block body %}

{% endblock %}    

base.html

此时目录

前端页面field_前端页面设计（三）

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),

]

(4)index.html修改删除search+右上角留一个就好

左侧project改成block

Dashboard改成h2,删除class “row placeholders”里面的内容

删除class “sub-header“”里面的内容

左边ul只留一个就好

前端页面field_前端页面设计（三）

图片.png

index.html{#templates/index.html#}

{% extends 'base.html' %}

{% block body %}

Toggle navigation

{% block pro_name %}Project name{% endblock %}

  • Dashboard
  • Overview (current)
  • Reports
  • Analytics
  • Export

Dashboard

{% endblock %}

index.py

(5)动态菜单生成

销售，学生，讲师访问页面时。显示的应该是对应角色的菜单，所以需要动态生成菜单

crm/models.py

添加Menusclass 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中关联Menusclass 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.pyfrom 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

前端页面field_前端页面设计（三）

image

然后还要有登录界面

登录页面开发

前端页面field_前端页面设计（三）

`

(1)templates/login.html{#templates/login.html#}

{% extends 'index.html' %}

{% load staticfiles %}

{% block extra-css %}    {% endblock %}

{% block body %} 

{% csrf_token %}        

仙剑奇侠传

Username

Password

 Remember me          

Sign in

 {% endblock %}

(2)statics/css/signin.cssbody {  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.pyurl(r'^login/', views.acc_login),

(4)PerfectCRM/views.py# PerfectCRM/views.pyfrom django.shortcuts import renderdef acc_login(request):

return render(request,'login.html')

前端页面field_前端页面设计（三）

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}}

{{ request.user }}

(6)登出

前端页面field_前端页面设计（三）

image

前端页面field_前端页面设计（三）

image

右键-->>copy-->>copy element,放到index.html里面

  • aria-expanded="true">{{ request.user }} 
    • 个人信息
    • Logout

PerfectCRM/urls.pyurl(r'^logout/', views.acc_logout,name='logout'),

PerfectCRM/views.pydef acc_logout(request):

logout(request)    return redirect("/login/")

现在可以点“logout”跳到login登录界面

前端页面field_前端页面设计（三）

image

前端页面field_前端页面设计（三）

image

  • {{ request.user }} 
    • 个人信息
    • Logout

(8)添加错误信息

PerfectCRM/views.pydef 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渲染

前端页面field_前端页面设计（三）

image

(9)有的页面只有登录后才能访问

crm/views.py# crm/views.pyfrom django.shortcuts import renderfrom django.contrib.auth.decorators import [email protected]_requireddef dashboard(request):

return render(request,'crm/dashboard.html')

settings中设置如果没登录访问跳转的地方

settings.py#登录才能访问的页面，如果没登录直接跳转到login界面LOGIN_URL = '/login/'

跳到了login界面

前端页面field_前端页面设计（三）

image

PerfectCRM/views.py

修改acc_login的redirect#如果有next值就获取next值，没有就跳转到首页

return redirect(request.GET.get('next','/'))

没登录状态访问/crm/,跳到login，登录后(获取next=/crm/)跳到/crm/页面

动态菜单生成首先获取登录的用户(User)

通过User反向查找到UsrProfile

然后通过UserProfile找到用户关联的所有角色

最后通过角色循环遍历出用户所有的菜单

前端页面field_前端页面设计（三）

image

前端页面field_前端页面设计（三）

image

index.html

  • Overview 

    class="sr-only">(current)

  • Reports
  • Analytics
  • Export

{% for role in request.user.userprofile.role.select_related %}

{% for menu in role.menus.select_related %}                            

{{ menu.name }}

{% endfor %}

{% endfor %}                

如果是静态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)添加菜单

前端页面field_前端页面设计（三）

image

url中name一致# crm/urls.pyfrom django.conf.urls import url,includefrom crm import views

urlpatterns = [

url(r'^$', views.dashboard,name='sales_dashboard'),

]

再添加两个菜单(静态url)

前端页面field_前端页面设计（三）

image

前端页面field_前端页面设计（三）

image

(2)添加角色

添加sales和students两个角色

前端页面field_前端页面设计（三）

image

前端页面field_前端页面设计（三）

image

(3)关联用户

前端页面field_前端页面设计（三）

image

前端页面field_前端页面设计（三）

image

(4)动态菜单查看

现在用不同的角色登录后，就可以实现动态菜单功能了

用derek账户登录(sales的菜单)

前端页面field_前端页面设计（三）

image

用kebi账户登录(students菜单)

前端页面field_前端页面设计（三）

作者：Zhang_derek

链接：https://www.jianshu.com/p/5a687e75f4bf

來源：简书

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

前端页面field
上一篇: C#常用命令集合
下一篇: 用了一下struts2，结果刚启动TOMCAT我就石化了。

继续阅读