Передняя часть

Этот проект я выполнял в качестве дипломной работы. Основная цель — практическая отработка полного цикла разработки продукта, начиная с предварительного анализа требований (PRD), заканчивая прототипированием, проектированием архитектуры, разработкой и оптимизацией. Поэтому он хорошо подходит для обучения новичков.

Fisoa на момент защиты диплома представлял собой веб-сайт, размещённый онлайн. В процессе разработки использовались сервисы Alibaba Cloud: Elastic Compute Service (ECS) и Object Storage Service (OSS). Поэтому в коде есть скрипты и фрагменты кода, связанные с развёртыванием. Сейчас арендованный сервер Alibaba Cloud уже не действует, поэтому все интерфейсы для выгрузки данных были перенесены на локальный компьютер. Поэтому в проекте могут быть фрагменты кода и скрипты, не имеющие отношения к теме работы. При чтении их можно пропустить.

Пожалуйста, не используйте этот проект в коммерческих целях! (ﾟДﾟ)w Ведь это результат более чем полугодовой работы (￣△￣；) Хотя проект и открыт под лицензией MIT (´-ι_-｀) Если кто-то из студентов хочет использовать его как дипломную работу, пожалуйста, внесите необходимые изменения~(￣m￣）(но всё же хочу напомнить младшим коллегам, что диплом лучше писать самим~)

О загрузке файлов JavaScript и каскадных таблиц стилей (CSS) в OSS на Alibaba Cloud

См. файл scripts/makeVersionFile.js.

Об интерфейсе загрузки изображений в OSS через Koa2

См. файл /node/utils/uploadImage.js. Здесь используется интерфейс прикладного программирования (API) Alibaba Cloud, но с применением слоя co и Promise (・-・*).

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

Ещё одно примечание: Разработка велась на компьютере Mac, поэтому не могу гарантировать, что проект будет работать в среде Windows. Однако думаю, что проблем возникнуть не должно, за исключением скриптов для работы с оболочкой.

Последнее примечание: Если кто-то захочет развернуть проект на сервере Alibaba Cloud, просто следуйте инструкциям в конфигурационном файле config. Если какие-либо параметры конфигурации неизвестны, можно поискать информацию в интернете (๑>◡<๑).

Абсолютное отсутствие примечаний: Пожалуйста, поставьте звёздочку ⭐ ( ͡° ͜ʖ ͡°)

И ещё одно замечание от меня: Если у вас возникнут вопросы, оставьте заявку. Но учтите, что ответ может прийти не сразу. А если я чего-то не знаю, то ничем не смогу помочь (ÒωÓױ)呃！！！！

Проект Fisoa

Fisoa — это основанный на React и Node.js онлайн-сообщество вопросов и ответов для ПК. Он обладает некоторыми функциями таких сервисов, как Zhihu и Toutiao. Основные функции включают: написание и отображение статей, обработку изображений, отправку электронной почты, сбор комментариев и лайков, регистрацию и авторизацию пользователей (＞人＜；). В качестве фронтенд-фреймворка используется Ant Design, хотя позже выяснилось, что размер пакета слишком велик. Поэтому некоторые компоненты были написаны самостоятельно, хотя полностью заменить Ant Design не удалось.

Обзор проекта

Проект состоит из двух слоёв кода: node и public. Оба слоя используют зависимости, расположенные в node_modules. Информация о зависимостях находится в package.json. При разработке рекомендуется использовать плагин ESLint в интегрированной среде разработки (IDE).

Текущие задачи: — Перенести API на язык Go.

Задачи на будущее: — Реализовать функцию обмена статьями. — И другие.

Выполненные задачи: — Реализация страницы с подробными сведениями о статье (возникло много проблем при реализации). — Обновление React до версии 16.3.

Среда разработки

— Операционная система: macOS@10.12.6. — База данных: MySQL@5.7 + Redis@4.0.1. — Фронтенд: React@15.6.1. — Бэкенд: Node@8.9.4. — Серверная часть: Alibaba Cloud ECS + Alibaba Cloud OSS (больше не используется, проект развёрнут на локальной машине).

Технологический стек проекта — Фронтенд: React + Redux + Sass + Webpack + Ant Design. — Бэкенд: Node.js + Koa2.0 + Pug. — Данные: MySQL + Redis.

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

Папка config содержит различные файлы конфигурации (config.*.json). При локальном развёртывании используется файл config.local.json:

{
  "server_port": 8089,
  "debug": true,
  "amplitudeToken": "xxxxxxxxxxxxxxxxxxxxx",
  "picPath": "xxxxxxxxxxxxxxxxxx",
  "localPath": "//localhost:3300/assets/",
  "AccessKey": "x*****************x",
  "AccessKeySecret": "G*****************************s",
  "Bucket": "xxxxx",
  "endPoint": "xxx-xx-xxx"
}

Папка public содержит код фронтенда. Папка node содержит код бэкенда. Папка template содержит шаблоны Pug. Папка static содержит статические ресурсы. Папка test содержит тестовые сценарии (ヾ(´∀`o)+ 懒得写了).

Версии зависимостей — Для Node.js рекомендуется версия 8.0.0 или выше. — Для MySQL рекомендуется версия 5.7 или выше. — Для Redis рекомендуется версия 3.0.2 или выше.

Информация об использовании сервиса электронной почты Для отправки электронной почты используется библиотека Mailer. Конфигурационный файл находится по адресу /node/util/mailer/config.js:

{
  transport: {
    host: 'smtp.126.com',
    port: 465,
    auth: {
      user: '123456789@126.com',
      pass: 'password'
    },
    secure: true
  },
  mailOptions: (to, html) => ({
    from: 'Fisoa <123456789@126.com>',
    to,
    subject: '来自Fisoa的消息',
    html
  })
};

Например, для адреса @126.com в поле auth необходимо указать свои логин и пароль. Поле user — это логин, а поле pass — это не пароль от вашей учётной записи, а пароль доступа (он отличается от пароля к почте).

mailOptions определяет содержимое и стиль отправляемого сообщения.

Как запустить проект

Установка зависимостей: npm install.

Запуск Redis: сначала установите Redis и настройте переменные среды.

redis-server

Запуск базы данных: сначала установите базу данных MySQL. Создайте базу данных в командной строке:

create database db_fisoa;

Измените конфигурацию в файле node/lib/mysql/dev_config.js (файл конфигурации для среды разработки, больше не используется):

{
  host: '127.0.0.1',
  user: 'your mysql username',
  password: 'your mysql password',
  port: '3306',
  database: 'db_name',
  charset: 'utf8mb4_unicode_ci'
};

Запустите скрипт для создания таблиц базы данных:

node ./scripts/create-mysql.js

Примечание: Если в сообщении появляется эмодзи, и публикация завершается неудачно, измените кодировку базы данных на utf8mb4. По умолчанию в коде используется utf8mb4, обычно нет необходимости изменять её.

Запустить среду разработки Node: npm run start.

Запустить среду разработки фронтенда: npm run startfe.

Развёртывание в производственной среде (Node): больше не требуется после переноса проекта с онлайн-сервера. Тем, кто интересуется, предлагается поиграть с pm2. npm run build.

Разверните проект в производственной среде с помощью pm2 вместо этого. После завершения запуска можно просмотреть информацию с помощью следующих команд (если pm2 не установлен глобально, используйте node_modules/pm2/bin/pm2 для вызова):

Сбор данных статистики

Статистические данные собираются с помощью платформы Amplitude. Если вам нужна эта функция, зарегистрируйтесь на платформе и замените файл /template/common/counter.pug на SDK.

Сведения об ошибках в журнале

Журналы ошибок, созданные во время разработки, находятся в папке ./logs.

Скриншоты проекта

Позже добавлю скриншоты.