目录

1、创建模板页

2、创建首页

3、 添加错误提示页面

4、增加相册信息

4.1、编写网页部分

4.2、编写后端部分

 5、查看相册信息

5.1、编写网页部分

5.2、编写后端代码

6、修改相册信息

6.1、编写网页部分

6.2、编写后端部分

7、删除相册信息

7.1、编写后端部分

8、附加：点击图片变大

8.1、编写后端部分

上一篇主要是在编写相册管理系统前的铺垫，不知道的友友们可以去我主页上查看。

Django--在线相册管理系统（1）_橙子哈哈哈~的博客-CSDN博客

1、创建模板页

我们先在templates文件夹中右击新建一个base的网页文件

，用来做模板页，编写代码：

在线相册信息管理系统
放回首页 |  浏览相册信息 |  发布相册信息

 a标签里的为url：反向解析。

index为跳转页面，后面的数字为参数。

这样的好处会比较灵活，当某一个url配置的地址发生变化时，页面上使用反向解析生成地址的位置不需要发生变化。

url的反向解析

在urls.py中添加路径：

    path('',views.index,name="index"),
    path('look/',views.look,name="look"),
    path('add',views.add,name="add"),

在views.py中添加功能：

def index(request):
    return render(request, "index.html")     # 首页

def add(request):
    return render(request, "addAlbum.html")  # 添加页面

2、创建首页

还是在templates文件夹中创建一个index的网页文件，编写代码：

    
    


    
        {% include "base.html" %}  
        首页
    

3、 添加错误提示页面

为的就是当操作错误时，就有一个提示作用。

在templates文件夹中创建一个ifo的网页文件，编写代码：

    
    


    
        {% include 'base.html' %}

        
        {% if info != null %}
         {{ info }} 
            {% if status == 200 %}
            放回浏览页
            {% elif status == 400 %}
            返回上一页
            {% endif %}
        

        

        {%  endif  %}

        
        {% if image != null %}
        {image}}' width="500" height="330"/>
        {%  endif  %}

        
        {% if imageLook != null %}
        

        返回上一页
        

        

        { imageLook }}'/>
        {%  endif  %}

    

 这里用到了一些django标签的使用，不会的建议去补习一下基础知识，我就当大家都会这些标签的使用，不然挺麻烦的。

内容都在上面，包括与后面内容相联系的代码，现在看不懂的话，看到后面再回头看或许有新的体会。

4、增加相册信息

增删改查，就先从增开始吧。

---

4.1、编写网页部分

在templates文件夹中创建一个addAlbum的网页文件，编写代码：

    
    
     


     
        {% include 'base.html' %}
         添加相册信息
         

             {% csrf_token %}       
             

                 

                     
标题：
                     

                 

                 

                     
图片：
                     


                 
             
              
         
         

         
    

注意：

当Django在处理文件上传的时候，文件数据被保存在request.FILESFILES中的每个键为中的name注意：FILES只有在请求的方法为POST 且提交的

带有enctype="multipart/form-data" 的情况下才会包含数据。否则，FILES 将为一个空的类似于字典的对象

4.2、编写后端部分

 在urls.py文件中加上一个路径：

path('addImage',views.addImage,name="addImage"),

在views.py文件中添加功能：

from PIL import Image
from ablumapp.models import Album

def addImage(request):
    try:

        # 网页传输内容的解析就不多说了，不懂的可以去百度下相关内容

        fileTitle = request.POST['title']
        fileImage = request.FILES.get("pic", None)
        fileTtpe = fileImage.name.split('.').pop()   # 获得图片的后缀名，知晓是什么类型

        if fileImage == None:
            content = {"info": "暂无上传文件!","status":400}
            return render(request, "info.html", content)  
        if fileTitle == '':
            content = {"info": "请输入标题!","status":400}
            return render(request, "info.html", content)
        if fileTtpe.lower() != "jpg" and fileTtpe.lower() != "png" and fileTtpe.lower() != "jpeg":
            content = {"info": "请选择图片文件!","status":400}
            return render(request, "info.html", content)

        # 判断标题是否与数据库中重复
        mod = Album.objects   # ablumapp.models下的Album类
        ulist = mod.filter(title=fileTitle)
        if len(ulist) == 0:
            filename = request.POST['title'] + "." + fileTtpe  # 组合后的文件名
            
            # 之前创建的static文件夹起到用途了，就是用它来存放上传的图片
            Imagefile = open("./static/" + filename, "wb+")  
            for chuck in fileImage.chunks():
                Imagefile.write(chuck)   
            Imagefile.close()

            # 执行图片缩放
            im = Image.open("./static/" + filename)
            im.thumbnail((75, 75))
            im.save("./static/small/s_" + filename, None)  # 记得在static文件夹中创建一个small文件夹，用来存放缩放后的图片。

            # 添加记录
            ob = Album()
            ob.title = fileTitle
            ob.type = fileTtpe
            ob.save()
            content = {"info": "上传成功!", "image": filename,"status":200}
        else:
            content = {"info": "标题重复，请重新输入","status":400}
    except:
        content = {"info": "上传失败!","status":400}
    return render(request, "info.html", content)

render方法的作用：

        结合一个给定的模板和一个给定的上下文字典，并返回一个渲染后的 HttpResponse 对象。

通俗的讲就是把context的内容, 加载进templates中定义的文件, 并通过浏览器渲染呈现。

 5、查看相册信息

---

5.1、编写网页部分

在templates文件夹中创建一个addAlbum的网页文件，编写代码：

    
    

    


    
        {% include 'base.html' %}
        浏览相册图片信息
        
            标题：
            
        
        

        
            {% for album in AlbumList %}
                
            {% endfor %}
        

            

                
ID号
                
标题
                
图片
                
时间
                
操作
            

                    
{{ album.id }}
                    
{{ album.title }}
                    

                        { album.title }}.{{ album.type }}'/>
                    
                    
                    
{{ album.add_time|date:'Y-m-d' }}
                    

                        编辑
                        删除
                    
                
        


        

        

        {mywhere}}">上一页 
        {% for p in pageList %}
            {% if pIndex == p %}
                  {mywhere}}" >{{ p }}
            {% else %}
                  {mywhere}}" >{{ p }}
            {% endif %}
        {% endfor %}
          {mywhere}}">下一页
        

        

        

    

对应分页内容看不懂的，可以看接下来的后端代码，结合起来看。

5.2、编写后端代码

在urls.py中添加：

path('look/',views.look,name="look"),

在views.py中添加：

def look(request, pIndex=1):
    try:
        kw = request.GET.get('keyword', None)
        mywhere = ""
        if kw != None:
            ulist = Album.objects.filter(title__contains=kw)
            mywhere = "?keyword=" + kw
        else:
            ulist = Album.objects.all()
        p = Paginator(ulist, 5)  # 返回分页对象，参数为列表数据，每面数据的条数

        # 设置页号边界
        if pIndex < 1:
            pIndex = 1
        if pIndex >= p.num_pages:   # 页面总数
            pIndex = p.num_pages
        
        # 下标以1开始，如果提供的页码不存在，抛出InvalidPage异常。这个方法比较方便快捷的分页，输入第几页，就会放回对应页数的数据，在这里进行的筛选。

        list = p.page(pIndex)  
        content = {"AlbumList": list, "pIndex": pIndex, "pageList": p.page_range, "mywhere": mywhere}
        return render(request, "lookAlbum.html", content)
    except:
        content = {"info": "没有找到用户信息","status":400}
        return render(request, "info.html", content)

给讲下分页思路：

        当点击搜索后，会将输入的内容（kw）发送到后端，设置mywhere = "?keyword=" + kw

，对数据库所有标题进行模糊查找，放入一个列表中，用方法取出对应页的数据然后放回到页面中。简答讲下，要知道网址？后面的就是get类型的访问参数，（http://127.0.0.1:8000/look/1?keyword=3），类似这种，具体看代码吧。

6、修改相册信息

---

6.1、编写网页部分

在templates文件夹中创建一个updata的网页文件，编写代码：

    
    

    


     
        {% include 'base.html' %}
         修改相册信息
         

             {% csrf_token %}
             

                 

                     
标题：
                     

                 

                 

                     
图片：
                     


                 
             
              
         
         

         

       { title }}.{{ type }}' width="500" height="330" id="preview"/>
    

6.2、编写后端部分

在urls.py中添加：

path('updata/',views.updata,name="updata"),  # 在浏览页点击修改后的路由路径
path('doupdata/',views.doupdata,name="doupdata"), # 执行修改命令的功能

在views.py中添加：

# 将信息记录并跳转到修改页面
def updata(request, uid):
    # 查询
    mod = Album.objects
    objects = mod.filter(id=uid)[0]
    content = {"id": objects.id, "title": objects.title, "type": objects.type, "time": objects.add_time}
    return render(request, "updata.html", content)

# 修改功能
def doupdata(request, uid):
    try:
        # 判断标题是否重复
        mod = Album.objects
        ulist = mod.filter(title=request.POST['title']).exclude(id=uid)
        if len(ulist) == 0:

            fileImage = request.FILES.get("pic", None)
            if fileImage == None:
                content = {"info": "暂无上传文件!","status":400}
                return render(request, "info.html", content)
            fileType = fileImage.name.split('.').pop()
            if fileType.lower() != "jpg" and fileType.lower() != "png" and fileType.lower() != "jpeg":
                content = {"info": "请选择图片文件!","status":400}
                return render(request, "info.html", content)

            ob = Album.objects.get(id=uid)
            oldTitle = ob.title + "." + ob.type
            # 删除旧照片
            os.remove("./static/small/s_" + oldTitle)
            os.remove("./static/" + oldTitle)
            # 修改标题
            ob.title = request.POST['title']
            # 修改类型
            ob.type = fileType
            filename = request.POST['title'] + "." + fileType
            
            # 保存图片到本地
            Imagefile = open("./static/" + filename, "wb+")
            for chuck in fileImage.chunks():
                Imagefile.write(chuck)
            Imagefile.close()

            # 执行图片缩放并保存到本地
            im = Image.open("./static/" + filename)
            im.thumbnail((75, 75))
            im.save("./static/small/s_" + filename, None)

            ob.save()

            content = {"info": "修改成功!","status":200}
        else:
            content = {"info": "标题重复，请重新输入","status":400}
    except:
        content = {"info": "修改失败!","status":400}

    return render(request, "info.html", content)

这里应该都知道吧，对应部分都有注释。

7、删除相册信息

---

网页部分与第5步结合，添加了删除提示，以防误点：

7.1、编写后端部分

在urls.py中添加：

path('delete/',views.delete,name="del"),

在views.py中添加：

def delete(request, uid):
    try:
        ob = Album.objects.get(id=uid)
        oldTitle = ob.title + "." + ob.type
        # 删除旧照片
        os.remove("./static/small/s_" + oldTitle)
        os.remove("./static/" + oldTitle)
        # 删除数据库信息
        ob.delete()
        content = {"info": "删除成功!","status":200}
    except:
        content = {"info": "删除失败!","status":400}
    return render(request, "info.html", content)

8、附加：点击图片变大

 网页代码请看第5点，图片标签被a标签包含了。

8.1、编写后端部分

在urls.py中添加：

path('lookBigImage/',views.lookBigImage,name="lookBigImage"),

在views.py中添加：

def lookBigImage(request, uid):
    try:
        ob = Album.objects.get(id=uid)
        image = ob.title + "." + ob.type
        content = {"imageLook": image}
        return render(request, "info.html", content)
    except:
        content = {"info": "查看失败","status":400}
        return render(request, "info.html", content)

好了，这个在线相册管理系统就写完啦，运行看看效果吧，如果哪里有看不懂的地方就在评论区中留言或私信我哦！

未经允许，请勿转载！