wms client

序文

このプロジェクトの出発点は、友人の実際の在庫管理ニーズをカスタマイズすることであり、私にとっては、フロントエンド開発のエンジニアリングをより良く実践するためのVue2の最初の実践プロジェクトでもあります。

また、このプロジェクトは実際のニーズに基づいてカスタマイズされているため、このプロジェクトはバックエンド プロジェクトにも該当し (プロジェクト ポータルは以下にリストされます)、これも私が個人的に完成させたバックエンド プロジェクトに基づいて構築されています。 NodeのExpressフレームワーク上で動作し、データベースはMysql使用します。このフロントエンド プロジェクトのみを学習する人のために、このプロジェクトはデフォルトでリモート バックエンド サーバーを使用し、インターフェイス ドキュメント ポータルは以下に配置されます (ApiFox のオンライン ドキュメントに基づく)。ローカル バックエンド サービスの使用を希望するパートナーについては、バックエンド プロジェクトを参照してください。

このプロジェクトでは主にVue 、 Vuex 、およびVue-routerファミリ バケットを使用します。UI はElement-Uiを使用し、ビルド ツールはVue-cliを使用します。もちろん、webpack に基づいて構築されたプロジェクトもあります。詳細を知りたい場合は、 Webpackブランチに切り替えて、 WebpackブランチのREADME参照してください。

このプロジェクトは長期にわたって維持されます。質問がある場合は、問題を見つけて適切な解決策がある場合は、直接問題を提起してください。PR を歓迎します。

PS: リモートサーバーはテストのみを提供し、バックエンドはあまり多くの制限を行わず、フィルタリングやチェックを行います。しかし、サーバーがクラッシュし、手動で再起動する必要があります。

?ポータル

• プロジェクトのオンライン デモンストレーション アドレスを強く押してください (デフォルトのアカウント パスワードは root、root、ドメイン名は再登録中、IP アクセスは少しいっぱいで、遅延読み込みは非常に遅くなります~)

• プロジェクトはリモート インターフェイスのドキュメント アドレスを提供します。クリックしてください。

• バックエンド プロジェクトのアドレスが一致していますか?

?技術スタック

テクノロジー	説明する	バージョン	公式ウェブサイト
ヴュー	プログレッシブ JavaScript フレームワーク		?https://vuejs.org/
Vueルーター	ルート管理		?https://router.vuejs.org/
ビュークス	グローバル状態管理		?https://vuex.vuejs.org/
Element-Ui	UIフレームワーク		?https://element.eleme.io
アクシオス	Promiseベースのネットワークリクエストライブラリ		?https://www.axios-http.cn/
Eチャート	ビジュアルチャートライブラリ		?https://echarts.apache.org/
少ない	下位互換性のある CSS 拡張言語		?https://less.bootcss.com/

開発環境：Windows、Node(v16.18.0)、Npm(v8.19.2)

?機能紹介

技術的な機能

• ✅ルートの遅延読み込み
• ✅パーミッションコントロール（トークン）
• ✅データ可視化表示
• ✅Axiosによるリクエスト、レスポンスの傍受制御とリクエストの一元管理
• ✅Vuexをベースに再利用可能で複雑なステータスデータを一元管理
• ✅バグクラム、コンポーネントキャッシュ、グローバルレコードキャッシュ
• ユーザーの権限に応じてルートとナビゲーション バーを動的に生成します
• レスポンシブレイアウト
• ✅パッケージの最適化 (webpack ブランチが提供されます)
• つづく...

ビジネス機能

• データの視覚化

  • ✅基本情報概要
  • ✅在庫カテゴリー分析
  • ✅売上、コスト、利益の統計
  • ✅ 完全な注文統計

• 倉庫

  • ✅在庫に追加
  • ✅保管記録状況のお問い合わせ

• 倉庫から出た

  • ✅アウトバウンドライブラリの追加
  • ✅配達記録条件の問い合わせ
  • ✅配送状況の変更

• 顧客管理

  • ✅顧客を追加
  • ✅顧客の編集

• ユーザー管理

  • 権限制御
  • 情報変更

プロジェクトを実行する

1️⃣プロジェクトファイルをプルする

git clone https://github.com/Hyrmm/wms-client

2️⃣プロジェクトディレクトリに切り替えます

cd wms-クライアント

3️⃣依存関係パッケージをインストールする

npmインストール

4️⃣プロジェクトを実行する

• リモートのオンライン バックエンド サービス インターフェイスを使用する

  npm 実行サーブ

• ローカル バックエンド サービス インターフェイスを使用するには、バックエンド プロジェクト ポータルと連携する必要があります

  npm ローカルで実行

?ビジネスショー

プロジェクトの構造

 ├── src
│   ├── App.vue
│   ├── api
│   ├── assets
│   ├── components
│   │   ├── AgentFail
│   │   ├── Breadcrumb
│   │   ├── PagiNation
│   │   ├── TableFilter
│   │   └── ViewFilter
│   ├── main.js
│   ├── mixin
│   ├── pages
│   │   ├── home
│   │   └── login
│   ├── router
│   ├── store
│   ├── utils
│   └── view
│       ├── Client
│       │   ├── Add
│       │   ├── Modify
│       │   └── index.vue
│       ├── Setting
│       ├── Store
│       ├── StoreIn
│       │   ├── Add
│       │   ├── Recording
│       │   └── index.vue
│       ├── StoreOut
│       │   ├── Add
│       │   ├── Modify
│       │   ├── Recording
│       │   └── index.vue
│       └── index
│       │   ├── Order.vue
│       │   ├── Recording
│       │   └── index.vue
│       ├── StoreOut
│       │   ├── Add
│       │   ├── Modify
│       │   ├── Recording
│       │   └── index.vue
│       └── index
│           ├── Order.vue
│           ├── Sales.vue
│           ├── Store.vue
│           └── index.vue
├── jsconfig.json
├── package-lock.json
├── package.json