基于inclusion_tag的菜单切换及菜单展示

2020-06-28  本文已影响0人  采星星的小太阳BavaLI

使用inclusion_tag来展示

from django.template import Library
register = Library()
@register.inclusion_tag('inclusion/all_project_list.html')
def all_project_list():
    return 
        <ul class="nav navbar-nav">
        <li class="dropdown active">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">项目 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
总结一下,inclusion_tag其实就是一个小模块,可以自定义,简化代码的书写!
具体实现
        <ul class="nav navbar-nav">
        <li class="dropdown active">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">项目 <span class="caret"></span></a>
          <ul class="dropdown-menu">
          {% if my %}
            <li><i class="fa fa-list" aria-hidden="true"></i>&nbsp;&nbsp;我创建的项目</li>
              {% for item in my %}
             <li><a href="#">{{item.name}}</a></li>
              {% endfor %}
          {% endif %}
          {% if join %}
            <li><i class="fa fa-handshake-o" aria-hidden="true"></i>&nbsp;&nbsp;我参与的项目</li>
              {% for item in join %}
             <li><a href="#">{{item.project.name}}</a></li>
              {% endfor %}
          {% endif %}
            <li role="separator" class="divider"></li>
            <li><a href="{% url 'project_list' %}">所 有 项 目</a></li>
          </ul>
        </li>
      </ul>
from django.template import Library
register = Library()
from web import models
@register.inclusion_tag('inclusion/all_project_list.html')
def all_project_list(request):
    # 获取我创建的所有项目
    my_project_list = models.Project.objects.filter(creator=request.tracer.user)
    # 获取我参与的所有项目
    join_project_list = models.ProjectUser.objects.filter(user=request.tracer.user)
    return {'my': my_project_list, 'join': join_project_list}
也就是说,你给我参数,我再去我对应的html进行渲染,然后你再哪里调用,我最后在把我渲染好的东西给你就行了。
        {% all_project_list request%}
        {#    inclusion——tag部分 谁调用的谁还要传入一个参数   #}
初步完结运行结果
image.png
后期还要配置路由!

项目管理

项目管理URL和视图的设计

该部分进入项目管理之后,要进行路由的规划

    #项目管理
    url(r'^manage/(?P<project_id>\w+)/', include([ 
    url(r'^dashboard/$', manage.dashboard, name='dashboard'),
    url(r'^issues/$', manage.issues, name='issues'),
    url(r'^statistics/$', manage.statistics, name='statistics'),
    url(r'^file/$', manage.file, name='file'),
    url(r'^wiki/$', manage.wiki, name='wiki'),
    url(r'^setting/$', manage.setting, name='setting'),
    ])),
"""
这样也可以,但是有点繁琐,我们使用前的写法
url(r'^manage/(?P<project_id>\w+)/dashboard/$', project.project_unstar, name='project_dashboard'),
url(r'^manage/(?P<project_id>\w+)/issues/$', project.project_unstar, name='project_issues'),
url(r'^manage/(?P<project_id>\w+)/dashboard/$', project.project_unstar, name='project_unstar'),
url(r'^manage/(?P<project_id>\w+)/statistics/$', project.project_unstar, name='project_unstar'),
url(r'^manage/(?P<project_id>\w+)/file/$', project.project_unstar, name='project_unstar'),
url(r'^manage/(?P<project_id>\w+)/wiki/$', project.project_unstar, name='project_unstar'),
url(r'^manage/(?P<project_id>\w+)/settings/$', project.project_unstar, name='project_unstar'),
"""  
点击,然后在创建对应的HTML,之后默认在项目下拉框和项目列表,点击就进入项目的概览部分
image.png

由于在进入每一个项目的概览部分,我们就要在展示一些菜单栏,接下来就进行展示!

菜单栏设计和实现
步骤

1.判断url是否是以manage开头的即可,如果是以manage开头的就已经证明目前已经进入项目管理了。
2.但是还要注意判断project_id是我参与或者是我创建的,不然不让你进去。

        {#        判断是否进入项目了#}
        <ul class="nav navbar-nav">
                <li><a href="#">概览</a></li>
                <li><a href="#">wiki</a></li>
                <li><a href="#">配置</a></li>
                <li><a href="">文件</a></li>
                <li><a href="">问题</a></li>
                <li><a href="">统计</a></li>
            </ul>

进入项目以后展示菜单,不能再process_request里面,只能在process_view里面

先了解一下中间件的执行流程

注意的小点

中间件代码

from django.utils.deprecation import MiddlewareMixin
from django.shortcuts import render, redirect
from django.conf import settings
import datetime
"""
用户不管是访问我的哪一个url都会先走该中间件

"""
# 封装当前用户对象和他的交易记录对象还有一个project对象
from web import models
class Tracer(object):
    def __init__(self):
        self.user = None
        self.price_policy = None
        self.project = None


# 这里想到在中间件里面向request里面加一个tracer,然后在由视图返回你那给前端之后前端获取!进行判断即可。

class AuthMiddleware(MiddlewareMixin):
   
#进入项目以后展示菜单,不能再process_request里面,只能在process_view里面
    def process_view(self, request, view, args, kwargs):
        #判断url是否是以manage开头,如果是在判断项目的id,否则直接过
        if not request.path_info.startswith("/manage/"):
            return
        # 判断project_id是我参与或者是我创建的
        project_id = kwargs.get('project_id')
        project_object =models.Project.objects.filter(creator=request.tracer.user,
                                      id=project_id).first()
        if project_object:
            # 是我创建的就让他通过
            request.tracer.project = project_object
            return
#         是否是我参与的
        project_user_object = models.ProjectUser.objects.filter(user=request.tracer.user,
                                                                project_id=project_id).first()
        if project_user_object:
            # 是我参与的项目
            request.tracer.project = project_user_object.project
            # 由于获取的是ProjectUser对象,所以在.一下取出project对象!
            return
        # 否则不让你看,回到你的项目列表
        return redirect("project_list")

        {% if request.tracer.project %}
        <ul class="nav navbar-nav">
                <li><a href="#">概览</a></li>
                <li><a href="#">wiki</a></li>
                <li><a href="#">配置</a></li>
                <li><a href="">文件</a></li>
                <li><a href="">问题</a></li>
                <li><a href="">统计</a></li>
            </ul>
        {% endif %}

修复菜单栏bug和做默认选中菜单

        {% if request.tracer.project %}
                <li><a href="{% url 'dashboard' project_id=request.tracer.project.id %}">概览</a></li>
                <li><a href="{% url 'wiki' project_id=request.tracer.project.id %}">wiki</a></li>
                <li><a href="{% url 'setting' project_id=request.tracer.project.id %}">配置</a></li>
                <li><a href="{% url 'file' project_id=request.tracer.project.id %}">文件</a></li>
                <li><a href="{% url 'issues' project_id=request.tracer.project.id %}">问题</a></li>
                <li><a href="{% url 'statistics' project_id=request.tracer.project.id %}">统计</a></li>
            </ul>
        {% endif %}
image.png
image.png
image.png
image.png
中间件:https://www.cnblogs.com/zdqc/p/11756119.html

默认选中菜单:

@register.inclusion_tag("inclusion/manage_menu_list.html")
def manage_menu_list(request):
    data_list = [
        {'title': '概览', 'url': reverse("dashboard", kwargs={'project_id': request.tracer.project.id})},
        {'title': '问题', 'url': reverse("issues", kwargs={'project_id': request.tracer.project.id})},
        {'title': '统计', 'url': reverse("statistics", kwargs={'project_id': request.tracer.project.id})},
        {'title': 'wiki', 'url': reverse("wiki", kwargs={'project_id': request.tracer.project.id})},
        {'title': '文件', 'url': reverse("file", kwargs={'project_id': request.tracer.project.id})},
        {'title': '配置', 'url': reverse("setting", kwargs={'project_id': request.tracer.project.id})},
    ]
    for item in data_list:
       if request.path_info.startswith(item['url']):
           item['class'] = 'active'
    return {'data_list': data_list}
{% for item in data_list %}
<li {% if item.class %} class="{{ item.class }}" {% endif %}><a href="{{ item.url }}">{{item.title}}</a></li>
{% endfor %}
image.png image.png
上一篇 下一篇

猜你喜欢

热点阅读