前言

大家好 我是歌谣 今天给大家带来node中关于koa-ejs模块的讲解

初始化项目

npm init -y

安装koa和路由和解析静态资源和获取请求参数

npm i koa npm i koa-router npm i koa-static npm i koa-bodyparser

安装ejs模块和koa-views模块和session模块

npm i koa-views ejs
 koa-session-minimal

案例

index.js

const Router = require("koa-router")
const userRouter=require("./user.js")
const listRouter=require("./list.js")
const homeRouter=require("./home.js")
const loginRouter=require("./login.js")
const router = new Router()
//统一添加
 router.prefix("/api")
//先注册路由级组件
router.use("/user",userRouter.routes(),userRouter.allowedMethods())
router.use("/list",listRouter.routes(),listRouter.allowedMethods())
router.use("/home",homeRouter.routes(),homeRouter.allowedMethods())
router.use("/login",loginRouter.routes(),loginRouter.allowedMethods())
module.exports=router

home.ejs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是登录</title>
</head>

<body>
    <div>用户名:<input id="username" />
    </div>
    <div>密码:<input type="password" id="password" />
    </div>
    <div>
        <button id="login">登录</button>
    </div>
    <div>
        <button id="loginpost">登录-post</button>
    </div>
</body>
<script>
    var oLogin=document.querySelector("#login")
    var oLoginPost=document.querySelector("#loginpost")
    var oUsername=document.querySelector("#username")
    var oPassword=document.querySelector("#password")
    oLogin.onclick=()=>{
        console.log(oUsername.value,oPassword.value)
        fetch(`/api/user?username=${oUsername.value}&password=${oPassword.value}`)
        .then(res=>res.text()).then(res=>{
            console.log(res)
        })
    }
    oLoginPost.onclick=()=>{
        console.log(oUsername.value,oPassword.value)
        fetch(`/api/user`,{
            method:"POST",
            body:JSON.stringify({
                username:oUsername.value,
                password:oPassword.value
            }),
            headers:{
                "Content-Type":"application/json"
            }
        }).then(res=>res.text()).then(res=>{
            console.log(res)
        })
    }
</script>
</html>

indexRouter.js

const Koa = require("koa")
const static = require("koa-static")
const bodyParser=require("koa-bodyparser")
const views=require("koa-views")
const path=require("path")
const app = new Koa()
const router=require("./routes/index")
app.use(bodyParser())
app.use(static(path.join(__dirname,"public")))
app.use(views(path.join(__dirname,"views"),{extension:"ejs"}))
app.use(router.routes()).use(router.allowedMethods())
app.listen(3000)

运行结果

前端歌谣-第捌拾课-Koa-ejs中cookie和session_json

全案例

目录文件

前端歌谣-第捌拾课-Koa-ejs中cookie和session_json_02

indexroute.js

const Koa = require("koa")
const static = require("koa-static")
const bodyParser = require("koa-bodyparser")
const views = require("koa-views")
const path = require("path")
const session = require("koa-session-minimal")
const app = new Koa()
const router = require("./routes/index")
app.use(session({
    key: "geyao",
    cookie: {
        maxAge: 1000 * 60 * 60
    }
}))
app.use(async (ctx, next) => {
    if (ctx.url.includes("login")) {
        await next()
        return
    }
    if (ctx.session.user) {
        await next()
    } else {
        ctx.redirect("/login")
    }
})
app.use(bodyParser())
app.use(static(path.join(__dirname, "public")))
app.use(views(path.join(__dirname, "views"), { extension: "ejs" }))
app.use(router.routes()).use(router.allowedMethods())
app.listen(3000)

router-index.js

const Router = require("koa-router")
const userRouter=require("./user.js")
const listRouter=require("./list.js")
const homeRouter=require("./home.js")
const loginRouter=require("./login.js")
const router = new Router()
//统一添加
//  router.prefix("/api")
//先注册路由级组件
router.use("/user",userRouter.routes(),userRouter.allowedMethods())
router.use("/list",listRouter.routes(),listRouter.allowedMethods())
router.use("/home",homeRouter.routes(),homeRouter.allowedMethods())
router.use("/login",loginRouter.routes(),loginRouter.allowedMethods())
module.exports=router

view-login.ejs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是登录</title>
</head>

<body>
    <div>用户名:<input id="username" />
    </div>
    <div>密码:<input type="password" id="password" />
    </div>
    <div style="display: none;">
        <button id="login">登录</button>
    </div>
    <div>
        <button id="loginpost">登录-post</button>
    </div>
</body>
<script>
    var oLogin = document.querySelector("#login")
    var oLoginPost = document.querySelector("#loginpost")
    var oUsername = document.querySelector("#username")
    var oPassword = document.querySelector("#password")
    oLogin.onclick = () => {
        console.log(oUsername.value, oPassword.value)
        fetch(`/user/login?username=${oUsername.value}&password=${oPassword.value}`)
            .then(res => res.text()).then(res => {
                console.log(res)
            })
    }
    oLoginPost.onclick = () => {
        console.log(oUsername.value, oPassword.value)
        fetch(`/user/login`, {
            method: "POST",
            body: JSON.stringify({
                username: oUsername.value,
                password: oPassword.value
            }),
            headers: {
                "Content-Type": "application/json"
            }
        }).then(res => res.json()).then(res => {
            console.log(res, "res is")
            if (res.ok == 1) {
                location.href = "/home"
            } else {
                console.log("登录错误")
            }
        })
    }
</script>

</html>

home.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        歌谣爱你
    </div>
</body>
</html>

运行结果

前端歌谣-第捌拾课-Koa-ejs中cookie和session_json_03

前端歌谣-第捌拾课-Koa-ejs中cookie和session_json_04

github地址

git@github.com:geyaoisnice/GeyaoKoaMongo.git