django网页-通过数据库添加信息并实现图片放大缩小功能

最新推荐文章于 2022-04-29 14:59:58 发布

麻辣菟头

最新推荐文章于 2022-04-29 14:59:58 发布

阅读量831

点赞数

分类专栏： django

本文链接：https://blog.youkuaiyun.com/weixin_44062039/article/details/90903672

版权

django 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在Django项目中通过数据库添加图片信息，并实现图片的放大缩小功能。首先，使用SQLiteSpy工具对数据库进行可视化操作，创建或插入图片数据。接着，详细讲解了如何处理图片的位置，利用CSS的绝对定位和JavaScript实现图片点击后的放大效果。最后，讨论了如何添加多张图片和删除数据库中的记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要了解的知识：
1.下载一个软件：SQLiteSpy
2.会sql语句
3.css，绝对定位、相对定位，html点击事件：javascript

1.确定网页图片存放的数据库名
网页后缀–feedback
查询代码中feedback app - models.py (用于存放数据库信息）
确定这里相关的数据库是：feedbacktype、feedback
2.数据库信息可视化
下载SQLiteSpy
通过这个软件打开sqlite.db(已存在的数据库文件)
在这里插入图片描述
3.插入一张图片
如果没有问题类型，需要先创建一个问题类型,
feedback_feedbacktype

INSERT INT feedback_feedbacktype(cn_name,en_name,tw_name)
VALUES ("测试"，“test”,"测试")

id是自动生成的不用赋值
F9运行sql语句–生成问题类型
创建一条带图片的记录
项目中新建一个图片文件路径–./cache/img/1
放入一张图片–必须将图片命名为0，不加文件拓展名
这些都是通过运行一步步确定的规则，比如图片不显示，就f12-锁定图片元素-点击network查看错误原因找到的

INSERT INTO feedback_feedback (time, os_info, content, telephone, images, type_id, status) VALUES (datetime(CURRENT_TIMESTAMP, 'localtime'), "android5", "test_content", "13912345678", "screen.jpg", 1, 0);

这里会报错，os_info这里是必须要输入固定的格式，之前随意输入字符串会报错，通过定位问题发现必须按照规定格式填写
以下是正确的方法：

INSERT INTO feedback_feedback(time,id,os_info,content,telephone,images,status,type_id）VALUES (datetime(CURRENT_TIMESTAMP,'localtime'),"2.1.31@8.0.0@zh@LLD-AL00@HONOR@04:79:70:00:F2:49
	","test","1111111","3.jpg",0,1

4.定位照片位置：
–运行代码
–打开f12，点击图片位置，查看涉及到的代码
templates/feedback_modal.html
–添加一个点击事件

onclick = "javascript: if (this.style.width = '150px'){
	this.style.position = 'absolute';
	this.style.left = 0;
	this.style.width = 100%;
	}
else {
	this.style.width = '150px';
	this.style.position = ' ';
	}

分析：
position配置：默认，当有多张图片的时候就依次排列
position=‘absolute’，绝对定位，增加x_index坐标，还有其他属性：left、right、top、buttom，当定义为绝对定位时，就会覆盖整个显示区域，这里width = 100%，覆盖父级元素所有区域，没有height值，默认无限长
**javascript：**是javascript允许对html事件作出反应；JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时

5.添加多张图片
–多放一张照片命名1在之前那个文件夹里面
–执行下面代码

UPDATE feedback_feedback SET images = "0.jpg;1.jpg" WHERE id = 3

6.删除表中数据库

DELETE FROM feedback_feedback where id = 4