由之前的文章Node.js Web 框架 – Express安裝與初始化
看到我們已經利用Express建立了一個名為microblog的專案
再對應所使用的MVC架構說明首頁Welcome to Express 所顯示的流程

當使用者要求進入首頁時會先觸發app.js中的

 App.get(‘/’, routes.index) 


此行的意思為路徑為”/”的Get請求,由routes.index函數處理

routes.index會再指到./microblog/routes/index.js這個路由檔案內的exports.index

exports.index = function(req, res){
  res.render('index', { title: 'Express' });

因為routes是一個資料夾模組,而index.js是該模組的控制器
App.get(‘/’, routes.index)中的route.index並不是說使用routes/index.js檔案;而是使用了檔案中的exports.index函數

res.render('index', { title: 'Express' });

是說呼叫檢視模版index,並傳遞了一個title變數

最後檢視模版index產生了HTML頁面,傳回給瀏覽器
檢視模版index指的是./microblog/views/index.jade
Index.jade會收到exports.index所傳遞的變數{ title: 'Express' }由jade模版變化為html網頁

extends layout

block content
  h1= title
  p Welcome to #{title}

以下html網頁即是由以上模板變成

<!DOCTYPE html>
<html><head><title>Express</title><
link rel="stylesheet" href="/stylesheets/style.css"><
/head><body><h1>Express</h1>
<p>Welcome to Express</p>

以MVC建構模型來看,此處並沒有使用到Model;也就是說Controller這個掮客已自行處理要求後傳遞內容給View再傳回瀏覽器

請見下表中間的部份

Model 模型

-

-

App.get 路由規則

App.js

App.get(‘/’, routes.index)

App.get(‘/hello’, routes.hello)

View 檢視器

/views/index.jade

/views/hello.jade

Controller 控制器

/routes/index.js

中的模組

exports.index = function(req, res){

  res.render('index', { title: 'Express' });

exports.hello = function(req, res){

  res.render(‘hello', { world: ‘Hello World' });

 再試一下若進入’/hello’的網頁時,傳回’Hello World’的內容,請見上表右側部份

首先進入app.js檔案編輯內容

App.get(‘/’, routes.index)
App.get(‘/hello’, routes.hello) //加上此行

到/routes/index.js新增exports.hello模組

exports.hello = function(req, res){
res.render(‘hello', { world: ‘Hello World' });

最後到/views資料夾中新增hello.jade檔案

extends layout
block content
h1= world 
p Welcome to #{world}

進入127.0.0.1:3000/hello即會看到以下畫面

 blog

再看一個直接由Controller回傳現在時間的例子

Model 模型

-

App.get 路由規則

App.js

App.get(‘/time’, routes.time)

View 檢視器

-

Controller 控制器

/routes/index.js

中的模組

exports.time = function(req, res){

  res.send('Current time is' + new Date().toString());

可見上表完全不使用Model與View的部份,全權由Controller處理
首先進入app.js檔案新增路由控制內容

App.get(‘/’, routes.index
App.get(‘/hello’, routes.hello)
App.get(‘/time’, routes.time) //加上此行

到/routes/index.js新增exports.hello模組

exports.time = function(req, res){
res.send('Current time is' + new Date().toString());

進入127.0.0.1:3000/time即會看到以下畫面

 20131227-124414

 Django

接下來用django完成一樣的microblog應用

先說明一下django的架構分為專案(project)與應用(app),專案可以看成是應用所套用通用設定、資料庫設定與後台功能…等。而應用是建立專案內的功能,一個應用可以是一種功能或是多功能

所以建立一個microblog應用前,需要先建立一個專案,此處命名為mysite;方便各位到django 官網上的django tutorial看更詳細的說明

django-admin.py startproject mysite

進入mysite,再建立應用microblog

cd mysite
python manage.py startapp microblog

這樣就建立了microblog資料夾

接下來要讓mysite專案知道我們已經建立了microblog應用;進入mysite/settings.py中編輯INSTALLED_APPS欄位;也同時變更時區、編碼和template搜尋的設

import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__))

TEMPLATE_DIRS = (			#新增此行
    os.path.join(BASE_DIR, 'templates'),#新增此行
)					#新增此行

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'microblog',	#新增此行
#再往下捲會看到以下兩行
LANGUAGE_CODE = 'zh-tw'	#修改此行

TIME_ZONE = 'Asia/Taipei'#修改此行

 

執行python manage.py shell

 python manage.py shell


此命令會將mysite和microblog路徑加入os.path並為你設置系統環境;這樣專案之後才會運作正常,不會有找不到應用或路徑的錯誤發生
進入後可以用exit()跳出shell應用

 進入mysite/settings.py中編輯路由控制

    url(r'^admin/', include(admin.site.urls)),
    url(r'^microblog/', include('microblog.urls')), #新增此行

也就是通知mysite專案將microblog應用的路由控制交給./microblog/urls.py處理

專案內的通用設定完成,緊接著進入microblog目錄,新增一個urls.py檔案

#urls.py
from django.conf.urls import patterns, url

from microblog import views

urlpatterns = patterns('',
    url(r'^$', views.index),
    url(r'^hello/', views.hello),
    url(r'^time/', views.time),
)

 R’… ‘ 開頭加上r表示單引號內為正規表達式

^ 表示開頭為….;^hello/即表示開頭為hello/的網址
^$ 表示為空行,連空白都沒有

url(r'^hello/', views.hello) 就是說url為hello/的路徑,套用views.hello模版

接下來編輯views.py加上以下檢視模組

#views.py
from django.shortcuts import render
from django.http import HttpResponse
from datetime import datetime
# Create your views here.
def index(request):
    return render(request,'index.html',{'title': 'Express'})

def hello(request):
    return render(request,'hello.html',{'world': 'Hello World'})

def time(request):
    return HttpResponse("Current time is %s" % (datetime.now()))

在microblog目錄下,新增templates資料夾

Mkdir templates

新增index.html和hello.html在templates目錄下

index.html

<h1>{{ title }}</h1>
<p> Welcome to {{ title }}</p>

hello.html

<h1>{{ world }}</h1>
<p> Welcome to {{ world }}</p>

 最後回到mysite目錄下啟動伺服器

python manage.py runsever 8080

依序進入以下網址即可看到相對應的網頁

http://127.0.0.1:8080/microblog/

blog

http://127.0.0.1:8080/microblog/hello/

20131230-111812

http://127.0.0.1:8080/microblog/time/

20131230-111826

可由下表看出相MTV對應的關係

 

Model 模型

-

-

路由規則

/microblog/urls.py

url(r'^$', views.index),

url(r'^time/', views.time),

Template 模版

/microblog/templates/index.html

-

View 視圖

/microblog/views.py

def index(request):

    return render(request,'index.html',{'title': 'Express'})

def time(request):

    return HttpResponse("Current time is %s" % (datetime.now()))

文章標籤
創作者介紹
創作者 長風破浪會有時 的頭像
長風破浪會有時

行路難 多歧路

長風破浪會有時 發表在 痞客邦 留言(0) 人氣()