3000字详解如何自己做留言板网站，成本不到100元

模板网站太丑不够用，想做一款专属的留言板网站，又怕开发成本太高？别急，我自己就做过，花不到100元就能搞定一个功能齐全的留言板网站。今天就教你一步步从零开始搭建一个属于自己风格的留言板网站，全程不依赖专业团队，也不需要太多技术背景。

需求分析：为什么自己做比买模板更香？

市面上的留言板网站模板五花八门，但大多数都千篇一律，要么是老掉牙的样式，要么是功能不全，根本不能满足个性化需求。对于像我这样的广东小站长来说，做一个能体现品牌调性、界面美观、功能齐全的留言板，几乎是刚需。

核心需求包括：

用户可以留言并提交
管理员可以查看、删除留言
网站界面美观、操作流畅
支持响应式设计，手机访问也顺畅
安全性高，防止恶意灌水

而且，自己做网站的成本也完全可控，如果你懂一点基础开发，甚至可以零成本实现，不需要额外找人做，多少钱的问题完全由你自己掌控。

环境准备：本地开发+服务器部署，一步到位

1. 本地开发环境搭建

为了快速开发，我推荐使用 VS Code + Node.js + Express 的组合，这些工具在开发者社区中非常流行，而且资源丰富。

安装步骤：

下载并安装 Node.js（建议 LTS 版本）
安装 VS Code
使用 npm 安装 Express：npm install express

2. 域名与服务器选择

如果你只是想做一个测试用的留言板，可以不用域名，用本地 IP 也能跑起来。但如果你打算上线，域名和服务器是必不可少的。

域名：可以去阿里云、腾讯云这些国内主流平台注册，价格一般在 50-100 元/年不等。
服务器：推荐使用阿里云或腾讯云的轻量级服务器，价格从 10 元/月起，最低配置（1核1G）足够运行一个小型留言板网站。

3. 数据库选择

留言板需要存储用户留言信息，所以必须用数据库。MySQL 是一个稳定、好用的选择，也可以用 MongoDB，但如果你是新手，MySQL 更容易上手。

安装 MySQL 后，你需要创建一个数据库和表，用来存储留言内容：

CREATE DATABASE guestbook;
USE guestbook;CREATE TABLE messages (id INT AUTO_INCREMENT PRIMARY KEY,name VARCHAR(100) NOT NULL,message TEXT NOT NULL,created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

这段代码会在 MySQL 中创建一个名为 guestbook 的数据库，并在其中建立一个 messages 表，用于存储用户留言的信息。

核心步骤：从页面设计到功能开发

1. 建立项目结构

在本地项目目录下，建立如下结构：

guestbook/
├── public/
│   ├── index.html
│   └── style.css
├── views/
│   ├── index.ejs
│   └── admin.ejs
├── app.js
├── package.json
└── README.md

public/ 用于存放静态资源，如 HTML、CSS 文件。
views/ 存放网页模板，使用 EJS 作为模板引擎。
app.js 是主程序文件。
package.json 用于管理依赖包。

2. 配置 Express 服务器

在 app.js 中，设置一个基本的 Express 服务器，引入 EJS 模板引擎，并连接数据库。

const express = require('express');
const app = express();
const mysql = require('mysql');// 设置模板引擎
app.set('view engine', 'ejs');// 设置静态文件目录
app.use(express.static('public'));// 数据库连接
const connection = mysql.createConnection({host: 'localhost',user: 'root',password: 'yourpassword',database: 'guestbook'
});connection.connect((err) => {if (err) throw err;console.log('数据库连接成功');
});// 路由
app.get('/', (req, res) => {connection.query('SELECT * FROM messages ORDER BY created_at DESC', (err, results) => {if (err) throw err;res.render('index', { messages: results });});
});app.post('/submit', (req, res) => {const { name, message } = req.body;connection.query('INSERT INTO messages (name, message) VALUES (?, ?)',[name, message],(err, results) => {if (err) throw err;res.redirect('/');});
});// 启动服务器
const PORT = 3000;
app.listen(PORT, () => {console.log(`服务器运行在 http://localhost:${PORT}`);
});

这段代码创建了一个 Express 服务器，监听 3000 端口，并连接了本地 MySQL 数据库。用户访问 / 路径会返回留言列表，提交留言会触发 /submit 路由，将数据插入数据库。

3. 创建 EJS 模板

在 views/index.ejs 中，创建一个简单的留言表单：

<!DOCTYPE html>
<html>
<head><title>留言板</title><link rel="stylesheet" href="/style.css">
</head>
<body><h1>留言区</h1><form action="/submit" method="POST"><label for="name">姓名：</label><input type="text" id="name" name="name" required><br><label for="message">留言：</label><textarea id="message" name="message" required></textarea><br><button type="submit">提交</button></form><h2>留言列表</h2><ul><% messages.forEach(message => { %><li><strong><%= message.name %></strong>：<%= message.message %><small><%= message.created_at %></small></li><% }) %></ul>
</body>
</html>

这段 EJS 模板会渲染留言表单和留言列表，用户提交信息后，会通过 POST 请求插入到数据库中。

代码/配置示例：前端样式和后台管理界面

1. 前端样式优化

在 public/style.css 中，加入基础样式：

body {font-family: Arial, sans-serif;margin: 40px;background: #f5f5f5;
}h1, h2 {color: #333;
}form {background: #fff;padding: 20px;border-radius: 5px;box-shadow: 0 0 10px rgba(0,0,0,0.1);
}input, textarea {width: 100%;padding: 10px;margin-bottom: 10px;
}button {background: #4CAF50;color: white;padding: 10px 20px;border: none;cursor: pointer;
}ul {list-style-type: none;padding: 0;
}li {background: #fff;padding: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: 0 0 5px rgba(0,0,0,0.05);
}

这个样式可以让留言页面看起来更专业一些。

2. 添加管理员界面

在 views/admin.ejs 中，创建一个简单的管理员页面，用来删除留言：

<!DOCTYPE html>
<html>
<head><title>管理留言</title><link rel="stylesheet" href="/style.css">
</head>
<body><h1>管理留言</h1><ul><% messages.forEach(message => { %><li><strong><%= message.name %></strong>：<%= message.message %><small><%= message.created_at %></small><form action="/delete/<%= message.id %>" method="POST" style="display:inline;"><button type="submit">删除</button></form></li><% }) %></ul>
</body>
</html>

在 app.js 中新增一个删除路由：

app.get('/admin', (req, res) => {connection.query('SELECT * FROM messages', (err, results) => {if (err) throw err;res.render('admin', { messages: results });});
});app.post('/delete/:id', (req, res) => {const id = req.params.id;connection.query('DELETE FROM messages WHERE id = ?', [id], (err, results) => {if (err) throw err;res.redirect('/admin');});
});

这样，你就可以通过访问 /admin 查看留言列表并删除不需要的留言。