---
# System prepended metadata

title: 實作網站的功能：Application & Views
tags: [網路程式設計]

---

# 實作網站的功能：Application & Views

Django專案是由許多Application(`App`)組成，每一個App包括許多Views函式(`Views Function`)，構成Django Web App的各種功能。

舉例來說，我們要開始進行的專案，是一個部落格系統平台，它最終上線，有兩大子系統，分別是**文章管理**與**會員管理**，呈現方式會是

- 文章管理：
  - 新增文章：www.chaoyenblog.com/`article/new`
  - 編輯文章：www.chaoyenblog.com/`article/edit`
- 會員管理
  - 註冊帳號：www.chaoyenblog.com/`member/register`
  - 管理帳號資料：www.chaoyenblog.com/`member/manage`

在這個例子中，`article`跟`member`就是我們將建立的App，他們各自有`new`、`edit`、`register` `manage`的Views函式功能

## Django的運作機制

讓我們進一步說明Django的運作機制，流程如下。

1. 使用者輸入網址URL，發出http request
2. 網站伺服器(Web Server)接到請求
   2a. 如果請求是要靜態檔案，則直接傳回檔案，流程結束
   2b. 若不是靜態檔案請求，就將請求傳給WSGI interface，也就是伺服器跟Python程式溝通的中介軟體
3. 將請求傳送至Django Framework
4. 依據專案直屬App規劃的URL組態(URL Conf)進行網址對應，確定網址格式正確，決定由對應的App來負責處理
5. 依據對應App規劃的URL組態(URL Conf)進行網址對應，確定網址格式正確，決定由對應的Views函式來負責處理
6. Views函式處理請求，有必要的話
   6a. 存取資料庫 (Database, Model)
   6b. 處理範本 (Templates)
   6c. 處理例外 (Exception)
7. 將處理結果回覆給伺服器
8. 伺服器將結果回傳給瀏覽器(Response)

## 開始建立App&Views函式

### 建立App流程

1. 新增App
2. 至專案下的settings.py的INSTALLED_APPS登記App
3. 設計App的views來處理HTTP請求
4. 在專案的url.py設定URL mapping跟app name
5. 在App的url.py設定URL mapping跟view name
6. 測試App運作是否順利

### 新增App

1. 開啟終端機Termial， 將系統路徑切換到`~webapps/workspace/blog/`
2. 輸入指令$ `python manage.py startapp main`，如此就可順利新建一個App`main`

- 每個被新建的App，預設架構目錄如下：

  ```
  main/
      migrations/
      __init__.py
      admin.py
      apps.py
      models.py
      tests.py
      views.py
  ```

- 各目錄說明如下

  - `migrations/`: 資料庫遷移目錄，儲存此App的資料庫遷移程式
  - `__init__.py`: 指明這是一個Python Package，所以這個App可以被其他程式匯入
  - `admin.py`: 管理者介面相關的資料表
  - `apps.py`: 本App的設定
  - `models.py`: 資料模型
  - `tests.py`: 測試程式
  - `views.py`: 處理HTTP request的程式碼

### 註冊App

我們要註冊App `main`，到INSTALLED_APPS List，這個App才能順利被啟用。

在`blog/settings.py` 加入App名稱，如第五行

``` python=
    ...
    INSTALLED_APPS = [
        ...
        'django.contrib.staticcifiles',
        'main'

    ]
    ...
```

### 建立處理HTTP request邏輯: `views.py`

每個新建的App都有一個預設的view.py檔案，我們打算將顯示首頁的功能，以main()函式來處理

`main/views.py`

``` python=
    from django.shortcuts import render
    from django.http import HttpResponse
    
    def main(request):
        # Show Hello World HTML to home page
        html = '''
        <!doctype html>
        <html>
            <head>
                <title> My Blog </title>
                <meta charset='utf-8'>
            </head>
            <body>
                這是HTML版本的Hello World!
            </body>
        </html>
        '''
    return HttpResponse(html)
```

> Note:
> 函式HttpResponse()常見return值
>
> - 200: 請求成功
> - 302: 轉址成功
> - 304: 文件未修改
> - 404: 找不到網頁
> - 500: 應用程式錯誤

### 規劃URL對應

1. 先建立專案的urls.py來處理第一階段的URL對應，找到正確的App，也就是`main`

`blog/urls.py`

``` python=
    from django.contrib import admin
    from django.urls import path, include, re_path
    from main import views
    
    urlpatterns = [
        path('admin/', admin.sites.urls),
        path('main/', include('main.urls', namespace='main')),
        re_path('.*', views.main),
    ]
```

說明如下：



2. 接下來建立main app的urls.py來處理第二階段的URL對應，找到正確的views

`main/urls.py`

``` python=
    from django.urls import path
    from main import views
    
    app_name = 'main'
    urlpatterns = [
        path('', views.main, name='main'),
    ]
```

## 測試App

1. 確認伺服器啟動
2. 打開Chrome Broswer，在網址列輸入`localhost:8000/main/`，可以看到Hello World的頁面，表示建立成功。


## 本日總結

我們新建了第一個App，顯示內容，不過根據Django規範的`MTV設計架構`，`Views`和`Templates`應該要分開，不應該將HTML內容直接寫在`Views`，而是寫在`Template`中才對。

下一篇我們將正式介紹Django的`MTV設計架構`，並且透過`Template`來管理網站的資料呈現。


###### tags: `網路程式設計`