结合前面知识点,使用 Django实现定制女朋友版的小相册

孤寒者 发表于 2021/09/27 10:45:28 2021/09/27
【摘要】  😜本文是结合前面大部分知识点,带领大家一同做一个小型项目(只用到前面14节所讲内容哦,所以不要怕超纲了!)切记——一定要自己动手实操一下哦!!!😜重点来啦!重点来啦!!💗💗💗本项目实现功能:首页以固定大小展示你上传的所有女朋友的照片;点击任意一张图片,跳转至对应图片的详情页!!!  ♥️别着急,先看演示[video(video-R5B7VC4K-1630075012319)(ty...

 😜本文是结合前面大部分知识点,带领大家一同做一个小型项目(只用到前面14节所讲内容哦,所以不要怕超纲了!)切记——一定要自己动手实操一下哦!!!😜


重点来啦!重点来啦!!💗💗💗
本项目实现功能:首页以固定大小展示你上传的所有女朋友的照片;点击任意一张图片,跳转至对应图片的详情页!!!

♥️别着急,先看演示

[video(video-R5B7VC4K-1630075012319)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=932665394)(image-https://ss.csdn.net/p?http://i2.hdslb.com/bfs/archive/061c3ca3f55212ed62565d31ff85b066b9502a3e.jpg)(title-定制女朋友版的小相册)]


第一部分——项目设置!

0.创建项目

  在第二节中,本博主详细教过如何使用pycharm创建并运行起Django项目,请读者朋友们先自己尝试尝试,看看掌握如何!如果实在遇到问题,再去看文,看看自己究竟哪个地方掌握的不够牢固哦!

《2.一步一步教你使用pycharm运行起第一个Django项目》

  到此你要实现的效果是——运行起你Django项目,并成功看到小火箭!!!

1.创建本项目所用的app

快捷键Ctrl+Alt+R召唤出命令界面:

输入命令:

startapp home

创建一个名为home的app。

在这里插入图片描述

2.创建并配置静态文件

(1)创建如图所示文件结构:

(其中,image文件中的八张图为本项目所用图片【模拟从数据库中获取的数据!】)

在这里插入图片描述

(2)配置静态文件路径:

在这里插入图片描述

3.路由分配

(1)名为home的app下创建urls.py文件(空文件):

在这里插入图片描述

(2)设置项目目录下的urls.py文件(进行路由分配!):

在这里插入图片描述

第二部分——第一个功能实现!

在此部分,本博主将会手把手带你实现首页显示所有图片(固定大小)!

1.创建首页模板文件:

在这里插入图片描述

home.html文件:

  1. 通过对img标签统一设置样式实现首页图片大小固定;
  2. 并采用a标签包裹每一个img标签,以便后面实现点击图片跳转对应图片的详情页;
  3. img标签的src(即图片路径)属性采用模板标签实现;
{% 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=""><img src="{% static 'image/1.jpg' %}" alt=""></a>
<a href=""><img src="{% static 'image/2.jpg' %}" alt=""></a>
<a href=""><img src="{% static 'image/3.jpg' %}" alt=""></a>
<a href=""><img src="{% static 'image/4.jpg' %}" alt=""></a>
<a href=""><img src="{% static 'image/5.jpg' %}" alt=""></a>
<a href=""><img src="{% static 'image/6.jpg' %}" alt=""></a>
<a href=""><img src="{% static 'image/7.jpg' %}" alt=""></a>
<a href=""><img src="{% static 'image/8.jpg' %}" alt=""></a>

</body>
</html>

2.编写对应的视图函数:

home/views.py文件:

from django.shortcuts import render

# Create your views here.

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

3.配置路由:

home/urls.py文件:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name="home"),      # 配置首页路由
]

效果展示:

(现在运行起Django项目,可以发现首页以相同大小展示着image目录下的八张图片——第一个功能实现!)

在这里插入图片描述

第三部分——第二个功能实现!

在此部分,本博主将会手把手带你实现点击首页任一图片,跳转至图片详情页!

1.创建详情页模板文件:

在这里插入图片描述

details.html文件:

究竟用户点击的是哪一张图片?
此图片详情页究竟该展示哪一张图片的详情页?
这些问题通过视图函数编写逻辑,并最终通过image_url模板变量实现!

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

2.编写对应的视图函数:

home/views.py文件:
(在先前代码的基础上加入以下代码即可!)

注意:点击首页任一图片之后跳转到对应图片的详情页这一功能是通过url传参实现,在用户点击首页某一图片时,携带对应图片为第几个的参数传递给对应的视图函数(details()视图函数)。所以要更改首页模板文件哦!


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


def details(request, post_id):
    '''
    详情页!
    :param request:
    :param post_id:参数表示哪一张图片
    :return:图片的详情页
    '''
    image_all=img_db()
    # 取出对应id的图片
    image_url=image_all[post_id-1]

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

更改首页模板文件(home.html文件):
在这里插入图片描述

3.配置路由:

home/urls.py文件:

在这里插入图片描述

End——芜湖->完工!

本项目源码:

链接:https://pan.baidu.com/s/1x_8-KvbXdfygNa2v6_p9wQ
提取码:un26

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。