Скачать alibaixiu - Скачать исходный код alibaixiu

Введение в проект

Alibaba Baixiu, система управления контентом, разделена на две основные функции: управление контентом и отображение контента.

1. Функциональный модуль

1.1 Управление контентом

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

1.2 Отображение контента

модуль	Функция
первая страница	Навигация, отображение данных о товаре
Страница списка	Отображение списка статей по категориям
Страница сведений	Отображение подробностей статьи и реализация функции комментариев

2. Режим разработки

2.1 Смешанная модель разработки фронтенда и бэкенда

Весь HTML-код и данные монтируются на стороне сервера, и весь контент сразу отправляется клиенту. Браузер выполняет код и представляет контент пользователю.

вопрос:

Разработчики фронтенда и бэкенда не знакомы с кодом друг друга. Смешанной разработке очень сложно разобраться с кодом друг друга.
В процессе разработки коды неизбежно будут перекрывать друг друга, удваивая рабочую нагрузку.

2.2 Модель разработки разделения фронтенда и бэкенда

Преимущества: четкая ответственность и разделение труда, самостоятельное развитие, отсутствие влияния друг на друга.

3. Структура проекта

Многоуровневая система	Используйте технологии
уровень данных	монгоБД
уровень обслуживания	node.js (экспресс)
клиент	арт-шаблон, jQuery, потрясающий шрифт, проведите пальцем по экрану

4. Настройка операционной среды проекта (что необходимо знать для запуска проекта)

Установите программное обеспечение node.js и проверьте, успешно ли оно установлено.
1. Win + R открывает запущенную программу в системе Windows, введите powershell в работающую программу и нажмите Enter, чтобы открыть программу командной строки.
2. Введите команду node -v , чтобы проверить версию node.js. Если номер версии выводится в программе командной строки и об ошибках не сообщается, установка прошла успешно.
Установите программное обеспечение mongodb и mongodb-compass.
Скопируйте папку проекта Alibaba Baixiu на жесткий диск (серверная программа)
Перейдите в корневой каталог проекта в инструменте командной строки.
1. Удерживая клавишу Shift, щелкните правой кнопкой мыши и выберите «Открыть окно PowerShell здесь».
Используйте команду npm install для установки файлов зависимостей, необходимых для проекта.
Откройте файл app.js и измените раздел подключения к базе данных в строке 47: 'mongodb://itcast:itcast@localhost:27017/alibaixiu'

для 'mongodb://localhost:27017/alibaixiu'

(1) Причина: вы не создали учетную запись и пароль для подключения к базе данных mongodb. Мы решили использовать метод по умолчанию для входа в базу данных mongodb.

(2) Если вы хотите войти в базу данных под своей учетной записью и паролем. Пожалуйста, обратитесь к: https://www.cnblogs.com/b02330224/p/10049395.html.

Введите команды последовательно в командной строке: use alibaixiu #Введите базу данных alibaixiu

db.createUser({user:'itcast',pwd:'itcast',roles:['readWrite']}) #Создаем пользователя базы данных

Если вам будет предложено указать, что разрешений недостаточно, перейдите по ссылке выше и сначала войдите в базу данных с учетной записью администратора mongodb.

7. (Новый шаг) Недавно данные базы данных db_data были загружены, и в базу данных alibaixiu можно войти через программное обеспечение mongodb-compass.

Создавайте users , comment , slides , categories , posts , коллекции settings с тем же именем, что и у данных json в папке db_data.

(Коллекция) и, наконец, импортируйте соответствующие данные json в каждую коллекцию по очереди.

импорт данных

8. Введите node app.js в инструменте командной строки, чтобы запустить проект.

5. На что следует обратить внимание после запуска проекта (что необходимо знать, чтобы`好看的项目`)

1. Откройте браузер и введите localhost:3000/admin/login.html в адресной строке браузера, чтобы войти на страницу входа.

Введите имя пользователя системы по умолчанию: (исходное) [email protected] (сейчас) [email protected] Пароль: 123456 Войдите на страницу администратора.

2. Поскольку файл базы данных не загружается, все данные необходимо добавлять вручную (если в db_data вводятся json-данные, пропустите шаги 2-10)

3. Войдите на страницу администратора и сначала измените данные своей учетной записи (смените пароль и т. д.) и загрузите аватар пользователя.

4. Затем добавьте информацию о статье, информацию о настройках системы и информацию об изображении карусели (заказ не требуется, добавление означает заполнение информации формы, выбор файлов изображений и т. д.)

5. Обратите внимание, что при изменении информации о классификации значок информации о классификации необходимо искать по шрифту, например: fa-phone, fa-gift и т. д.

Формат имени класса изображения, искомый в шрифте-awesome: fa fa-xxx-xxx, вам нужно только добавить после него часть fa-xxx-xxx.

6. После добавления основной информации о базе данных вы можете выйти из системы и зарегистрировать нового пользователя (зарегистрированный пользователь по умолчанию является обычным пользователем).

Или используйте права администратора на добавление пользователей, чтобы добавлять обычных пользователей.

7. После добавления фоновых данных используйте обычную учетную запись пользователя для входа на страницу отображения статьи (если вы хотите, чтобы содержимое страницы было более богатым).

Рекомендуется добавить около 15 частей информации о статьях и около 4 частей информации о категориях)

8. Если вы хотите использовать учетную запись администратора для входа на сайт, не выходите из учетной записи администратора. Откройте новую вкладку в браузере

Введите localhost:3000 в адресную строку, чтобы перейти на главную страницу отображения статьи.

9. Если администратор включит функцию комментариев, она будет отображаться на главной странице сведений о статье. Если администратор отключит функцию комментариев, функция комментариев будет отображаться на главной странице сведений о статье.

На странице не отображается функция комментариев

10. Если администратор включит функцию просмотра комментариев, комментарии пользователя не будут отображаться на странице сразу, и администратору необходимо находиться в фоновом режиме.

Комментарии рассматриваются на странице управления и будут отображаться на странице статьи только после того, как они будут одобрены. Если администратор отключит функцию комментариев,

Он будет отображаться на странице сведений о статье.

11. Если проект по-прежнему не может быть запущен, свяжитесь со мной по телефону 1565066165.

6.Адрес проекта

Домашняя страница: http://luoxu.ltd:3000/ (временно изменена на http://luoxucoder.icu при регистрации доменного имени)

Страница входа: http://luoxu.ltd:3000/admin/login.html (аналогично)

Отображение эффекта проекта

1. Интерфейсная страница отображения статьи.

индекс

2. Страница классификации статей в интерфейсе

категория

3. Страница сведений о статье во внешнем интерфейсе.

почта

4. Страница входа

авторизоваться

5. Страница регистрации

зарегистрироваться

6. Страница управления серверной частью

администратор

Функция проекта

1. Функции пользователя

1.1 Вход

Добавить событие клика для кнопки входа в систему
Получите имя пользователя и пароль, введенные пользователем в текстовое поле.
Проверьте, ввел ли пользователь имя пользователя и пароль. Если нет, запретите выполнение программы и предложите пользователю ввести имя пользователя и пароль.
Вызовите интерфейс, реализующий функцию входа в систему. Если вход в систему прошел успешно, он перейдет на домашнюю страницу управления данными. Если вход не удался, появится сообщение о том, что имя пользователя или пароль неверны.

1.2 Перехват входа в систему

Используйте тег сценария для загрузки адреса интерфейса, предоставленного сервером.
Определите значение переменной isLogin. Если значение ложно, перейдите на страницу входа.

1.3 Добавить пользователя

Добавьте атрибут имени в каждый элемент формы, который добавляет пользовательские функции, причем значение атрибута имени должно соответствовать имени параметра, необходимому в документе интерфейса.
Привяжите событие отправки к форме и запретите отправку формы по умолчанию в функции обработчика событий.
Получить содержимое, введенное пользователем в форму, в функции обработчика событий.
Вызовите интерфейс добавления пользователя и отправьте полученный контент на сервер через интерфейс. Если операция прошла успешно, страница будет обновлена. Если операция завершится неудачно, будет выдано приглашение пользователя.

1.4 Отображение списка пользователей

Отправьте запрос Ajax на сервер для запроса данных списка пользователей.
Второй шаг — использовать механизм шаблонов для объединения данных и шаблона HTML.
Третий шаг — отображение смонтированного контента на странице.

1.5 Загрузка аватара пользователя

Добавьте событие onchange в элемент управления выбором файла и получите файл, выбранный пользователем, в функции обработки событий.
Создайте объект formData для загрузки файлов изображений.
Вызовите интерфейс загрузки файла изображения, чтобы реализовать загрузку изображения.
Добавьте новое скрытое поле в форму добавления нового пользователя и сохраните адрес изображения в скрытом поле.

1.6 Отображение списка пользователей

Отправьте запрос Ajax на сервер при загрузке страницы, чтобы запросить данные списка пользователей.
Используйте механизм шаблонов для объединения данных и шаблонов HTML.
Отображение смонтированного контента на странице

1.7 Изменение информации пользователя

Добавляйте события для нажатия кнопки редактирования посредством делегирования событий.
Получите значение идентификатора текущего пользователя, на которого щелкнули, в функции обработки событий.
Получите подробную информацию о пользователе на основе идентификатора пользователя и отобразите подробную информацию о пользователе в форме слева с помощью механизма шаблонов.
Добавьте событие щелчка для кнопки «Изменить», получите содержимое, введенное пользователем в форму в функции обработки событий, и вызовите интерфейс изменения информации о пользователе, чтобы реализовать функцию изменения информации о пользователе.

1.8 Удаление пользователя

Добавить событие клика для кнопки удаления
Подтвердите, хочет ли пользователь удалить операцию
Получить идентификатор пользователя, по которому в данный момент щелкнули
Вызовите пользовательский интерфейс удаления, чтобы удалить пользователя на основе идентификатора. Если удаление прошло успешно, обновите текущую страницу, чтобы на ней отображалось самое последнее содержимое.

1.9 Удаление пользователей в пакетном режиме

Управление проверенным статусом флажков
1. Если выбрана кнопка «Выбрать все», выбираются все пользователи; если кнопка «Выбрать все» не выбрана, выбор всех пользователей отменяется.
2. Когда состояние кнопки флажка перед пользователем изменяется, проверьте, находится ли какой-либо пользователь в невыбранном состоянии. Если да, отмените выбранное состояние кнопки «Выбрать все». Если нет, это означает, что все пользователи находятся в состоянии. выбранное состояние. В настоящее время кнопка «Выбрать все» установлена в выбранное состояние.
Управление статусом кнопок массового удаления
1. Если выбрана кнопка «Выбрать все», отображается кнопка «Пакетное удаление». Если кнопка «Выбрать все» не выбрана, кнопка «Пакетное удаление» скрыта.
2. Когда состояние кнопки флажка перед пользователем изменится, проверьте выбранный статус всех пользователей. Если выбран какой-либо пользователь, отобразите кнопку пакетного удаления. Если не все пользователи выбраны, скройте кнопку пакетного удаления.
Реализовать функцию пакетного удаления пользователей.
1. Добавьте событие клика к кнопке пакетного удаления. В функции обработки событий клика сохраните все выбранные идентификаторы пользователей в массиве.
2. Вызовите пользовательский интерфейс удаления, чтобы реализовать функцию удаления пользователя.

1.10 Изменить пароль

Добавьте атрибут имени в каждый элемент формы изменения пароля. Значение атрибута имени должно соответствовать имени параметра в интерфейсе.
Добавьте событие отправки формы в форму изменения пароля и в функции обработчика событий запретите поведение отправки формы по умолчанию.
Получить контент, введенный пользователем в форму
Вызовите интерфейс изменения пароля, чтобы реализовать функцию изменения пароля. Если пароль изменен успешно, перейдите на страницу входа и разрешите пользователю войти в систему снова.

1.11 Отображение информации о вошедшем в систему пользователе

По значению переменной userId получите с сервера информацию о вошедшем в систему пользователе.
Отображение информации о пользователе в левой части страницы.

2. Функция классификации

2.1 Добавить категорию

Добавьте атрибут имени к каждому элементу формы в форме. Значение атрибута имени должно соответствовать имени параметра, необходимому в документе интерфейса.
Добавьте в форму событие отправки формы и в функции обработчика событий запретите поведение отправки формы по умолчанию.
Получить контент, введенный пользователем в форму
Вызовите интерфейс добавления категории, чтобы реализовать функцию добавления категории.

2.2 Отображение секретных данных

Отправьте Ajax-запрос на сервер, чтобы запросить данные страницы категории.
Используйте механизм шаблонов для объединения данных, возвращаемых сервером, с шаблоном HTML.
Отображение смонтированного контента на странице

2.3 Модификация секретных данных

Добавьте событие щелчка к кнопке редактирования посредством делегирования события и получите идентификатор данных классификации, который будет изменен в функции обработки событий.
Вызовите интерфейс по идентификатору, чтобы получить подробную информацию о секретных данных.
Используйте механизм шаблонов для объединения классифицированных данных и символов HTML. После завершения объединения содержимое будет отображено на странице.
Добавьте событие клика к кнопке «Изменить» и получите содержимое, введенное администратором в форму в функции обработчика событий.
Вызовите интерфейс данных классификации модификации, чтобы реализовать функцию модификации данных классификации.

2.4 Удаление секретных данных

Добавьте событие клика к кнопке удаления посредством делегирования события, и в обработчике событий клика появится всплывающее окно подтверждения удаления.
После того, как пользователь нажмет кнопку подтверждения удаления, получите идентификатор классифицированных данных, которые необходимо удалить.
Вызовите интерфейс данных категории удаления, чтобы реализовать функцию удаления данных категории. Если категория удалена успешно, обновите страницу.

3. Функция статьи

3.1 Добавить статью

Получите данные классификации товаров и отобразите их в раскрывающемся списке категории, которую сможет выбрать администратор.
Загрузите изображение обложки статьи и сохраните адрес загруженного изображения в скрытом поле.
Добавьте атрибут имени к каждому элементу формы в форме добавления статьи, при этом значение атрибута имени должно соответствовать имени параметра, необходимому в интерфейсе.
Привяжите событие отправки формы к форме добавления статьи и запретите отправку формы по умолчанию в функции обработчика событий.
Получите контент, введенный администратором в форму
Отправьте запрос на добавление статьи на сервер, чтобы реализовать функцию добавления статьи. После успешного добавления статьи она перейдет на страницу со списком статей.

3.2 Отображение данных списка товаров

Когда страница откроется, отправьте запрос на сервер для получения данных списка статей.
Используйте механизм шаблонов для объединения данных списка статей и HTML. После завершения объединения содержимое будет отображаться на странице.
Реализуйте функцию подкачки данных списка на основе данных подкачки.

3.3 Фильтрация списка данных статей

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

3.4 Редактирование статьи

Добавьте ссылку на кнопку редактирования и передайте идентификатор статьи в качестве параметра запроса ссылки на страницу редактирования статьи.
Получите параметр id в адресной строке на странице редактирования статьи
Получите подробную информацию о статье на основе идентификатора и отобразите информацию о статье в форме редактирования статьи.
Привяжите событие отправки формы, чтобы изменить форму статьи и запретить отправку формы по умолчанию в функции обработчика событий.
Получить контент, введенный пользователем в форму
Отправьте запрос на сервер для реализации функции изменения информации о статье. Если информация о статье изменена успешно, перейдите на страницу со списком статей.

3.5 Удаление статьи

Добавьте событие нажатия на кнопку удаления посредством делегирования события, выведите всплывающее окно подтверждения удаления в функции обработки событий и подтвердите операцию удаления у администратора.
Получите идентификатор статьи, которую нужно удалить, в функции обработчика событий.
Отправьте запрос Ajax для выполнения операции удаления. Операция удаления прошла успешно, и страница будет обновлена.

3.6 Рекомендации по популярным статьям

Отправьте запрос на сервер для получения данных популярных рекомендаций
Используйте механизм шаблонов для объединения данных и HTML-шаблонов и отображения объединенного содержимого на странице.
```
 var str = '<div>{{name}}</div>' ;
var obj = { name : '张三' }
var html = template . render ( str , obj ) ;
```

3.7 Поиск статей

Привяжите событие отправки формы к форме поиска
Запретите поведение отправки формы по умолчанию в обработчике событий и получите ключевые слова для поиска, введенные пользователем.
Перейдите на страницу результатов поиска и передайте ключевые слова поиска, введенные пользователем, на страницу результатов поиска.
На странице результатов поиска ключевые слова, введенные пользователем, получаются из параметров запроса в адресной строке.
Интерфейс поиска вызывается в соответствии с ключевыми словами поиска, введенными пользователем. Когда сервер возвращает данные, данные результатов поиска и шаблон HTML объединяются, и объединенный контент наконец отображается на странице.

4. Функция комментариев

4.1 Отображение списка комментариев

Отправьте запрос на сервер для получения данных списка комментариев.
Используйте механизм шаблонов, чтобы объединить данные списка комментариев и шаблон HTML, а затем отобразить содержимое на странице после завершения объединения.
Реализация функции подкачки на основе данных подкачки

4.2 Модерация комментариев

Измените текст в кнопке модерации в зависимости от текущего статуса комментария. Если текущий комментарий не проверен, на кнопке будет отображаться «Одобрение»; если текущий комментарий проверен, на кнопке будет отображаться «Отклонить».
Добавьте событие клика к кнопке обзора посредством делегирования события и получите статус текущего комментария в функции обработки событий.
Отправьте запрос на сервер и сообщите серверу, в какое состояние следует изменить комментарий. Если изменение прошло успешно, обновите страницу, чтобы на ней отображались самые последние данные.

4.3 Удаление комментариев

Добавьте событие щелчка к кнопке удаления посредством делегирования события и откройте всплывающее окно подтверждения удаления в функции обработки событий.
Получите значение идентификатора комментария, который администратор хочет удалить.
Отправьте запрос на сервер на удаление комментария. Если комментарий успешно удален, обновите страницу.

5. Функция карусельной диаграммы

5.1 Добавление данных карусели изображений

Реализуйте функцию загрузки изображений и сохраните адрес загруженного изображения в скрытом поле.
Добавьте атрибут имени к каждому элементу формы карусели изображений. Значение атрибута имени должно соответствовать имени параметра, необходимому в интерфейсе.
Привяжите событие отправки формы к форме карусели изображений и запретите отправку формы по умолчанию в функции обработчика событий.
Получите контент, введенный администратором в форму
Отправьте запрос на сервер для реализации функции добавления данных карусели изображений. Если данные добавлены успешно, обновите страницу.

5.2 Отображение данных карусельной диаграммы

Отправьте запрос на сервер для получения данных списка карусели изображений.
Используйте механизм шаблонов для объединения данных списка карусели изображений и HTML-шаблона. После завершения объединения содержимое будет отображаться на странице.

5.3 Удаление данных карусели изображений

Добавьте событие клика к кнопке удаления посредством делегирования событий.
Всплывающее окно подтверждения удаления в функции обработчика событий.
Получите идентификатор данных изображения карусели, которые нужно удалить.
Отправьте запрос на сервер для выполнения операции удаления. Операция удаления прошла успешно, и страница обновилась.

5.4 Отображение данных карусельной диаграммы (обновлено)

Отправьте запрос на сервер для получения данных карусели
Используйте механизм шаблонов для объединения данных и строк HTML и отображения объединенного содержимого на странице.
Переместите исходный код JavaScript, реализующий эффект карусели, в конец функции успеха метода ajax.

6. Функция настройки веб-сайта.

6.1 Настройки сайта

Реализуйте загрузку изображений логотипов веб-сайта и сохраните адрес загруженного изображения в скрытом домене.
Добавьте атрибут имени к каждому элементу формы в форме. Значение атрибута имени должно соответствовать имени параметра, необходимому в документе интерфейса.
Привяжите событие отправки к форме и запретите отправку формы по умолчанию в функции обработчика событий.
Получите контент, введенный администратором в форму
Отправьте запрос на сервер для реализации функции добавления данных настроек сайта.

6.2 Отображение данных настроек веб-сайта

Отправьте запрос на сервер для получения данных настроек сайта.
Определите, верны ли данные, возвращаемые сервером. Если это правда, отобразите данные в форме.

7. Функция последнего обновления веб-сайта.

7.1 На странице отображается информация о комментариях к статье.

1. Поиск комментариев к статье по идентификатору статьи

2. Одобренные комментарии будут отображаться прямо на странице.

3. Оптимизированы последние комментарии.

4. Неодобренные комментарии на странице управления будут отмечены красным цветом.

7.2 Оптимизация страницы

1. Все кнопки «Мне нравится» реализуют одну и ту же функцию.

2. Ссылка на комментарий реализует функцию перехода к статье комментария.

3. Все кнопки классификации реализуют функцию перехода на страницу классификации.

7.3 Страница регистрации

1. На страницу входа добавлена кнопка регистрации пользователя.

2. js на странице регистрации реализует базовую проверку регистрационной информации на внешнем интерфейсе.

3. Функции страницы, разработанные с использованием начальной загрузки.

4. Все пользователи, зарегистрированные на странице регистрации, являются обычными пользователями.

5. Реализована функция поиска пользователей по адресам электронной почты.

Подробную информацию можно найти в документации по интерфейсу.

Расширять

alibaixiu