有勇气的牛排博客
☰

Typescript Express 框架 04 前端html 模板引擎

知止自律打卡-微信小程序APP
一款微信自律打卡小程序，支持自定义打卡项目、习惯记录、项目日记、专注计时与数据统计。自律打卡、学习打卡、读书打卡、健身打卡、运动打卡、减肥打卡、戒色打卡、养生打卡、戒烟、戒酒、戒熬夜等多种场景。万能打卡模板自由创建。可自定义每日打卡目标，记录习惯连续天数，可视化追踪成长进度。
了解产品详情 →
微信搜索「知止自律打卡」
知止自律打卡微信小程序

1 原生方案

1.1 server.ts 配置

src/server.ts

// 配置静态文件夹
app.use(express.static(path.join(__dirname, 'templates')));

// 路由返回 HTML 页面
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'templates', 'index.html'));
});

1.2 html 页面

src/templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
首页
</body>
</html>

2 EJS 模板引擎

2.1 安装

npm install ejs

2.2 server.ts 配置

src/server.ts

// 设置视图引擎为 EJS
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'templates'));
// 路由返回动态渲染的 HTML 页面
app.get('/', (req, res) => {
  res.render('index', { title: '有勇气的牛排博客' });
});

2.3 html 页面

src/templates/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
</head>
<body>
<h1>欢迎来到 <%= title %>!</h1>
<p>这个页面使用 EJS 模板引擎加载.</p>
</body>
</html>

image.png

评论区

×
×