（五）Django学习——总结所学知识，进行一个小型实战训练：模拟网站首页，实现首页是一系列大小一模一样的图片，点击之后跳转到相应的图片的详情页。

2021/6/9 18:23:27

编程Tag： 图片跳转 return image 详情页首页 JPEG Home

本文主要是介绍（五）Django学习——总结所学知识，进行一个小型实战训练：模拟网站首页，实现首页是一系列大小一模一样的图片，点击之后跳转到相应的图片的详情页。，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

**
本次目标：：：
模拟网站首页，实现首页是一系列大小一模一样的图片，点击之后跳转到相应的图片的详情页。
项目源码：百度网盘！
链接：https://pan.baidu.com/s/1WoJpuwoSihcvsazGqbcO_A
提取码：2maq
**

第一步：设置静态文件！（在对应的image目录下存放6张用于首页布局的图片）在这里插入图片描述

第二步：创建名为home的首页app

在这里插入图片描述

第三步：配置整个项目的settings.py文件（设置允许访问对象；设置静态文件路径）

（1）允许所有人访问：

在这里插入图片描述

（2）设置静态文件路径：

在这里插入图片描述

第四步：设置项目目录下的urls.py文件（为home首页app分配路径！）

在这里插入图片描述

第五步：配置名为home的首页app的urls.py文件（配置首页路径；配置详情页路径）

在这里插入图片描述

第六步：配置名为home的首页app的views.py文件（模拟数据库数据；调用首页的视图函数；调用详情页的视图函数）

from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.

def img_db():
    '''
    假设下面的数据是数据库里所有图片的路径地址
    :return:数据库里所有图片的路径地址
    '''
    image_all=["image/1.jpeg","image/2.jpeg","image/3.jpeg","image/4.jpeg","image/5.jpeg","image/6.jpeg"]
    return image_all

def home(request):
    '''
    首页！
    :param request:
    :return:
    '''
    return render(request,"home/home.html")

def details(request, post_id):
    '''
    详情页！
    :param request:
    :param post_id:参数表示哪一张图片
    :return:图片的详情页
    '''
    image_all=img_db()
    #取出对应id的图片
    if post_id>len(image_all):
        return HttpResponse("404 页面不存在")
    image_url=image_all[post_id-1]

    return render(request,"home/details.html",context={"image_url":image_url})

第七步：创建HTML模板（首页模板；详情页模板）

在这里插入图片描述

（1）首页模板home.html

{% load static %}       
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        {#        设置样式，使首页所有图片大小一样       #}
        img{                
            width: 200px;
            height: 100%;
        }
    </style>
</head>
<body>

<a href="{%  url 'details' 1 %}"><img src="{% static 'image/1.jpeg' %}" alt=""></a>
<a href="{%  url 'details' 2 %}"><img src="{% static 'image/2.jpeg' %}" alt=""></a>
<a href="{%  url 'details' 3 %}"><img src="{% static 'image/3.jpeg' %}" alt=""></a>
<a href="{%  url 'details' 4 %}"><img src="{% static 'image/4.jpeg' %}" alt=""></a>
<a href="{%  url 'details' 5 %}"><img src="{% static 'image/5.jpeg' %}" alt=""></a>
<a href="{%  url 'details' 6 %}"><img src="{% static 'image/6.jpeg' %}" alt=""></a>

</body>
</html>

（2）详情页模板details.html

{%  load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情页</title>
</head>
<body>
<h1>详情页</h1>
<img src="{% static image_url %}" alt="">
</body>
</html>

实现如下：