本案例由开发者：华为2024年第三批次协同育人项目-山东科技大学-崔宾阁老师提供
1 概述
1.1 案例介绍
随着社交互动需求的日益增长，留言板作为一种典型的用户交流功能，已被广泛应用于博客、论坛及各类社交平台中。华为云主机为前端开发提供了稳定高效的运行环境，使开发者能够在云端快速搭建应用。
本案例依托华为开发者空间提供的云主机与CodeArts IDE，结合JavaScript技术，开发了一个完整的网页留言板功能。项目实现了一个在线留言板，首先设计了留言板的基础框架，包括留言输入区域、留言板选择下拉框、留言展示区域等。通过监听表单提交与按钮点击事件，动态地将留言添加到对应的留言板，并支持在页面上实时显示与删除留言。留言数据统一存储在浏览器的 LocalStorage 中，即使刷新页面也能保留。开发者可在云端环境中进行代码编写与运行，利用弹性高效的计算资源，无需关注底层基础设施，即可专注于前端功能的实现。
通过本案例，开发者将掌握 JavaScript 在网页互动功能中的应用，重点学习 HTML5 DOM 操作、事件监听、LocalStorage 本地存储及 CSS 样式控制等技术。同时，开发者将熟悉云主机及 CodeArts IDE for Java 开发环境，提升项目实战能力，为后续更复杂的 Web 应用开发打下坚实基础。
1.2 案例时间
本案例总时长预计30分钟。
1.3 案例流程
说明：
① 申请并登录华为开发者空间—云主机，打开 CodeArts IDE 创建工程；
② 在云主机 CodeArts IDE for Java 中编写案例项目代码；
③ 通过 Firefox 启动案例项目的入口文件。
1.4 资源总览
本案例预计花费总计0元。
| 资源名称 | 规格 | 单价（元） | 时长（分钟） |
| 开发者空间—云主机 | 鲲鹏|4 vCPUs|8GB|Ubuntu | 0 | 30 |
| CodeArts IDE | CodeArts IDE for java | 0 | 30 |
2 操作步骤
2.1 配置开发者空间—云主机
本案例中，使用华为开发者空间所提供的云主机平台以及CodeArts+JavaScript开发工具，完成网页留言板案例的开发工作。点击链接（ https://support.developer.huaweicloud.com/doc/development/resource-tools/zh-cn_topic_0000002367559525-0000002367559525 ）可跳转至免费领取云主机指南。
1. 在浏览器中输入华为云开发者空间网址：https://developer.huaweicloud.com/developerspace，进入到华为云开发者空间页面。
在华为开发者空间页面点击“免费领取”，跳转到开发者空间页面，如未领取根据页面提示进行云主机领取。
2. 在开发者空间页面，点击左侧“工作台”按钮进入工作台页面，再点击“配置云主机”进行云主机的配置。
3. 在配置云主机窗口中自定义云主机名称，配置完毕后点击“安装”。
4. 安装完毕后点击“打开云主机”>“进入桌面”即可进入云主机。
5. 等待环境云主机下载镜像、安装系统、安装工具集，首次进入云主机大约需要3至5分钟。
6. 环境准备完毕后，即可进入云主机，云主机桌面如下图所示。
2.2 创建项目
1. 双击打开云主机桌面上的CodeArts IDE for java（虽然IDE名称带有“Java”，但本案例用于编写JavaScript前端代码）。
2. 首次使用CodeArts IDE创建工程，可直接点击左侧栏目中的“新建工程”，创建网页留言板工程项目。
3. 新建工程后，在工程名称栏输入：MessageBoard，工程存放位置、构建系统及JDK直接使用默认配置，接着点击右下角蓝色“创建”按钮。
4. 在“MessageBoard” 工程项目中，点击左上角新建HTML文件，输入：messageboard.html，输入完毕后按下回车键，该文件用于存放实现网页留言板的代码，代码内容在后续文中进行介绍。
2.3 编写代码
以下是网页留言板的实现代码（存放在messageboard.html文件），可供参考学习。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多留言板</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 1200px;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
}
.input-section {
width: 100%;
max-width: 800px;
margin-bottom: 20px;
background: #f9f9f9;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
.input-section:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
.board-selector {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.board-selector select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
color: #333;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.board-selector select:hover {
background-color: #e1f5fe;
}
.input-section textarea {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
color: #333;
resize: none;
transition: border-color 0.3s ease;
}
.input-section textarea:focus {
border-color: #007bff;
}
.input-section button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
.input-section button:hover {
background-color: #0056b3;
}
.boards {
display: flex;
justify-content: space-around;
width: 100%;
max-width: 1200px;
}
.board {
flex: 1;
margin: 0 10px;
background: #f9f9f9;
border: 1px solid #ccc;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
.board:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
.board h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
.board .messages {
max-height: 300px;
overflow-y: auto;
padding: 10px;
background-color: #e1f5fe;
border: 1px solid #b3e5fc;
border-radius: 10px;
}
.board .message {
padding: 10px;
margin-bottom: 10px;
background-color: #e1f5fe;
border: 1px solid #b3e5fc;
border-radius: 5px;
font-size: 14px;
color: #333;
transition: background-color 0.3s ease;
display: flex;
justify-content: space-between;
align-items: center;
}
.board .message:hover {
background-color: #d0e8f9;
}
.board .message button {
padding: 5px 10px;
background-color: #ff4d4d;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 12px;
transition: background-color 0.3s ease;
}
.board .message button:hover {
background-color: #ff1a1a;
}
.board .messages::-webkit-scrollbar {
width: 8px;
}
.board .messages::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 4px;
}
.board .messages::-webkit-scrollbar-track {
background-color: #f1f1f1;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<div class="input-section">
<div class="board-selector">
<label for="boardSelect">选择留言板：</label>
<select id="boardSelect">
<option value="board1">留言板1</option>
<option value="board2">留言板2</option>
<option value="board3">留言板3</option>
</select>
</div>
<form id="messageForm">
<textarea id="messageInput" placeholder="请输入留言..." rows="4"></textarea>
<button type="submit">提交留言</button>
</form>
</div>
<div class="boards">
<div class="board" id="board1">
<h2>留言板1</h2>
<div class="messages" id="messages1"></div>
</div>
<div class="board" id="board2">
<h2>留言板2</h2>
<div class="messages" id="messages2"></div>
</div>
<div class="board" id="board3">
<h2>留言板3</h2>
<div class="messages" id="messages3"></div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const messageForm = document.getElementById('messageForm');
const messageInput = document.getElementById('messageInput');
const boardSelect = document.getElementById('boardSelect');
const boards = ['board1', 'board2', 'board3'];
const allBoards = JSON.parse(localStorage.getItem('allBoards')) || {
board1: [],
board2: [],
board3: []
};
// 显示所有留言板的留言
function displayMessages() {
boards.forEach(board => {
const messagesDiv = document.getElementById(`messages${board.slice(-1)}`);
const messages = allBoards[board];
messagesDiv.innerHTML = '';
messages.forEach((message, index) => {
const messageElement = document.createElement('div');
messageElement.classList.add('message');
messageElement.innerHTML = `
${message}
<button class="delete-button" data-board="${board}" data-index="${index}">删除</button>
`;
messagesDiv.appendChild(messageElement);
});
});
}
// 初始化时显示所有留言板的留言
displayMessages();
messageForm.addEventListener('submit', (e) => {
e.preventDefault();
const message = messageInput.value.trim();
if (message) {
const currentBoard = boardSelect.value;
allBoards[currentBoard].push(message);
localStorage.setItem('allBoards', JSON.stringify(allBoards));
// 更新显示
displayMessages();
messageInput.value = '';
}
});
// 监听删除按钮的点击事件
document.addEventListener('click', (e) => {
if (e.target.classList.contains('delete-button')) {
const board = e.target.getAttribute('data-board');
const index = e.target.getAttribute('data-index');
allBoards[board].splice(index, 1);
localStorage.setItem('allBoards', JSON.stringify(allBoards));
displayMessages();
}
});
});
</script>
</body>
</html>本案例通过综合运用 HTML 结构划分、CSS 布局与样式美化、JavaScript 事件监听与本地存储，实现了一个多留言板网页，主要技术实现如下：
① HTML结构：页面分为输入区与展示区。输入区包括留言文本框、留言板选择下拉框和提交按钮；展示区包含三个独立的留言板，每个留言板内有留言展示容器 <div class="messages">，用于动态渲染留言内容。
② CSS布局与样式：整体采用flex布局，将输入区与留言板区域分列排布；通过阴影、圆角、悬停效果增强交互体验；为留言板设置独立滚动条（overflow-y: auto），保证多条留言展示时界面整洁。
③ 数据存储：利用浏览器的localStorage保存留言数据，数据结构为对象{ board1:[], board2:[], board3:[] }。这样即使刷新页面，留言内容也能持久化保存。
④ 事件监听与动态渲染：通过监听表单submit事件获取留言内容，写入对应的留言板数组，并调用渲染函数displayMessages()，将所有留言以<div class="message">的形式展示到对应留言板中。
⑤ 删除功能与事件委托：每条留言右侧附带一个“删除”按钮。通过事件委托监听click事件，捕捉按钮点击后根据data-board与data-index精确定位留言，从数组中删除并更新localStorage，再重新渲染页面。
2.4 留言板网页展示
1. 在 CodeArts IDE for Java 中，右击“messageboard.html”文件，然后点击“打开所在的文件夹”。
2. 在弹出来的文件夹中，右击“messageboard.html”文件，然后选择用“Firefox”打开。
3. 留言板网页展示：本案例的留言板网页实现了留言提交、展示和删除等功能。
① 留言提交：首先选择想要留言的留言板，在下方输入留言，例如：“华为云主机安全可靠，为团队协作和高效开发提供了有力支持!”，点击“提交留言”。
② 留言展示：“提交留言”后，可以在下方对应的留言板上看到留言。
③ 留言删除：若不想留言，可以点击红色“删除”按钮，删除留言。
④ 多留言板展示：留言板可以展示多条留言，增加页面的互动性和实用性。
至此本次实验全部内容完成。
2.5 拓展实验
1. 增强交互性：比如在留言提交时，系统自动为每条留言添加提交时间戳，方便用户查看留言顺序；同时为每条留言提供点赞按钮，点击后点赞数即时更新并保存到本地存储，使留言板更具互动性。
2. 功能扩展：比如在留言板上方增加搜索框，用户输入关键字后，系统能够实时筛选并仅显示包含该关键字的留言。
3. 欢迎自由发挥。
3 释放资源
3.1 关闭云主机
1. 使用完毕后，点击云主机桌面顶端菜单中的“关机”按钮，在弹出的对话框中点击“确定”即可退出云主机。
2. 点击“确定”按钮后页面自动跳转到开发者空间页面，可以看到我的云主机显示“关机中”，说明云主机正在关机。
3.2 检查资源
云主机关机后，等待3至5分钟，当我的云主机显示“已就绪”时，说明云主机成功关机，下次使用云主机只需点击“打开云主机”>“进入桌面”即可，可参考2.1小节。
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
