ホーム>PHPソースコード>その他のカテゴリー
ダウンロード

要素バックエンド管理システム

フロントエンドとバックエンドの分離開発モデルを使用した、Vue ベースの電子商取引バックエンド管理システム。プロジェクトで使用されるフロントエンド テクノロジー スタックには、Vue、vue-router、Element-UI、Axios、Echarts などが含まれます。

テクノロジーの選択

フロントエンド技術スタック:

  • ヴュー
  • Vueルーター
  • 要素UI
  • アクシオス
  • Eチャート

ビジネス機能

機能に関する技術的なポイント

1. ユーザーログイン

  • ユーザーが正常にログインすると、クライアントはsessionStorageとtokenを通じてログイン ステータスを記憶し、維持します。

  • ルート ナビゲーション ガードrouter.beforeEachを通じてユーザーのアクセス許可を制御します。ログインしていないユーザーが、URL を介してログイン ページ以外のページにアクセスしようとするのを防ぎます。

2.ホームページのレイアウト

  • レイアウト
    • Element-UIコンポーネント ライブラリを使用して、ホームページのページ レイアウトを実装します。
    • <el-menu>を使用してサイド ナビゲーション バーを実装し、activePath 属性をsessionStorageに追加してナビゲーション バーを強調表示したままにします。
    • サイド ナビゲーション バーのアイコンは、 Iconfont Alibaba ベクター アイコン ライブラリを使用します。
  • データリクエスト
    • Axios経由でインターフェイス データをリクエストし、トークンを axios リクエスト インターセプターに追加して、データを取得する権限を確保します。
    • NProgress進行状況バーを使用して、ページ読み込み (データ要求) の進行状況を表示します。

3. ユーザー管理 - ユーザーリスト

  • <el-form>を使用して、ユーザー フォームを追加し、フォーム検証ルールをカスタマイズし、送信前のフォームのリセットと事前検証を実装します。

  • slot-scope使用してコンポーネントデータを取得し、レンダリングテンプレートをカスタマイズします。

4.権限管理

  • 役割リスト

    • 3 層のv-forループを使用して、ロールの第 1、第 2、および第 3 レベルの権限をそれぞれレンダリングします。

    • <el-tree>ツリー コントロールを使用して、ロール割り当て可能な権限のリストを表示します。

  • 権限リスト

5.商品管理

  • 製品一覧

    • グローバル フィルターVue.filterを使用して、Date オブジェクトの表示形式をカスタマイズします。

  • 製品を追加

    • <el-steps>ステップ バー コンポーネントを使用して、ユーザーがプロセスに従って製品追加フォームに入力するようにガイドします。

    • <el-upload>コンポーネントを使用して、ユーザーが製品画像をアップロードできるようにします。

    • vue-quill-editorリッチ テキスト エディターを使用して、ユーザーが製品コンテンツを入力できるようにします。

    • <el-form>を使用して、製品追加フォームを完成させ、フォーム検証ルールをカスタマイズし、フォーム送信前の事前検証を実装します。

  • 分類パラメータ

  • 製品分類

    • vue-table-with-tree-gridツリー テーブル コンポーネントを使用して、第 1、第 2、および第 3 レベルの製品分類を表示します。

6. 注文管理・注文リスト

  • <el-timeline>タイムライン コンポーネントを使用して、注文の物流情報を表示します。

7. データ統計 - データレポート

  • Echarts使用してユーザー ソース データ レポートを表示します。

プロジェクトの依存関係

依存関係の実行
  • axios => リクエストを送信
  • echarts => チャート
  • element-ui => Element-UI コンポーネント ライブラリ
  • lodash => ディープコピーとオブジェクトのマージ
  • nprogress => プログレスバー
  • vue-quill-editor => リッチ テキスト エディター
  • vue-table-with-tree-grid => ツリーテーブル
開発の依存関係
  • babel => ES6 構文変換
  • eslint/babel-eslint => 構文チェック
  • sass/sass-loader => sass 構文
  • babel-plugin-transform-remove-console => 本番環境からコンソールを削除
  • @babel/plugin-syntax-dynamic-import => ルートの遅延読み込み

プロジェクトの最適化

1. 梱包レポートの生成

Vue UI 視覚化パネルを通じてパッケージ化レポートを表示し、大きすぎるファイルを最適化/圧縮する方法を分析します。

2.Webpackの設定

  • chainWebpackを通じて開発モードとリリース モードに異なるパッケージング エントリ ファイルを指定する

    1. 開発モードエントリファイル src/main-dev.js
    2. リリースモードエントリーファイル src/main-prod.js

  • 運用環境では、大きすぎるいくつかのサードパーティ ライブラリがCDN

    デフォルトでは、インポート構文を通じてインポートされたサードパーティの依存関係パッケージは、最終的にパッケージ化されて同じファイルにマージされるため、パッケージ化が成功した後の単一ファイルのサイズが大きすぎるという問題が発生します。

    上記の問題を解決するには、Webpack のexternalsノードを介して外部 CDN リソースをロードする必要がある依存関係を構成できます。外部で宣言されたサードパーティの依存関係パッケージはパッケージ化されません。

  • プラグインを使用してさまざまな環境のホームページ コンテンツをカスタマイズします (たとえば、インポートを使用して開発モードで依存パッケージをインポートし、CDN を使用してリリース モードでインポートします) 

     // Vue.config.js
config . plugin ( 'html' ) . tap ( args => {
    args [ 0 ] . isProd = true / false
    return args
} ) 
     <!-- index.html -->
< title > < %= htmlWebpackPlugin.options.isProd ? '' : 'dev-' % > Element后台管理系统</ title >
< % if(htmlWebpackPlugin.options.isProd) { % >
    此处为CDN引入的第三方资源
< % } % >
3. ルートの遅延読み込み

プロジェクトをパッケージ化する場合、js パッケージが大きすぎるとページの読み込み速度に影響します。

@babel/plugin-syntax-dynamic-importプラグインを使用し、オンデマンドでロードされるようにルーティングを変更します。対応するコンポーネントは、ルートにアクセスした場合にのみロードされます。

プロジェクトのセットアップ

 npm install

開発用のコンパイルとホットリロード

 npm run serve

実稼働用にコンパイルおよび縮小します

 npm run build

ファイルのリントと修正

 npm run lint
拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて