Небольшое упражнение Vue+Koa+Mongodb

Функция: простой веб-сайт для входа, регистрации и сообщений на основе vue koa mongodb. гитхаб:GitHub.com/l Индустрия интегральных схем i/…

предыдущие слова

Обновление от 12 сентября 2021 г.: в связи с истечением срока действия облачного сервера демонстрационная онлайн-среда в настоящее время недоступна.

причина

Некоторое время назад я использовал vue+koa+mongodb для создания личного блога, поскольку это был первый раз, когда я взаимодействовал до и после написания, я обнаружил, что есть много мест, которые не особенно идеальны, и код не очень читаем. для новых ученых. Итак, это небольшое упражнение начинается с простого аспекта, в надежде вдохновить попутчиков, которые ступили в ту же яму.
Когда я изучал vue и koa в начале этого года, контент в интернете был полноценным проектом.Там было слишком много файлов и было слишком сложно смотреть.Во-вторых, загрузка картинок не была задействована.
Когда я учился развертывать проекты koa и vue, знания в Интернете были очень разрозненными, и я обобщу их здесь.

Привлечение очков знаний

Использование ведра семейства vue
Используйте axios в vue и настройте его
Основное использование коа и мангуста
Использование jsonwebtoken и входа в систему с внешней и внутренней аутентификацией

Примечание. Эта статья предназначена для студентов, которые только что изучили vue или koa или хотят понять простую проблему взаимодействия между интерфейсом и сервером, включая основы.

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

首页预览

登录预览

注册预览

интересующий вопрос

Я написал много комментариев в коде, чтобы облегчить чтение, вот краткое введение в мои личные сомнения, когда я учился.

некоторые небольшие изменения

Внешний интерфейс напрямую использует vue-cli для базового скелета проекта. Затем, поскольку это простой проект, страница написана небрежно, в основном для реализации функции.

Поскольку мы используем форму доменного имени второго уровня на сервере, нам необходимоconfig/index.jsследующееbuildпункт будетassetsPublicPathУстановите относительный путь.

assetsPublicPath: ''

Когда мы разрабатываем локально, нам нужно отлаживать, нам нужно использовать прокси, в противном случае нам нужно только установить фон, чтобы разрешить междоменный доступ. так вconfig/index.jsследующееdevВнутри объекта добавьте:

proxyTable: {
    '/api':{  // 只代理 /api url下的请求
        target: "http://localhost:7778", // 后台服务器的地址
        changeOrigin: true
    }
}

Как заставить сервер вас запомнить (jsonwebtoken)

HTTP-запросы не имеют состояния, а это значит, что он не может вспомнить, кто вы, он знает только, какие ресурсы вам нужны и что вам дать. Но на самом деле проблема в том, что когда пользователь запрашивает у нас ресурс, мы должны подумать о предоставлении ему этого ресурса. Вынесите суждение о личности этого человека, а затем решите, какие ресурсы ему предоставить.

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

Когда интерфейс и серверная часть не разделены, серверная часть часто ставитSessionIdилиcookieс вещами. Но теперь, после разделения фронтенда и бэкенда, мы успешно авторизуемся, и серверная сторона тоже должна выдать нам такую уникальную строку идентификации. Потом приносим его с каждым запросом данных. Здесь я использую серверную частьjsonwebtokenчтобы сделать этот уникальный идентификатор, детали кода =>server/utils/token.jsЗатем я написал промежуточное ПОcheck_tokenЧтобы определить, нужно ли авторизоваться на этом ресурсе, он проверит свой токен и выдаст ошибку, если токен неверен.

После того, как интерфейс получит токен на стороне сервера, нам нужно его сохранить.Вероятно, есть два способа:

Существующий в vuex, этот метод имеет тот недостаток, что данные в vuex очищаются, как только веб-страница обновляется. Это означает войти снова.
В sessionStorage используется хранилище сеанса браузера, и данные очищаются только при закрытии браузера.

Здесь я комбинирую два метода, когда я получаю токен, я сохраняю его одновременно в vuex и sessionStorage, он хранится в vuex для удобства работы, а хранится в sessionStorage, чтобы данные не терялись при обновлении страница. Каждый раз, когда интерфейс запрашивает данные из фона, приносить этот токен, см. код =>client/src/axios/index.js

О некоторых онлайн-дебатах:

В: Некоторые люди говорят, что небезопасно позволять службе поддержки завершать хранение токенов или что небезопасно использовать метод sessionStorage для хранения токенов, потому что существует проблема csrf.

О: Абсолютной безопасности нет, я лично понимаю, что использовать предыдущуюcookieилиSessionIdЕсть и такая проблема. Если вы хотите решить эту проблему, попробуйте обновить веб-страницу до https или использовать метод передачи сервера, добавить серверную сторону между ними, сохранить реальный токен в передаче, а затем терминал обслуживания клиентов связывается с передачей.

Распознавание кода подтверждения

Я использовал проверочный код для созданияgd-bmpДля конкретного использования пакета см.server/controller/other.jsТакже согласно приведенному выше введению, http не имеет состояния, мы хотим проверить правильность кода подтверждения, мы должны добавить уникальный идентификатор к каждому коду подтверждения, а затем сохранить его в данных, когда пользователь входит в систему или пользователь регистрируется чтобы использовать код подтверждения, отправьте код подтверждения и соответствующий идентификатор кода подтверждения в фоновом режиме, а затем оцените, является ли код подтверждения правильным или нет. Для хранения проверочных кодов и идентификаторов я здесь для удобства использую mongodb для хранения, но многие в интернете рекомендуют для хранения redis.

локальная загрузка изображения

Этот вопрос давно сбивает с толку, и я понятия не имею, как загружать изображения на сервер. хотя h5 появляется<input type="file">Но решить эту проблему тоже очень хлопотно. Лично я считаю, что должно быть 2 способа загрузки изображений:

Непосредственно используйте файл, полученный событием ввода onchang, для загрузки двоичного файла.
Преобразование изображения в base64 для загрузки

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

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

О серверном развертывании проекта

Из-за простоты Vue многие знают толькоnpm installиnpm run devУ многих возникнут вопросы, вот как мой проект vue разворачивается на сервере? Он загружает код на сервер для выполнения двух вышеуказанных команд?

На самом деле эта проблема осталась, потому что все действуют только механически, потому что простота и удобство vue-cli уже сделали фреймворк mvvm мощным, и мы забываем, что то, что мы пишем, — это все-таки веб-страница. Поэтому нам нужно использоватьwebpackУпакуйте наш проект и запустите его в командной строкеnpm run buildУпакуйте код vue и js, который мы написали, и другие файлы ресурсов/distв. Файлы здесь — это веб-страницы, которые мы написали Нам просто нужно загрузить файлы здесь на сервер, чтобы запустить их.

Здесь часто есть два способа запуска упакованных файлов:

перетащите файл вserver/publicпапку, потому что мы находимся вserver/app.jsКаталог статических файлов настраивается ниже, а затем мы запускаем сервер. ты сможешь127.0.0.1:7778/index.html(Предположим, что номер порта сервера 7778). См. нашу веб-страницу.
Используйте прокси-сервер nginx, статические файлы размещаются с помощью nginx, а затем установите метод пересылки для получения данных запроса API.

На самом деле, первый — использовать nodejs для автоматического запуска сервера для размещения статических файлов. Лично я предпочитаю второй способ, и этот файл мы настроим ниже.

Перед запуском вы должны убедиться, что на вашем сервереnginxиpm2

$ pm2 -v
$ nginx -v

Если номер версии отображается правильно, он уже установлен, если нет, пожалуйста, Google, чтобы установить его.pm2Его роль заключается в демонизации процесса и перезапуске, когда ваш nodejs неожиданно останавливается.

Если у нас есть доменное имя, где нам теперь добавить разрешение доменного имени второго уровня к провайдеру доменного имени. После добавления парсинга сюда потребуется несколько минут ожидания

添加域名解析

Затем находим файл конфигурации nginxnginx.confВ нем добавить:

server {
        listen 80;
        server_name www.a.com;
        root   /data/www/demo; 
        index  index.html index.htm index.php;

        location /api/ {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header Host $http_host;
            proxy_pass http://127.0.0.1:7778;
        }
    }

Уведомление:location /api/Это показывает, что будут пересылаться только запросы от api/*.

Затем перезапустите сервер nginx:nginx -s reload

Помещаем код сервера под сервер, и переходим в соответствующее место через командную строку для выполнения команды:

$ npm install && cnpm i
$ pm2 start --name demo1 npm -- run start

Запустите наш сервер nodejs. Затем мы можем открыть веб-сайт, чтобы увидеть эффект

Наконец

Из-за отсутствия у меня таланта и знаний, если у вас есть какие-либо вопросы, пожалуйста, оставьте сообщение ниже, чтобы обсудить!