GitHub-mall-admin-webでのプロジェクトエクスペリエンスの第2フェーズ

アクションは心よりも優れています

データ視覚化プラットフォーム：GitHubでのプロジェクトエクスペリエンスの最初のフェーズ-VueDataV

今日eコマースのバックグラウンド管理システムをお試しください：mall-admin-web

序文

「9月中旬から12月中旬までの学習計画」を書いたとき、「最初にvuepressを実行し、完全なブログとドキュメントライブラリを作成し、次にvue-admin-beautifulに連絡してミドルオフィスとバックオフィスを実行します。最後に、DataV（データ視覚化のためのecharts、mapbox）。」

GitHubで収集されます（awesome-github-vue、awesome-vue、awesome-vuepressなど）。次に、最も重要なことは使用することです。使用の過程で、Webページの関連する知識が徐々に完成し、それが何であるか、なぜであるかがわかります。現在参照用に使用されているデモは、ブログとしてのvuepress-theme-vdoingです。参考のために使用されるgridea、静的なブログ書き込みクライアントとしてVBlog、マルチユーザーのブログの管理システムとして（springboot + springsecurity + MyBatisの+ RESTfulなインターフェース+ MySQLの+ VUE + axios + elementUI + VUE-echarts + mavonエディタ+ VUE-ルータ）vue-element-adminはバックグラウンド、vue-admin-beautifulはミドルエンドとバックエンド、mall-admin-webはeコマースバックエンド、newbee-mallはeコマースのフロントエンドとバックエンド、DataVはデータの視覚化です。

でも、エネルギーがかかりすぎるのではないかと心配して試してみませんでしたが、アクションほど心が良くなく、プロジェクトを実行するだけでも大丈夫です。

以下に、使用プロセスと経験を記録します。

記事ディレクトリ

GitHub-mall-admin-webでのプロジェクトエクスペリエンスの第2フェーズ

使用プロセス

プロジェクトの紹介

プロジェクトアドレス：mall-admin-web

使用されるテクノロジースタック：vue + elementui + vuex + vue router + axios + v-charts

技術的な選択

技術	説明	公式ウェブサイト
見る	フロントエンドフレームワーク	https://vuejs.org/
Vue-router	ルーティングフレームワーク	https://router.vuejs.org/
Vuex	グローバル状態管理フレームワーク	https://vuex.vuejs.org/
素子	フロントエンドUIフレームワーク	https://element.eleme.io/
Axios	フロントエンドHTTPフレームワーク	https://github.com/axios/axios
vチャート	Echartsに基づくチャートフレームワーク	https://v-charts.js.org/
Js-cookie	クッキー管理ツール	https://github.com/js-cookie/js-cookie
nprogress	プログレスバーコントロール	https://github.com/rstacruz/nprogress
vue-element-admin	プロジェクトの足場リファレンス	https://github.com/PanJiaChen/vue-element-admin

はじめに：mall-admin-webは、Vue + Elementに基づくeコマースバックグラウンド管理システムのフロントエンドプロジェクトです。主に、商品管理、注文管理、会員管理、プロモーション管理、運用管理、コンテンツ管理、統計レポート、財務管理、権限管理、設定およびその他の機能が含まれます。このプロジェクトは、フロントエンドとバックエンドの分離プロジェクトのフロントエンド部分であり、バックエンドプロジェクトのmallアドレスはPortalです。

ビッグガイ、それは真実で詐欺です、私はそのような明確なチュートリアルを始めさせなかったことを残念に思います。

初期化

最初にダウンロードしてください。1.8Mほど大きくはありません。

次に、vscode、yarninstallを使用してプロジェクトを開きます。

error An unexpected error occurred: "https://registry.yarnpkg.com/echarts/-/echarts-4.9.0.tgz: ESOCKETTIMEDOUT".

毎日のエラーは私の設定が原因である可能性があり、バージョンは修正されていません。

ボスの製作手順を参照してください。

オンラインインターフェイスにアクセスして、config / dev.env.jsのbase_apiの値をhttp://120.27.63.9:8080に変更する予定です。

次に、npmはdevを実行します。

ビルド手順

ノードをダウンロードしてインストールします：https：//nodejs.org/dist/v12.14.0/node-v12.14.0-x64.msi;

このプロジェクトは、フロントエンドとバックエンドの分離プロジェクトです。ローカルアクセスインターフェイスにアクセスするには、バックエンド環境を構築する必要があります。構築については、バックエンドプロジェクトポータルを参照してください。

オンラインインターフェイスにアクセスするためにバックグラウンド環境を構築する必要はありません。config/dev.env.jsファイル内のファイルBASE_APIをhttp://120.27.63.9:8080に変更するだけです。

mall-swarmマイクロサービスバックエンドに接続している場合は、ゲートウェイを介してすべてのインターフェイスにアクセスする必要があり、config/dev.env.jsファイルBASE_APIをhttp：// localhost：8201 / mall-adminに変更する必要があります。

ソースコードをローカルにクローンし、IDEAで開いて、コンパイルを完了します。

IDEAコマンドラインでコマンドを実行します。npminstall、関連する依存関係をダウンロードします。

IDEAコマンドラインでコマンドを実行します。npmrundev、プロジェクトを実行します。

アドレス：http：// localhost：8090にアクセスして、バックグラウンド管理システムページを開きます。

具体的な展開プロセスについては、以下を参照してください。モールフロントエンドプロジェクトのインストールと展開

注意：npmコマンドを実行できない場合は、パス変数を追加するなど、npmの環境変数を構成する必要があります。C：\ Users \ zhenghong \ AppData \ Roaming \ npm;

注意：npm installが依存関係を正常にダウンロードできない場合は、Jenkinsを使用したフロントエンドアプリケーションのワンクリックパッケージ展開を参照してください。これで6です。真ん中遇到的坑。

プロジェクト構造の組み合わせ

まずpackage.jsonを見てください。

 "dependencies": {
    
    
    "axios": "^0.18.0",
    "echarts": "^4.2.0-rc.2",
    "element-ui": "^2.3.7",
    "js-cookie": "^2.2.0",
    "normalize.css": "^8.0.0",
    "nprogress": "^0.2.0",
    "v-charts": "^1.19.0",
    "v-distpicker": "^1.0.20",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },

次に、main.jsを見てください

import Vue from 'vue'

import 'normalize.css/normalize.css'// A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
import VCharts from 'v-charts'

import '@/styles/index.scss' // global css

import App from './App'
import router from './router'
import store from './store'

import '@/icons' // icon
import '@/permission' // permission control

router /index.jsとstore / index.jsをもう一度見てください

かなり長いです。

もう一度景色を見てください。ホーム、レイアウト、ログイン、oms、pms、sms、ums、および404コンポーネントの7つのフォルダーがあります。

大物のチュートリアルは本当に明確で、将来オープンソースプロジェクトを取得するときにも同じことをします。

src-ソースディレクトリ├──api-axiosネットワークリクエスト定義
├──アセット-静止画リソースファイル
├──コンポーネント-汎用コンポーネントパッケージ
├──アイコン-svgベクターイメージファイル
├──ルーター-vue-routerルーティング構成
├ ──ストア–
vuexの状態管理├──スタイル–グローバルcssスタイル
├──utils–
ツール└──ビュー–フロントエンドページ
├──ホーム–ホームページ
├──レイアウト–一般的なページ読み込みフレームワーク
├──ログイン–ログインページ
├──oms–注文モジュールページ
├──pms–商品モジュールページ└──sms–
マーケティングモジュールページ

レンダリング効果

最初のステップで立ち往生し、失敗しました。長時間初期化を待ちました。

次に、オンラインプロジェクトのスクリーンショットを使用します。

http://www.macrozheng.com/admin/

パスワードは次のとおりです。macro123

画像-20201003095023935

経験

フロントエンド開発とバックエンド開発を分離するこのプロジェクトは、参照に非常に適しています。フロントエンドはpostmanを使用して、インターフェイスシミュレーション用のモックを送信します。バックエンドはswagger2をインターフェースとして使用します。将来的には、バックエンドはバックエンドのスタッフに引き渡され、フロントエンドの部分を担当し、データまたは開発されたapiインターフェイスをシミュレートするために郵便配達員からデータが送信されます。

失敗しましたが、将来フロントエンドとバックエンドの開発を使用する必要がある場合は、このプロジェクトから学ぶことができます。

つづく

vue-antd-admin：使用されるテクノロジースタックvue + antdesign

vue-admin-beautiful：使用されるテクノロジースタックvue + elementui

spring-boot-online-exam：使用されるテクノロジースタック：springboot + jpa + swagger2 + jwt検証; vue + antdesign

最初の2つを試すことができます。最後のリファレンスですが、アイデアを持ってバックエンドプロジェクトを開く必要があるため、ここでは開始しません。

更新アドレス：GitHub

その他のコンテンツについては、注意してください：CSDN、GitHub、Nuggets