Node.js 中间件及ejs模板引擎的使用

最新推荐文章于 2024-05-23 10:36:12 发布

coderZhen

最新推荐文章于 2024-05-23 10:36:12 发布

阅读量611

点赞数 1

分类专栏： Node.js 文章标签： node.js 中间件 javascript 前端

本文链接：https://blog.csdn.net/tangpinger/article/details/131237267

版权

Node.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

简单模拟一下登录功能

目录结构：

服务器入口文件：

index.js

const express = require('express');
const HomeRouter = require('./route/HomeRouter.js');
const LoginRouter = require('./route/LoginRouter.js');

const app = express();

// 配置模板引擎
app.set('views', './views')
app.set('view engine', 'ejs')
// app.set('view engine', 'html')
// app.engine('html', require('ejs').renderFile) // 将HTML当成模板渲染

// 配置静态资源
app.use('/public', express.static('public'))
app.use('/static', express.static('static'))

// 配置解析POST请求体的应用级中间件
app.use(express.urlencoded({extended: false})) // form编码格式
// app.use(express.json()) // json格式

// 应用级别中间件
app.use(function(req, res, next) {
  console.log('token验证');
  next()
})

app.use('/home', HomeRouter)
app.use('/login', LoginRouter)

// 错误中间件
app.use((req, res) => {
  res.status(404).send('页面走丢了')
})

app.listen(3000, () => {
    console.log('server start!');
})

里面配置了ejs模板引擎、静态资源，配置了解析前端POST请求返回的请求体中间件，以及默认进行token验证的中间件、路由中间件、错误中间件。

分别配置两个路由级中间件模块：

HomeRouter.js

const express = require('express');

const router = express.Router();

// 路由级别中间件
router.get('/', (req, res) => {
  // res.send('home')

  // 从数据库取回来的数据
  const list = ['aaa', 'bbb', 'ccc'];
  // 登陆成功渲染home页面
  res.render('home.ejs', {list})
})

router.get('/list', (req, res) => {
  res.send(['111', '222', '333'])
})

module.exports = router

LoginRouter.js

const express = require('express');

const router = express.Router();

// 路由级别中间件-响应前端的GET请求
router.get('/', (req, res) => {
  // res.send('login-success')
  // 后端渲染模板返回给前端
  res.render('login.ejs', {isShow: false})
})

// 路由级别中间件-响应前端的POST请求
// router.post('/', (req, res) => {
//   // 拿到前端post请求携带过来的请求体
//   console.log(req.body);

//   const { userName, password } = req.body;
//   if(userName === 'kunkun' && password === '2500') {
//      res.send({msg: 'success'})
//   } else {
//      res.send({msg: 'fail'})
//   }
// })

// 后端登录页模板接口
router.post('/', (req, res) => {
  if(req.body.username === 'kunkun' && req.body.password === '2500') {
     console.log('登陆成功');

     // 重定向到home页面
     res.redirect('/home')
  } else {
     console.log('用户名或密码错误');

     // 重新渲染登陆页面
     res.render('login.ejs', {err: '用户名或密码错误', isShow: true})
  }
})

module.exports = router

使用express的render()方法渲染指定ejs模板，并且可以携带参数到模板中去，根据返回来的请求体信息模拟判断是否登录成功(实际开发中会在数据库中进行查找)，用户名和密码匹配就使用redirect()方法重定向到home页面。

<!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>
    <form action="/login" method="POST">
        <div>用户名：<input type="text" name="username"></div>
        <div>密码：<input type="password" name="password"></div>
        <div><input type="submit" value="登录"></div>
    </form>

    <div><%=isShow ? err : ''%></div>
</body>
</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>home-ejs</div>

    <ul>
        <%for(let i = 0; i < list.length; ++i) {%>
              <li><%=list[i]%></li>
        <%}%>    
    </ul>
</body>
</html>

需要注意的是ejs中，<%%>解析js基本语法，<%=%>解析后端接口使用的render()方法中带过来的参数，而<%-%>可以解析HTML语法结构，例如<%-`<b>hello express</b>`%>，但这种解析语法需要慎用，因为你不知道带过来的HTML代码片段是否具有危险性，除非你特别信任这段代码，否则可能会受到xss注入攻击。

登录我提前指定好的用户名和密码：