Всем привет, мы снова встретились, я ваш друг Цюаньчжаньцзюнь.

В этой статье описывается, как реализовать простую функцию доски объявлений на веб-странице, которая поддерживает только текстовые сообщения.

Среда разработки: dreamweaverCC html + jscirpt + php.

Предварительные требования: 1. Был создан простой веб-сайт, позволяющий пользователям входить на него.

2. Пользователь авторизовался на сайте.

Этапы реализации:

1. Создайте новую страницу доски объявлений.

1. Создайте новую веб-страницу: whiteboard.html.

Доска объявлений (js-div-whiteboard) разделена на три части:

Список сообщений: (js-div-whiteboard-messages), Нет сообщения: (js-div-whiteboard-empty-hint), Отправить новое сообщение: (js-div-whiteboard-input), три элемента div сверху вниз. Упорядочить вертикально.

html:

<div class = “js-div-whiteboard “> <div class = “js-div-whiteboard-messages”> </div> <div class = “js-div-whiteboard-empty-hint”> </div> <div class = “js-div-whiteboard-input style-margin-top”> </div> </div>

2. Список сообщений js-div-whiteboard

Список сообщений разделен на две части: меню (js-div-whiteboard-menu) и содержимое сообщения (js-ul-whiteboard-message-list).

Меню: Предыдущая страница, Следующая страница.

Содержимое сообщения: 10% автор + 80% сообщение + 10% дата. Три содержимого расположены горизонтально, с шириной 10%-80%-10%. Каждое сообщение отделяется горизонтальной линией.

Вышеупомянутые два элемента расположены вертикально сверху вниз.

html

<div class = “js-div-whiteboard-messages”> <div class=”js-div-whiteboard-menu”> <span>&nbsp;&nbsp;</span> <span class = “js-whiteboard-up-page “>Предыдущая страница</span> <span>&nbsp;&nbsp;</span> <span class = “js-whiteboard-down-page “>Следующая страница</span> <hr class = “style-hr-full”> </div> <ul class=”js-ul-whiteboard-message-list style-li-notice-text style-ul-user-menu”> <li class = “style-fontsize-15”> <span class = “style-li-whiteboard-user style-fontsize-15-center”>user1</span> <span class = “style-li-whiteboard-message”>Люди, которые едят дыню №3。</span> <span class = “style-li-whiteboard-date style-fontsize-15-center”>01-02</span> </li> <hr class = “style-hr-full”> <li> <span class = “style-li-whiteboard-user”>user2</span> <span class = “style-li-whiteboard-message”>Люди, которые едят дыню №2。</span> <span class = “style-li-whiteboard-date”>01-02</span> </li> <hr class = “style-hr-full”> </ul> </div>

3. Подсказка об отсутствии сообщений: (js-div-whiteboard-empty-hint)

<div class = “js-div-whiteboard-empty-hint”> <span class = “style-li-whiteboard-message”> Доска объявлений по-прежнему пуста.！</span> </div>

4. Отправьте новое сообщение: (js-div-whiteboard-input)

Содержит две части: текстовую область (js-whiteboard-textarea-input) и кнопку (js-button-whiteboard-submit), расположенные вертикально вверх и вниз.

html

<div class = “js-div-whiteboard-input style-margin-top”> <textarea class = “js-whiteboard-textarea-input” rows=”5″ cols=”100″ maxlength = “400” Placeholder = «Скажи что-нибудь…» style = “resize: none”></textarea><br/><br/> <button class = ” js-button-whiteboard-submit” > нести платить </button> </div>

5. Наконец, добавьте некоторые настройки CSS и результаты страницы.

html：

<div class = “js-div-whiteboard “> <div class = “js-div-whiteboard-messages”> <div class=”js-div-whiteboard-menu style-fontsize-15″> <span>&nbsp;&nbsp;</span> <span class = “js-whiteboard-up-page “>Предыдущая страница</span> <span>&nbsp;&nbsp;</span> <span class = “js-whiteboard-down-page “>Следующая страница</span> <hr class = “style-hr-full”> </div> <ul class=”js-ul-whiteboard-message-list style-li-notice-text style-ul-user-menu”> <li class = “style-fontsize-15”> <span class = “style-li-whiteboard-message”>Я поем спокойно здесь。</span> <span class = “style-li-whiteboard-user style-fontsize-15-center”>user1</span> <span class = “style-li-whiteboard-date style-fontsize-15-center”>01-02</span> </li> <hr class = “style-hr-full”> <li> <span class = “style-li-whiteboard-message”>Неплохо！</span> <span class = “style-li-whiteboard-user”>user2</span> <span class = “style-li-whiteboard-date”>01-02</span> </li> <hr class = “style-hr-full”> </ul> </div> <div class = “js-div-whiteboard-empty-hint style-margin-bottom style-margin-top”> <span class = “style-li-whiteboard-message style-margin-bottom style-margin-top”> Доска объявлений по-прежнему пуста.！</span> </div> <div class = “js-div-whiteboard-input style-margin-top”> <textarea class = “js-whiteboard-textarea-input style-fontsize-20″ rows=”5″ cols=”100” maxlength = “400” Placeholder = «Скажи что-нибудь…» style = “resize: none”></textarea><br/><br/> <button class = “style-fontsize-20 js-button-whiteboard-submit” > нести платить </button> </div> </div>

Интерфейс доски объявлений готов.

2. Проектирование базы данных

В базе данных этого веб-сайта используется собственная база данных Alibaba Cloud ecs. Имя таблицы: whiteboard_messages.

Структура следующая:

Содержимое базы данных предустановок следующее:

3. Реализация функции доски объявлений.

1. Серверная часть: поддерживает запрос веб-страницы для получения информации о сообщении в базе данных.

getBoardmessages.php：

<?php conn = mysqli_connect(“localhost”,”root”,””,”Learn”) or die("Соединение не удалось"); mysqli_query(conn,”set names utf8″); result = mysqli_query(conn,”select * from whiteboard_messages order by creat_time DESC limit 2 offset offset “); messageArray = array(); while (row = mysqli_fetch_array(result)) { tempArray = array(‘id’=>row[message],’author’=>row[author_id],’creat_time’=>messageArray,tempArray); }

// Возвращаем сообщение во внешний интерфейс if (sizeof(messageArray)> 0) { echo json_encode(

2. Веб-страница: при обновлении страницы будут отображаться существующие сообщения.

Функция: каждый раз, когда страница открывается или обновляется, последние две части информации считываются из базы данных и сортируются в порядке убывания по дате.

Если сообщения нет, будет отображаться пустое сообщение.

Основной код jscpript: $.ajax({ URL: "http://www.xxx.cn/php/getBoardmessages.php", тип:"ПОСТ", async: false, //Установив операцию синхронизации, вы можете успешно присваивать значения глобальным переменным данные: {"информация":"get_message","offset":0}, успех: функция (данные) { console.log(данные); if (данные == «нет сообщения») {

(“.js-div-whiteboard-empty-hint”).attr(“style”,”display:block;”); (“.js-div-whiteboard-messages”).attr(“style”,”display:none;”); return; }

(“.js-div-whiteboard-empty-hint”).attr(“style”,”display:none;”); (“.js-div-whiteboard-messages”).attr(“style”,”display:block;”); var info = JSON.parse(data); global_whiteboard_message_list = info;// displayWhiteboardMessageList(); }, error:function(xhr){alert("Ошибка: ” + xhr.status + ” ” + xhr.statusText);} });

function displayWhiteboardMessageList() { var text = “”; (“.js-ul-whiteboard-message-list”).empty(); for (var i = 0;i < global_whiteboard_message_list.length;i++) { text = text + “<li class = \”style-fontsize-15\”><span class = \”style-li-whiteboard-user style-fontsize-15-center\”>” + global_whiteboard_message_list[i].author + “</span><span class = \”style-li-whiteboard-message\”>” + global_whiteboard_message_list[i].message + “</span><span class = \”style-li-whiteboard-date style-fontsize-15-center\”>” +　timestamp2time(global_whiteboard_message_list[i].creat_time) + “</span></li><hr class = \”style-hr-full\”>”; }

function timestamp2time(timestamp){ var stamp = parseInt(timestamp * 1000);//временная метка PHP имеет только десять цифр, расширена до 13 цифр var date = new Date(stamp); var Y = date.getFullYear() + ‘-‘; var M = (date.getMonth()+1 < 10 ? ‘0’+(date.getMonth()+1) : date.getMonth()+1) + ‘-‘; var D = (date.getDate() < 10 ? ‘0’ + (date.getDate()) : date.getDate()) + ‘ ‘; var h = (date.getHours() < 10 ? ‘0’ + date.getHours() : date.getHours()) + ‘:’; var m = (date.getMinutes() <10 ? ‘0’ + date.getMinutes() : date.getMinutes()) + ‘:’; var s = (date.getSeconds() <10 ? ‘0’ + date.getSeconds() : date.getSeconds()); return Y+M+D+h+m+s; }

3. Серверная часть: поддерживает запись новых сообщений в базу данных.

write2board.php

<?php session_start(); author = _POST[‘author’]; author_id = _POST[‘author_id’];

conn = mysqli_connect(“localhost”,”root”,””,”Learn”) or die("Соединение не удалось"); mysqli_query(conn,”set names utf8″); time = time(); var = mysqli_query(conn,”insert into whiteboard_messages(message,author,author_id,creat_time)values(‘message’,’author’,’author_id’,’

4. Веб-страница: добавить новое сообщение.

Основной код jscript:

(“.js-button-whiteboard-submit”).click(function(){ if ((‘.js-whiteboard-textarea-input’).val().trim().length ==0) return; var sendData = {“message”:(‘.js-whiteboard-textarea-input’).val(),”author_id”:global_user_info.id,”author”:global_user_info.username};//global_user_info Информация сохраняется при входе пользователя в систему .ajax({ url:”http://www.xxx.cn/php/write2board.php”, type:”POST”, data:sendData, success:function(data){ console.log(data); if (data == “white2board success”) { (“.js-whiteboard-textarea-input”).val(“white2board success”); } else { (“.js-whiteboard-textarea-input”).val(“white2board failed”); } }, error:function(xhr){alert("Ошибка: ” + xhr.status + ” ” + xhr.statusText);} }); });

5. Функции меню: предыдущая страница, следующая страница, перелистывание страниц.

При нажатии «Предыдущая страница» или «Следующая страница» все сообщения будут отображаться при перелистывании страницы. На каждой странице отображается максимум два элемента, расположенных в порядке убывания времени.

При отображении первой страницы «предыдущая страница» скрыта; при отображении последней страницы скрыта «следующая страница»; при наличии только одной страницы сообщений отображаются «предыдущая страница» и «следующая страница». скрытый.

код jscript: 1) Измените существующий код второй функции, синий — новый код.

(“.js-whiteboard-up-page”).click(function(){updateWhiteboardMessages(“up”);}); (“.js-whiteboard-down-page”).click(function(){updateWhiteboardMessages(“down”);}); (“.js-whiteboard-down-page”).attr(“style”,”visibility:hidden;”); (“.js-whiteboard-up-page”).attr(“style”,”visibility:hidden;”); .ajax({ url:”http://www.xxx.cn/php/getBoardmessages.php”, type:”POST”, async: false, //Установив операцию синхронизации, вы можете успешно присваивать значения глобальным переменным. data:{“info”:”get_message”,”offset”:0}, success:function(data){ //(“.debug_info”).text(data); console.log(data); if (data == “no message”) { (“.js-div-whiteboard-empty-hint”).attr(“style”,”display:block;”); (“.js-div-whiteboard-messages”).attr(“style”,”display:none;”); return; } (“.js-div-whiteboard-empty-hint”).attr(“style”,”display:none;”); (“.js-div-whiteboard-messages”).attr(“style”,”display:block;”); var info = JSON.parse(data); global_whiteboard_message_list = info;

/*Более одной страницы*/ if (global_whiteboard_message_list.length == global_whiteboard_message_limit) { $(“.js-whiteboard-down-page”).attr(“style”,”visibility:visible;”); } displayWhiteboardMessageList(); }, error:function(xhr){alert("Ошибка: ” + xhr.status + ” ” + xhr.statusText);} });

2）

function updateWhiteboardMessages(action) { if (action == “up”) { global_whiteboard_message_offset = global_whiteboard_message_offset – 2; (“.js-whiteboard-down-page”).attr(“style”,”visibility:visible;”); } else if (action == “down”) { global_whiteboard_message_offset = global_whiteboard_message_offset + 2; (“.js-whiteboard-up-page”).attr(“style”,”visibility:visible;”); } else { ; } .ajax({ url:”http://www.xxx.cn/php/getBoardmessages.php”, type:”POST”, async: false, //Установив операцию синхронизации, вы можете успешно присваивать значения глобальным переменным. data:{“info”:”get_message”,”offset”:global_whiteboard_message_offset}, success:function(data){ console.log(data); if (data == “no message”) { if (action == "вверх")/*достиг первой страницы*/ { (“.js-whiteboard-up-page”).attr(“style”,”visibility:hidden;”); global_whiteboard_message_offset = global_whiteboard_message_offset + 2; } if (action == "вниз")/*дошел до последней страницы*/ { (“.js-whiteboard-down-page”).attr(“style”,”visibility:hidden;”); global_whiteboard_message_offset = global_whiteboard_message_offset – 2; } return; } var info = JSON.parse(data); global_whiteboard_message_list = info; /*Достигнута последняя страница*/ if (global_whiteboard_message_list.length < 2) {

Эта функция кода реализована.

Загрузите веб-страницу и связанный с ней код на сервер и воспользуйтесь простой функцией доски объявлений.

Заявление об авторских правах: Содержание этой статьи добровольно предоставлено пользователями Интернета.,Мнения, выраженные в данной статье, принадлежат исключительно автору. Этот сайт предоставляет только услуги по хранению информации.,нет собственности,Никакая соответствующая юридическая ответственность не предполагается. Если вы обнаружите на этом сайте какое-либо подозрительное нарушение авторских прав/незаконный контент,, Пожалуйста, отправьте электронное письмо на Сообщите, после проверки этот сайт будет немедленно удален.

Издатель: Full Stack Programmer - User IM, укажите источник для перепечатки: https://javaforall.cn/213481.html Исходная ссылка: https://javaforall.cn