- 一、新建node項(xiàng)目并實(shí)現(xiàn)訪問(wèn)
- 二、在express4.x下，讓ejs模板文件，使用擴(kuò)展名為html的文件
- 三、實(shí)現(xiàn)路由功能
- 四、session使用
- 五、頁(yè)面訪問(wèn)控制及提示
- 六、代碼下載地址
一、新建node項(xiàng)目并實(shí)現(xiàn)訪問(wèn)
1.選擇一個(gè)工程目錄，通過(guò)命令行進(jìn)入工程目錄
2.全局安裝express 命令：npm install -g express
3.使用express命令創(chuàng)建工程并支持ejs 命令：express -e myproject
該命令執(zhí)行完后，根據(jù)提示安裝依賴(lài)包，然后使用命令：SET DEBUG = myproject:* &npm start 啟動(dòng)程序
在瀏覽器輸入localhost:3000訪問(wèn)新建的項(xiàng)目
二、在express4.x下，讓ejs模板文件，使用擴(kuò)展名為html的文件
1.加載依賴(lài)
var ejs = require('ejs');
2.修改配置
/*
* 定義EJS模板引擎和模板文件位置，也可以使用jade或其他模型引擎
*/
//app.set('views', path.join(__dirname, 'views'));
// app.set('view engine', 'ejs');
/**
* 把上面兩行 改成下面三行 頁(yè)面使用.html文件
*/
app.set('views', path.join(__dirname, 'views/'));
app.engine('.html',ejs.renderFile);
app.set('view engine', 'html');// app.set('view engine', 'ejs'); </pre>
三、實(shí)現(xiàn)路由功能
1.加載路由控制
app.js
/**
* 加載路由控制
*/
var routes = require('./routes/index');</pre>
2.配置路由
app.js
/**
* 匹配路徑和路由
*/ app.use('/', routes); //home page
app.use('/login', routes); //login page
app.use('/doLogin', routes); //doLogin
app.use('/logout', routes); //logout
app.use('/welcome', routes); //welcome page</pre>
3.實(shí)現(xiàn)路由邏輯
routes/index.js
var express = require('express');
var router = express.Router();
/* home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
/* login page. */
router.get('/login', function(req, res, next) {
res.render('login', { title: 'login' });
});
/* doLogin */
router.post('/doLogin', function(req, res, next) {
var user={
username:'admin',
password:'admin'
}
if(req.body.username===user.username && req.body.password===user.password){ res.redirect('welcome');
}else{ return res.redirect('/login');
}
});
/* logout */
router.get('/logout', function(req, res, next) { res.redirect('/login');
});
/* welcome page. */
router.get('/welcome', function(req, res, next) { res.render('welcome', { title: 'welcome' });
});
四、session使用
1.加載依賴(lài)
app.js
var cookieSession = require('cookie-session');
2.配置session
app.js
app.use(cookieSession({
name: 'session', // he name of the cookie to set
keys: ['key1', 'key2']
}));
3.登錄驗(yàn)證
成功后，把user存入session；登錄不成功時(shí)，把error提示信息存入session
index.js（修改doLogin）
/* doLogin */
router.post('/doLogin', function(req, res, next) {
var user={
username:'admin',
password:'admin'
}
if(req.body.username===user.username && req.body.password===user.password){
req.session.user = user;
res.redirect('welcome');
}else{
req.session.error='username or password error!';
return res.redirect('/login');
}
});
4.app.js中增加以下代碼 （這個(gè)和中間件有順序問(wèn)題，應(yīng)放在中間件之前）
app.use(function(req, res, next){
res.locals.session = req.session;
res.locals.user = req.session.user;
var err = req.session.error;
delete req.session.error;
res.locals.message = '';
if (err) res.locals.message = err ;
next();
});
5.在html頁(yè)面讀取session里面的值
在login.html中加入：
<%- message %>
當(dāng)用戶(hù)名和密碼輸入不正確的時(shí)候，將在代碼處顯示：username or password error!
在welcome.html中加入：
<%- session.user.username %>
該處會(huì)顯示：admin
注意：此處也可以寫(xiě)成<%- user.username %> 或<%= session.user.username %>
五、頁(yè)面訪問(wèn)控制及提示
1.在/welcome上攔截請(qǐng)求，調(diào)用authentication()進(jìn)行認(rèn)證，不通過(guò)則跳轉(zhuǎn)到login.html并提示：please login
index.js
/* welcome page. */
router.get('/welcome', function(req, res, next) {
authentication(req, res);
console.log('wecome___'+ req.session.user);
res.render('welcome', { title: 'welcome' });
});
function authentication(req, res) {
console.log('Not login');
if (!req.session.user) {
req.session.error='please login';
return res.redirect('/login');
}
}
