Django前端模板渲染（超链接配置）

本文链接：https://blog.csdn.net/sinat_38068807/article/details/88875934

（一）列表页

列表标题展示页 menu.html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动漫</title>
</head>
<body>
    <ul>
        {% for item in data %}
            <li>
                <a href="/details/{{ item.id }}">{{ item.title }}</a>
            </li>
        {% endfor %}
    </ul>
</body>
</html>

views页渲染函数 menu_list 代码：

from django.shortcuts import render_to_response

def menu_list(request):
    data = [
        {"id":1,"title":"海琴烟公主"},
        {"id":2,"title":"路飞"},
        {"id":3,"title":"尼尔"},
        {"id":4,"title":"鸣人"},
        {"id":5,"title":"汉库克"}
    ]
    return render_to_response("menu.html",locals())

urls相应代码：path第一个参数是匹配浏览器发来的链接字段如http://127.0.0.1:8000/menu_list/，第二个参数是调用views里的menu_list函数

path('menu_list/',menu_list)

（二）详情页

前端页面 details.html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ data.title }}</title>
</head>
<body>
    <h2>{{ data.title }}</h2>
    <img style="width: 450px;height: 300px;" src="{{ data.img }}">
</body>
</html>

views中渲染函数 details_render 的代码：

def details_render(response,id):
    data = {
        "1": {"title": "海琴烟公主", 'img': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553782973398&di=b10ddb8af3be9a852203739a74a592d5&imgtype=0&src=http%3A%2F%2Fsource.upupoo.com%2Ftheme%2F2000063789%2Fpreview.jpg'},
        "2": {"title": "路飞", 'img': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553783157128&di=ca8e1fe24926a0ccfef7a3ca7c400ad3&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201404%2F27%2F20140427181036_5jTSc.jpeg'},
        "3": {"title": "尼尔", 'img': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553783192302&di=082d13c7882dd9507d39457d1a79a5d6&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F67e9ba1340af0c1b9788c539978164c08f27d1f4.jpg'},
        "4": {"title": "鸣人", 'img': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553783321454&di=46c8eaf7978c815c3c7b1029b3a07f40&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201412%2F05%2F20141205154909_siBhC.jpeg'},
        "5": {"title": "汉库克", 'img': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553783361697&di=89d11bb4ad1822217e96a18ccf995787&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201410%2F23%2F20141023165631_kVF3Q.jpeg'}
    }.get(id)

    return render_to_response("details.html",locals())

urls中的代码：

re_path(r'details/(?P<id>\d{1,2})',details_render)

（三）运行项目，观看结果

输入http://127.0.0.1:8000/menu_list/

点击海琴烟公主后：

好了，大功告成！