koa-使用session登錄
首先我們來看一下與傳統(tǒng)的express這個web框架對比起來，koa這個新型的web框架有啥特色。
對比
第一，express框架中有太多的回調(diào)函數(shù)嵌套等等，容易陷入回調(diào)地獄。雖說提供了對應(yīng)的同步函數(shù)，但是不可能每個函數(shù)都有對應(yīng)的同步函數(shù)吧？如果我說錯了請聯(lián)系我，謝謝。而在koa中可以直接使用await等待異步函數(shù)完成再次執(zhí)行下去，雖說promise也可以解決回調(diào)地獄，當然我們現(xiàn)在不說這個，有沒有一種到了天堂的感覺，而且注意mongoose插件對數(shù)據(jù)庫的curd也是異步函數(shù)，那么處理函數(shù)的時候是不是也可以直接await？不過我記得curd會有對應(yīng)的數(shù)據(jù)返回，沒辦法。第二中間件，在執(zhí)行中間件的時候，express進行迭代中間件調(diào)用的函數(shù)是一個普通函數(shù)，而在koa中調(diào)用的是一個異步函數(shù)進行迭代，返回promise對象，第三，對于前面文章中提到的水池概念挖的坑來了
在express中如果第一個中間件能夠承受所有的水，那么下面的水池則無法獲取接下來的水，也可以在第一個水池可以承受所有的水則可以調(diào)用next函數(shù)進行向下一個水池進行灌水（請求）則代表響應(yīng)完成，如果無法處理，請求像水一樣向下一層的水池進行灌水（請求響應(yīng)）。調(diào)用next函數(shù)就像可以跳過水池，
在koa中處理，如果不加next函數(shù)，則處理結(jié)果和express框架中處理一樣，如果，如果加上調(diào)用await next（）則可以像express框架中上面水池承受住所有的水向下繼續(xù)處理。
補充一下：koa使用的很多像session的包基本都要自己npm install 包 。
好，開始進行流程分析。
自己建立對應(yīng)的頁面和需要link的css文件夾等。我們從登錄頁面進行輸入密碼等，后臺收到數(shù)據(jù)進行對應(yīng)的session設(shè)置，之后客戶端進行對應(yīng)的返回數(shù)據(jù)。如果存在對應(yīng)的session返回用戶登錄成功。
需要的環(huán)境和對應(yīng)的包的引入
首先自己要布置對應(yīng)的模板，是ejs還是html？這里推薦art-template這個模板引擎，速度快，選擇html作為模板，用起來感覺也很不錯。記得安裝對應(yīng)的koa框架的這個模板引擎，還有對應(yīng)koa部署靜態(tài)文件夾koa-static。還有記得安裝koa-session，使用方法自己看官方文檔。到看到這個koa框架了，看完官網(wǎng)文檔基本可以自己用了。還有很多的包沒有介紹，自己看圖片去查
進入實驗
進入首頁
接下來進行登錄
進行了一次刷新
返回首頁刷新一下
因為第一次肯定沒有登錄，所以不需要進行下個中間件的處理，這次只是做一個簡單的小實驗，所以就取消了。
如果有人細心看的話，會發(fā)現(xiàn)一個問題，為什么login路由刷新會輸出賬號密碼呢？晚上還有一更，晚上說。哈哈
代碼
const Koa = require('koa')
const app = new Koa()
var session = require('koa-session')
var router = require('koa-router')()
var bodyParser = require('koa-bodyparser');
const render = require('koa-art-template');
const staticFiles = require('koa-static')
const path = require('path')
const cors = require('koa-cors');
app.use(cors())
app.use(bodyParser());
app.keys = ['some secret hurr'];
const CONFIG = {
? ? key: 'koa.sess',
? ? maxAge: 86400000,
? ? autoCommit: true,
? ? overwrite: true,
? ? httpOnly: true,
? ? signed: true,
? ? rolling: false,
? ? renew: true,
? ? // http報文和https報文
? ? secure: false,
? ? sameSite: null,
? ? // 設(shè)置代理
? ? Proxy: true
};
render(app, {
? ? root: path.join(__dirname, 'views'),
? ? // 配置模板后綴名為html
? ? extname: '.html',
? ? debug: process.env.NODE_ENV !== 'production'
});
app.use(session(CONFIG, app));
app.use(staticFiles(path.join(__dirname, 'public')))
// 配置起始頁的中間件
app.use(async (ctx, next) => {
? ? if (ctx.session.isLogin == true) {
? ? ? ? console.log('起始用戶登錄成功');
? ? ? ? console.log('count', ctx.session.count);
? ? ? ? console.log('password', ctx.session.password);
? ? ? ? ctx.body = '登陸成功'
? ? }
? ? else {
? ? ? ? console.log('沒有登錄，請用戶進行登錄');
? ? ? ? await next()
? ? }
})
// 配置首頁
router.get('/', (ctx, next) => {
? ? ctx.render('index')
})
router.post('/login', (ctx, next) => {
? ? ctx.session.isLogin = true
? ? ctx.session.count = ctx.request.body.count
? ? ctx.session.password = ctx.request.body.password
? ? ctx.body = ctx.session.count
})
app.use(router.routes());
app.use(router.allowedMethods());
app.listen(8000, () => {
? ? console.log('http://127.0.0.1:8000');
});
html源碼????
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <link rel="stylesheet" href="/css/bootstrap.css">
</head>
<body>
? ? <form ?class="form-inline" action="/login" method="post">
? ? ? ? <div class="form-group">
? ? ? ? ? ? <label class="sr-only" for="count">賬號</label>
? ? ? ? ? ? <input type="text" class="form-control" id="count" placeholder="Input field" name="count">
? ? ? ? </div>
? ? ? ? <div class="form-group">
? ? ? ? ? ? <label class="sr-only" for="password">密碼</label>
? ? ? ? ? ? <input type="password" class="form-control" id="password" placeholder="Input field" name="password">
? ? ? ? </div>
? ? ? ? <button type="submit" class="btn btn-primary">點擊登錄</button>
</body>
</html>
整體文件結(jié)構(gòu)
實驗做完了，覺得有幫助的給個贊吧，不容易啊，嗚嗚嗚
