从零开始搭建动态网站：Node.js + Express 实战教程
一、安装与环境准备
确认系统已安装 Node.js，可使用以下命令查看版本：
node -v npm -v
如果没有安装，可在命令行中输入以下命令测试是否可用（如报错请先安装 Node.js）：
node
退出 Node 交互模式：
.exit
创建项目文件夹：
mkdir node-website cd node-website
初始化项目：
npm init -y
安装 Express 框架：
npm install express
二、搭建基础服务器
在根目录创建 server.js 文件：
const express = require('express'); const app = express(); const port = 3000; // 允许访问静态文件 app.use(express.static('public')); // 基础路由 app.get('/', (req, res) => { res.send('<h1>欢迎来到我的 Node.js 网站</h1><p>这是首页内容</p>'); }); app.listen(port, () => { console.log(`服务器已启动：http://localhost:${port}`); });
运行服务器：
node server.js
访问浏览器输入：
http://localhost:3000
即可看到运行页面。
三、创建静态资源目录
在项目中添加 public 目录用于存放静态文件：
node-website/ │-- public/ │ │-- index.html │ │-- about.html │ │-- style.css │-- server.js │-- package.json
创建 public/index.html 文件：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>首页 - 我的 Node 网站</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>欢迎来到我的网站</h1> <nav> <a href="/">首页</a> <a href="/about.html">关于我们</a> <a href="/contact">联系我们</a> </nav> </header> <section> <h2>动态内容演示</h2> <div id="content"></div> </section> <script> fetch('/api/message') .then(res => res.json()) .then(data => { document.getElementById('content').innerText = data.message; }); </script> </body> </html>
创建 public/style.css：
body { font-family: "Microsoft YaHei", sans-serif; margin: 0; background-color: #f7f8fa; } header { background-color: #0078d7; color: white; padding: 15px; text-align: center; } nav a { color: white; margin: 0 10px; text-decoration: none; } nav a:hover { text-decoration: underline; } section { padding: 20px; text-align: center; }
四、添加 API 接口
修改 server.js 文件：
const express = require('express'); const app = express(); const port = 3000; // 静态资源 app.use(express.static('public')); // JSON 解析 app.use(express.json()); // 模拟数据接口 app.get('/api/message', (req, res) => { res.json({ message: '这是从 Node.js 返回的动态数据！' }); }); // 提交留言接口 app.post('/api/contact', (req, res) => { const { name, message } = req.body; console.log('收到留言：', name, message); res.json({ status: 'success', info: `感谢 ${name} 的留言！` }); }); app.listen(port, () => { console.log(`服务器运行中：http://localhost:${port}`); });
五、创建留言表单页面
新建 public/contact.html：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>联系我们</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>联系我们</h1> <nav> <a href="/">首页</a> <a href="/about.html">关于我们</a> <a href="/contact.html" class="active">联系</a> </nav> </header> <section> <form id="contactForm"> <input type="text" id="name" placeholder="你的名字" required> <textarea id="message" placeholder="留言内容" required></textarea> <button type="submit">提交留言</button> </form> <p id="responseMsg"></p> </section> <script> const form = document.getElementById('contactForm'); const responseMsg = document.getElementById('responseMsg'); form.addEventListener('submit', async (e) => { e.preventDefault(); const data = { name: document.getElementById('name').value, message: document.getElementById('message').value }; const res = await fetch('/api/contact', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); const result = await res.json(); responseMsg.textContent = result.info; form.reset(); }); </script> </body> </html>
六、实现日志功能（中间件）
添加一个简单的请求日志中间件：
app.use((req, res, next) => { console.log(`[${new Date().toLocaleString()}] ${req.method} ${req.url}`); next(); });
完整 server.js 如下：
const express = require('express'); const app = express(); const port = 3000; app.use((req, res, next) => { console.log(`[${new Date().toLocaleString()}] ${req.method} ${req.url}`); next(); }); app.use(express.static('public')); app.use(express.json()); app.get('/api/message', (req, res) => { res.json({ message: '这是来自服务器的动态信息。' }); }); app.post('/api/contact', (req, res) => { const { name, message } = req.body; console.log('收到留言：', name, message); res.json({ status: 'success', info: `已收到来自 ${name} 的留言！` }); }); app.listen(port, () => { console.log(`网站已启动：http://localhost:${port}`); });
七、让网站支持模板渲染
安装模板引擎 EJS：
npm install ejs
在 views 目录中创建模板文件：
node-website/ │-- views/ │ │-- index.ejs │ │-- about.ejs │-- server.js
在 server.js 中启用 EJS：
app.set('view engine', 'ejs'); app.set('views', './views'); app.get('/home', (req, res) => { res.render('index', { title: '动态首页', user: '小明' }); });
views/index.ejs：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title><%= title %></title> </head> <body> <h1>欢迎，<%= user %></h1> <p>这是由 EJS 模板引擎渲染的动态页面。</p> </body> </html>
访问：
http://localhost:3000/home
即可看到动态内容。
八、保存留言到文件
为了模拟数据库，可以使用 Node.js 的 fs 模块：
const fs = require('fs'); app.post('/api/contact', (req, res) => { const { name, message } = req.body; const data = `${new Date().toLocaleString()} - ${name}: ${message}\n`; fs.appendFileSync('messages.txt', data); res.json({ status: 'success', info: `留言已保存，感谢 ${name}！` }); });
此时每次提交留言，都会写入 messages.txt 文件。
九、项目目录结构参考
node-website/ │-- public/ │ │-- index.html │ │-- contact.html │ │-- style.css │-- views/ │ │-- index.ejs │-- server.js │-- package.json │-- messages.txt
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
9
0- 0
已为社区贡献2条内容
所有评论(0)