Django完善图片管理功能

一 删除图片

1 修改mysite/image/views.py

# 删除图片功能
@login_required(login_url='/account/lobin/')
@require_POST
@csrf_exempt
def del_image(request):
    image_id = request.POST['image_id']
    try:
        image = Image.objects.get(id=image_id)
        image.delete()
        return JsonResponse({'status':"1"})
    except:
        return JsonResponse({'status':"2"})

2 配置URL

from django.conf.urls import url
from . import views

urlpatterns = [
    # 展示图像列表
    url(r'^list-images/$', views.list_images, name="list_images"),
    # 上传图片
    url(r'^upload-image/$', views.upload_image, name='upload_image'),
    # 删除图片
    url(r'^del-image/$', views.del_image, name='del_image'),
]

3 编写mysite/templates/image/list_images.html

{% extends "article/base.html" %}
{% load staticfiles %}
{% block title %}图像{% endblock %}

{% block content %}
<div>
    <button type="button" class="btn btn-primary btn-lg btn-block" onclick="addImage()">添加图片</button>
    <div style="margin-top:10px;">
    <table class="table table-hover">
        <tr>
            <td>序号</td>
            <td>标题</td>
            <td>图片</td>
            <td>操作</td>
        </tr>
        {% for image in images %}
        <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ image.title }}</td>
            <td>{{ image.image }}</td>
            <td><a nane="delete" href="javascript:" onclick="del_image(this, {{ image.id }})"><span class="glyphicon glyphicon-trash" style="margin-left:20px;"></span></a></td>
        </tr>
        {% empty %}
        <p>还没有图片,请点击上面的按钮添加图片</p>
        {% endfor %}
    </table>
    </div>
</div>

<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'js/layer.js' %}"></script>
<script type="text/javascript">
function addImage(){
    var index=layer.open({
      type: 1,
      skin: 'layui-layer-demo',
      closeBtn: 0,
      shift: 2,
      shadeClose: true,
      title: "Add Image",
      area: ['600px', '440px'],
      content: "<div style='padding:20px'><p>请新增扩展名是.jpg或.png的网上照片地址</p><form><div class='form-group'><label for='phototitle' class='col-sm-2 control-label'>标题</label><div class='col-sm-10'><input id='phototitle' type='text' class='form-control' style='margin-bottom:5px'></div></div><div class='form-group'><label for='photourl' class='col-sm-2 control-label'>地址</label><div class='col-sm-10'><input id='photourl' style='margin-bottom:5px' type='text' class='form-control'></div></div><div class='form-group'><label for='description' class='col-sm-2 control-label'>描述</label><div class='col-sm-10'><textarea class='form-control' style='margin-bottom:5px' row='2' id='photodescription'></textarea></div></div><div class='form-group'><div class='col-sm-offset-2 col-sm-10'><input id='newphoto' type='button' class='btn btn-default' value='Add It'></div></div></form></div>",
      success: function(){
        $("#newphoto").on('click', function(){
          var title = $("#phototitle").val();
          var url = $("#photourl").val();
          var description = $("#photodescription").val();
          var photo = {"title":title, "url":url, "description":description};
          $.ajax({
            url: '{% url "image:upload_image" %}',
            type: "POST",
            data: photo,
            success: function(e){
              var status = e['status']
              if(status =="1"){
                layer.close(index);
                window.location.reload();
              } else {
                layer.msg("图片无法获取,请更换图片");
              }
            },
          });
        });
      },
    });
}

function del_image(the, image_id){
  var image_title = $(the).parents("tr").children("td").eq(1).text();
  layer.open({
    type: 1,
    skin: "layui-layer-rim",
    area: ["400px", "200px"],
    title: "删除图片",
    content: '<div class="text-center" style="margin-top:20px"><p>是否确定删除《'+image_title+'》</p></div>',
    btn:['确定', '取消'],
    yes: function(){
      $.ajax({
        url: '{% url "image:del_image" %}',
        type:"POST",
        data: {"image_id":image_id},
        success: function(e){
          var status = e['status']
          if(status=="1"){
            parent.location.reload();
            layer.msg("删除成功");
          }else{
            layer.msg("删除失败");
          }

        },
      })
    },
  });
}
</script>
{% endblock %}

二 测试

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Python Django 是一种强大的Web开发框架,可以用于构建个人图片网站。使用Python Django开发个人图片网站有许多优势。 首先,Python Django 提供了许多内建的功能和工具,可以快速开发出功能齐全的个人图片网站。它提供了用户认证和授权系统,可以轻松管理用户注册、登录和权限控制,确保只有授权用户可以上传、修改和删除图片。 其次,Python Django 的模型-视图-控制器 (MVC) 设计模式使得开发过程高效且易于维护。利用Django的模型,我们可以定义图片的属性和关系,例如图片的标题、描述、上传时间等。通过视图,我们可以渲染网页并处理用户的请求,例如显示图片列表、上传新图片、编辑图片信息等。控制器则负责处理用户输入,并根据需要更新数据库和显示相应的信息。 此外,Python Django 还提供了丰富的插件和扩展,可以轻松实现各种功能。例如,可以使用Django内置的图片处理库对上传的图片进行缩放、裁剪和压缩,以提升网站的性能和用户体验。还可以使用第三方插件实现图片搜索、标签管理、点赞和评论等功能,让网站更加丰富多样。 最后,Python Django 提供了强大的管理后台,可以方便地管理网站内容。通过后台管理界面,我们可以管理用户、添加新的图片分类、审核用户上传的图片,以及监控网站的数据和性能。 综上所述,使用Python Django开发个人图片网站既高效又灵活。它能够快速构建出功能完善、界面美观的网站,并提供丰富的扩展和管理功能,是开发个人图片网站的理想选择。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值