キャンパスSNS キャンパスコミュニティバックエンドインターフェース開発（フロントエンドアドレス付き）

koa2 + Sequelize を使用して構築されたキャンパスコミュニティのバックエンド、巧婦難為無米之炊！素晴らしいプロジェクトのバックエンド！

前書きとプロジェクト紹介#

このプロジェクトは、私がフロントエンドを学び始めたときに参加した百度のフロントエンドトレーニングキャンプの上級クラスの最初の課題で、完璧なキャンパスコミュニティ機能とバックエンド管理システムを備えています。今年の 3 月に開発され、私が主に担当したのはバックエンドの投稿管理、区分管理などのインターフェースで、インターフェースドキュメントで確認できます。当時、チームには合計 6 人がいて、3 人がバックエンドの開発に参加し、2 人がモバイルフロントエンドを開発し、1 人が PC 端を開発しました。また、若かったため、かなり多くのドキュメントを記録しました。

個人的には、このインターフェースシステムは小さくても五臓六腑が揃っている（あるバックエンドの評価）と思います。PC 端のバックエンド管理システムとモバイル端のキャンパスコミュニティの 2 つのフロントエンドがあり、バックエンドも完璧なインターフェースを持っているので、初心者に非常に適していると思います。実際に後輩たちから質問を受けたこともあり、ブログを書いてまとめることにしました。

バックエンドプロジェクトは常に自分のクラウドサーバー上で運用されており、http://cosine.ren:8000 にリクエストを送って試すことができます（~~優しく扱ってください、お願いです、バックアップはありますが~~）。もしサーバーがダウンしたら、私も何とも言えませんので、皆さんにはローカルで前後端を実行して試すことをお勧めします。

私が考える利点は

ドキュメントが非常に充実している（インターフェースドキュメント、開発ドキュメント、バグ記録...）、これは今後の私にとっても非常に役立つことです。インターンシップ後はあまりドキュメントを書かなくなりました。
基本的な CRUD 操作に加えて統計も含まれており、インターフェースの規範は Restful に従っています（正直言って、当時は restful の概念を知らなかったのですが、自然に使っていました）。
主要なパラメータは基本的にミドルウェアで検証され、権限管理なども行われており、コード内のコメントが特に多いです。
エラーコードには専用の説明があり、インターフェース関数にはコメントがあります（インターンシップ後、これが本当に素晴らしいと感じるようになりました...）。

欠点も明らかです。

ブランチ管理が全くありません（当時はまだ不慣れで、皆が異なる機能を開発していたため、直接 master ブランチで開発し、コンフリクトを解決しました）。
多くの機能は実装が簡単で、工期もほぼ 1 ヶ月でした。
当時はまだ学び始めたばかりで、prettier のようなコードフォーマットツールも使わず、ts も使用していませんでした。今の新しいプロジェクトでは基本的に ts を使用しています。

オンラインアドレスとプロジェクトデモ#

まずはソースコードのアドレスを掲載します。当時は gitee で開発していましたが、後にバックエンドを github に同期しました。

バックエンドインターフェースリポジトリ：campus-community-backend
フロントエンド（モバイル端）リポジトリアドレス：campus-sns-campus-community（gitee）
フロントエンド（PC 端バックエンド管理システム）リポジトリアドレス：back-manage（gitee）
インターフェースドキュメントアドレス：キャンパスコミュニティバックエンドインターフェースドキュメント

もし良いと思ったら、スターを一つ付けてください～また、issue や pr の提案も歓迎します。

バックエンドインターフェース#

インターフェースドキュメント：https://www.apifox.cn/apidoc/shared-9459ed60-58b2-45b8-b5a8-89a63d77357f/api-11836993
リポジトリリンク：https://github.com/yusixian/campus-community-backend
主要技術スタック： nodejs koa2 websocket sequelize
- PM2を使用してプロジェクトをクラウドサーバーにデプロイし、Nginxでリバースプロキシを設定
- koa-corsを使用してクロスオリジンの問題を解決し、エラーログとログの分割を設定
- Sequelize ORMを利用してデータベースの操作を行い、JWTを使用してユーザー認証と情報の暗号化を実現し、WebSocketを利用してオンラインユーザー数を監視
- 記事のソフトデリート、復元など

フロントエンド（PC 端バックエンド管理システム）#

フロントエンド（PC 端バックエンド管理システム）アドレス：https://gitee.com/honxinn/back-manage
Vue3 + Viteを基に構築

フロントエンド（モバイル端）#

フロントエンド（モバイル端）リポジトリアドレス：https://gitee.com/honxinn/campus-sns-campus-community
Vue3 + Viteを基に構築

デモ

開発ドキュメント#

開発記録ドキュメントは、0 から 1 までの構築記録を詳細に記録しています。

バグ回顧録は、名の通り、構築過程での問題の記録です。

インターフェース機能説明#

ディレクトリ構造#

基本的に見名知義です。

src
- app
  - errHandler.js エラー統一処理関数
  - index.js app のインスタンス化を行う
- config
  - config.default.js システムのデフォルト設定ファイル、dotenv を使用して.envの設定を読み込み、公開する
- constant
  - err.type.js エラータイプのまとめ（定数）
- controller すべてのビジネスロジック
  - article.controller.js 記事関連のビジネスロジック
  - user.controller.js すべてのユーザー関連のビジネスロジック
  - ……
- db
  - seq.js データベース接続の制御ファイル（.envのデフォルト設定を使用してローカルデータベースに接続）
- middleware すべてのミドルウェア
  - article.middleware.js 記事関連のミドルウェア
  - auth.middleware.js トークンを解析するミドルウェア
  - user.middleware.js ユーザー関連のミドルウェア
  - ……
- model
  - article.model.js 記事情報のデータテーブルファイル
  - user.model.js ユーザー情報のデータテーブルファイル
  - ……
- public 静的リソースの保存
  - assets 画像などのリソースファイルを保存
  - css cssファイルを保存
  - uploads アップロードされた画像の保存場所
- routers
  - article.route.js 記事関連のルート登録
  - user.route.js ユーザー関連のルート登録
  - index.js 統一ルート登録
  - ……
- service
  - article.service.js 記事関連のデータベース操作
  - user.service.js ユーザー関連のデータベース操作
  - ……
- views 一部のルートのテンプレートを保存
  - index.html メインルートの html テンプレート
logs
- err.log エラーログを保存
- out.log 出力ログを保存
- seq.log クエリログを保存
main.js 封装された app をインポートし、.envで指定されたポート番号でリスン
.env 設定情報を保存
.gitignore git のデフォルトでnode_modules（ダウンロードした依存ファイル）を無視
package.json npm のプラグインバージョンなど
一部のドキュメント

実行方法（バックエンド）#

# プロジェクトをクローン
git clone https://github.com/yusixian/campus-community-backend.git
# プロジェクトディレクトリに移動
# 必要な依存関係をダウンロード
npm install

データベースの関連設定#

1. ローカルでデータベースを開く（一般的にはデフォルトで mysql が開いています）。開いていない場合は cmd コマンドnet start mysqlを使用。
2. データベースにログイン後、例えばschoolcommunityという名前のデータベースを作成します。もちろん、navicatなどを使用して作成することもできます。
3. このプロジェクトの.envファイルで mysql の関連設定を更新します。
4. コマンドnpm run createModelを使用してすべてのデータテーブルを作成します。

ローカル実行#

データベースを作成した後

npm install
npm run dev

開発の感想#

フロントエンドの人間として、このバックエンドインターフェースの開発を通じて、自分の軽量インターフェースを独立して書く能力が身につきました。また、バックエンドとのコミュニケーション時に注意すべき詳細な問題も理解しました。皆が大変な思いをしている中で、インターフェースドキュメントを書くのは確かに時間がかかり、労力が必要です。時には書くのが大変で、変更を忘れてしまうこともありますので、~~相当な充実したインターフェースドキュメントを持つことは、あなたのバックエンドの人が特に良いことを示しています~~。今後の開発では、まずこのような考え方でバックエンドと調整してから開発を進めると、多くの場合、かなりの手間を省くことができます。

心円さんが引用した阿里のフロントエンドインターンシッププログラムの開幕式で、梓骞先生が言った一言を引用して締めくくります：

彼らはインタラクションデザインを理解していないかもしれませんが、インタラクションデザインの実現とそのすべての詳細を理解しているのは彼らです。
彼らはビジュアルデザインを理解していないかもしれませんが、ビジュアルデザインが現実になる方法を理解しているのは彼らです。
彼らはデータベースを理解していないかもしれませんが、実際には彼らがデータの第一の消費者です。
彼らはプロダクトマネージャーではないかもしれませんが、プロダクトの体験はほぼ彼らによって決まります。

~~まあ、私は単にこの言葉が好きなだけです~~

私はできるだけ多くのことを理解し、合格したフロントエンドの人間になるよう努力しています。

次回の投稿では、ts の型体操を始める予定です。