【开发企业官网】5.创建幻灯片模型

我们现在来实现这里的幻灯片功能，这个功能我们之前分析过，它有一个图片、标题和内容，如下图所示：

接下来我们就来实现它，首先我们分析一下页面，在我们的前端页面中我们来找一下幻灯片在哪个部分？我们在index.html中来找到幻灯片的部分，如下图：

这里面有三张图片，我们只需要在后台设置好对应的数据，在前端进行一个渲染，在div标签中进行一个替换就可以了。 数据是存储到数据库中的，在django中我们可以使用orm来生成数据库中的数据，我们先找到对应的应用叫做slide，在slide文件夹下面我们找到models.py这个文件，在这里我们创建模型，创建1个类class就叫做slide。通常呢，这个和我们的数据库中的表是一一对应的，它继承models.model。接下来设置对应的字段，我们主要有三个内容：一个是图片，一个是标题，一个是内容。通常我们在创建数据表的时候会有一个主键，所以我们额外的再添加一个主键就是ID，一个表中只有一个主键，它是唯一的，创建主键的时候我们就可以使用models.AutoField，它是主键，我们设置primarykey这个属性设置为True，这个键呢是自增的，每次新增一个数据，它的id就会从1开始计数，以此类推，代码如下：

from django.db import models
# Create your models here.
class Slide (models. Model):
	id = models.AutoField(primary_key=True)

接下来设置图片image，第一个参数设置图片名字，第二个参数设置上传路径，第三个参数设置上传图片信息。代码如下：

image = models.ImageField('幻灯片名字', upload_to='slide', help_text='最佳尺寸:1920*1280')

接下来我们设置title，我们使用models.CharField，第一个参数设置标题名字，第二个参数设置最大长度，第三个参数设置提示信息

title = models.CharField('标题', max_length=200,help_text='一级标题')

接下来我们设置content内容，设置内容我们也使用models.Charfield，第一个参数设置内容名字，第二个参数设置最大长度，第三个参数设置提示信息，代码如下：

content = models.CharField('内容', max_length=200, help_text='二级标题')

接下来我们设计一下元类class Meta，在这里面我们添加一些常用的属性，这些信息在我们的后台里显示的时候就非常有作用了。

• verbose_name幻灯片管理

• verbose_name_plural幻灯片管理

代码如下：

class Meta:
    verbose_name ='幻灯片管理'
    verbose_name_plural ='幻灯片管理'

现在我们就创建完了这个slide对应的类，我们要把它应用到数据库就可以使用orm来把数据迁移到数据库上，接下来我们在vscode的终端（terminal）中使用命令ctrl+c先把这个服务关掉，然后我们输入命令生成迁移文件，代码如下：

python manage.py makemigrations

没有检测到，这是因我们创建了这个应用但是你没有添加到settings.py中，在settings.py中我们需要配置一下，我们搜索INSTALLED_APPS代码块。所有的app虽然你创建了，但是你需要把它应用上，在INSTALLED_APPS代码块添加代码：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'slide',
    'team',
    'news',
    'mysite',
]

那接下来我们再来实现生成迁移文件的命令，代码如下：

python manage.py makemigrations

它提示我们需要安装一下pillow，因为我们在创建model的时候使用了一个image，使用的是imagefield，它需要处理图片，那这个时候就需要依赖这个pillow模块，我们可以使用这个命令直接把pillow装上，代码如下

pip install Pillow

现在我们就已经安装成功了，安装成功以后我们再来执行生成迁移文件的命令，代码如下：

python manage.py makemigrations

生成以后我们要把它应用到数据库，所以还需要使用一个执行迁移命令， 代码如下：

python manage.py migrate

迁移成功，如下图所示：

接下来我们可以在数据库中来查看一下有没有这个数据表，找到数据库，在找website，如下图所示：

这里面我们就看到它有一个表叫做slide_slide

之所以生成这样的名字是因为我们默认情况下第1个名字就是它的应用名字，第2个slide才是我们使用的类名，如果你不习惯这样的表名，你可以自己定义，我们在创建这个模型的时候，在class Meta元类里我们可以设置一个参数db_table这个属性给它设置为表名，代码如下：

class Meta:
        db_table = 'slide'
        verbose_name = '幻灯片管理'
        verbose_name_plural = '幻灯片管理'

我们如果想更改的话，我们就在执行一次生成迁移文件，再执行一次迁移

python manage.py makemigrations
python manage.py migrate

迁移成功，我们再来刷新一下这个数据库，此时呢，它就变成了slide，如下图所示：

那接下来呢，我们要把它在后台添加，我们还要在website/slide/admin.py这个文件中把我们的这个slide注册到我们的后台模型中，代码如下

from django.contrib import admin
from slide.models import Slide

# Register your models here.
class SlideAdmin(admin.ModelAdmin):			#根据惯例常规写法
    list_display = ('id', 'title') 			#显示后台我们要显示的东西

admin.site.register(Slide, SlideAdmin)  #注册到后台

接下来启动服务，在vscode终端输入代码：

python manage.py runserver

启动以后我们到后台来看一下，在浏览器地址栏输入127.0.0.1:8000/admin/，在后台这里就新增了一个slide。如下图所示：

这个slide就是我们的应用名称，如果我们想修改的话，在我们的这个slide应用（文件夹）下面有一个apps.py文件，在这里面我们给它添加一行代码：

from django.apps import AppConfig


class SlideConfig(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    name = 'slide'
    verbose_name = '幻灯片管理'

接下来再来刷新浏览器页面，slide变成幻灯片管理了。

下面的幻灯片管理，我们点击来添加幻灯片，

单击右上角增加幻灯片管理

下一步是上传图片，上传图片我们选择一个背景图片，在index.html中它有三个图片，我们选择和原来网页一样，我们上传名称为bg1的图片。

标题填写我们也直接复制一下原来网页的文字，跟它保持一致，复制10年高端网站设计这行文字，二级标题我们也复制一下，点击保存，保存成功。

然后我们看一下我们上传了一张图片保存到哪了，它被上传到slide应用（文件夹）下，如下图所示

如果我们把所有的图片都上传到这，就会导致我们的目录结构越来越杂乱，所以我们需要做一些修改，那它为什么会被上传到这？这是因为我们在设置这个模型的时候，上传的时候直接使用了这个slide，那这样就会导致将所有的图片都会上传到这，就会影响我们的目录结构。

所以呢，通常我们不这么写，我们把上传的图片上传到单独的一个文件夹，这个文件夹呢，通常叫做media。也就是如果我们自身的这种静态资源文件，我们就会把它存到static文件夹。如果是上传的图片，我们在根目录新建一个叫做media文件夹，把上传的图片放到这里。这都是惯例。配置media我们需要在settings.py配置文件中来配置一下，在settings.py文件中最后一行写代码如下：

#media 配置
MEDIA_URL ='media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')		#设置上传路径

设置media上传路径和我们设置这个STATICFILES_DIRS是一样的。我们先先启动一下服务。在终端中输入如下代码：

python manage.py runserver

把后台刚才上传的幻灯片数据删掉，现在给它选中，选择删除，单击执行，在单击确定，我们就把幻灯片删除了，如下图所示。

接下来我们重新上传一个幻灯片，我们再选择bg1，标题再重新复制一下，保存成功。然后在我们的项目目录结构中会新增一个media，在media下面有一个文件夹叫slide，slide文件夹下有一张图片就是刚才我们上传的这张图片，它会默认的放到media下面，我们在代码中设置了上传到slide，所以它会在这个media文件夹下又新增一个文件夹叫做slide。如下图所示：

在这个文件结构中来看media文件夹下面有一个slide文件夹，slide下面有一张图片，这是我们上传的第1张图片 那以此类推，我们把第2张，第3张全都给它上传上去。第2张图片名称为bg.jpg，第3张图片为15.jpg，3个主标题如下：

十年高端网站设计经验，用创新点缀人生，让科技融入理想。
二十年高端网站设计经验，用创新点缀人生，让科技融入理想。
科技改变世界

3个副标题如下：

科技创新大平台，智慧生活新引擎。依靠科技进步推进经济跨越式发展。用创新点缀人生，让科技融入理想
科技创新大平台，智慧生活新引擎。依靠科技进步推进经济跨越式发展。用创新点缀人生，让科技融入理想
立足科学发展，着力自主创新。加速科技进步，为全市经济社会发展提供有力支持。凝聚科技创意，成就创新梦想。

三个轮播图创建成功后，接下来我们再看一下这个media文件夹下面的slide文件夹中就多了3张图片，如下图所示：