手记

前端页面设计(三)

前端页面布局

(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 src="{% 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 src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="{% 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人推荐
随时随地看视频
慕课网APP