Nodejs學(xué)習(xí)筆記②

寫在前面

這次做一個小小的登陸&注銷登陸功能練習(xí)下所學(xué)的知識飒货,并擴充些新知識谒撼。

image.png
image.png
image.png

目錄

  1. 新建 login 項目
  2. 下載&導(dǎo)入Bootstrap鱼鼓、jQuery
  3. 業(yè)務(wù)需求實現(xiàn)

新建 login 項目

express -e login //新建 login 項目,-e 指使用 Ejs 模版引擎
cd login //切換到 login 目錄
npm i //安裝項目依賴
npm start //啟動項目乍狐,跑起來看看

下載&導(dǎo)入Bootstrap

Bootstrap下載傳送門
jQuery下載傳送門
bootstrap.min.js jquery-3.2.1.min.jsbootstrap.min.css分別復(fù)制到 public 下對應(yīng)的文件夾

image.png

業(yè)務(wù)需求實現(xiàn)

分析

訪問路徑:/弄企,展示頁面:index.ejs超燃,不需要登陸,可以直接訪問
訪問路徑:/login拘领,展示頁面:login.ejs意乓,登陸頁面,輸入正確的用戶名密碼院究,跳轉(zhuǎn)到 home.ejs
訪問路徑:/home洽瞬,頁面:home.ejs,用戶登陸后才可以訪問
訪問路徑:/logout业汰,頁面:home.ejs伙窃,注銷登陸后回到 index.ejs

先寫UI頁面
  • 在 views 文件夾下新建文件 header.ejs 和 footer.ejs
<!--header.ejs-->
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />
  </head>
  <body class="container">
<!--footer.ejs-->
<script src="/javascripts/jquery-3.2.1.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
  </body>
</html>
  • 寫 index.ejs
<!--index.ejs-->
<% include header.ejs %>
  <h1><%= title %></h1>
  <p>Welcome to <%= title %></p>
  <a class="btn btn-default" href="/login" role="button">登錄</a>
<% include footer.ejs %>
  • 寫 login.ejs
<!--login.ejs-->
<% include header.ejs %>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<form class="form-inline" method="POST">
    <div class="form-group">
        <label class="sr-only" for="username">用戶名</label>
        <input type="text" class="form-control" id="username" placeholder="username" name="username">
    </div>
    <div class="form-group">
        <label class="sr-only" for="password">password</label>
        <input type="password" class="form-control" id="password" placeholder="password" name="password">
    </div>
    <button type="submit" class="btn btn-default">登陸</button>
</form>
<% include footer.ejs %>
  • 寫 home.ejs
<!--home.ejs-->
<% include header.ejs %>
<h1><%= title %></h1>
<p>登陸成功:<%= user.username %></p>
<a class="btn btn-default" href="/logout" role="button">注銷登錄</a>
<% include footer.ejs %>
寫MCV中的c,controller

在 routes 下新建 controller.js 文件样漆,并增加如下方法

// controller.js
exports.index = function (req, res) {
    res.render('index', { title: '登陸&注銷登陸實踐' })
}
exports.login = function (req, res) {
    res.render('login', { title: '登陸頁面' })
}
exports.doLogin = function (req, res) {
    var user = {
        username: 'admin',
        password: 'admin'
    }
    if (req.body.username === user.username && req.body.password === user.password) {
        res.redirect('/home')
    }
    res.redirect('/login')

}
exports.logout = function (req, res) {
    res.redirect('/')
}
exports.home = function (req, res) {
    var user = {
        username: 'admin',
        password: 'admin'
    }
    res.render('home', { title: '主頁面', user: user })
}
在 app.js 中添加路由
// app.use('/', index);
// app.use('/users', users);

var controller = require('./routes/controller')
app.get('/', controller.index)
app.get('/login', controller.login)
app.post('/login', controller.doLogin)
app.get('/logout', controller.logout)
app.get('/home', controller.home)

到這里半成品已經(jīng)ok了为障,可以構(gòu)建項目試試看了~

加入 Session 再完善下

安裝 express-session 依賴庫
npm install express-session //在工程目錄下執(zhí)行
設(shè)置 session
//在 app.js 中設(shè)置session
var session = require('express-session')
app.use(session({
  secret: 'login&logout',
  cookie: { maxAge: 900000 },
  resave: false,
  saveUninitialized: false
}));

//注意要寫在路由的前面,app.js 有順序要求
app.use(function (req, res, next) {
  res.locals.user = req.session.user;

  var err = req.session.error;
  delete req.session.error;
  res.locals.message = '';

  //用于錯誤提示
  if (err) res.locals.message = '<div class="alert alert-danger" role="alert">' + err + '</div>';

  next();
})

// app.use('/', index);
// app.use('/users', users);
修改下 controller.js 中的方法
exports.doLogin = function (req, res) {
    var user = {
        username: 'admin',
        password: 'admin'
    }
    if (req.body.username === user.username && req.body.password === user.password) {
        req.session.user = user;
        res.redirect('/home')
    }
    res.redirect('/login')
}
exports.logout = function (req, res) {
    req.session.user = null;
    res.redirect('/')
}
exports.home = function (req, res) {
    res.render('home', { title: '主頁面'})
}
增加登陸失敗提示

分別修改 login.ejs 和 controller.js 的 doLogin 方法

<!--login.ejs-->
<% include header.ejs %>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<form class="form-inline" method="POST">
    <%- message %> <!--增加錯誤提示-->
    <div class="form-group">
        <label class="sr-only" for="username">用戶名</label>
        <input type="text" class="form-control" id="username" placeholder="username" name="username">
    </div>
    <div class="form-group">
        <label class="sr-only" for="password">password</label>
        <input type="password" class="form-control" id="password" placeholder="password" name="password">
    </div>
    <button type="submit" class="btn btn-default">登陸</button>
</form>
<% include footer.ejs %>
exports.doLogin = function (req, res) {
    var user = {
        username: 'admin',
        password: 'admin'
    }
    if (req.body.username === user.username && req.body.password === user.password) {
        req.session.user = user;
        res.redirect('/home')
    }else{
        req.session.error = "用戶名或密碼錯誤"
        res.redirect('/login')
    }
}

輸錯誤的賬號放祟,看下如何

image.png
頁面訪問控制

在 app.js 中加兩個方法

function needAuth(req, res, next) {
  if (!req.session.user) {
    req.session.error = '請先登錄'
    res.redirect('/login')
  }
  next();
}

function hasAuth(req, res, next) {
  if (req.session.user) {
    res.redirect('/home')
  }
  next();
}

并修改一下路由

app.all('/login', hasAuth) //all 方法攔截所有請求
app.get('/login', controller.login)
app.post('/login', controller.doLogin)

app.get('/logout', needAuth)
app.get('/logout', controller.logout)

app.get('/home', needAuth)
app.get('/home', controller.home)

到此鳍怨,這個小練習(xí)就完成了

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市跪妥,隨后出現(xiàn)的幾起案子鞋喇,更是在濱河造成了極大的恐慌,老刑警劉巖眉撵,帶你破解...
    沈念sama閱讀 222,627評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件侦香,死亡現(xiàn)場離奇詭異落塑,居然都是意外死亡,警方通過查閱死者的電腦和手機罐韩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評論 3 399
  • 文/潘曉璐 我一進店門憾赁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人散吵,你說我怎么就攤上這事龙考。” “怎么了矾睦?”我有些...
    開封第一講書人閱讀 169,346評論 0 362
  • 文/不壞的土叔 我叫張陵晦款,是天一觀的道長。 經(jīng)常有香客問我顷锰,道長柬赐,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,097評論 1 300
  • 正文 為了忘掉前任官紫,我火速辦了婚禮,結(jié)果婚禮上州藕,老公的妹妹穿的比我還像新娘束世。我一直安慰自己,他們只是感情好床玻,可當我...
    茶點故事閱讀 69,100評論 6 398
  • 文/花漫 我一把揭開白布毁涉。 她就那樣靜靜地躺著,像睡著了一般锈死。 火紅的嫁衣襯著肌膚如雪贫堰。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,696評論 1 312
  • 那天待牵,我揣著相機與錄音其屏,去河邊找鬼。 笑死缨该,一個胖子當著我的面吹牛偎行,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播贰拿,決...
    沈念sama閱讀 41,165評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼蛤袒,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了膨更?” 一聲冷哼從身側(cè)響起妙真,我...
    開封第一講書人閱讀 40,108評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎荚守,沒想到半個月后珍德,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體练般,經(jīng)...
    沈念sama閱讀 46,646評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,709評論 3 342
  • 正文 我和宋清朗相戀三年菱阵,在試婚紗的時候發(fā)現(xiàn)自己被綠了踢俄。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,861評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡晴及,死狀恐怖都办,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情虑稼,我是刑警寧澤琳钉,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站蛛倦,受9級特大地震影響歌懒,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜溯壶,卻給世界環(huán)境...
    茶點故事閱讀 42,196評論 3 336
  • 文/蒙蒙 一及皂、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧且改,春花似錦验烧、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至慨蓝,卻和暖如春感混,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背礼烈。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評論 1 274
  • 我被黑心中介騙來泰國打工弧满, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人济丘。 一個月前我還...
    沈念sama閱讀 49,287評論 3 379
  • 正文 我出身青樓谱秽,卻偏偏與公主長得像,于是被迫代替她去往敵國和親摹迷。 傳聞我的和親對象是個殘疾皇子疟赊,可洞房花燭夜當晚...
    茶點故事閱讀 45,860評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 搭建開發(fā)環(huán)境并模擬交互數(shù)據(jù) 一、實驗說明 下述介紹為實驗樓默認環(huán)境峡碉,如果您使用的是定制環(huán)境近哟,請修改成您自己的環(huán)境介...
    玄月府的小妖在debug閱讀 2,131評論 0 15
  • 22年12月更新:個人網(wǎng)站關(guān)停,如果仍舊對舊教程有興趣參考 Github 的markdown內(nèi)容[https://...
    tangyefei閱讀 35,191評論 22 257
  • URL的全稱是Uniform Resource Locator(統(tǒng)一資源定位符) URL就是資源在互聯(lián)網(wǎng)上的地址鲫寄、...
    SessionSinGod閱讀 291評論 0 0
  • 好的婚姻不是相濡以沫吉执。如果湖干了疯淫,任何兩條魚為了活命都會相濡以沫。 好多的婚姻是湖干了戳玫,你領(lǐng)我找到新的湖熙掺,我們一起...
    橋段姐閱讀 392評論 6 4