онлайн
Интернет-адрес:itc
адрес проекта:GITHUB
Поскольку фронтенд реализован с использованием фреймворка Element, а мобильной адаптации нет, рекомендуется смотреть на ПК.
Рекомендуется обратиться к последнему учебнику этой статьи, клонировать проект для локального запуска (вы можете запустить его локально без каких-либо продуктов облачной серии) и прочитать эту статью.
визуализация
регистр
авторизоваться
титульная страница
редактировать
задний план
Недавно мне захотелось изучить фреймворк koa, поэтому я нашел кое-какую информацию в Интернете, и после того, как получил общее представление об основах использования фреймворка koa, мне захотелось сделать что-то самому.
Найдите статью о платформе Nuggetsстатья, представляет собой простую функцию сообщения, реализованную с помощью vue для внешнего интерфейса, koa для внутреннего интерфейса и mongodb для базы данных. Вроде все просто, прочитав код, я обнаружил, что есть много вещей, которых раньше не трогал. Например, фон генерирует код подтверждения, токен, шифрование пароля и т. д.
Так же я сымитировал простенький модуль регистрации и входа Воробей хоть и маленький, но все внутренние органы у него есть.По сути, охватываются детали всего внешнего и внутреннего взаимодействия, и в то же время вы загружаете свои собственные работы на облачный сервер.
Если вы разберетесь здесь со всем проектом, то у вас будут следующие преимущества:
- Вы можете развернуть свой собственный сервис и разрешить другим доступ к вашему веб-сайту через URL-адрес.
- Знать набор процессов для всех интерфейсных и внутренних взаимодействий
- Как часто генерируются токены, получаемые внешним интерфейсом?
- Рассмотрю, как постепенно оптимизировать ваше приложение со всех сторон
- Вы будете знать, что интерфейс — это всего лишь вершина айсберга, и у вас будет новое понимание интерфейса.
- Мечтайте стать full stack инженером
В основном включают следующие модули
- регистр
- авторизоваться
- титульная страница
- отредактируйте страницу
Подробности включают
- ТВОРОГА
- Передняя проверка
- Загрузить аватар пользователя
- Cloud oss загружать картинки
- токен аутентификации
- нечеткий поиск
- Сортировать
- нумерация страниц
- xss фильтрация контента
- перехват запроса/ответа
- ...
Основной стек технологий
внешний интерфейс
vue vue-cli3 webpack4 axios vue-router vuex
За кулисами
koa-generator koa2 ali-oss gd-bmp jsonwebtoken koa/multer
база данных
mongodb
связанный с сервером
nginx pm2 云server 域名 oss对象存储
Нарисуйте простую блок-схему
предисловие
Эта статья в основном посвящена некоторым трудным моментам во всем процессе разработки и развертывания, конкретной логике кода, личным предложениям или извлечению кода и его запуску, а также подробному прочтению несколько раз.
Я думаю, что самое стоящее исследование здесьидеи, не заботьтесь о некоторых деталях, таких как:
- Я использую базу данных mongodb, потому что я знаю ее раньше, я думаю, что она мне подходит, и ее легко начать, если вам нравится mysql, вы можете заменить ее самостоятельно.
- Интерфейсный фреймворк, который я использую, это element, если вы плохо себя чувствуете и привыкли использовать Ant Design или стиль рукописного ввода, вы можете сделать это самостоятельно.
- ...
Обойти, единственный артефакт, который должен быть у разработчиков.
Конечно, если вы хотите прочитать код или реализовать колесо самостоятельно, вам необходимо иметь следующие базовые знания.
- Vue (vue-cli, vuex, vue-router, element, Axios...)
- Koa (маршрутизация, промежуточное ПО...)
- MongoDB (добавление базы данных, удаление, изменение, проверка...)
- Синтаксис ES6 (обещание, асинхронность, ожидание...)
- ...
Обладая вышеуказанными знаниями, все, что вы можете сделать, это реализовать свои собственные колеса локально. Если вы хотите, наконец, развернуть его в Интернете, чтобы все могли видеть вашу работу и участвовать, вам также может потребоваться подготовить следующий сухой корм.
- доменное имя
- server
- Объектное хранилище OSS
- основы работы с nginx
- основные принципы работы pm2
- ...
Ниже в основном обсуждаются четыре аспекта внешнего интерфейса, внутреннего интерфейса, базы данных и онлайн-развертывания.
внешний интерфейс
Используйте скаффолдинг vue-cli3 для создания внешнего скелета и используйте koa-generator для создания внутреннего скелета.
Здесь, чтобы сэкономить на разработке, я использую фреймворк element.Учитывая проблемы с производительностью, я использую элемент, предоставленный element.Внедрить по требованиюобразом, импортируйте необходимые компоненты.
Чтобы иметь возможность легко получать информацию о пользователе после входа пользователя в систему и на протяжении всего процесса, используйте vuex для глобальной регистрации хранилища одноэлементных объектов.
Удобно реализовывать фоновые функции запроса, а также перехват запроса и перехват ответа, используя методы экземпляра, предоставляемые Axios.
...
детали взаимодействия
- Переход по маршруту оценивается в зависимости от того, требуется ли странице разрешение и была ли она зарегистрирована.
- Когда маршрут имеет поле перенаправления перенаправления, после входа пользователя он автоматически переходит на предыдущую страницу.
- Страницы входа и регистрации проверяют введенные пользователем данные, такие как формат и длина имени пользователя, пароля и т. д. (с учетом более поздних возможностей базы данных).
- Размер, количество и формат загружаемых изображений ограничены, а изображения загружаются в облачное хранилище объектов oss (При локальном запуске облачное хранилище объектов не требуется.)
- Вошедший в систему пользователь может управлять только сообщениями, которые он разместил ранее, а контент других пользователей имеет разрешение только на просмотр.
- По количеству посещений каждой записи генерируется популярность каждой записи, которую удобно фильтровать пользователям.
- После того, как пользователь входит в систему, токен пользователя сохраняется во внешнем интерфейсе (store, localStorage). Каждый раз, когда вызывается фоновый интерфейс, он проходит уровень проверки токена. Если срок действия токена истек, пользователь должен быть перенаправляется на страницу входа, где копия токена хранится в Under localStorage, цель состоит в том, чтобы позволить пользователям напрямую войти на соответствующую страницу, если срок действия токена не истек, когда они снова посещают после закрытия страницы.
- Страница включает в себя операционные фоновые данные, такие как нажатие кнопки для выполнения соответствующего запроса, предотвращая повторение действия нажатия кнопки.
- Для некоторых файлов библиотек, которые не будут изменяться, таких как vue, vue-router, vuex, axios и т. д., с помощью внешнего элемента конфигурации webpack можно использовать стабильный cdn в производственной среде для предоставления услуг, что удобно для используйте механизм кэширования для повышения производительности и интерактивности
- ...
Примечание: Что касается загрузки изображения здесь, мой самый ранний метод реализации заключался в том, чтобы сохранить изображение на сервере nginx, а затем вернуть адрес во внешний интерфейс.Позднее, учитывая проблему с производительностью сервера, я переключился на ali-oss для загрузки изображения, что может лучше использовать механизм кэширования и улучшить взаимодействие с пользователем
задняя часть
Фоновый фреймворк реализован с использованием существующего фреймворка koa. Здесь я хочу сказать, что я написал один с экспресс-фреймворком в прошлом году.Express+mongodb+vue реализует добавления, удаления, изменения и проверки — путь к полному стеку, После использования koa на этот раз я лично чувствую, что нет большой разницы в использовании, примерно потому, что некоторые API изменились, упростив всю структуру, и на основе синтаксического сахара async/await можно лучше разрабатывать промежуточное программное обеспечение. Для этих серверных фреймворков, если вы не заинтересованы в том, чтобы стать лидером в области, я думаю, в качестве фронтенда достаточно знать, что он делает и как его использовать.
детали взаимодействия
- Подключение к базе данных и создание схемы с помощью инструмента объектной модели промежуточного программного обеспечения mongoose
- Код подтверждения реализуется gd-bmp, а затем используется jsonwebtoken (jwt) для генерации токена в соответствии с определенными правилами и сохранения его в базе данных.Когда пользователь входит в систему или регистрируется, сначала определите, существует ли код подтверждения в базе данных , а затем выполнить другие действия
- Инкапсулируйте промежуточное ПО check_token, и каждый раз при получении внешнего запроса оно определяет, истек ли срок действия токена в заголовке запроса, а затем выполняет последующие действия.
- Используйте @koa/multer для загрузки изображений на внешний интерфейс, сохраняйте их в папке сервера, а затем загружайте изображения в облако с помощью ali-oss.
- ...
Примечание: Фоновые знания относительно неопределенны и неясны с точки зрения внешнего интерфейса.Рекомендуется, если вы столкнулись с чем-то, чего не понимаете, пойти и разобраться самому.
база данных
Для базы данных я использую Mongodb здесь.Рекомендуется использовать доморощенный для установки одним щелчком мыши. При этом для облегчения последующих операций и просмотра базы данных рекомендуется скачать графический инструмент Robo 3T GUI. Остальное, я думаю, мне нужно понять, это CRUD базы данных MongoDB.API
фокус
На данный момент практически нет проблем с местным развитием. Другими словами, вы можете получить локальный доступ к внешним службам, вызывать внутренний интерфейс и выполнять добавления, удаления и изменения в локальной базе данных.
Но я думаю, что раз уж вы это прочитали, то вас точно не устроит просто метание на собственной машине.Вас больше интересует, как развернуть собственный проект на сервере, чтобы другие мелкие партнеры тоже могли видеть вашу работу. Для получения более подробной информации см.Весь процесс развертывания веб-проектов на облачном сервере
Далее, чтобы у всех не покалывало скальп, я самым простым языком раскрою вам тайну.
Готов к работе
server
Если вы хотите, чтобы люди увидели вашу работу, нужно ли вам подготовить собственнуюserver, так что вам нужно сначала перейти в облако, чтобы купить сервер.Что касается стандарта сервера, это зависит от дедушки Мао в вашем кошельке.
После покупки сервера самое интуитивное ощущение, что вы просто получили строку цифр (ip адрес)
// 云serverip地址
123.56.119.218
доменное имя
Когда другие обращаются к вашему серверу, вы можете получить доступ к нему только через IP-адрес.Вы никогда не помиритесь.Кто помнит номера? Итак, вам все равно нужно перейти в облако, чтобы купить его.доменное имя, а затем через разрешение доменного имени наведите доменное имя на свой ip адрес, чтобы другие могли спокойнее запомнить ваш сайт
// 小伙伴们通过访问域名，进入你的网站，而不是使用一串数字访问
www.xxx.com -> 123.56.119.218
регистрация
После того, как у вас есть доменное имя и сервер, чтобы доказать легитимность вашего будущего веб-сайта, вам все равно нужно перейти нарегистрацияДоменное имя сайта, цикл около 20 дней. Только после того, как запись будет передана, другие могут получить доступ к вашему сайту через доменное имя, в противном случае к нему можно будет получить доступ только через IP-адрес.
В ожидании успешной регистрации доменного имени есть и другие вещи, которые вам нужно сделать.довольно много, но и обречены на боль в яйце (наступить на яму)
загрузить файл на сервер
Подключиться к серверу через командную строку ssh root@xxx, где xxx — ваш IP-адрес сервера, Установите связанные зависимости. Сюда входят, но не ограничиваются mongodb, nginx, pm2, node, git и т. д. Грубо говоря, необходимо построить на серверной среде локальную среду, аналогичную вашей, при установке лучше всего обратить внимание на соответствующую версию.Чтобы избежать вопроса о совместимости, вы можете посмотреть свою локальную версию и загрузить ее соответственно.
Я не хочу описывать здесь слишком много, потому что, когда я его строил, я тоже наступил на много ям. Новичкам рекомендуется снова наступить на него. Если вы не можете найти, поищите учебники в Интернете. . Только ступив на яму самостоятельно, можно обрести глубокую память.
Когда все эти задачи будут готовы, вам понадобится инструмент, который сможет перенести ваш локальный код на сервер.Здесь рекомендуется использовать FileZilla, это удобно и быстро. Например, после того, как я закончу локальную разработку и выполню npm run build, сгенерированные файлы и папки сервера в каталоге dist будут загружены в папку www в каталоге /home через FileZilla.Каталог www создается вами.Вы можете выбрать любое имя, но путь здесь имеет определенную связь с корнем пути каталога статических ресурсов nginx, который необходимо настроить позже.
установка сервера PM2
На данный момент в основном все приготовления готовы, вам нужно только войти в папку сервера, где фоновый код хранится на сервере через командную строку, и использовать pm2 для запуска фоновой программы. Про pm2 можно почитатьНачало работы с PM2.
假如你的server文件夹放在/home/www下，你只需要执行以下几步
1.cd /home/www/server
2.pm2 start bin/www --name xxx (这里的xxx是你为你启动的服务起个名字)
关于pm2的相关命令，可以使用pm2 examples查看示例
установка сервера Nginx
Прежде всего, вам нужно знать, что наши статические ресурсы и код фоновой службы хранятся в каталоге nginxserver.
После прохождения разрешения доменного имени, когда мы получаем доступ к внешним статическим ресурсам через доменное имя, он будет указывать на ваш корневой каталог в файле nginx.conf, а также будет посещать вашу домашнюю страницу по умолчанию index.html.
На данный момент интерфейс готов, но так как фоновая программа запускается на локальном порту сервера 3000, то при прямом доступе возникнут междоменные проблемы.На данный момент одна из основных функций nginxобратный проксиэто сработало
// nginx.conf配置文件
server {
listen 80; // 默认端口
server_name 123.56.119.218; // 域名，当你访问这个域名时，会直接去找/home/www目录下的index.html文件
root /home/www; // 根目录
index index.html index.htm index.php; // 默认首页
// 反向代理
location /api/ { // 前端访问api下的接口时，会代理到proxy_pass指向的地址
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://127.0.0.1:3000; // 反向代理，用户访问api接口时，指向本地服务3000端口
}
}
намекать:Каждый раз, когда вы изменяете файл конфигурации nginx.conf, вам необходимо выполнить следующую команду, чтобы перезапустить nginxserver.
重启nginxserver步骤
1. cd /usr/local/nginx/sbin
2. ./nginx -s reload
местный старт
Во-первых, вам необходимо локально установить mongodb, node, npm, robo3T и другие связанные инструменты, а также локально запустить mongodb.
1.git clone https://github.com/weirui88888/itc.git 把项目克隆到本地
2.cnpm install // 项目根目录安装前端项目依赖
3.cnpm install // server目录下安装后端项目依赖
4.在根目录下启动前端程序
npm run serve
5.在server目录下启动后端程序
npm run start
6.访问localhost:8080即可看到成果
Если облачное хранилище объектов OSS включено и вы хотите загружать изображения в облачное хранилище объектов, см. подробные примечания в файле server/controller/record.js.
Наконец
В процессе строительства будут возникать различные проблемы. Но именно эти вопросы заставляют нас взрослеть и осознавать свою ничтожность, и в то же время подстегивают двигаться вперед и становиться все смелее. и здесь спасибоlicy97loveЭтот одноклассник дал мне помощь и руководство в процессе развертывания сервера.
Это первый раз, когда я написал полное внешнее и внутреннее приложение и развернул сервер, поэтому неизбежно, что в программе будут некоторые недостатки, которые я надеюсь включить. В то же время, если у вас есть какие-либо сомнения или предложения, вы можете задатьissue, вы также можете отправить электронное письмоcallЯ.
Интернет-адрес:itc
адрес проекта:GITHUB
Добро пожаловатьstarиfork,Благодарность!
Написано в конце статьи, если эта статья даст вам вдохновение или рост, пожалуйста, зажгите для меня маленькое красное сердечко.Программист, кодить не просто, спасибо.
Ссылаться на
Небольшое упражнение VUE+KOA+MONGODB