<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    TWaver - 專注UI技術

    http://twaver.servasoft.com/
    posts - 171, comments - 191, trackbacks - 0, articles - 2
      BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理
    @import url(http://www.tkk7.com/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);
    接上一篇TWaver HTML5 + Node.js + express + socket.io + redis(五), 這一篇將講解如何用模版生成html頁面, 如何驗證用戶登錄, 您將了解到:
    1. 模版引擎jade
    2. 使用express的session功能
    一. 用jade生成登陸界面
    用express就不得不了解一下模版引擎, 比較流行的是jadeejs, 這里以jade為例:
    1. 安裝jade:
    npm install jade

    2. 配置express使用jade
    1 //設置express使用jade作為模版引擎
    2 server.set('view engine', 'jade');
    3 //設置jade模版的目錄
    4 server.set('views', __dirname + '/views');

    3. 配置jade模版
    在主程序目錄創建views目錄, 在views目錄添加layout.jade文件(layout文件用于指定所有頁面的模版), 內容如下:
    1 !!! 5
    2 html
    3   include header
    4   body!= body
    再添加header.jade文件, 內容如下:
    1 head
    2   title TWaver HTML5 Demo
    3   script(type='text/javascript', src='/socket.io/socket.io.js')
    4   script(type='text/javascript', src='/twaver.js')
    5   script(type='text/javascript', src='/demo.js')

    4. 生成登陸界面和主界面
    添加login.jade文件, 內容如下:
    1 form(action='/login', method='post')
    2   label Name:
    3   input(name='name', type='text')
    4   input(name='password', type='password')
    5   input(type='submit', value='Login')
    再添加index.jade文件, 內容如下:
    1 body(onload="init()")

    5. 添加登錄和主頁路由:
    1 //添加登錄路由
    2 server.get('/login', function (req, res) {
    3     res.render('login');
    4 });
    5 //添加主頁路由
    6 server.get('/', function (req, res) {
    7     res.render('index');
    8 });
    9 
    啟動node, 用瀏覽器打開http://localhost:8080/login, 看看效果:
    再打開http://localhost:8080/, 內容和上一章看到的一樣, demo目錄的demo.html可以刪掉了:

    二. 配置express, 驗證用戶
    1. 啟用session, 表單和cookie解析功能
    1 //設置表單和cookie解析器
    2 server.use(express.bodyParser());
    3 server.use(express.cookieParser());
    4 //啟用session
    5 server.use(express.session({secret: 'anything', key: 'express.sid'}));
    6 

    2. 添加登陸post路由, 將用戶名信息存入session中
    1 //登陸post路由
    2 server.post('/login', function (req, res) {
    3     var name = req.body.name;
    4     var password = req.body.password;
    5     req.session.user = name;
    6     res.redirect('/');
    7 });
    8 

    3. 修改主頁路由, 判斷如果沒有登陸就重定向到登陸界面:
    1 server.get('/', function (req, res) {
    2     if (req.session.user) {
    3         res.render('index');
    4     } else {
    5         res.redirect('/login');
    6     }
    7 });
    再用瀏覽器打開http://localhost:8080/, 會出現登陸界面, 輸入任意非空用戶名后, 即可登陸

    本文完整demo見附件, 下一講將介紹加密密碼, 漢化i18n等內容
    另外, 一個小技巧:客戶端ji里生成socket時, 需要指定ip和端口, 如果是本機, 可以直接:socket = io.connect('http://' + location.hostname + '/', { port: location.port });


    評論

    # re: TWaver HTML5 + Node.js + express + socket.io + redis(六)  回復  更多評論   

    2012-04-03 12:51 by 分紅商城
    我想學習nodejs。不過不知道使用什么nosql數據庫比較好。能推薦一個嗎?

    # re: TWaver HTML5 + Node.js + express + socket.io + redis(六)  回復  更多評論   

    2012-04-03 13:24 by TWaver
    MongoDB(http://www.mongodb.org)和Reids(http://redis.io)都可以考慮下

    # re: TWaver HTML5 + Node.js + express + socket.io + redis(六)  回復  更多評論   

    2012-05-23 15:42 by 學習nodejs
    學習,能繼續講講加密密碼嗎

    只有注冊用戶登錄后才能發表評論。


    網站導航:
     
    主站蜘蛛池模板: 亚洲精品高清无码视频| 国产精品免费一级在线观看| 免费精品无码AV片在线观看| 中文字幕在线免费| 午夜老司机免费视频| 亚洲Av无码乱码在线观看性色| 自拍偷自拍亚洲精品被多人伦好爽| 亚洲丁香色婷婷综合欲色啪| 亚洲 日韩 色 图网站| 日韩大片免费观看视频播放 | 国产亚洲精品不卡在线| 日本久久久久亚洲中字幕| 亚洲国产无线乱码在线观看| a级在线免费观看| 野花高清在线观看免费完整版中文 | 日韩精品免费视频| 天天看片天天爽_免费播放| 亚洲人成色99999在线观看| 午夜理伦剧场免费| 亚洲AV无码专区日韩| fc2成年免费共享视频18| 日韩免费无砖专区2020狼| 亚洲黄色在线观看网站| 亚洲精品国产日韩无码AV永久免费网 | 久久亚洲国产成人影院| 日韩在线a视频免费播放| 黄色毛片免费观看| 四虎永久在线精品免费网址| 西西人体44rt高清亚洲| 丁香花免费高清视频完整版| 国产成人高清亚洲一区久久| 免费国产黄线在线观看| 日韩毛片免费一二三| 久久久无码精品亚洲日韩蜜臀浪潮| 日韩版码免费福利视频| 91精品国产亚洲爽啪在线影院 | 亚洲网站在线免费观看| 久久精品国产亚洲综合色| eeuss影院免费92242部| 亚洲精品国产福利片| 91香蕉在线观看免费高清|