<% xxx %> :里面写的是jsyufa
<%= xxx %> :里面是服务器发送给ejs模板转义后的变量，输出为原html
<%- xxx %> :里面也是服务器发送给ejs模板后的变量，不过他会把html输出出来
在多请参考官网............. ejs中文文档
ejs.renderFile("./public/index.ejs", { title: 'Hello world', age: "<b>加粗文本</b>" }, (err, html) => {
res.send(html)
})EJS需要下载的插件
header
<h1>
<%- name %>
<!-- 解析app.js 里面的data的name -->
</h1>footer
<h2>
<%- com %>
</h2><!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>
</head>
<body>
<%- include('header') %>
我是一个ejs引进来的：<%= title %>
<p>
<%- age %>
<%# 加粗文本 %>
</p>
<p>
<%= age %>
<%# <b>加粗文本</b> %>
</p>
<% for( let index=0; index < 10; index++ ) { %>
<p>
<%= index %>
</p>
<% } %>
<%- include('footer') %>
<!-- 渲染解析footer.js 里面的标签 -->
</body>
</html>app.js
<!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>
</head>
<body>
<%- include('header') %>
我是一个ejs引进来的：<%= title %>
<p>
<%- age %>
<%# 加粗文本 %>
</p>
<p>
<%= age %>
<%# <b>加粗文本</b> %>
</p>
<% for( let index=0; index < 10; index++ ) { %>
<p>
<%= index %>
</p>
<% } %>
<%- include('footer') %>
<!-- 渲染解析footer.js 里面的标签 -->
</body>
</html>HOPU案例
articles.json
[
{
"id": 1,
"categoryId": 2,
"title": "Express中的中间件",
"content": "中间件就是处理HTTP请求的函数，用来完成各种特定的任务。其最大特点就是，当一个中间件处理完成之后，再传递给下一个中间件。",
"addtime": "2022-08-01"
},
{
"id": 2,
"categoryId": 1,
"title": "什么是npm？",
"content": "npm是javascript的包管理工具，是前端模块化下的一个标志性产物。简单地说，就是通过npm下载模块，复用已有的代码，提高工作效率。",
"addtime": "2022-08-01"
},
{
"id": 3,
"categoryId": 2,
"title": "什么是Express？",
"content": "Express是一个基于Node平台的web应用开发框架, 它提供了一系列强大特性，可以帮助创建各种web应用。",
"addtime": "2022-08-03"
},
{
"id": 4,
"categoryId": 3,
"title": "MySQL介绍",
"content": "MySQL是一个关系型数据库管理系统，属于Oracle旗下产品。MySQL是最流行的关系型数据库管理系统之一，在WEB应用方面，MySQL是最好的RDBMS应用软件之一。",
"addtime": "2022-08-04"
},
{
"id": 5,
"categoryId": 1,
"title": "NodeJs简介",
"content": "NodeJs是一个JavaScript运行环境，它让JavaScript可以开发后端程序，几乎能实现其它后端语言能实现的所有功能。NodeJs擅长处理高并发。",
"addtime": "2022-08-04"
},
{
"id": 6,
"categoryId": 3,
"title": "MySQL读写分离",
"content": "读写分离的基本原理是让主数据库处理增、删、改操作（INSERT、DELETE、UPDATE），从数据库处理查询操作（SELECT）。数据库复制被用来把事务性操作导致的变更同步到集群中的从数据库。",
"addtime": "2022-08-04"
},
{
"id": 7,
"categoryId": 1,
"title": "NodeJS文件操作",
"content": "文件操作中的基本方法都是对文件进行整体操作，即整个文件数据直接放在内存中操作，如读取、写入、拷贝和追加，由于计算机的内存容量有限，对文件操作需要考虑性能，所以这些方法只针对操作占用内存较小的文件。",
"addtime": "2022-08-07"
},
{
"id": 8,
"categoryId": 2,
"title": "Express框架特性",
"content": "提供了方便简洁的路由定义方式；对HTTP请求进行了简化处理；对模板引擎支持程度高；提供中间件机制有效控制HTTP请求；拥有大量第三方中间件对功能进行扩展。",
"addtime": "2022-08-08"
},
{
"id": 9,
"categoryId": 1,
"title": "CommonJS模块规范",
"content": "在Node中的JavaScript还有一个重要的概念，模块系统。使用require方法来加载模块；使用exports接口对象来导出模板中的成员。",
"addtime": "2022-08-10"
}
]categories.json
[
{
"id": 1,
"name": "Node"
},
{
"id": 2,
"name": "Express"
},
{
"id": 3,
"name": "MySQL"
}
]config.json
{
"title": "厚溥IT教育",
"keywords": "Hopu,厚溥,IT教育",
"name": "<h1 style=\"color: #1666ad\">HO<span style=\"color: #1b936f\">P</span>U</h1>",
"company": "河南厚溥教育科技有限公司",
"icp": "豫ICP备123456789号",
"address": "河南省郑州市经开区航海东路",
"phone": "0371-12345678",
"username": "admin",
"password": "123456"
}header.ejs
<!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="../static/css/header.css">
</head>
<body>
<header>
<div class="box">
<div>
<%- name %>
</div>
<div><a href="#">登录 / 注册</a></div>
</div>
</header>
</body>
</html>footer.ejs
<!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="../static/css/footer.css">
</head>
<body>
<footer>
<div class="box">
<p>Copyright <%= company %> 版权所有
地址:<%= address %>
电话:<%= phone %>
</p>
<p>
<%= icp %>
</p>
</div>
</footer>
</body>
</html>section1.ejs
<!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="../static/css/section1.css">
</head>
<body>
<%- include('header') %>
<section class="section1">
<div class="box">
<div class="left">
<dl>
<dt><a href="/">所有分类</a></dt>
<% for( let i=0; i < categories.length; i++ ) { %>
<dd><a href="?cid=<%= categories[i].id %> ">
<%= categories[i].name %>
</a></dd>
<% } %>
</dl>
</div>
<div class="right">
<ul>
<% for( let i=0; i < articles.length; i++ ) { %>
<li><a href="/express/<%= articles[i].id %> ">
<%= articles[i].title %>
</a><a href="#">
<%= articles[i].addtime %>
</a></li>
<% } %>
</ul>
</div>
</div>
</section>
<%- include('footer') %>
</body>
</html>section2.ejs
<!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="../static/css/section2.css">
</head>
<body>
<%- include('header') %>
<section class="section1">
<div class="box">
<div class="left">
<dl>
<dt><a href="/">所有分类</a></dt>
<% for( let i=0; i < categories.length; i++ ) { %>
<dd><a href="#">
<%= categories[i].name %>
</a></dd>
<% } %>
</dl>
</div>
<div class="right">
<h4>
<%= ar.title %>
</h4>
<p>
<%= ar.addtime %>
</p>
<p>
<%= ar.content %>
</p>
</div>
</div>
</section>
<%- include("footer") %>
</body>
</html>app.js
const express = require('express')
const app = express()
const fs = require('fs')
const ejs = require('ejs')
const path = require('path')
// 读取文件 同步读取
const data = JSON.parse(fs.readFileSync(path.join(__dirname, "./data/config.json")))
const categories = JSON.parse(fs.readFileSync(path.join(__dirname, "./data/categories.json")))
const articles = JSON.parse(fs.readFileSync(path.join(__dirname, "./data/articles.json")))
data.categories = categories
data.articles = articles
//请求数据
app.use("/static", express.static('static'))
// 主页
app.get('/', function (req, res) {
// 获取头部和内容的数据
// 静态获取路由里面的cid
const cid = req.query.cid
if (cid) {
// 判断data.articles 里面categoryId是否与cid匹配
data.articles = articles.filter((a) => a.categoryId == cid)
} else {
// 否则就全部输出
data.articles = articles
}
ejs.renderFile('./public/section1.ejs', data, function (err, html) {
res.send(html)
})
})
// 动态路由
app.get('/express/:aid', function (req, res) {
// 获取头部尾部的数据
// 动态路由获取 params.aid
const aid = req.params.aid
// articles.filter(a => a.id == aid) 筛选 articles里面的id属性是否与aid匹配
const article = articles.filter(a => a.id == aid)
// 不匹配就返回错误信息就是当数组里面为空时
if (article.length == 0) {
// res.send("错误")
throw new Error("错误")
}
// [0] 数组里面只取一组数据
data.ar = article[0]
// console.log(data);
// console.log(data.ar);
ejs.renderFile('./public/section2.ejs', data, function (err, html) {
res.send(html)
})
})
app.use((err, req, res, next) => {
data.categories = categories;
ejs.renderFile("./public/404.ejs", data, (err, html) => {
res.send(html)
})
})
app.listen(8888)
404.ejs
<!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>
<style>
.weibu {
width: 70%;
height: 100px;
margin: 0 auto;
}
.weibu h2 {
padding: 20px;
}
</style>
</head>
<body>
<%- include('header') %>
<div class="weibu">
<h2>未找到页面..........</h2>
</div>
<%- include('footer') %>
</body>
</html>
扫一扫
6818
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
