Этот учебник научит вас создавать полный блог от 0 до 1, включая страницу внешнего интерфейса, внутреннюю систему управления, внутренний интерфейс и документацию по интерфейсу, а также весь полный процесс развертывания сервера. Этот блог очень прост и имеет гораздо меньше функций, чем блоги, которые мы используем. Но как только вы изучите весь процесс, его будет легко расширить.
Таким образом, этот учебник подходит для новичков, а эксперты, пожалуйста, тратьте свое время в обход и тратьте свое время.
(Исходный код проекта и онлайн-адрес см. в конце статьи.)
Обзор
Чтобы создать свой собственный блог, с одной стороны, я хочу понять весь процесс создания и развертывания блога, а с другой стороны, я хочу уладить некоторые моменты в процессе обучения, поэтому я хочу вести блог. В процессе ведения блога я обнаружу, что некоторые моменты знаний не полностью поняты, что будет мотивировать меня на углубленное изучение. В целом, ведение блога создает благотворный цикл.
На самом деле вся конструкция блога была завершена в прошлом году, и проекты все работают на моем сервере, но мои личные статьи на него еще не ставились, и я подожду, пока функции будут доведены до совершенства. В то время я собирался написать эту статью, но компания в то время была занята проектом, поэтому я забыл. Теперь, когда я думаю об этом, я закончил с этой статьей.
Еще раз повторюсь, я front-end code farmer, и я в принципе ничего не знаю о развёртывании на стороне сервера, back-end интерфейсах и т.д. Всё изучено и используется, что слишком далеко от профессионального бэкенда и эксплуатации и техническое обслуживание, просто чтобы проект нормально работал. Аспекты безопасности и стабильности серверной части и развертывания не рассматриваются, поэтому проект предназначен только для справки.
Интерфейсный проект
Когда я работал над интерфейсным проектом, я собирался использовать vue-cli для его сборки, но я знаю, что рендеринг на стороне сервера везде, и я в основном использую vue больше. Итак, для того, чтобы попробовать vue ssr, теперь есть этот проект. Я проверил vue ssr, в основном официальную версию и nuxt, которые используются больше, я посмотрел и обнаружил, что nuxt сохраняет различные конфигурации и быстрее запускается, поэтому я использовал nuxt, чтобы наступить на яму.
В то время версия nuxt1.0 была только запущена, и официальные документы все еще относительно подробны. После того, как построение завершено, его запускают на сервер, и оказывается, что скорость открытия страницы действительно выше, в основном в секундах. Поскольку в то время для nuxt1.0 требовалось, чтобы узел был версии 8.0 или выше, будет сообщено об ошибке, если он ниже 8.0, поэтому я использую nvm для управления версией узла.Обратите внимание, что зависимости установки моего проекта после клонирования должны быть установлен под узлом 8.0 или выше.
Этот проект очень прост, только страница списка статей и страница сведений о статье, а затем он просто совместим с мобильным терминалом. Так как это очень просто, я не буду его расширять.Что касается использования nuxt, рекомендуется прочитать больше официальных руководств.
Проект управления фоном
Проекты управления интерфейсом и сервером основаны на vue-cli.Существует множество онлайн-руководств по использованию vue-cli, которые не будут описываться. Библиотека Axios для запросов ajax, element-ui для пользовательского интерфейса. На главной странице есть
- Регистрация Войти
- новая статья
- редактировать статью
- Новая категория
- Изменить категорию
- Удалить статью
- удалить категорию
- Скиннинг и другие функции
Проект был построен немного раньше.После того, как я клонировал свой проект и установил зависимости, проект мог нормально работать.В то время были некоторые предупреждения, потому что некоторые пакеты npm были заброшены, и были рекомендованы новые пакеты.
Бэкенд-интерфейс и документация по интерфейсу
Внутренний проект использует экспресс и mongolass, а внутренний проект узла в основном относится к проекту узла пошагового обучения крупного человека в сообществе cnode. Интерфейсы внутреннего проекта в основном соответствуют интерфейсу страницы управления внешним интерфейсом.
Документ интерфейса написан с помощью swagger, используйте swagger-editor, чтобы написать файл конфигурации, преобразовать его в json, поместить файл конфигурации в файл swagger-ui и поместить его на сервер для развертывания.
Чтобы запустить этот проект, помимо клонирования зависимостей установки кода проекта, также необходимо установить mongodb на локальный компьютер и успешно запустить службу mongodb. Этот проект может начаться нормально.
документация по интерфейсу
Подготовка: Загрузите swagger-ui и swagger-edit. (обратитесь к моему github readme)
Запустите swagger-editor локально
1. Запустите swagger-редактор:
Выполните http-server swagger-editor -p8989 под этим проектом. Откройте localhost:8989 в браузере, чтобы открыть swagger-editor.
Примечание: установить http-сервер глобально. Номер порта по умолчанию — 8080.
2. Отредактируйте swagger-редактор:
Редактируйте код в редакторе, слева — область редактирования, справа — визуальный эффект. После редактирования экспортируйте файл json. Написание документа здесь не объясняется, вы можете обратиться к этой статьепортал, статья написана очень подробно.
3. Документация по интерфейсу развертывания:
Создайте новую папку swagger в корневом каталоге проекта и скопируйте все файлы из каталога dist загруженного файла swagger-ui в общую папку. Поместите файл json, экспортированный за 2 шага, в папку swagger. Измените url = "http://petstore.swagger.io/v2/swagger.json" в файле index.html под swagger и измените его на swagger.json. Добавьте статический модуль в index.js:
app.use('/swagger', express.static('./swagger'));
Запустите index.js с узлом.Если номер порта 3000, откройте http://localhost:3000/swagger в браузере, чтобы просмотреть документацию по интерфейсу.
Документ интерфейса подключается к серверу и получает данные интерфейса в режиме реального времени:
В swagger.json есть поле хоста. Если документ интерфейса может взаимодействовать с адресом, адрес хоста должен точно совпадать с адресом, запрошенным в браузере. Локальный IP-адрес открытой службы может быть:
1. IP-адрес локальной сети: например, 192.168.0.217:3000 (ваш локальный IP-адрес),
2. Локальный служебный адрес машины: 127.0.0.1:3000,
3. Аббревиатура для локальной локальной службы: localhost:3000
Развертывание сервера
Затем идет развертывание сервера.Купленный мной сервер — это сервер Alibaba Cloud, а установленная система — centos7.3. Для нормальной работы проекта на сервере установлены ftp, git, node, nginx, mongodb. В то время было много проблем по установке и развертыванию.У меня есть подробные туториалы по каждой установке и развертыванию.Если интересно,можете глянуть.
Развертывание проекта Node - развертывание Aliyun centos ftp
Развертывание проекта узла — Aliyun cento развертывает узел и nginx
Развертывание проекта узла — Aliyun centos развертывает службу git
Развертывание проекта Node — Aliyun Centos развертывает mongodb
Основные моменты
Шаги для нормального запуска этого проекта:
1. Клонировать внешний интерфейс моего проекта блога, управление серверной частью и внутренние проекты в локальный
2. Установите их зависимости отдельно.
3. Установите mongodb на локальный компьютер, желательно зарегистрируйтесь как сервис. (Robomongo рекомендуется для визуального управления mongodb) (установка ноды упоминаться не будет)
4. Сначала запустите службу mongodb, а затем запустите серверный проект. (Документ интерфейса в это время можно открыть в браузере)
5. Запустите по очереди проект управления фоном и внешний проект.
6. Проект успешно запущен, но данных нет.Статьи и категории можно добавлять через фоновую систему управления. (Вы также можете вручную добавлять статьи в mongodb через robomongo)
7. На этом этапе вы должны нормально видеть статью.
Наконец, прикрепите адрес ссылки на проект, приветственную звездочку ^_^
Страница управления фоном блога
Интерфейс блога и документация по интерфейсу
Адрес онлайн-развертывания:
Документация по онлайн-интерфейсу
Если адрес проекта управления не выпущен, интерфейс API предоставляет только функции чтения, такие как чтение, не предоставляя регистрацию, добавляя функции написания статей.
Вот об этом, снять. . . .