前言
大家好 我是歌谣 今天给大家带来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)
运行结果
全案例
目录文件
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>
运行结果
github地址
git@github.com:geyaoisnice/GeyaoKoaMongo.git