由之前的文章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即會看到以下畫面
再看一個直接由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即會看到以下畫面
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/
http://127.0.0.1:8080/microblog/hello/
http://127.0.0.1:8080/microblog/time/
可由下表看出相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())) |
留言列表
