Django学习笔记9-在线相册信息管理

沙雅云

已于 2022-09-05 19:18:48 修改

阅读量1.3k

点赞数 3

分类专栏：网络文章标签： django python 后端

于 2022-01-11 14:59:17 首次发布

本文链接：https://blog.csdn.net/yychentracy/article/details/122364915

版权

网络专栏收录该内容

55 篇文章 15 订阅

订阅专栏

成品

在这里插入图片描述

第一步：创建项目

$ django-admin startproject mysite

第二步：创建一个应用程序

 python manage.py startapp myapp

第三步：配置settings.py文件

"""
Django settings for mysite project.

Generated by 'django-admin startproject' using Django 4.0.

For more information on this file, see
https://docs.djangoproject.com/en/4.0/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.0/ref/settings/
"""
import os.path
from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-g*n9&x%8(_=r2s72c=w$wicyfni%ongig4eir_-9q66y^5vo9p'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ['*']#允许的主机名，可以将允许访问的主机添加在这个列表里面。


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myapp',#添加app
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'mysite.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'template')],#添加模板目录
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'mysite.wsgi.application'


# Database
# https://docs.djangoproject.com/en/4.0/ref/settings/#databases
#配置数据库叫做mypicture
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'mypicture',
        'USER': 'root',
        'PASSWORD': '',
        'HOST': 'localhost',
        'PORT': '3306',
    }
}


# Password validation
# https://docs.djangoproject.com/en/4.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/4.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/
#配置静态文件
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]
# Default primary key field type
# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
MEDIA_ROOT=os.path.join(BASE_DIR,"static/media")

第四步：构建模型，新增一个model.py

from django.db import models

# Create your models here.
from django.db import models
from datetime import datetime
class Users(models.Model):
    name = models.CharField(max_length=32)
    img_src = models.ImageField(upload_to='./static/mypics/')#将图片保存路径放在数据库中，存放的是图片的静态目录
    addtime = models.DateTimeField(default=datetime.now)#添加事件

第五步：编写数据库脚本，导入数据库数据和模型没有关系，这里是在数据里执行

脚本如下：

/*
SQLyog Community v13.1.1 (32 bit)
MySQL - 5.7.26 : Database - mypicture
*********************************************************************
*/

/*!40101 SET NAMES utf8 */;

/*!40101 SET SQL_MODE=''*/;

/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
CREATE DATABASE /*!32312 IF NOT EXISTS*/`mypicture` /*!40100 DEFAULT CHARACTER SET utf8 */;

USE `mypicture`;

/*Table structure for table `myapp_users` */

DROP TABLE IF EXISTS `myapp_users`;

CREATE TABLE `myapp_users` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(32) NOT NULL,
  `img_src` varchar(32) NOT NULL,
  `addtime` datetime(6) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=24 DEFAULT CHARSET=utf8;

/*Data for the table `myapp_users` */

insert  into `myapp_users`(`id`,`name`,`img_src`,`addtime`) values
(1,'前任女友','static/mypics/前任女友','2020-07-10 16:40:59.383102'),
(2,'落英缤纷壁纸','static/mypics/落英缤纷壁纸','2020-07-10 16:57:50.858488'),
(3,'一棵树壁纸','static/mypics/一棵树壁纸','2020-07-12 15:08:22.038862'),
(4,'手绘看花照片','static/mypics/手绘看花照片','2020-07-12 15:08:41.801860'),
(5,'手绘小女孩','static/mypics/手绘小女孩','2020-07-12 15:09:05.693055');
/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

执行脚本
在这里插入图片描述
执行数据迁移：数据改变了，所以要迁移，属于同步数据

python manage.py makemigrations
python manage.py migrate

第六步：配置路由文件，urls.py

项目的路由文件：

from django.contrib import admin
from django.urls import path,include
from myapp import views


urlpatterns = [
    path('',include('myapp.urls')),
]

应用的路由文件

from django.urls import path,re_path
from . import views


urlpatterns = [
    path('', views.index, name='index'),#首页
    #配置users信息操作路由
    path('users', views.indexUsers, name='indexUsers'),#加载用户信息
    path('users/upload', views.upload, name='upload'),#执行相册文件上传
    path('users/doupload/', views.doupload, name='doupload'),
    path('users/del/<int:uid>', views.delUsers, name='delUsers'),#删除
    path('users/edit/<int:uid>', views.editUsers, name='editUsers'),#编辑
    path('users/update', views.updateUsers, name='updateUsers'),#更新
 ]

第七步：编写路由对应的view文件

from django.shortcuts import render
from django.http import HttpResponse
from myapp.models import Users
from django.shortcuts import render
from django.http import HttpResponse
from PIL import Image
from myapp.models import Users
import time,os
#首页内容
def index(request):

    return HttpResponse("首页<br/> <a href='/users'>在线相册信息管理</a>")
#浏览相册信息，静态页面
def indexUsers(request):
    try:
        ulist=Users.objects.all()
        context = {"userslist": ulist}
        return render(request,"myapp/users/index.html",context)
    except:
        return HttpResponse("没有找到用户的信息")
#上传相册
#执行文件上传处理，以上都为距离，从这开始看
def upload(request):
    return render(request,'myapp/users/upload.html')
def doupload(request):
    myfile_name = request.POST.get("name", None)
    myfile = request.FILES.get("img",None)
    if not myfile:
        return HttpResponse("没有上传的文件信息")
    Users.objects.create(name=myfile_name, img_src=myfile)
    print(myfile)
    #生成上传后的文件名
    filename = str(myfile.name.split('.')[0])+"."+myfile.name.split('.').pop()
    print(filename)
    destination = open("./static/mypics/"+filename,"wb+")
    for chunk in myfile.chunks(): #分块读取上传文件内容并写入目标文件
        destination.write(chunk)
    destination.close()
    return HttpResponse("上传的文件："+filename)
#执行用户信息添加
def insertUsers(request):
    try:
        ob=Users()
        #从表单中获取要添加的信息并封装在ob对象中
        ob.name=request.POST['name']
        ob.age = request.POST['age']
        ob.phone = request.POST['phone']
        ob.save()
        context={"info":"添加成功"}
    except:
        context = {"info": "添加失败"}
    return render(request,"myapp/users/info.html",context)
#执行用户信息删除
def delUsers(request,uid=0):
    try:
        ob = Users.objects.get(id=uid)  # 获取要删除的数据
        ob.delete()  # 执行删除操作
        context = {"info": "删除成功！"}
    except:
        context = {"info": "删除失败！"}
    return render(request, "myapp/users/info.html", context)
#加载用户信息修改表单
def editUsers(request,uid):
    try:
        ob = Users.objects.get(pk=uid)  # 获取要修改的数据
        context = {"user": ob}
        return render(request, "myapp/users/edit.html", context)
    except:
        context = {"info": "没有找到要修改的数据！"}
        return render(request, "myapp/users/info.html", context)
#执行用户信息修改
def updateUsers(request):
    try:
        uid = request.POST['id']  # 获取要修改数据的id号
        ob = Users.objects.get(id=uid)  # 查询要修改的数据
        # 从表单中获取要添加的信息并封装到ob对象中
        ob.name = request.POST['name']
        ob.save()  # 执行保存
        context = {"info": "修改成功！"}
    except:
        context = {"info": "修改失败！"}
    return render(request, "myapp/users/info.html", context)

第八步：编写对用的html文件，也就是template模板文件

首页很简单，就是一个链接，不用写对应的文件，就一句话： return HttpResponse("首页<br/> <a href='/users'>在线相册信息管理</a>")
在这里插入图片描述
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <style type="text/css">
        img{
            width: 75px;
            height: 75px;
        }
        //限制相片显示大小
    </style>
    <script>
        //自定义执行信息删除提示判断，参数uu是成功的删除url地址
        function doDel(uu){
            if(confirm("确定要删除吗？")){
                //网页跳转
                window.location=uu;
            }
        }

    </script>
</head>
<body>
    <center>
        <h1>在线相册信息管理</h1>
        <a href="{% url 'index' %}">返回首页</a>
        <a href="{% url 'indexUsers' %}">浏览相册信息</a> |
        <a href="{% url 'upload' %}">添加相册信息</a>
        <hr/>

        <h3>浏览相册信息</h3>
        <table cellspacing="0" border="1px" width="800px">
            <tr>
                <th>ID号</th>
                <th>照片名</th>
                <th>照片栏</th>
                <th>添加时间</th>
                <th>操作</th>
            </tr>
            {% for user in userslist %}
                <tr>
                    <td>{{user.id}}</td>
                    <td>{{user.name}}</td>
                    <td><img src="{{user.img_src}}"/></td>
                    <td>{{user.addtime}}</td>
                    <td>
                        <a href="{% url 'editUsers' user.id %}">编辑</a>
                        <a href="javascript:doDel('{% url 'delUsers' user.id %}');">删除</a></td>
                </tr>
            {% endfor %}
        </table>
    </center>

</body>
</html>

在这里插入图片描述
编辑节面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <center>
        <h1>照片用户信息管理</h1>
        <a href="{% url 'indexUsers' %}">浏览照片信息</a> |
        <a href="{% url 'upload' %}">添加照片信息</a>
        <hr/>

        <h3>编辑照片用户信息</h3>
        <form action="{% url 'updateUsers' %}" method="post">
            {% csrf_token %}
            <input type="hidden" name="id" value="{{user.id}}"/>
            <table width="280" border="0">
               <tr>
                 <td>照片名称：</td>
                 <td><input type="text" name="name" value="{{user.name}}"/></td>
               </tr>
<!--               <tr>-->
<!--                 <td>图片</td>-->
<!--                 <td><input type="text" name="age"  value="{{photo.img_src}}"/></td>-->
<!--               </tr>-->
               <tr>

                 <td colspan="2" align="center">
                    <input type="submit" value="修改"/>
                    <input type="reset" value="重置"/>
                 </td>
               </tr>
            </table>
        </form>
    </center>

</body>
</html>

在这里插入图片描述

在这里插入图片描述
添加上传界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传图片</title>
</head>
<body>
    <center>
        <h1>在线相册信息管理</h1>
        <a href="{% url 'index' %}">返回首页</a>
        <a href="{% url 'indexUsers' %}">浏览相册信息</a> |
        <a href="{% url 'doupload' %}">发布相册信息</a>
        <hr/>

        <h3>添加相册信息信息</h3>
    <form action="{% url 'doupload' %}" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        图片名称：<input type="text" name="name"><br/>
        <br/>
        上传文件：<input type="file" name="img"><br/>
                <input type="submit" value="提交">
    </form>
    </center>
</body>
</html>

在这里插入图片描述

限制图片的显示大小

       <style type="text/css">
        img{
            width: 75px;
            height: 75px;
        }

沙雅云

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录