node.js学习笔记 13模板引擎ejs

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

tonyma2015

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

阅读量136

点赞数

分类专栏： node.js学习笔记文章标签： node.js 学习 javascript

本文链接：https://blog.csdn.net/qq_33363757/article/details/127925771

版权

node.js学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

const express = require('express');
const app = express();
const path = require('node:path');

const STUDENT_ARR = [
  {
    name: '孙悟空',
    age: 18,
    gender: '男',
    address: '花果山',
  },
  {
    name: '猪八戒',
    age: 28,
    gender: '男',
    address: '高老庄',
  },
  {
    name: '沙和尚',
    age: 38,
    gender: '男',
    address: '流沙河',
  },
];

let name = '猪八戒';

// 将ejs设置为默认的模板引擎
app.set('view engine', 'ejs');

// 配置模板路径
// app.set('views','views') // 默认设置,前一个表示设置,后一个表示路径
app.set('views', path.resolve(__dirname, 'views'));

// 配置静态资源路径
app.use(express.static(path.resolve(__dirname, 'public')));

// 配置请求体解析
app.use(express.urlencoded({ extended: true }));

// app.use(express.json())

app.get('hello', (req, res) => {
  res.send('hello');
});

app.get('/students', (req, res) => {
  // 希望用户在访问students路由时,可以给用户返回一个显示有学生信息的页面
  /* 
        html页面属于静态页面,创建的时候什么样子,用户看到的就是什么样子,不会自动跟随服务器中数据的变化而变化
        希望有一个东西,它长得像是网页,但是里面可以嵌入变量,这个东西在node中被称为模板
        在node中存在很多模板引擎,都各具特色
        ejs是node中的一款模板引擎,使用步骤:
            1.安装ejs
            npm i ejs
            2.配置express的模板引擎为ejs
                app.set('view engine', 'ejs');
            3.配置模板路径
                app.set('views', path.resolve(__dirname, 'views'));

            注意,模板引擎需要被express渲染后才能使用
    */
  // res.render()用来渲染一个模板引擎,并返回给浏览器
  // 可以将一个对象作为render的第二个参数传递,这样在我们的模板中就可以访问到对象的数据
  // 使用<%= %>在ejs中输出内容,他会自动对字符串的特殊符号进行转义
  // 这个设计主要是为了避免 xss 攻击(跨站脚本攻击)
  // <%- %>直接将内容输出,识别标签,里面可以执行js代码,不好
  // <% %>可以编写js代码,js代码在服务器中执行
  res.render('students', { name });
});

app.get('/set_name', (req, res) => {
  name = req.query.name;
  res.send('修改成功');
});

// 可以在所有路由的后面配置错误路由
app.use((req, res) => {
  // 只要这个中间件一执行,说明上边的地址都没有匹配
  res.status(404);
  res.send('<h1>您访问的地址已被外星人劫持!</h1>');
});

app.listen(3000, () => {
  console.log('服务器已启动');
});

<!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>这是ejs模板</title>
  </head>
  <body>
    <h1>Hello ejs 啊哈哈</h1>
    <!-- 
        通过它可以将render传递进来的数据直接在网页中显示出来
     -->
    <%-name %>
    <form action="/set_name">
      <input type="text" name="name" />
      <button>提交</button>
    </form>
    <% console.log('哈哈哈') %>
  </body>
</html>