Django NBA Web开发 - Step 2 球队页面

这一篇主要记录球队页面的建立及用户系统的建立

接上一篇，主页显示的是各个球队的名字，后续想要做到的是点击每个球队名字，会进入每个球队的单独介绍页面，里面会包含球队图标，球队名字，球队介绍，后续还需要加入和球队相关的文章和评论功能，文章和评论在后续文章介绍。

首先来设置一下url路由,在team这个app下创建urls文件，并设置如下
在设置url的时候，为路由添加了<int:team_id>，以区分每个球队不同的url路径

from django.urls import path
from .views import *

app_name='team'
urlpatterns=[
            path('<int:team_id>',team_page,name='team_page'),
]

之后我们再来看一下views视图函数，通过url里面的球队id，搜索出球队信息

from django.shortcuts import render,redirect
from mainsite.models import *
# Create your views here.

def team_page(request,team_id):

    team_name = Team.objects.get(team_id=team_id)
    return render(request,'team_page.html',{'team_name':team_name})

最后来看下前端模板,有两个地方需要重点注意，一个是在模板头部要加载{% load staticfiles %} ,这样你设置好的static文件夹才能被读取。
另外一个是src的路径，可以直接使用static和后面的字文件夹'/team_icon/'来读取。

{% extends 'base_page.html' %}

{% load staticfiles %}        <!--这句一定要加载，否则无法读取出球队图标-->

{% block title %}球队介绍{% endblock %}

{% block content %}

    <img src="{% static '/team_icon/' %}{{team_name.team_english_name}}.png" width="110" height="110">

    {{team_name.team_chinese_name}}
    <p>简介</p>
    来自于{{team_name.team_location}}的球队
{% endblock %}

前端面板有了，要做到球队有图标，那需要保存每个球队的图标，为了统一管理，需要在settings文件里面设置好路径

STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join('static'), )

如下图，球队图标的图片放在static/team_icon文件夹下

球队图标

这样你点进球队的页面，就可以看到球队的图标和简短介绍了，内容后续会进行丰富.

球队页面预览