目录
效果展示
Message boards开发步骤
项目初始化
安装包
新建文件夹
新建服务
新建页面
界面功能开发
前端
后端
写在后面
1.设计背景
本项目主要训练综合运用node+express技术搭建后台，html+css+JavaScript搭建前端页面,培养分析问题和解决问题的能力。
2.设计题目
题目描述：
你正在开发一个简单的留言板应用，用户可以在网页上发布留言并查看已发布的留言。请根据以下要求完成代码实现。
3.设计要求
前端任务：
在HTML页面上创建一个表单，包含以下字段：
昵称：用户输入自己的昵称。
留言内容：用户输入要发布的留言内容。
使用JavaScript/jQuery编写前端逻辑，实现以下功能：
在表单提交前对用户输入进行验证，验证不通过时阻止表单提交并给出相应提示信息。
验证昵称和留言内容是否为空。
使用jQuery的Ajax方法，将表单数据以JSON格式发送到后端的"/api/messages"路由，并在成功后刷新留言列表显示最新的留言。
后端任务：
使用Node.js和Express框架创建一个服务器应用程序。
创建一个POST路由"/api/messages"，接收来自前端的留言数据，并进行后端处理。
将接收到的留言数据保存到一个数组中（每个留言对象包含昵称和留言内容）。
创建一个GET路由"/api/messages"，用于获取已发布的留言列表。
你需要完成以下任务：
在前端编写HTML、CSS和JavaScript/jQuery代码，实现留言发布表单和验证逻辑。
在后端使用Node.js和Express框架，创建路由和处理逻辑。
将前后端代码连接起来，实现留言发布和留言列表的完整功能。
注意：为了简化题目，可以将留言数据保存在服务器端的数组中，无需使用真实的数据库
效果展示
Message boards开发步骤
项目初始化
新建文件夹，命名为`Message boards`，注意这里的命名不得为中文或其他特殊字符
npm init -y
安装包
npm i jquery express express-art-template
这里我们安装jQuery、express、express-art-template包，把他们都引入到了本地
新建文件夹
新建public，views文件夹，public下新建img，js，css文件夹，目录如下：
新建服务
在Message boards文件夹下新建`server.js`
const express=require('express') const app = express() //配置express-art-template，才可以render html app.engine('html',require('express-art-template')) app.get('/',(req,res) =>{ res.render('index.html') }) app.listen(3003,() => console.log('app listening on http://localhost:3003 '))
当用户get / 时，就会渲染index.html
开通了3003端口号。
ip地址是链接到网络上的某台计算机
端口号是识别到该计算机上的某个软件
新建页面
在`views`文件夹下，新建`index.html`
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Message boards</title> <link href="../public/css/index.css" rel="stylesheet"> </head> <body> <div class="container"> <h1><strong>留言板</strong></h1> <form id="message-form"> <div class="form-group"> <label for="nickname">昵称：</label> <input type="text" id="nickname" name="nickname" placeholder="*昵称" required> <div id="nickname-error-message" class="error-message"></div> </div> <div class="form-group"> <label for="content">留言内容：</label> <textarea id="content" name="content" placeholder="来都来了，不留下点什么吗？" required></textarea> <div id="content-error-message" class="error-message"></div> </div> <div class="text-center"> <button type="submit">提交留言</button> </div> </form> <div id="messages"></div> </div> </body> </html>
在`public`文件夹的css文件夹下，新建`index.css`
body { background-color: #f6f6f6; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .container { max-width: 600px; margin: 20px auto; padding: 20px; background-color: #ffffff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 10px; } h1 { text-align: center; margin-bottom: 20px; color: #002FA7; } .form-group { margin-bottom: 20px; } label { display: block; font-weight: bold; margin-bottom: 5px; } input[type="text"]{ width: 95%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; } textarea { width: 95%; height: 100px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; } .error-message { color: red; margin-top: 5px; } button { display: block; width: 80%; padding: 10px; margin: 30px auto; background-color: #002FA7; color: #ffffff; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #3f51b5; } .text-center { text-align: center; } .message { margin-bottom: 20px; padding: 10px; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 4px; } .message .nickname { font-weight: bold; } .message .content { margin-top: 5px; }
注意：在index.html中添加<link href="../public/css/index.css" rel="stylesheet">引入
界面功能开发
-
前端
function getMessages() {
这个函数用于获取留言信息。它使用 jQuery 的 $.ajax() 函数发起一个 GET 请求，从 /api/messages URL 获取留言数据。
$.ajax({ type: 'GET', url: '/api/messages', success: function (data) {
$.ajax() 函数用于异步地向服务器发送 HTTP 请求。这里我们指定了请求类型为 GET，URL 为 /api/messages。当请求成功时，success 函数会被调用，数据会保存在 data 参数中。
const messages = data.messages;
从服务器返回的数据中，我们提取了一个名为 messages 的数组，并将其保存在本地变量 messages 中。
const messages = data.messages;
这里使用 jQuery 选择器选中了页面中的 #messages 元素（一个空的 <div>），并使用 empty() 方法清空其中的所有子元素。这是为了在更新留言时清除旧的留言信息。
messages.forEach(function (message) { const $messageDiv = $('<div>').addClass('message'); const $nicknameDiv = $('<div>').addClass('nickname').text(message.nickname); const $contentDiv = $('<div>').addClass('content').text(message.content); $messageDiv.append($nicknameDiv).append($contentDiv); $('#messages').append($messageDiv); });
这个 forEach() 循环遍历了从服务器返回的留言数组，并将每个留言信息用 HTML 元素的形式添加到页面中。对于每个留言，我们创建了一个 <div> 元素，它包含两个子元素 <div>，分别用于显示昵称和留言内容。然后，我们使用 append() 方法将这些子元素添加到父元素中，并将其添加到 #messages 元素中。
error: function (xhr, status, error) { console.log(xhr.responseText); }
如果 AJAX 请求失败，error 函数会被调用，并将错误信息输出到控制台中。
$(document).ready(function () {
这个函数用于在文档加载完毕后执行一些操作。在这里，我们将 getMessages() 函数和表单提交函数绑定到页面的加载事件上。
$('#message-form').submit(function (event) { event.preventDefault();
这个函数用于处理表单提交事件。我们首先调用 preventDefault() 方法，以防止表单默认提交操作的触发。
const nickname = $('#nickname').val(); const content = $('#content').val();
这两行代码用于获取表单中用户输入的昵称和留言内容，分别保存在 nickname 和 content 变量中。
if (nickname.trim() === '') { $('#nickname-error-message').text('昵称不能为空'); return; } if (content.trim() === '') { $('#content-error-message').text('留言内容不能为空'); return; }
这里使用条件语句来检查用户输入的昵称和留言内容是否为空。如果为空，我们将在页面上显示错误消息，并立即返回，以防止表单提交。
$.ajax({ type: 'POST', url: '/api/messages', data: JSON.stringify({nickname: nickname, content: content}), contentType: 'application/json', success: function (data) { $('#nickname').val(''); $('#content').val(''); $('#nickname-error-message').empty(); $('#content-error-message').empty(); getMessages(); }, error: function (xhr, status, error) { console.log(xhr.responseText); } });
这个函数使用 $.ajax() 函数发起一个 POST 请求，向 /api/messages URL 提交用户输入的昵称和留言内容。我们将数据作为 JSON 字符串发送，并将 contentType 设置为 application/json。当请求成功时，我们清空表单中的输入内容，并调用 getMessages() 函数，以更新页面上的留言信息。如果请求失败，则将错误信息输出到控制台中。
总的来说，这段代码使用了 jQuery 库来实现一个简单的留言板应用程序。它通过 AJAX 技术从服务器获取留言信息，并将其显示在页面上。它还允许用户提交新的留言信息，以及对输入信息进行基本的验证。
-
后端
此项目后端是一个基于 Node.js 和 Express 的后端应用程序，用于保存和获取留言信息。下面内容在server.js内编写
// 保存留言数据的数组 let messages = [];
这个数组用于保存所有的留言信息。在这个示例中，我们将它声明为一个空数组，以便在以后添加新的留言信息时使用。
app.post('/api/messages', function (req, res) {
这个函数处理 POST 请求，用于保存用户提交的留言。
const nickname = req.body.nickname; const content = req.body.content;
从请求体中获取用户提交的昵称和留言内容，并分别保存在本地变量 nickname 和 content 中。
messages.push({nickname: nickname, content: content});
将用户提交的留言信息保存到 messages 数组中，作为一个对象的形式。
res.status(200).send('留言已发布');
向客户端发送 HTTP 响应。我们使用 status() 方法设置状态码为 200，表示请求成功。然后，我们使用 send() 方法将一条简单的消息发送给客户端，以告诉用户留言已经成功发布。
app.get('/api/messages', function (req, res) {
这个函数处理 GET 请求，用于获取所有留言信息。我们使用 Express 应用程序对象的 get() 方法来指定 URL 和回调函数。
res.status(200).json({messages: messages});
向客户端发送 HTTP 响应。我们使用 status() 方法设置状态码为 200，表示请求成功。然后，我们使用 json() 方法将一个包含所有留言信息的对象发送给客户端，这个对象包含一个名为 messages 的属性，它的值是 messages 数组。
总的来说，这段代码使用了 Node.js 和 Express 库来实现一个简单的留言板应用程序的后端。它允许客户端通过 HTTP 请求向服务器提交新的留言信息，并将这些信息保存到
messages数组中。它也允许客户端通过 HTTP 请求获取所有的留言信息。
写在后面
文章写作不易，对您有帮助的话，欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！
本项目代码已开源，可以私信或留言。
