キャンパス向け宅配代行プラットフォーム

Web
キャンパス向け宅配代行プラットフォーム

キャンパス向け宅配代行プラットフォーム

Node.js（Express）とVue 3を用いた前後端分離の「キャンパス宅配（荷物）代取プラットフォーム」です。バックエンドはSequelize＋MySQLでデータを管理し、JWTによる認証を採用。フロントはVue 3／Element Plusを用いた管理画面とユーザー画面を備え、Piniaで状態管理、AxiosでAPI通信、EChartsで統計表示を行います。学内の荷物受取依頼・代取管理や管理者ダッシュボードに適した学習・デモ向けプロジェクトです（動画チュートリアルあり）。

https://github.com/Mengxingg76/Campus-Parcel-Pickup-System-

概要

このリポジトリは「校园快递代取平台」をベースにした、大学・キャンパス向けの宅配（荷物）受取代行プラットフォームです。フロントエンドはVue 3とElement Plusで作られ、バックエンドはNode.js＋ExpressでREST APIを提供します。データ層はSequelize経由でMySQLを使用し、JWTでユーザー認証を行う構成です。主な機能として、荷物情報の登録・管理、受取依頼の作成、管理者用のダッシュボードや統計表示が想定されており、学習用のチュートリアル動画（Bilibili）も公開されています。前後分離アーキテクチャの学習・プロトタイプとして使いやすいリポジトリです。

GitHub

リポジトリの統計情報

  • スター数: 2
  • フォーク数: 0
  • ウォッチャー数: 2
  • コミット数: 6
  • ファイル数: 6
  • メインの言語: Vue

主な特徴

  • フロントエンド（Vue 3 + Element Plus）とバックエンド（Node.js + Express）の前後端分離構成
  • Sequelize ORM と MySQL による永続化、JWTベースの認証・認可
  • Pinia を用いた状態管理、Axios による API 通信、ECharts でダッシュボード表示
  • 学習用の動画チュートリアル（Bilibili）があり、セットアップ手順を追いやすい

技術的なポイント

このプロジェクトはモダンなJavaScriptフルスタック構成を採用しており、実務的な構成や学習に適しています。サーバー側は Node.js 22+ と Express 4.18+ を想定し、Sequelize ORM を使って MySQL（5.7/8.0）と安全に接続します。モデル層はユーザー、荷物（parcel）、受取レコード、管理者設定などのエンティティで構成される想定で、ORMによりスキーマ定義・マイグレーションが行われます。認証はJWTトークンを使用するため、ログイン後にトークンをフロントへ返却し、以降のリクエストで認可ミドルウェアがトークンを検証してAPIアクセスを制御します。これにより、管理者と一般ユーザーでAPIの挙動を分けられます。

フロントエンドは Vue 3 をコアに、Element Plus でUIコンポーネントを素早く構築します。ルーティングは Vue Router、状態管理は Pinia、HTTPクライアントは Axios を採用しており、典型的なシングルページアプリ（SPA）構成です。統計や可視化には ECharts を利用しており、管理画面で荷物到着数や代取件数の推移をグラフ表示できます。開発時には Node.js 22 以上と MySQL が必要で、READMEには環境構築や起動手順、Bilibiliの動画チュートリアルへのリンクが記載されています。

実践的な注意点としては、デプロイ時にJWTの秘密鍵やDB接続情報を環境変数で管理すること、Sequelizeの接続プール設定やエラーハンドリングを整備することが挙げられます。また、フロントでの入力検証やサニタイズ、バックエンドでのリクエスト検証（バリデーション）を適切に実装すると、セキュリティと信頼性が向上します。さらに、負荷やリアルタイム性が必要な場合はWebSocketや通知キューの導入を検討できます。本リポジトリは学習目的で必要な基本機能が揃っているため、機能追加や商用利用に向けた拡張基盤として扱いやすい構成です。

プロジェクトの構成

主要なファイルとディレクトリ：

  • .idea: dir
  • .vscode: dir
  • README.md: file
  • database: dir
  • serve: dir

…他 1 ファイル

（README抜粋から backend ディレクトリ以下に config、controllers、models、routes 等の典型的な構成が含まれていることが示唆されています。フロントエンド側は Vue 3 + Element Plus のコンポーネント群、store（Pinia）、router、utils、api サービス等で構成されている想定です。）

まとめ

学習とプロトタイピングに適した、前後分離のキャンパス向け荷物受取システムです。

リポジトリ情報：

READMEの抜粋：

校园快递代取平台

一个基于 Node.js + Vue3 的前后端分离校园快递代取平台项目。

项目b站视频教程

https://www.bilibili.com/video/BV1MZvWBvE5K

技术栈

后端

  • Node.js 22+
  • Express.js 4.18+
  • Sequelize ORM
  • JWT 认证
  • MySQL 5.7+

前端

  • Vue 3.4.0
  • Element Plus 2.4.4
  • Axios 1.6.2
  • Vue Router 4.2.5
  • Pinia 2.1.7
  • ECharts 5.4.3

数据库

  • MySQL 5.7/8.0+

环境要求

  • Node.js: 22 或以上
  • MySQL: 5.7 或 8.0 或以上（推荐 8.0）

项目结构

校园快递代取/
├── backend/                 # 后端项目（Node.js）
│   ├── config/             # 配置文件
│   ├── contro...