实践二：使用基于类的视图（class-based view）创建网页App

实践二 —— 使用基于类的视图（class-based view）创建网页App

实践内容介绍：在本次课我们采用基于类的视图创建两个网页页面home和about。学习者需要重点掌握Django项目的urls设置和app中的urls设置，每次创建新的app后，我们都需要将该app添加到项目的settings.py文件中的INSTALLED_APPS中。同时，我们也要熟练掌握如何在settings.py文件中设置模板（template）的路径。完成项目后的效果如下：

分别访问 http://127.0.0.1:8000/和http://127.0.0.1:8000/about，你将分别看到如下两个页面：

--------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------

1. 完成实践一的环境部署

2. 进入虚拟环境

pipenv shell

3. 创建一个名为home的app（本案例中，我们将创建两个app，一个home，一个about，请同学们注意两个app的url是如何设置的。）

python manage.py startapp home

此时文件目录如下：

4. 将home添加到my_project/settings.py文件中

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'home', #新增内容
]

解释：每当我们新建了一个app后，都需要将该app的名字添加到settings.py文件下的INSTALLED_APP中，这样Django项目才知道你新建了一个app。

 5. 新建templates文件夹，与home和my_project文件夹在同一级目录

 

 6. 在my_project/settings.py文件中修改templates的路径，代码如下：

import os   #在页面上方导入os
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'templates')], #更新该部分内容
        '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',
            ],
        },
    },
]

7. 在templates文件夹中新建一个home.html文件，并添加如下代码：

<h1>主页</h1>

当前目录结构如下图所示：

 8. 更新home/views.py中的内容

from django.views.generic import TemplateView

class HomePageView(TemplateView):
    template_name='home.html'

9. 更新urls.py文件

（1）更新app中的urls.py文件（app level）

在home中新建一个urls.py文件，并添加如下代码：

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

urls.py在home文件夹中的位置如下：

（2）更新项目的urls.py文件(project level)

打开my_project中的urls.py文件，并更新代码

from django.contrib import admin
from django.urls import path, include #引入include函数

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('home.urls')) #新加代码
]

注意：每次新建了app后，我们都需要修改项目（project level）和app(app level)两个地方的urls.py文件。

10. 运行本地服务器，查看效果

python manage.py runserver

打开链接 http://127.0.0.1:8000/ 

效果图如下：

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

创建about页面（第二个app）

11. 使用 ctrl+c 快捷键停止本地服务器，这样我们才能继续在终端输入代码

12. 执行代码，创建一个名为about的app

python manage.py startapp about

此时，myweb文件夹中会自动创建一个名为about的文件夹，当前的文件结构如下：

解释：myweb文件夹中现在包括了4个文件夹，my_project是Django项目文件（project level），about和home是app文件夹（app level）， templates是模板文件夹，用来存放html文件。

注意：接下来我们分别要对my_project中的settings.py文件， templates, about/views.py， about/urls.py，my_project/urls.py进行更新

13. 修改my_project/settings.py文件，将刚创建的about应用添加到INSTALLED_APPS中，更新后的代码如下：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'home', 
    'about',#新增内容
]

14. 在templates文件夹中新建about.html文件，并添加如下代码：

<h1>关于我们</h1>

 15. 更新about/views.py（文件about文件夹中的views.py文件）

from django.views.generic import TemplateView

class AboutPageView(TemplateView):
    template_name='about.html'

解释：在views.py文件中，我们新建了一个AboutPageView的类，同时通过 template_name='about.html' 语句指定该类的模板名称为about.html。这样，当我们调用AboutPageView时，程序就知道去templates中寻找about.html文件。

16. 更新urls.py（两个地方，包括project level的url和app level的url）

（1）更新about的urls.py文件（app level）

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

（2）更新Django项目的urls.py文件 (project level)

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('home.urls')) ,
    path('about/', include('about.urls')) #新加代码
]

注意：此处about的path路径为‘about/’

17. 运行本地服务器

python manage.py runserver 

分别访问 http://127.0.0.1:8000/和http://127.0.0.1:8000/about，你将分别看到如下两个页面：

--------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------

总结：本节内容讲解了如何使用基于类的视图（class-based）创建一个app，新建了templates文件夹用于前端的html文件管理，设置了项目和app中的urls.py文件。

每次我们在创建一个app时，都是在view, templates，urls和settings中来回穿梭（引入数据库models后，也将对它进行编辑）