Полная разработка -- vue.js+php для разработки системы личного блога

Оригинальная ссылка:код медвежонка.можно/статья?ID=…

Внешний адрес источника:GitHub.com/CB-early-month/trade-barriers…

Исходный код интерфейса блога:GitHub.com/CB-early-month/trade-barriers…

Адрес блога:codebear.cn

предисловие

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

Зачем создавать личный блог

Я всегда хотел создать свой личный блог.В блоге можно записывать свои учебные заметки, обобщать опыт, делиться технологиями и т. д. Я пробовал csdn, blog garden и hexo для написания блогов, но как программист я все еще хочу иметь свой личный блог!

Зачем использовать vue+php для создания блога

Первый контакт с Vue был в начале этого года.Мой дипломный проект был сделать сайт по продаже подержанных автомобилей(ээ(⊙о⊙)... Сначала увидел эту тему и отказался так как хотел сделать андроид, но не было возможности, преподаватель тему не менял). На данный момент мои знания о фронтенде все еще находятся на стадии реализации html+css+simple js или jq, я потихоньку узнавал о vue в интернете и узнавал о vue.提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件, это именно то, что мне нравится, поэтому я использовал Vue для написания своего дипломного проекта, а потом я вышел из-под контроля и писал один за другим.(Используйте Vue для реализации функции дизайна плакатов), сайт воспроизведения видео. На этот раз я решил использовать Vue для ведения личного блога.
Помню, что я был связан с PHP два или три года, в то время я работал над проектом с другом и использовал thinkphp (но я занимался фронтендом, поэтому я знал о PHP), и у меня есть с тех пор я работал над Android, и именно из-за моего дипломного проекта я начал перезапускать. Используя php, я выбрал самый простой фреймворк ci для начала работы, выполняя выпускной дизайн во время обучения и медленно инкапсулируя простой в использовании проект (в основном нужно только написать контроллер и модель, настроить маршрутизатор и базу данных), поэтому этот блог также просто выберите это для разработки, скорость выше.

Используемые серверы, технологические стеки, библиотеки

Проект размещен на моем Alibaba Cloud ECS (студенческий компьютер), а картинки загружены в Qiniu

php (фреймворк ci)
vue
vue-router
vuex-router-sync
vuex
web-storage-cache
element-ui
axios (сетевой запрос)
cropperjs (обрезка изображения, используется в системе управления фоном)
highlight.js (подсветка кода)
помечено (уценка текста в html)
mavon-editor (редактор уценки)
момент (обработка даты)
фотосвайп (смотреть увеличенное изображение)

Тема интерфейса блога

Обратитесь к следующей теме hexo и немного измените ее в соответствии со своими предпочтениями и эстетикой.

выполнить

визуализация

Поскольку сжатие GIF размыто, вы можете перейти в блог, чтобы просмотреть его напрямую.codebear.cn

мобильный
ПК сторона

php интерфейс для ведения блога

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

помощник возвращаемого значения

вsuccess_result、fail_resultЭти два метода представляют собой структуру json, возвращаемую интерфейсом.success、failЭти два метода представляют собой структуру json, возвращаемую моделью контроллеру, которая инкапсулирует унифицированный интерфейс возврата и более проста в управлении.

Проверка разрешений на фоновое управление

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

Загрузите Common_model в Base_Controller и получите accessToken от клиента:

Все остальные контроллеры наследуют Base_controller и вызывают проверку разрешений в конструкторе контроллера, который требует проверки разрешений:

блог

Система управления фоном и блог пишутся в одном проекте, с помощью проекта vue-cli scaffolding, а потом трансформируются сами. Из-за медленной загрузки первого экрана некоторые библиотеки (vue, element-ui и т.д. изменены на загрузку через cdn в режиме non-dev).

Блог:Главная (Список последних статей), Категория/Теги, Архивы, О нас, Ссылки, Статьи, Список статей, Резюме, Поиск

Система управления фоном:Домашняя страница (отображение статистики), управление статьями (публикация, редактирование, удаление, предварительный просмотр и т. д.), управление комментариями (ответ, удаление), управление категориями/тегами (добавление, удаление, редактирование), настройка веб-сайта (информация, резюме, аватар , и т.д.)

Некоторые общие компоненты:Модуль комментариев (справочник по реализации выраженияПоле ввода выражения jquery, может сохранить базу данных), модуль отображения статьи markdown (используется помеченный синтаксический анализ (преобразуется в html и сохраняется в базе данных при публикации), подсветка кода обработки highlight.js, фотосвайп для предварительного просмотра большого изображения), обрезка и загрузка изображения (el-upload+cropperjs), статья Каталог (автоматически генерируется из html)

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

Унифицированная обработка пакета Axios

Суммировать

На написание первой версии этой блог-системы ушло около месяца, и сейчас она оптимизируется и добавляет новые функции одну за другой.Я узнал о загрузке cdn, преобразовании dataUrl изображения в blob, эффектах анимации, адаптации для ПК и других знаниях. Каждый раз, когда я делаю проект, я постоянно учусь и делаю успехи~