導讀:前端開發前端開發在現代網絡社交化時代，留言板是網頁設計中不可或缺的一個元素。它允許用戶與作者和其他讀者之間進行交流和互動，增強了網站與用戶之間的聯系。但是，對于許多網站管理員和高端網站建設網站seo優化培訓。

在現代網絡社交化時代，留言板是網頁設計中不可或缺的一個元素。它允許用戶與作者和其他讀者之間進行交流和互動，增強了網站與用戶之間的聯系。但是，對于許多網站管理員和開發人員來說，建立一個高效、安全、易于使用的留言板并不容易。

本篇文章將為您提供一份留言板代碼大全，涵蓋從前端到后端以及數據庫等各個方面，幫助您快速、輕松地搭建一個交互式留言板。

前端部分

留言板的前端部分通常包括兩個主要組成部分：表單和留言列表。表單用于提交新的留言，而留言列表則展示已有的留言。

HTML代碼

<form> <label for="name">姓名：</label> <input type="text" id="name" name="name" required> <label for="email">郵箱：</label> <input type="email" id="email" name="email" required> <label for="message">留言：</label> <textarea id="message" name="message" required></textarea> <button type="submit">提交</button> </form> <div id="messages"> <!-- 留言列表將通過JavaScript動態生成 --> </div>

CSS代碼

form { display: flex; flex-direction: column; margin-bottom: 20px; } label { font-weigh公司網站建設t: bold; } input[type="text"], input[type="email"], textarea { padding: 5px; border-radius: 3px; border: 1px solid #ccc; margin-bottom: 10px; } button[type="submit"] { background-color: #007bff; color: #fff; padding: 8px 16px; border-radius: 3px; border: none; cursor: pointer; } /* 留言列表樣式 */ .message { margin-bottom: 20px; padding: 10px; border-radius: 3px; border: 1px solid #ccc; } .message h3 { margin-top: 0; } .message p { margin-bottom: 0; }

JavaScript代碼

const form = document.querySelector('form'); const messagesDiv = document.querySelector('#messages'); // 監聽表單提交事件 form.addEventListener('submit', event => { event.preventDefault(); // 防止表單默認提交行為 const nameInput = form.querySelector('#name'); const emailInput = form.querySelector('#email'); const messageTextarea = form.querySelector('#message'); // 創建一個留言對象，包含姓名、郵箱和留言內容 const message = { name: nameInput.value, email: emailInput.value, message: messageTextarea.value, date: new Date() // 添加留言時間屬性 }; // 發送POST請求將留言保存到服務器（詳見后端部分） fetch('/api/messages', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(message) }) .then(response => response.json()) .then(data => { // 清空表單內容 nameInput.value = ''; emailInput.value = ''; messageTextarea.value = ''; // 將新的留言添加到留言列表 const messageDiv = document.createElement('div'); messageDiv.classList.add('message'); messageDiv.innerHTML = ` <h3>${data.name}</h3> <p>${data.message}</p> <small>${data.email} - ${new Date(data.date).toLocaleString()}</small> `; messagesDiv.prepend(messageDiv); }) .catch(error => { console.error(error); }); }); // 頁面加載時從服務器獲取所有留言并展示在留言列表中 fetch('/api/messages') .then(response => response.json()) .then(data => { data.forEach(message => { const messageDiv = document.createElement('div'); messageDiv.classList.add('message'); messageDiv.innerHTML =<h3>${message.name}</h3><p>${message.message}</p><small>${message.email} - ${new Date(message.date).toLocaleString()}</small> ; messagesDiv.appendChild(messageDiv); }); }) .catch(error => { console.error(error); });

關鍵詞標簽: 留言板 前端開發