Слияние кода завершено, страница обновится автоматически
Полный отчет по проектированию находится ниже
Если вам понравилось, пожалуйста, поставьте звезду, спасибо за поддержку
https://github.com/wsk1103/mySSM
Личная страница
https://wsk1103.github.io/
Java версия: 1.8
База данных: MySQL
Фреймворк: Spring + Spring MVC + MyBatis
Сервер: Tomcat
Фронтенд-парсер: Thymeleaf
Инструмент разработки: Idea 2017
Инструмент управления версиями: Maven
Инструмент контроля версий: GitHub
Сначала создайте базу данных с именем c2c в MySQL, используя Navicat for MySQL для выполнения файла c2c.sql для создания таблиц и импорта данных.
Распакуйте изображения на любой логический диск, затем настройте Tomcat, чтобы ссылка на изображения указывала на локальный путь к изображениям.
Цель проекта — создание платформы для свободной торговли пользователями, используя AJAX для частичного обновления страницы, что делает сайт более удобным и интерактивным. Ниже приведены общие требования.
Каждый номер телефона может быть использован только для регистрации одного аккаунта. Через аккаунт можно будет управлять личной информацией, просматривать товары, публиковать товары и т. д. При регистрации необходимо будет ввести код, полученный по SMS, для подтверждения.
Магазин будет отображать общую информацию о товарах и позволит фильтровать информацию через боковую панель. При нажатии на товар можно будет просмотреть его подробную информацию.
Реализация собственного поискового механизма для сайта, который позволит вводить ключевые слова и искать подходящие товары с использованием фильтрации.### 1.4 Публикация объявлений о покупке Пользователи могут опубликовать объявления о покупке, вводя соответствующую информацию по запросу.
Продавцы могут использовать магазин покупок для просмотра, есть ли пользователи, заинтересованные в их использованных товарах. Они могут просмотреть детали запроса и связаться с покупателями для проведения сделок.
Продавцы могут опубликовать объявления о продаже товаров, описывая товары и добавляя изображения для повышения доверия и удобства просмотра информации для покупателей.
Пользователи могут добавлять товары в корзину, изменять количество, выбирать оплату, удалять товары. Они могут выбрать адрес доставки и завершить покупку.
Пользователи должны будут заполнить личную информацию перед публикацией объявлений о покупке или продаже товаров. Они могут просматривать, редактировать или удалять свои объявления.
Схема общей структуры системы представлена ниже
Система может быть разделена на следующие модули.#### 2.1.1 Главная страница товаров
Отвечает за отображение информации о популярных товарах и о сайте. Навигационная панель позволяет перейти на различные страницы. Для незарегистрированных пользователей на странице отображаются кнопки входа и регистрации. Для зарегистрированных пользователей отображается имя пользователя, а также возможность публикации информации о товарах и просмотра личной информации. При переходе на главную страницу через Ajax получается набор данных о популярных товарах из базы данных, и страница обновляется. При нажатии на товар происходит переход на страницу с подробной информацией о товаре.#### 2.1.2 Модуль вторичного рынка Отвечает за отображение всех товаров на вторичном рынке, а также за предоставление боковой панели категорий, позволяющей пользователям просматривать соответствующую информацию о товарах. После реализации боковой панели категорий, каждому элементу категории присваивается уникальный идентификатор, который используется для получения данных из базы данных через Ajax. Используется пагинация, чтобы избежать перегрузки данных на одной странице, что может вызвать негативные ощущения у пользователя. Пагинация поддерживает переход на следующую или предыдущую страницу, а также прямой переход на определенную страницу. При нажатии на товар, происходит переход на страницу с подробной информацией о товаре.#### 2.1.3 Модуль подробной информации о товаре Отвечает за отображение подробной информации о конкретном товаре, включая изображения, название, цену, количество и т. д. При нажатии на товар, через идентификатор, получается набор данных о товаре, и происходит переход на страницу с подробной информацией о товаре. Пользователь, опубликовавший товар, может просмотреть отзывы и установить контакт с заинтересованными пользователями. Отображаются соответствующие данные, а также предоставляется возможность добавления товара в корзину. Отзывы других пользователей отображаются под подробной информацией о товаре, а зарегистрированные пользователи могут оставлять отзывы о товаре. Пользователь, опубликовавший товар, может просмотреть отзывы и установить контакт с заинтересованными пользователями.#### 2.1.4 Поиск по сайту На каждой странице в верхней части страницы находится поле для поиска. Пользователи могут ввести нечеткую информацию о товаре, и база данных фильтрует соответствующую информацию о товарах, которая затем отображается для пользователя. При нажатии на товар, отображается подробная информация о товаре.
Пользователь вводит необходимую информацию и выбирает изображение товара. Затем эта информация объединяется с текущим пользователем, и через Ajax отправляется на сервер. Данные сохраняются в соответствующую таблицу базы данных с помощью фреймворка.
Отображаются личные данные пользователя, такие как имя пользователя, фамилия, номер общежития, номер студенческого билета и т.д. После отображения данных, пользователь может их редактировать. После редактирования данные должны быть обновлены на странице, что требует использования Ajax для отправки данных и частичного обновления страницы.#### 2.1.8 Модуль опубликованных товаров Отображаются опубликованные пользователем товары. Поддерживается редактирование данных при нажатии на товар, например, изменение названия товара, цены и количества. После изменения данные отправляются в базу данных для выполнения соответствующих операций. Также можно удалить товар, нажав на кнопку "Удалить". Это приведет к удалению товара из базы данных и обновлению страницы, что улучшит пользовательский опыт.#### 2.1.9 Модуль опубликованных запросов на покупку Отображаются опубликованные пользователем запросы на покупку товаров. Поддерживается редактирование данных при нажатии на запрос, например, изменение названия товара, цены и количества. После изменения данные отправляются в базу данных для выполнения соответствующих операций. Также можно удалить запрос, нажав на кнопку "Удалить". Это приведет к удалению запроса из базы данных и обновлению страницы, что улучшит пользовательский опыт.
Отображаются товары, добавленные пользователем в корзину. Вычисляется общая стоимость. Предоставляются кнопки для выбора всех товаров и отмены выбора всех товаров. Получается цена товара из базы данных, проверяется текущее количество. При изменении количества товара общая стоимость обновляется в реальном времени с помощью jQuery. При отмене выбора товара стоимость уменьшается и обновляется. Предоставляется выбор адреса доставки и управление им. После выбора адреса доставки происходит расчет корзины, открывается страница оплаты, где пользователь выбирает способ оплаты и подтверждает.#### 2.1.11 Модуль входа и регистрации Пользователь может войти в систему, используя номер телефона и пароль. После входа отображается главная страница. Если у пользователя нет аккаунта, следует предложить ему зарегистрироваться, переключившись с формы входа на форму регистрации. Регистрация требует получения кода подтверждения по номеру мобильного телефона. Сервер генерирует случайный 4-значный код подтверждения и кэширует его, используя номер телефона, переданный через страницу. Затем код подтверждения отправляется на указанный номер телефона посредством электронной почты 139. После получения кода подтверждения на телефон пользователь вводит его и отправляет. Сервер проверяет правильность введенного кода, и если он верный, регистрация считается успешной, в противном случае регистрация не удастся. После успешной регистрации пользователь сразу перенаправляется на главную страницу.
Для главной страницы необходимы данные о популярных товарах.Для хранения информации о товарах используется объект Bean, который содержит следующие данные: идентификатор товара, название товара, цена за единицу товара, категория товара, количество товара, подробная информация о товаре, состояние товара, адрес изображения товара, степень популярности, идентификатор пользователя, опубликовавшего товар, и коллекцию комментариев. После публикации товара данные сохраняются в объекте Bean и записываются в базу данных. После запроса данных для главной страницы они сортируются по популярности, сохраняются в коллекции List и преобразуются в JSON-формат для отображения на странице.Магазин отвечает за отображение всех товаров. При нажатии на определенную категорию в боковой панели отображаются товары соответствующей категории. Для этого требуется идентификатор категории, поэтому объект Bean категории содержит идентификатор категории и её название. При нажатии на категорию по идентификатору получается коллекция товаров, которая преобразуется в JSON-формат и отображается на странице.
При нажатии на товар отображаются его подробные данные. По идентификатору товара возвращается объект Bean товара, который преобразуется в JSON-формат и отображается на странице. Также отображаются комментарии к товару, поэтому требуется объект Bean для комментариев, который содержит идентификатор комментария, идентификатор товара, содержимое комментария и время его публикации. Эти данные объединяются с подробной информацией о товаре и возвращаются в JSON-формате для отображения на странице.
Магазин покупок отвечает за отображение всех товаров для покупки. Для этого требуется объект Bean для товаров для покупки, который содержит идентификатор товара для покупки, название товара для покупки, количество товара для покупки, цену за единицу товара для покупки, подробную информацию о товаре для покупки и коллекцию комментариев к товару для покупки. На странице отображаются объекты, полученные из базы данных и преобразованные в JSON-формат.Страница входа в систему требует проверки данных пользователя. Данные пользователя включают идентификатор пользователя, имя пользователя, номер телефона пользователя, пароль пользователя, полное имя пользователя, адрес пользователя, электронную почту пользователя, пол пользователя и номер студенческого билета пользователя. При проверке требуется только проверка номера телефона и пароля. Если данные соответствуют, проверка считается успешной, и результат проверки возвращается в JSON-формате. В случае неудачи возвращается сообщение об ошибке.
Основные используемые структуры данных включают ArrayList для объединения различных данных и их преобразования в JSON-формат для возврата. При необходимости сортировки данных используется быстрая сортировка для сортировки данных о популярных товарах и возврата их на страницу для отображения.
Таблица пользовательской информации| Имя поля | Тип поля | Допускает NULL | Примечание | |:--------:|:--------:|:--------:|:--------:| | Id | Int(11) | Нет | Первичный ключ | | Modify | Datetime | Да | Время последнего изменения | | Username | Varchar(50) | Нет | Имя пользователя | | Phone | Char(11) | Нет | Номер телефона пользователя | | realName | Varchar(20) | Да | Имя пользователя | | Clazz | Varchar(20) | Да | Класс пользователя | | Sno | Char(12) | Да | Номер студента пользователя | | Dormitory | Varchar(20) | Да | Номер общежития | | Gender | Char(2) | Да | Пол | | Createtime | Datetime | Да | Время создания | | Avatar | Varchar(200) | Да | Аватар |Таблица паролей пользователей
| Имя поля | Тип поля | Допускает NULL | Примечание |
|---|---|---|---|
| Id | Int | Нет | Первичный ключ |
| Modify | Datetime | Да | Время последнего изменения |
| Password | Varchar(24) | Нет | Пароль пользователя |
| Uid | Int | Нет | Идентификатор пользователя |
Таблица товаров
| Имя поля | Тип поля | Допускает NULL | Примечание |
|---|---|---|---|
| Id | Int(11) | Нет | Первичный ключ |
| Modify | Datetime | Да | Время последнего изменения |
| Name | Varchar(50) | Нет | Название товара |
| Level | Int | Нет | Качество товара |
| Remark | Varchar(255) | Да | Подробная информация о товаре |
| Price | Decimal(0.00) | Нет | Цена товара |
| Sort | Int | Нет | Категория товара |
| Count | Int | Нет | Количество товара |
| Display | Int | Нет | Состояние товара (находится ли он в продаже) |
| Transaction | Int | Нет | Способ транзакции |
| Sales | Int | Нет | Количество продаж товара |
| Uid | Int | Нет | Идентификатор пользователя, опубликовавшего товар |
| Image | Varchar(255) | Нет | Адрес изображения товара |
Таблица отзывов к товарам
| Имя поля | Тип поля | Допускает NULL | Примечание |
|---|---|---|---|
| Id | Int(11) | Нет | Первичный ключ |
| Modify | Datetime | Да | Время последнего изменения |
| Sid | Int | Нет | Идентификатор товара |
| Content | Varchar(122) | Нет | Содержание отзыва |
| Display | Int | Нет | Состояние отзыва (видимость) |
| Uid | Int | Нет | Идентификатор пользователя, оставившего отзыв |
| Имя поля | Тип поля | Допускает NULL | Примечание |
|---|---|---|---|
| Id | Int(11) | Нет | Первичный ключ |
| Modify | Datetime | Да | Время последнего изменения |
| Sid | Int | Нет | Идентификатор товара |
| Display | Int | Нет | Состояние избранного товара (видимость) |
| Uid | Int | Нет | Идентификатор пользователя, добавившего товар в избранное |
Таблица товаров для покупки
| Поле | Тип поля | Допускает NULL | Примечание |
|---|---|---|---|
| Id | INT(11) | Нет | Первичный ключ |
| Modify | DATETIME | Да | Время последнего изменения |
| Name | VARCHAR(50) | Нет | Название товара для покупки |
| Remark | VARCHAR(255) | Да | Детали товара для покупки |
| Price | DECIMAL(0.00) | Нет | Цена товара для покупки |
| Sort | INT | Нет | Категория товара для покупки |
| Count | INT | Нет | Количество товара для покупки |
| Display | INT | Нет | Информация удалена или нет |
| Transaction | INT | Нет | Способ транзакции |
| Uid | INT | Нет | ID пользователя, опубликовавшего запись |
| Image | VARCHAR(255) | Нет | Адрес изображения товара |
Заявки на покупку товаров
| Поле | Тип поля | Обязательное | Примечание |
|---|---|---|---|
| Id | Int(11) | Нет | Первичный ключ |
| Modify | Datetime | Да | Время последнего изменения |
| Qid | Int | Нет | Id товара, на который сделана заявка |
| Content | Varchar(122) | Да | Содержание комментария |
| Display | Int | Нет | Отображение комментария |
| Uid | Int | Нет | Id пользователя, оставившего комментарий |
Мои размещенные товары| Поле | Тип поля | Обязательное | Примечание | | :---: | :---: | :---: | :---: | | Id | Int(11) | Нет | Первичный ключ | | Modify | Datetime | Да | Время последнего изменения | | Display | Int | Нет | Удален ли товар | | Uid | Int | Нет | Id пользователя | | Sid | Int | Нет | Id товара |
Мои заявки на покупку товаров
| Поле | Тип поля | Обязательное | Примечание |
|---|---|---|---|
| Id | Int(11) | Нет | Первичный ключ |
| Modify | Datetime | Да | Время последнего изменения |
| Display | Int | Нет | Удален ли товар |
| Uid | Int | Нет | Id пользователя |
| Qid | Int | Нет | Id товара, на который сделана заявка |
Приобретенные мной товары
| Поле | Тип поля | Обязательное | Примечание |
|---|---|---|---|
| Id | Int(11) | Нет | Первичный ключ |
| Modify | Datetime | Да | Время последнего изменения |
| State | Int | Нет | Текущее состояние товара |
| Uid | Int | Нет | Id пользователя |
| Sid | Int | Нет | Id товара |
| Quantity | Int | Нет | Количество товара |
Корзина
| Поле | Тип поля | Обязательное | Примечание |
|---|---|---|---|
| Id | Int(11) | Нет | Первичный ключ |
| Modify | Datetime | Да | Время последнего изменения |
| Display | Int | Нет | Удален ли товар |
| Uid | Int | Нет | Id пользователя |
| Sid | Int | Нет | Id товара |
| Quantity | Int | Нет | Количество товара |
Отображение информации о популярных товарах с использованием слайдера. Для этого сначала определяется верхний div с позиционированием по абсолютной позиции. Все слайдерные div-ы, кроме текущего, скрываются. Текущему div-у добавляется класс current. При нажатии вправо получаем следующий div и скрываем его справа, затем убираем текущий div и добавляем класс current к следующему div-у.В процессе управления анимацией можно создать красивый слайдер.
Отображение всех вторичных товаров, предоставление боковой панели категорий для отображения информации о товарах по выбору пользователя. После реализации боковой панели категорий, каждому элементу категории добавляется id для получения данных из базы данных с помощью Ajax и обновления информации на странице. Используется пагинация для предотвращения плохого опыта пользователя при отображении большого количества данных на одной странице. Пагинация поддерживает переход на следующую или предыдущую страницу или прямой переход на определенную страницу. При нажатии на товар происходит переход на страницу с подробной информацией о товаре.Реализация фронтенда вторичного рынка. Основная сложность заключается в дизайне боковой панели. Сначала нужно получить третий уровень категорий из ответа сервера и отображать верхний уровень категорий в боковой панели. При наведении мыши на верхний уровень категорий, отображаются остальные два уровня категорий. Второй уровень категорий отображается как заголовок, а третий уровень категорий — как нажимаемые кнопки, которые при нажатии отображают информацию о товарах соответствующей категории.
Магазин — отображение товаров
current удаляется с текущего элемента и присваивается следующему элементу.
Каждая страница имеет поисковую строку в верхней части, позволяющую пользователям вводить нечеткую информацию о товарах. После ввода данных, база данных сервера фильтрует и находит соответствующие товары, которые затем отображаются для пользователя. При нажатии на товар отображаются его детальные сведения.
! [Здесь описание изображения](https://img-blog.csdn.net/20180506142713316? watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzazExMDM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70) Результаты поиска
! [Здесь описание изображения](https://img-blog.csdn.net/20180506142717344? watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzazExMDM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
Пользователи вводят необходимую информацию и выбирают изображения товаров. Затем эта информация, вместе с данными текущего пользователя, отправляется на сервер с помощью Ajax и сохраняется в соответствующую таблицу базы данных с помощью фреймворка. Реализация трехуровневого связывания заключается в получении JSON-данных третьего уровня с помощью Ajax, после чего парсинг JSON-данных и добавление первого уровня в первый выпадающий список, второго уровня во второй выпадающий список, третьего уровня в третий выпадающий список. При изменении первого или второго выпадающего списка, через получение подмножества элементов из родительского контейнера, обновляются второй и третий уровни или первый уровень выпадающих списков соответственно. Для обновления используется метод html библиотеки jQuery.
При клике на изображение отображается миниатюра. Для этого используется поле input типа file, чтобы получить файлы и их веб-кэш-адреса. Затем эти адреса устанавливаются в src тега img, что позволяет добавить плавное анимационное изменение для улучшения визуального опыта пользователя.
Пользователь вводит определенную информацию и выбирает изображение товара, после чего эта информация объединяется с текущим пользователем и публикуется на сервер с помощью Ajax. Затем данные сохраняются в базе данных в таблицу, предназначенную для информации о покупке. Для реализации трехуровневого связывания можно использовать предыдущий подход.
Отображение информации о товарах, опубликованных пользователем, с возможностью редактирования данных после нажатия на товар. Например, можно изменить название товара, его цену и количество. После внесения изменений новые данные отправляются в базу данных, где выполняются соответствующие операции по обновлению.Также можно удалить опубликованный товар, нажав на кнопку "Удалить". Это приведет к удалению товара из базы данных, а также обновлению страницы с отображением опубликованных товаров. Это обеспечивает лучший пользовательский опыт. ! [Здесь должна быть картинка](https://img-blog. csdn. net/20180506142820866? watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzazExMDM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70) Нажатие на кнопку "Редактировать" ! [Здесь должна быть картинка](https://img-blog. csdn. net/2018050614282592? watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzazExMDM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
Отображение личной информации о публикации запроса на покупку товаров. Поддерживает возможность редактирования данных после нажатия, например, изменение названия товара, цены и количества. После внесения изменений новые данные отправляются в базу данных, где выполняются соответствующие операции по изменению. Также можно удалить определенный товар, нажав на кнопку "Удалить", после чего товар удаляется из базы данных, и страница обновляется, отображая обновленный список личных запросов на покупку.
Отображение товаров, добавленных в корзину покупок, подсчет общей стоимости, предоставление кнопок для выбора всех товаров и отмены выбора всех товаров. Получение цены товара из базы данных, проверка оставшегося количества. При изменении количества товара, общая стоимость обновляется в реальном времени с использованием jQuery. При отмене выбора определенного товара, стоимость уменьшается и страница обновляется. Предоставление выбора адреса доставки и управления им. После выбора адреса доставки, корзина покупок подсчитывается, и открывается страница оплаты, где пользователь выбирает способ оплаты и подтверждает.
Вторая страница — это страница регистрации. Страница регистрации предоставляет возможность ввода номера телефона и кода подтверждения. После ввода номера телефона и получения кода подтверждения пользователь переходит на следующую страницу, где ему нужно ввести пароль. На этой странице пароль должен быть подтвержден дважды. После подтверждения пароля пользователь переходит на главную страницу.
Третья страница — это страница восстановления пароля. Она также требует ввода номера телефона и получения кода подтверждения.
Наконец, все четыре страницы объединены в куб с использованием CSS3 свойства transform. При нажатии на кнопки для переключения между страницами используется transform rotateY, чтобы создать эффект трехмерного поворота.
Причины выбора Thymeleaf:
а. Thymeleaf позволяет напрямую отображать HTML5 и CSS3.
б. Веб-страницы, написанные на фронте, не требуют преобразования в JSP-страницы при объединении с сервером, что делает процесс быстрым и удобным.
в. Thymeleaf легко парсит значения, переданные с сервера на фронт.
г. Thymeleaf, по моему мнению, является хорошим шаблоном, который имеет более высокую производительность по сравнению с другими, такими как Freemarker. Кроме того, он объединяет дизайнеров и программистов, позволяя дизайнерам просматривать статические эффекты в браузере, а программистам — динамические эффекты с данными на сервере.
е. Thymeleaf — это естественный движок, поддерживающий HTML-шаблоны, который добавляет дополнительные атрибуты к HTML-тегам для отображения данных в шаблоне. Поскольку браузеры игнорируют неопределенные атрибуты при интерпретации HTML, шаблоны Thymeleaf могут статически выполняться.
java: содержит Java-кодВ заднем фоне реализовано ограничение на одновременный вход только одного пользователя: если два разных пользователя используют один и тот же аккаунт для входа, то второй пользователь автоматически вынуждает первого пользователя выйти из системы. Реализация: используется websockets и Spring Websockets. Сначала фронтенд проверяет, авторизован ли пользователь, если да, то номер телефона пользователя и текущее время отправляются на сервер. Сервер принимает информацию, декодирует её и сохраняет в Map. Фронтенд отправляет эти данные циклически и проверяет, совпадает ли время в Map с текущим временем.Если время не совпадает, это означает, что другой пользователь вошел в систему. Сервер отправляет сообщение о выходе на фронтенд, и фронтенд, получив это сообщение, инициирует выход пользователя.4. Обычные операции с базой данных (CRUD): учитывая, что пароль является важной информацией, все операции с паролями выполняются после шифрования пароля с помощью MD5. Например, при изменении пароля или регистрации пользователя пароль шифруется. Связи между различными таблицами данных устанавливаются через логические операции.
Предотвращение повторной отправки данных: на каждом интерфейсе сервер генерирует токен, который сохраняется на фронтенде. При отправке данных пользователем, вместе с ними отправляется и токен. Если сервер не может получить токен или токен не совпадает, это означает, что пользователь повторно отправил данные. Сервер возвращает пользователя на исходную страницу.
Фильтрация запрещенных слов: администраторы добавляют запрещенные слова в базу данных. При публикации товаров, название товара и примечания к нему проверяются на наличие запрещенных слов, которые заменяются на **. Затем возвращается соответствующее значение. При заполнении названия и описания товара, фронтенд автоматически проверяет их на наличие запрещенных слов с помощью AJAX и в реальном времени предупреждает пользователя о введении запрещенных слов.7. Определение порнографического содержания изображений: используется функция распознавания порнографии от компании Baidu. При отправке изображения на сервер, функция возвращает число, которое можно назвать "порнографическим значением". Если это значение превышает заданный порог, изображение считается порнографическим. Если пользователь загружает порнографическое изображение, оно не может быть добавлено или изменено. Сервер возвращает ошибку на фронтенд, предупреждая пользователя о незаконном использовании изображения.
4.1 При реализации функции одновременного входа только одного пользователя, из-за отсутствия опыта и того, что это была первая попытка, первоначально было решено использовать два Map (m1, m2) для хранения номеров телефонов и соответствующих времен предыдущего и повторного входа. Вначале, когда пользователь входит впервые, оба Map (m1 и m2) пусты. В m2 сначала сохраняется текущее время по номеру телефона, затем фронтенд отправляет запрос на проверку через WebSocket. При обработке информации от фронтенда сначала проверяется, существует ли номер телефона из m2 в m1. Если номер телефона отсутствует в m1, это означает первый вход, и соответствующее время из m2 сохраняется в m1. Если номер телефона существует в m1, сравниваются времена из m1 и m2. Если времена совпадают, это означает одновременный вход одного пользователя.Если времена не совпадают, это означает повторный вход, и предыдущий вход принудительно завершается. При повторном входе пользователя время текущего входа сохраняется в m2, а время предыдущего входа в m1 будет меньше времени текущего входа, и предыдущий вход принудительно завершается, а время в m1 обновляется до времени в m2. Однако этот подход привел к серьезной проблеме: при тестировании после первого входа, второй вход действительно завершал предыдущий вход, но при третьем входе все пользователи оставались активными и не вытесняли друг друга. Это указывает на проблему небезопасности потока, которая может возникнуть в обоих Map (m1 и m2).
Решение: Разработайте карту (m), которая будет хранить номер телефона и соответствующее время. После того как пользователь войдет в систему, текущее время и номер телефона будут отправлены на сервер через websockets. Сервер будет проверять время, отправленное пользователем, и сравнивать его с временем, хранящимся в карте m. Если времена совпадают, это означает, что никто другой не вошел в систему. Если времена не совпадают, это означает, что другой пользователь вошел в систему, и текущий пользователь будет вынужден выйти из системы. 4.2 В классах утилит, которые используются в проекте, если не использовать паттерн фабрики, то при запуске проекта с несколькими пользователями могут возникнуть проблемы с безопасностью потока или блокировкой потока. Если все методы класса объявлены как static, это также приведет к использованию большого количества памяти.
Решение: Используйте статический паттерн фабрики — статический внутренний класс. Все классы утилит должны быть сосредоточены в одном общем классе, а затем для этого общего класса должен быть создан статический внутренний класс. Все методы, которые будут вызваны, должны быть объявлены как public и нестатические. При вызове методов используйте фабрику.
4.3 При использовании нескольких параметров для получения данных из базы данных с помощью MyBatis, могут возникнуть проблемы с неопределенными параметрами. Это происходит потому, что при использовании нескольких параметров их необходимо упаковать в Map.
Решение: Упакуйте все параметры в Map, а затем передайте эту Map как параметр в метод обработки MyBatis. 4.4 При отправке кода подтверждения на телефон возникли ошибки. Вначале планировалось использовать электронную почту для верификации пользователей, но при отправке сообщений через почту возникли проблемы. Например, было несколько почтовых сервисов для отправки сообщений — QQ, 163, 127, sina и т. д. Изначально использовался сервис 163, но из-за малого объема сообщений, система расценивала его как спам и не отправляла. Аналогичные проблемы возникали и с другими сервисами. В конечном итоге было решено, что использование электронной почты для отправки кода подтверждения устарело, и было принято решение использовать отправку кода подтверждения на телефон. Однако не хотелось использовать услуги сторонних разработчиков, поэтому было решено самостоятельно разработать систему отправки кода подтверждения на телефон. Решение: Код подтверждения можно отправить на электронную почту 139, так как большинство пользователей имеют привязку к этой почте. Если электронная почта 139 получит сообщение, то оно будет отправлено в виде SMS на соответствующий телефон, что позволит реализовать отправку кода подтверждения на телефон.
4.5 При использовании Ajax для частичного обновления страницы, могут возникнуть проблемы с привязкой событий клика к новым элементам. Это может привести к тому, что при нажатии на кнопки (например, добавления товара в корзину), страница не будет реагировать.## 6. Пользовательское руководство
Посетите домашнюю страницу нашего сайта, где вы можете ознакомиться с информацией о товарах. Слайдер на главной странице позволяет переключаться между изображениями товаров влево и вправо. Если вы не активно переключаетесь, слайдер автоматически переключается на следующее изображение каждые 3,5 секунды. Внизу страницы отображаются краткие сведения о других популярных товарах. Нажав на название товара, вы сможете просмотреть подробную информацию о нем и оставить отзыв. Ниже находятся дополнительные сведения, которые можно игнорировать.### 6.2 Ограничения для обычных пользователей Обычные пользователи могут свободно посещать главную страницу и использовать навигационное меню для перехода в магазин, раздел "Покупка товаров" и другие разделы. Однако для публикации запросов на покупку или добавления товаров необходимо войти в систему.### 6.3 Нет аккаунта? Если у пользователя нет аккаунта, он может нажать на кнопку "Регистрация" в правом верхнем углу, после чего перейдет на страницу регистрации. Пользователь должен ввести номер телефона и получить код подтверждения. Важно, чтобы номер телефона был в правильном формате и действительным. После получения кода подтверждения, нажмите "Далее", чтобы перейти к странице подтверждения пароля. Введите пароль дважды, и оба ввода должны совпадать. После подтверждения пароля вы вернетесь на главную страницу. Если пользователь забыл свой пароль, он может нажать на опцию "Забыли пароль" на странице входа, ввести номер телефона, который использовался при регистрации, получить код подтверждения, ввести его и нажать "Далее", чтобы начать процесс сброса пароля. После завершения процесса сброса пароля вы вернетесь на главную страницу.### 6.4 Магазин Чтобы просмотреть товары, опубликованные другими пользователями, вам нужно перейти в раздел "Магазин" через навигационное меню. Здесь вы можете просматривать все товары, 12 на страницу. Кнопки пагинации внизу страницы позволяют переключаться между страницами. Если вам нужно отфильтровать информацию и найти нужную категорию, используйте плавающее меню слева. Переместите указатель мыши к нужной категории, чтобы просмотреть подробную информацию о ней. Нажмите на категорию, чтобы отфильтровать товары и отобразить их на странице.
Информация о товарах, отображаемая на странице магазина, является лишь частью данных. Нажав на название товара, можно перейти на страницу с подробной информацией о товаре, где пользователь может просмотреть все данные о товаре, добавить его в корзину, оставить комментарий или оценить товар.### 6.6 Покупка товаров Если пользователь хочет купить товар, он может перейти в раздел "Покупка товаров", где сможет просмотреть информацию о других товарах, которые другие пользователи хотят продать. Для перехода в раздел "Покупка товаров" нужно нажать на соответствующий пункт в верхнем меню.
Если пользователь уже вошел в систему, то в правом верхнем углу будет отображаться его имя. При наведении курсора на имя появляется выпадающее меню, где можно выбрать опцию "Публикация информации о товаре". Затем следует ввести необходимые данные и подтвердить публикацию.
Процесс публикации информации о покупке аналогичен публикации информации о товаре. Нужно выбрать опцию "Публикация информации о покупке" в выпадающем меню и затем опубликовать.
При наведении курсора на имя пользователя в верхнем левом углу появляется выпадающее меню, где можно выбрать опцию "Мои опубликованные товары". В этом разделе можно просмотреть все опубликованные товары, а также редактировать или удалить их.
Процесс аналогичен просмотру опубликованных товаров, но для перехода в раздел "Мои опубликованные покупки" нужно выбрать соответствующую опцию в выпадающем меню.### 6. 11 Корзина
Пользователь может добавить понравившийся товар в корзину, нажав соответствующую кнопку. Затем, наведя курсор на имя пользователя в правом верхнем углу, можно выбрать опцию "Моя корзина" в выпадающем меню. В корзине можно выбрать адрес доставки, изменить количество товаров или удалить некоторые из них. Также можно выбрать или отменить выбор всех товаров в корзине, после чего можно оформить заказ.
Разработанная C2C-платформа для продажи бывших в употреблении товаров на территории университета имеет простой и понятный интерфейс, что обеспечивает пользователям приятное визуальное восприятие. Кроме того, система проста в использовании и легко осваивается. Можно смело утверждать, что данная система подходит для использования 99% молодежи. Для тех, кто не очень хорошо знаком с современными технологиями, система легко осваивается и быстро становится удобной для использования. Анимационные эффекты нашей системы выполнены на высшем уровне. Фронтенд-разработчики стремятся использовать минимальное количество кода для реализации самых впечатляющих динамических эффектов, таких как 3D-переключение страниц, динамическое добавление товаров в корзину, функция динамического автоматического поиска названий товаров и т.д. Все эти функции являются亮点 нашей системы.Поскольку фронтенд стремится использовать минимальное количество кода для реализации самых впечатляющих динамических эффектов, его производительность может быть охарактеризована как высокая.
Созданный фронтендом сайт является адаптивным, и при изменении размера страницы, она автоматически подстраивается под новые размеры без каких-либо сбоев.
Что касается совместимости, наш сайт идеально поддерживает IE8+, Firefox8+, Chrome6+ и т.д. Хотя в настоящее время мало пользователей используют версии ниже указанных, мы стремимся достичь идеальной совместимости со всеми этими браузерами. Фронтенд-разработчики, изучив соответствующую информацию, могут обеспечить идеальную совместимость с указанными выше версиями браузеров.### Недостатки фронтенда: Для браузеров, которые не поддерживают HTML5 и CSS3, используются JavaScript для динамического реализации 3D-эффектов. Это может привести к тому, что эффекты не будут такими же качественными, как в браузерах, поддерживающих HTML5 и CSS3. Для пользователей, у которых установлены очень старые версии браузеров, динамические веб-страницы системы могут не отображаться должным образом. Кроме того, анимации, реализованные с помощью JavaScript, могут содержать неизвестные баги, что может привести к проблемам с производительностью.### Преимущества бэкенда: Для повышения производительности, бэкенд использует некоторые из лучших современных паттернов проектирования, таких как паттерн фабричного метода, паттерн агента, паттерн мемоизации и паттерн одиночки. Проектирование таблиц базы данных основывается на руководстве по разработке от Alibaba. Для повышения производительности используются подходящие индексы, что ускоряет запросы. Также разработаны различные алгоритмы для оптимизации обработки данных на бэкенде. Изначально планировалось использовать кластеры и распределенные системы для реализации бэкенда, но это привело бы к значительному увеличению периода разработки.
Загрузка изображений часто является одной из основных причин, вызывающих большие объемы трафика и замедление скорости загрузки. Для решения этой проблемы, бэкенд использует интересный алгоритм для сжатия изображений. В фронтенде отображаются сжатые изображения, а при наведении курсора на изображение, через AJAX загружается оригинальное, несжатое изображение в увеличенном виде. Это позволяет сэкономить полосу пропускания и улучшить пользовательский опыт.### Защита от атак: Для защиты от атак типа XSS используются методы дезинфекции и использование флагов HttpOnly. Для защиты от SQL-инъекций используются методы отображения ошибок, методы слепой инъекции и параметризация запросов. Для защиты от атак типа CSRF используются токены форм, капчи и проверка Referer.### Защита чувствительных данных: Для защиты чувствительных данных, таких как пароли, номера телефонов и личная информация, используются методы шифрования. Используются односторонние хэш-функции и симметричное шифрование, а также асимметричное шифрование с использованием пар публичных и приватных ключей. При использовании ключей пользователю требуется загрузить сертификат безопасности на свой компьютер.
Фильтрация информации и борьба со спамом являются актуальными проблемами. Используются методы текстового соответствия для фильтрации чувствительных слов. При длинных сообщениях пользователей используется алгоритм двойного массива Trie для фильтрации чувствительных слов. Этот алгоритм использует два разреженных массива для хранения структуры дерева: базовый массив для хранения узлов дерева Trie, и проверочный массив для проверки состояния. Размер массивов определяется в зависимости от бизнес-сценария и опыта, чтобы избежать переполнения или конфликтов. Кратко можно сказать, что пользовательский интерфейс прост и привлекателен, а управление интуитивно понятно.
Не реализованные функции: система распродаж, обратное проксирование на фронтенде, ускорение с помощью CDN.## Ссылки
[1] Ли Чжунцай. Технологическая архитектура крупных сайтов: основные принципы и анализ случаев [M]. Пекин, издательство промышленной литературы, 2013.
[2] Мартин, переводчик Хан Лэй. Чистый код: руководство по агилному программированию [M]. Пекин, издательство Posts & Telecom Press, 2010.
[3] Craig Walls, переводчик Zhang Weibin. Spring in Action [M]. Пекин, издательство Posts & Telecom Press, 2016.
[4] Thomas H. Cormen, Charles E. Leiserson, Ronald L. Rivest, Clifford Stein, переводчики Xu Yun, Wang Gang и др. Алгоритмы: руководство (третье издание) [M]. Пекин, издательство Machinery Industry Press, 2015.
[5] Joshua Bloch, переводчики Yang Chunhua, Yu Limin. Эффективный Java (второе издание) [M]. Пекин, издательство Machinery Industry Press, 2016.
[6] Бен Фрейн (Ben Frain), переводчик Qi Wu Tan. Ответственное веб-дизайн: HTML5 и CSS3 в действии (второе издание) [M]. Издательство Posts & Telecom Press, 2017.
[7] Джон Дакетт (Jon Duckett), переводчики Liu Tao, Chen Xuemin. JavaScript & jQuery: интерактивное веб-дизайн фронтенда [M]. Издательство Tsinghua University Press, 2015.
[8] Nicholas C. Zakas, переводчики Li Songfeng, Cao Li. JavaScript: продвинутое программирование (третье издание) [M]. Издательство Posts & Telecom Press, 2016.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )