Django当做独立的html模板系统来写一个界面

上一篇介绍了django的一些基础知识，现在我们来用它详细写一个界面

打开pycharm 配置好虚拟环境，创建好django的开发路径

接下来步入正题

创建模板目录

Templates

进行模板目录路径配置

加载使用模板

超链接技巧

/当html标签的路径当做出现/代表路径分割，但是如果开头出现代表根否则从当前开始链接。

在这里我们将界面设置成列表页和详情页，使用超链接将页面分开展示

列表页

views

def news(request):
    data = [
        {"id": 1, "title": "奥特曼大战葫芦娃"},
        {"id": 2, "title": "奥特曼大战奥巴马"},
        {"id": 3, "title": "奥特曼大战孙悟空"},
        {"id": 4, "title": "奥特曼大战喜洋洋"},
        {"id": 5, "title": "奥特曼大战忍神龟"},
        {"id": 6, "title": "奥特曼大战小怪兽"},
    ]
    return render_to_response("news.html",locals())

urls

path('news/', news),

html

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

        {% endfor %}
        </ul>
    </body>
</html>

详情页：

Views：

def new(request,id):
        data = {
            "1": {"title": "奥特曼大战葫芦娃", "img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553770254887&di=f1f5ea842365e75bdb40f13b5e9e1611&imgtype=0&src=http%3A%2F%2Fvpic.video.qq.com%2F3388556%2Fp05126ryaq4_ori_3.jpg"},
            "2": {"title": "奥特曼大战奥巴马", "img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553770295691&di=a16a21da4c6ecde8c43ed507692e5191&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fcrawl%2F20150430%2FwRbr-awzuney4621023.jpg"},
            "3": {"title": "奥特曼大战孙悟空", "img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553770345596&di=2cc541da7ba0e3df0bfdf545297c904e&imgtype=0&src=http%3A%2F%2Fimg.mp.sohu.com%2Fq_mini%2Cc_zoom%2Cw_640%2Fupload%2F20170612%2Fc4526ff0cecc404db64af3ef3964fb2e_th.jpg"},
            "4": {"title": "奥特曼大战喜洋洋", "img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553770378484&di=9832fc8ecb6fe2e3837ffb97e2ca0f82&imgtype=0&src=http%3A%2F%2Fi-7.vcimg.com%2Fcrop%2F527065a7b36bf57c417e005e3be3833d77297%2528600x%2529%2Fthumb.jpg"},
            "5": {"title": "奥特曼大战忍神龟", "img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553770407670&di=0067077535fb23af1379311ea7a38b51&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180115%2F6924faa1a96c45e49399dbc25fc2ed59.gif"},
            "6": {"title": "奥特曼大战小怪兽", "img": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553770442773&di=670b87297b27e607fdc468a4cd1a47f0&imgtype=0&src=http%3A%2F%2Fimg4.cache.netease.com%2Fgame%2F2011%2F2%2F21%2F201102210948247c986.jpg"},
        }.get(id)
        return render_to_response("new.html",locals())

urls

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

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>{{ data.title }}</h1>
    <img src="{{ data.img }}">
</body>
</html>

Django当做独立的html模板系统来写一个界面

列表页

views

urls

html

详情页：

Views：

urls

Html

猜你喜欢