Django23——练习1（后台传递数据显示数据）

任务：下载素材，如下图所示：

将网页放到Django项目中运行，将下图红框中的文字和图片作为后台的数据，传递到页面进行显示。

1、将素材放入Django项目中

（1）新建应用exercise01用来完成网页的显示。

python manage.py startapp exercise01

将应用放到apps文件夹中，并将素材放至对应的位置。

2、配置路由

主目录路由

path("exercise01/",include(("apps.exercise01.urls",'exercise01'),namespace='exercise01')),

子路由：

from django.urls import path
from . import views
urlpatterns = [
    path('',views.index,name='index'),
]

3、定义视图

def index(request):
return render(request,‘exercise01/index.html’)

4、查看效果

5、修改模板v1

{% load static %}

修改页面中CSS和图片的引用

刷新看效果，页面正常显示。

6、修改视图

将数据传递到页面。

def index(request):
    #return render(request,'exercise01/index.html')
    context = {}
    # 1、网页主题
    topic = {}
    topic['cn'] = '房屋服务中心'
    topic['en'] = 'HOUSING SERVICE CENTER'
    # 2、关于部分
    about = {}
    about['pic'] = 'wetu1.jpg'
    about['txt1'] = '028=38383i38'
    about['txt2'] = '028=38383i38'
    # 3、管家服务
    manage = {}
    manage['cn'] = "装修管家服务"
    manage['en'] = 'DECORATION HOUSEKEEPER SERVICE'
    manage['pic'] = [
        'content-two-pic.jpg',
        'content-two-two.jpg',
        'content-two-three.jpg',
        'content-two-four.jpg',
        'ai.jpg',
    ]
    manage['title'] = '量房'
    # 4、房屋居住环境
    live = {}
    live['cn'] = '房屋居住环境'
    live['en'] = 'HOUSING AND LIVING ENVIRONMENT'
    live['pic'] = [
        'ike.jpg',
        'lh.jpg',
        'om.jpg',
        'pic.jpg',
        '931.jpg',
    ]
    live['title'] = '居住'
    # 5、将所有数据存储到字典中
    context['topic'] = topic
    context['about'] = about
    context['manage'] = manage
    context['live'] = live
    return render(request, "index.html", context)

7、修改模板v2

在页面，通过键来访问数据。访问数据如下：

            
{{ topic.cn }}
            {{ topic.en }}
 

        

            
            

                {{ about.txt1 }}
 {{ about.txt2 }}
{{ about.pic }}
            
        

     

         
             
             

                 
{{ manage.title }}
             
         
     

查看效果，正常。

8、修改模板v3

将图片的img路径写入到配置文件中。

修改图片的引用如下：
将

修改成如下：

以此类推。

查看页面效果，正常。

9、使用static标签完善模板(index.html)

将

修改成如下：

以此类推进行修改。

页面显示正常。