目录
效果展示
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 请求获取所有的留言信息。
写在后面
文章写作不易，对您有帮助的话，欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！
本项目代码已开源，可以私信或留言。
