1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/ymshen-personal_blog__front_end

Клонировать/Скачать
README.md 12 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
Отправлено 02.06.2025 07:46 b2edb02
<iframe src="//player.bilibili.com/player.html?aid=245474205&bvid=BV1uv411b7eM&cid=260663409&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" height="700"> </iframe>

Установка зависимостей

npm install

Запуск проекта

npm run serve

Адрес онлайн-блога

http://www.yemengs.cn/

Описание проекта

Краткое описание проекта

Проект с использованием vue全家桶 + ElementUI + node, разделенный на фронтенд и бэкенд

Технологический стек

Фронтенд

vue全家桶

vue-socket.io

echarts

axios

Element UI

Плагины:

better-scroll

mavon-editor

Бэкенд

node

koa

jsonwebtoken

koa-multer

socket.io

База данных

mongodb

Сервер

nginx

Модули функциональности блога

  • Модуль статей
  • Модуль комментариев
  • Модуль объявлений
  • Модуль журналов
  • Модуль музыки
  • Модуль управления сайтом

Эффекты страниц блога

  • Главная страница

  • Страница детального просмотра статьи

    QQ截图20200519121229

  • Комментарии

  • Архив

QQ截图20200519121312

  • Уведомления

  • Страница чата

  • Статистика

QQ截图20200519122019

  • Музыка

QQ截图20200519121326


Перевод текста

Краткое описание проекта

Проект с использованием vue全家桶 + ElementUI + node, разделенный на фронтенд и бэкенд

Технологический стек

Фронтенд

vue全家桶

vue-socket.io

echarts

axios

Element UI

Плагины:

better-scroll

mavon-editor

Бэкенд

node

koa

jsonwebtoken

koa-multer

socket.io

База данных

mongodb

Сервер

nginx

Модули функциональности блога

  • Модуль статей
  • Модуль комментариев
  • Модуль объявлений
  • Модуль журналов
  • Модуль музыки
  • Модуль управления сайтом

Эффекты страниц блога

  • Главная страница

  • Страница детального просмотра статьи

    QQ截图20200519121229

  • Комментарии

  • Архив

QQ截图20200519121312

  • Уведомления

  • Страница чата

  • Статистика

QQ截图20200519122019

  • Музыка

QQ截图20200519121326


Перевод текста

Краткое описание проекта

Проект с использованием vue全家桶 + ElementUI + node, разделенный на фронтенд и бэкенд

Технологический стек

Фронтенд

vue全家桶

vue-socket.io

echarts

axios

Element UI

Плагины:

better-scroll

mavon-editor

Бэкенд

node

koa

jsonwebtoken

koa-multer

socket.io

База данных

mongodb

Сервер

nginx

Модули функциональности блога

  • Модуль статей
  • Модуль комментариев
  • Модуль объявлений
  • Модуль журналов
  • Модуль музыки
  • Модуль управления сайтом

Эффекты страниц блога

  • Главная страница

  • Страница детального просмотра статьи

    QQ截图20200519121229

  • Комментарии

  • Архив

QQ截图20200519121312

  • Уведомления

  • Страница чата

  • Статистика

QQ截图20200519122019

  • Музыка

QQ截图20200519121326


Перевод текста

Краткое описание проекта

Проект с использованием vue全家桶 + ElementUI + node, разделенный на фронтенд и бэкенд

Технологический стек

Фронтенд

vue全家桶

vue-socket.io

echarts

axios

Element UI

Плагины:

better-scroll

mavon-editor

Бэкенд

node

koa

jsonwebtoken

koa-multer

socket.io

База данных

mongodb

Сервер

nginx

Модули функциональности блога

  • Модуль статей
  • Модуль комментариев
  • Модуль объявлений
  • Модуль журналов
  • Модуль музыки
  • Модуль управления сайтом

Эффекты страниц блога

  • Главная страница

  • Страница детального просмотра статьи

    ![QQ截图202005191212296. Страница управления сайтом

QQ截图20200519121345

Модуль статей

Модуль статей использует mavonEditor для написания статей. Для получения более подробной информации посетите официальный сайт mavonEditor.

QQ截图20200519122859

Модуль статей уже реализовал следующие функции: публикация, просмотр, редактирование, удаление, комментарии к статьям

Комментарии к статьям

QQ截图20200519123705QQ截图20200519124133

Новый комментарий в административной панели

QQ截图20200519124241

Блогер может выполнить три действия при управлении комментариями в административной панели: просмотреть детали, отметить как прочитанный, ответить на комментарий

Адаптация для мобильных устройств

(Изображение было преобразовано из видео в gif, поэтому качество отображения немного пострадало)

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

QQ截图20200519124241

Модуль музыки

Страницы модуля музыки
  • Открытие музыки

  • Рекомендованные плейлисты

  • Новые песни

  • Новые клипы- Поиск музыки

  • Страница с текстом песни

    (Дополнительные страницы можно посмотреть в проекте uni-app NetEase Cloud Music)

  • Пользовательский плеер

    Потому что стиль стандартного элемента audio очень прост, при создании этого модуля был переработан стиль плеера (компонент audio). Конкретный код можно посмотреть после загрузки.

  • Плей/Пауза

  • Переключение песни

  • Отображение текста песни

  • Список воспроизведения

  • Режим воспроизведения (случайный, цикл, повторение одной песни)

Использование vuex для управления списком воспроизведения

Для более подробного ознакомления с реализацией обратитесь к исходному коду или посетите использование vuex для управления списком воспроизведения

О прокрутке страниц

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

Административная панель блога

В административной панели блога на данный момент доступен только для блогера (регистрация не открыта). Основные разделы: управление статьями, изменение личной информации, управление сообщениями, управление комментариями, управление журналом (установка прав доступа к журналу), управление объявлениями## Административная панель блога

Скачайте исходный код из репозитория личного блога — серверная часть

О других функциях

В разработке...

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1
https://api.gitlife.ru/oschina-mirror/ymshen-personal_blog__front_end.git
git@api.gitlife.ru:oschina-mirror/ymshen-personal_blog__front_end.git
oschina-mirror
ymshen-personal_blog__front_end
ymshen-personal_blog__front_end
master