Express generation 專案架構
當用express generation指令後會產生一個node project的資料夾.
- app.js: 開機檔案, 或是說入口網站
- bin: 存放執行檔
- node_modules: 存放package.json中安裝的模組, 當你在package.json中新增相依的模組並安裝後, 該模組會存放在這個資料夾下.
- package.json: 儲存著專案的資訊以及模組相依(dependencies), 當在dependencies中新增相依的模組時, 執行npm install, npm會檢查目前的資料下的package.json, 並自動安裝所有指定的模組
- public: 存放image, css, js等文件
- routes: 存放路由文件
- views: 存放視圖檔, 或是說範本檔案
配置Routing
規劃網站各個頁面的路由路徑. 首先再次修改app.js: 新增apis路由, 用來負責POST方法的處理.
...
var routes = require('./routes/index');
var users = require('./routes/users');
var apis = require('./routes/apis');
...
app.use('/', routes);
app.use('/users', users);
app.use('/apis', apis);
設定user路由
在我們的設定中, user路由負責處理所有來自/user網址的要求, 例如新增文章, 會員註冊等. user路由會視用戶的請求而回應不同的資料.
新增首頁
首先在views資料夾中建立一個users資料夾. 裡面會放置所有user路由會用到的頁面.
首頁
1.更新index.jade檔
中間的if判斷是會根據使用者是否登入而顯示不一定的連結給使用者.
doctype html
html
head
title= 'Blog System'
body
div(style='float:left;margin:10px;')
a(href='/') Home
div(style='float:right')
if (username && authenticated)
a(href='/users/signout', style='margin:10px;') Sign Out
a(href='/users/add_article', style='margin:10px;') Add Article
a(href='/users/profile', style='margin:10px;') Profile
span #{username}
else
a(href='/users/signin', style='margin:10px;') Log In
a(href='/users/register', style='margin:10px;') Register
a(href='/users/forget', style='margin:10px;') Forgot password
div(style='padding:50px;')
h1= title
2.修改routes/index.js
把session所存的變數所存的變數傳回頁面.
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.locals.username = req.session.name ;
res.locals.authenticated = req.session.logined;
res.render( 'index', {title : 'Blog System'});
});
module.exports = router;使用者註冊頁面
1.新增views/users/register.jade
這邊的重點是寫了一個form的POST表單來處理使用者設定帳密
doctype html
html
head
title= Register
body
div(style='float:left;margin:10px;')
a(href='/') Home
div(style='float:right')
a(href='/users/signin', style='margin:10px;') Log In
a(href='/users/forget', style='margin:10px;') Forgot password
div(style='padding:50px;')
form(name="login", action="/apis/login", method="post")
h1 Register
div
p
label(style='padding-right:50px') Username or e-mail
input(type="text", name="user", placeholder='username@example.com')
p
label(style='padding-right:110px') password
input(type="password", name="passwd")
p
span(style='padding-right:260px')
input(type="submit", name="submit", value="Sing Up")
2.修改routes/user.js
新增一個判斷式, 如果logined是true, 代表使用者已經是登入狀態, 就會直接回到首頁.
如果尚未登入則會顯示register.jade的頁面.
var express = require('express');
var router = express.Router();
router.get('/register', function(req, res, next) {
if (req.session.logined) {
res.redirect('/');
return;
}
res.render('users/register');
});
....3.修改routes/apis.js
新增login函數, 處理註冊頁面傳來的POST方法.
先利用if來判斷使用者是否有輸入帳密, 當其中少一個的話則返回註冊畫面.
當輸入正確就把帳密給儲存到session中. 並把login設定為true代表使用者登入了.
ar express = require('express');
var router = express.Router();
router.post('/login', function(req, res, next) {
if ((!req.body.user) || (!req.body.passwd)) {
res.redirect('register');
return;
}
req.session.name = req.body.user;
req.session.passwd = req.body.passwd;
req.session.logined = true;
res.redirect('/');
});
...使用者登入畫面
1.使用者登入頁面跟註冊的register.jade比, 只有差在字改成”Login”.
doctype html
html
head
title= Login
body
div(style='float:left;margin:10px;')
a(href='/') Home
div(style='float:right')
a(href='/users/register', style='margin:10px;') Register
a(href='/users/forget', style='margin:10px;') Forgot password
div(style='padding:50px;')
form(name="login", action="/apis/login", method="post")
h1 Login
div
p
label(style='padding-right:50px') Username or e-mail
input(type="text", name="user", placeholder='username@example.com')
p
label(style='padding-right:110px') password
input(type="password", name="passwd")
p
span
a(href='/users/forget', style='padding-right:175px') Forgot password
input(type="submit", name="submit", value="login")
2.修改routes/user.js
...
router.get('/signin', function(req, res, next) {
if (req.session.logined) {
res.redirect('/');
return;
}
res.render('users/signin');
});
使用者登出頁面
1.修改routes/user.js
當登出之後會回到首頁.
...
router.get('/signout', function(req, res, next) {
req.session.logined = false;
res.redirect('/');
res.end();
});忘記密碼頁面
1.views/users/forget/jade
doctype html
html
head
title= 'Forget Password'
body
div(style='float:left;margin:10px;')
a(href='/') Home
div(style='float:right')
a(href='/users/register', style='margin:10px;') Register
a(href='/users/signin', style='margin:10px;') Log In
div(style='padding:50px;')
form(name="login", action="/apis/login", method="post")
h1 Forget Password
div
p
label(style='padding-right:50px') Username or e-mail
input(type="text", name="user", placeholder='username@example.com')
p
span(style='padding-right:210px')
input(type="submit", name="submit", value="Forget Password")
2.修改routes/user.js
...
router.get('/forget', function(req, res, next) {
if (req.session.logined) {
res.redirect('/');
return;
}
res.render('users/forget');
});
沒有留言:
張貼留言