为什么class="active"样式无法添加到前端页面？(语言-python|开发工具-pycharm)

Question

以下是我的代码，我想实现菜单默认选中，依次我通过用户当前登录的url是否和需要默认选中的页面菜单的url一致，若一致，则添加class="active”，但为什么我从页面的检查代码中却发现并没有添加成功，而且把data_list打印出来后也没有class属性，是url路径有问题还是字典添加键值对失败，我该如何解决
url路径代码

# 项目管理
path('manage/(?P<project_id>\d+)/dashboard/', manage.dashboard, name='dashboard'),
path('manage/(?P<project_id>\d+)/issues/', manage.issues, name='issues'),
path('manage/(?P<project_id>\d+)/statistics/', manage.statistics, name='statistics'),
path('manage/(?P<project_id>\d+)/file/', manage.file, name='file'),
path('manage/(?P<project_id>\d+)/wiki/', manage.wiki, name='wiki'),
path('manage/(?P<project_id>\d+)/setting/', manage.setting, name='setting'),

PYTHON代码

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:
        # 当前用户访问的URL：request.path_info:  /manage/4/issues/xxx/add/
        if request.path_info.startswith(item['url']):
            item['class'] = 'active'
            return item
    return {'data_list': data_list}

页面模板代码

{% for item in data_list %}
    <li class="{{ item.class }}"><a href="{{ item.url }}">{{ item.title }}</a></li>
{% endfor %}

打印出的data_list

[{'title': '概览', 'url': '/manage/(%3FP1%5Cd+)/dashboard/'}, {'title': '问题', 'url': '/manage/(%3FP1%5Cd+)/issues/'}, {'title': '统计', 'url': '/manage/(%3FP1%5Cd+)/statistics/'}, {'title': 'wiki', 'url': '/manage/(%3FP1%5Cd+)/wiki/'}, {'title': '文件', 'url': '/manage/(%3FP1%5Cd+)/file/'}, {'title': '配置', 'url': '/manage/(%3FP1%5Cd+)/setting/'}]

Answer 1

引自免费微信小程序：皆我百晓生

首先，你需要明确你在代码中的问题并进行分析。

首先来看你的问题，你的 data_list 打印出来的结果并没有显示 class 属性。你可能是想要在 URL 与当前页面的 URL 相匹配时添加 class="active"，但是在你的代码中，你并没有成功地将这个键值对添加到字典中。这是因为你在 if request.path_info.startswith(item['url']): 这一行找到了匹配的项后，立即返回了这个项，没有继续遍历列表并更新其他的项。因此，只有第一个匹配的项被添加了 class 属性，其他的项并没有。此外，你的代码只是检查URL是否以某个路径开始，但并未严格检查是否完全匹配。即使路径的一部分匹配，也会返回 'active'，这可能不是你想要的结果。

解决这个问题的办法是，在遍历列表时，始终保持对 data_list 的引用，并直接在其上操作。而不是返回单个的匹配项。同时，你需要确保URL的完全匹配，而不仅仅是部分匹配。以下是修改后的代码：

def manage_menu_list(request):
    data_list = [
        {'title': '概览', 'url': reverse("dashboard", kwargs={'project_id': request.tracer.project.id}), 'class': ''},
        {'title': '问题', 'url': reverse("issues", kwargs={'project_id': request.tracer.project.id}), 'class': ''},
        # ... 其他菜单项类似设置
    ]

    for item in data_list:
        if request.path_info == item['url']:  # 确保完全匹配
            item['class'] = 'active'  # 添加active类

    return {'data_list': data_list}

然后你的前端模板代码可以保持不变。这样修改后，当你的URL与某个菜单项完全匹配时，该菜单项的 class 属性会被设置为 active。

另外，你需要注意，reverse 函数生成的URL可能包含一些转义的字符（如 %3F 是 ? 的URL编码），这可能导致URL的比较出现问题。你可能需要在比较之前对URL进行一些处理，例如使用 urllib.parse.unquote() 函数来解码URL中的特殊字符。不过在这个例子中，由于你是在服务器端进行比较，且Django的 reverse 函数通常可以生成正确的URL路径（至少在没有参数的情况下），所以这个转义字符的问题可能不是问题所在。但在其他情况下，你可能需要考虑到这个问题。