[フルスタックのトップ] Honor of Kings モバイル公式 Web サイトと管理バックエンドの Node.js + Vue.js フルスタック開発
このプロジェクトは、Bilibili のトップオブスタック ビデオ チュートリアル https://github.com/wxs77577/node-vue-moba の関連ソース コードです。継続的に更新されています。ご注意ください。
1. はじめに
- プロジェクト紹介
- ツールのインストールと環境構築（nodejs、npm、mongodb）
- プロジェクトの初期化
2. 経営背景
要素 UI に基づいたバックグラウンド管理のための基本的なインターフェイスの構築
カテゴリの作成
カテゴリ一覧
分類の変更
カテゴリの削除
サブカテゴリー
汎用 CRUD インターフェイス
設備管理
画像アップロード（マルチター）
ヒーロー管理
ヒーローの編集 (関連付け、複数選択、el-select、複数)
スキルエディター
記事管理
リッチ テキスト エディター (Quill)
ホーム広告管理
管理者アカウント管理 (bcrypt)
ログインページ
ログインインターフェース (jwt、jsonwebtoken)
サーバーログインの検証
クライアントルーティング制限 (beforeEach、meta)
アップロードされたファイルのログイン検証 (el-upload、ヘッダー)
3. モバイルサイト
- 「ツールスタイル」の概念とSASS（SCSS）
- スタイルのリセット
- ウェブサイトの色とフォントの定義 (色、テキスト)
- ユニバーサル フレックス レイアウト スタイル定義 (フレックス)
- 一般的に使用されるマージン定義 (マージン、パディング)
- ホームページフレームとトップメニュー
- ホームページの上部にあるカルーセル画像 (vue スワイパー)
- スプライトを使用する
- フォントアイコン（iconfont）を使用する
- カードコンポーネント（カード）
- リストカードコンポーネント (リストカード、ナビ、スワイパー)
- ホーム ニュースと情報 - データ入力 (+バックエンドのバグ修正)
- ホーム ニュースと情報 - データインターフェイス
- ホーム ニュースと情報 - インターフェイスの表示
- ホームページヒーロー一覧 - 公式サイトデータ抜粋
- ホームページヒーローリスト - データを入力
- ホームページのヒーローリスト - インターフェース表示
- ニュース詳細ページ
- ニュース詳細ページに最適
- ヒーロー詳細ページ-1-フロントエンドの準備
- ヒーロー詳細ページ-2-バックエンド編集
- ヒーロー詳細ページ-3-フロントエンドのトップ
- ヒーロー詳細ページ-4-パーフェクト
4. リリースと展開 (Alibaba Cloud)
- 本番環境用にコンパイルする
- ドメイン名とサーバーを購入する
- ドメイン名の解決
- Nginxのインストールと設定
- MongoDB データベースのインストールと構成
- git のインストールと設定 ssh キー
- Node.js は Taobao イメージをインストールして構成します
- コードを取得し、pm2 をインストールしてプロジェクトを開始します
- Nginx リバースプロキシを構成する
- ローカル データをサーバーに移行する (mongodump)
5. 上級者向け
- 無料の SSL 証明書を使用して HTTPS の安全な接続を有効にする
- Alibaba Cloud OSS クラウド ストレージを使用してアップロードされたファイルを保存する
