美文网首页
基于inclusion_tag的菜单切换及菜单展示

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

作者: 采星星的小太阳BavaLI | 来源:发表于2020-06-28 09:56 被阅读0次
  • 1.数据库获取
    1.我参与的项目
    2.我创建的项目
    2.循环显示
    3.当前页面需要显示、其它页面也需要啊显示

使用inclusion_tag来展示

  • 新建一个文件夹,在下面创建一个文件


    image.png
  • 这一部分适合用inclusion_tag


    image.png

    -1创建一个templatetags文件夹

  • 2.在下面常见任意python文件(注意导包)
from django.template import Library
register = Library()
@register.inclusion_tag('inclusion/all_project_list.html')
def all_project_list():
    return 
  • 然后在对应的文件夹下面创建相应的html同名文档
        <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>
  • 母版导入


    image.png
总结一下,inclusion_tag其实就是一个小模块,可以自定义,简化代码的书写!
具体实现
  • inclusion_tag html代码
        <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>
  • 自定义python文件
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}
  • 注意,在管理的全局模板里面还要传入一个request对象 all_project_list是你自己自定义在templatetags里面的对应函数的名称。
也就是说,你给我参数,我再去我对应的html进行渲染,然后你再哪里调用,我最后在把我渲染好的东西给你就行了。
        {% all_project_list request%}
        {#    inclusion——tag部分 谁调用的谁还要传入一个参数   #}
初步完结运行结果
image.png
后期还要配置路由!

项目管理

项目管理URL和视图的设计

该部分进入项目管理之后,要进行路由的规划
  • /manage/项目id/dashbord

  • /manage/项目id/issues

  • /manage/项目id/statistics

  • /manage/项目id/file

  • /manage/项目id/wiki

  • /manage/项目id/settings

  • 简化路由书写:


    #项目管理
    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'),
"""  
  • 如果直接在include里面加一个列表,那么就会在当前目录下进行路由分发,不会在解析一个字符串了。
  • 进入include的源码看一看:


    image.png
  • 源码显示可以是加一个列表和元组。


    image.png
  • 在这里就把项目的路由配置好了。
点击,然后在创建对应的HTML,之后默认在项目下拉框和项目列表,点击就进入项目的概览部分
image.png
  • 就像:


    image.png
    image.png

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

菜单栏设计和实现
  • 进入项目展示菜单
    1.进入项目才展示菜单
步骤
  • 1.判断是否已经进入了项目?(在中间件进行判断!)

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里面

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

  • 1.用户请求url
  • 2.如果正常的话会执行完所有的process_request方法,如果遇到return那么马上返回。
  • 3.之后进行路由匹配(就是把ur和对应的视图函数匹配到了),如果遇到return那么马上返回。
  • 4.之后在执行所有的process_view,如果遇到return那么马上返回。
  • 5.之后在执行我们的视图函数

注意的小点

  • 外键会自动加一个_id


    image.png

中间件代码

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

  • manage目模板部分做了一个判断
        {% 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和做默认选中菜单

  • 这二者应该在同一个ul里面


    image.png
    image.png
  • 点击对应菜单进入

        {% 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

默认选中菜单:

  • 再定义一个inclusion_tag:
@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}
  • html
{% for item in data_list %}
<li {% if item.class %} class="{{ item.class }}" {% endif %}><a href="{{ item.url }}">{{item.title}}</a></li>
{% endfor %}
image.png
  • day07总结
image.png

相关文章

网友评论

      本文标题:基于inclusion_tag的菜单切换及菜单展示

      本文链接:https://www.haomeiwen.com/subject/trusfktx.html