【开发企业官网】7.团队介绍模块实现

完成了轮播图，接下来我们来完成团队介绍。团队介绍与轮播图类似，包含图片、姓名和职位三个栏位，因此我们可以沿用相似的实现方式来快速完成。在团队介绍中，我们需要考虑人物的排序，通常会根据职位的重要性或者其他因素进行排序。

默认情况下，数据库会根据 ID 创建记录，但我们可以通过添加一个排序字段来控制人物的排列顺序。

首先，我们需要创建一个与轮播图类似的模型。我们可以简单地复制之前创建的轮播图模型，把slide文件夹下models.py中代码复制到team文件夹下models.py并进行相应的修改。修改包括将图片字段的名称改为“头像”，定义一个新的字段用于排序，以及调整模型名称为“team”。在模型中，我们还定义了一个方法 __str__，用于返回员工的姓名，以便在后台管理界面和其他地方显示。修改代码如下：

from django.db import models

# Create your models here.

class Team(models.Model):
    id = models.AutoField(primary_key=True)  # 主键ID
    avatar = models.ImageField('头像', upload_to='team', help_text='最佳尺寸:500*755')  # 头像图片
    name = models.CharField('姓名', max_length=100)  # 姓名
    title = models.CharField('职务', max_length=100)  # 职务
    rank = models.IntegerField('排序')  # 排序

    class Meta:
        db_table = 'team'  # 指定数据库表名
        verbose_name = '团队管理'  # 在后台管理中显示的名称
        verbose_name_plural = '团队管理'  # 在后台管理中显示的复数名称

    def __str__(self):
        return self.name  # 返回对象的字符串表示形式，用于后台管理界面显示

然后，我们在 team文件夹下admin.py 文件中注册这个模型，以便在后台管理中对团队成员进行管理。添加代码如下：

from django.contrib import admin
from team.models import Team  # 导入团队模型

# Register your models here.

class TeamAdmin(admin.ModelAdmin):
    list_display = ('name','title')  # 在后台管理界面显示的字段
    search_fields = ('name',)  # 允许根据姓名搜索

admin.site.register(Team, TeamAdmin)  # 将团队模型注册到后台管理，并指定自定义的管理类

接下来，进行数据库迁移操作，以及启动服务器测试新增的团队管理功能。在vscode终端输入：

python manage.py makemigrations
python manage-py migrate
python manage.py runserver

在浏览器地址栏输入127.0.0.1:8000/admin/，在后台管理界面中，我们看到标题为team，如下图所示：

我们在team文件夹下apps.py文件中来修改一下：

from django.apps import AppConfig

class TeamConfig(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'  # 默认自动字段类型
    name = 'team'  # 应用名称
    verbose_name = '团队管理'  # 显示在Django管理后台的应用名称

我们可以看到新增了一个“团队管理”选项，方便对团队成员进行管理。我们可以通过这个界面新增团队成员，并为每个成员上传头像、填写姓名和职务，并根据需要进行排序。

我们在团队管理添加4名成员，并分别设置了优先级，如果下图所示：

在前端页面中，我们需要将后台新增的团队成员展示出来。首先，在 website/mysite/views.py 文件中导入团队模型，并获取所有团队成员的数据。

from django.http import HttpResponse
from django.shortcuts import render
from slide.models import Slide
from team.models import Team

# Create your views here.
def index(request):
    # 获取轮播图数据
    slides = Slide.objects.all()  # 获取所有轮播图数据
    # 获取团队成员数据并按照排序字段排列
    team = Team.objects.all().order_by('rank')
    return render(request, 'index.html', {
                      'slides': slides,  # 将轮播图数据传递给模板
                      'team': team,  # 将团队成员数据传递给模板
                      })

然后将这些数据传递到模板中，在index.html文件中找打团队成员。在模板中使用 for 循环遍历团队成员数据，并替换页面中相应的内容，包括姓名、职务和头像。修改代码如下：

<!-- 团队介绍 -->
<section id="team-intro" class="team-intro section-bg">
    <h2 class="title1">团队介绍</h2>
    <div class="team-members">
        {% for item in team %}
        <div class="team-member">
            <div class="profile-image">
                <!-- 显示团队成员头像 -->
                <img src="media/{{item.avatar}}" alt="">
            </div>
            <!-- 显示团队成员姓名 -->
            <h4 class="name">{{ item.name }}</h4>
            <!-- 显示团队成员职务 -->
            <p class="position">{{ item.title }}</p>
            <ul class="social-links">
                <li><i class="fa fa-weixin"></i></li>
                <li><i class="fa fa-weibo"></i></li>
                <li><i class="fa fa-github"></i></li>
                <li><i class="fa fa-linkedin-square "></i></li>
            </ul>
        </div>
        {% endfor %}
    </div>
</section>

然后我们再来刷新一下页面，这里4个人就显示在页面中了。如下图所示：

我们还实现了根据排序字段倒序显示团队成员的功能。通过在模型的查询中添加排序参数，如下图所示：

以及在模板中调整遍历顺序，使用倒序排序，实现了按照指定顺序显示团队成员的功能。代码如下：

from django.http import HttpResponse
from django.shortcuts import render
from slide.models import Slide
from team.models import Team

# Create your views here.
def index(request):
    # 获取轮播图数据
    slides = Slide.objects.all()  # 获取所有轮播图数据
    # 获取团队成员数据并按照倒序排序字段排列
    team = Team.objects.all().order_by('-rank')
    return render(request, 'index.html', {
                      'slides': slides,  # 将轮播图数据传递给模板
                      'team': team,  # 将团队成员数据传递给模板
                      })

刷新浏览器页面，此时我们发现序号大的就排到前面了，这样咱们就实现了一个顺序的控制。如下图所示：

至此，我们完成了团队介绍的功能。新增团队成员时，它们会按照指定的排序顺序依次显示在页面上。整个团队介绍的实现与之前介绍的轮播图功能基本类似，只是在排序方面进行了调整。