このプロジェクトは、Spring-Restバックエンドで使用されているVueの管理デスクに基づいたフロントエンドプロジェクトです。主に権限管理機能を最適化します。オンラインデモンストレーションを入力するには、ここをクリックしてください。
メニューの権限は、ルーティング構成に応じて自動的に生成され、管理者はバックグラウンドデータベースに同期されます。
同期メニューの許可に基づいてボタン権限を追加、変更、削除できます。
ボタンのアクセス許可に加えて、メニューの権限とインターフェイス権限のメタデータは、データベースのレコードがすべて空であっても自動的に生成されます。 ;
ボタンアクセス許可を追加すると、プレフィックスが自動的に生成され、フォーマットが混oticとしないようにするために必要な部品のみが生成されます。
母体の権限と関連するインターフェイス許可のボタン許可の関数を増やします。
ページ要素を識別するときは、列挙定数を使用して、右に制限された文字列を直接使用してメンテナンスを容易にしないようにします。
背景インターフェイスカテゴリのレベルと一致するAPIインターフェイス呼び出しクラスのレベルを定義し、冗長性を排除し、コードの再利用を改善します。
コンポーネントのel-scrollbar
のバグを修復する場合:ブラウザがある程度縮小されると、元のオリジナルのローリングバーが露出するほど、現象が明らかになります。
node.jsバージョンはV112を使用するために推奨されますが、他のバージョンは問題ないようです。
LinuxとMacOSでは、node.jsバージョン管理にNVMを使用することをお勧めしますが、代替NVM-Windowsを使用できます。
Windows:run)の下の例(git bash)としてnvm-windowsを取ります::
# 设置 nvm 下载 node 和 npm 的镜像地址(直接访问外网太慢)
$ nvm node_mirror https://npm.taobao.org/mirrors/node/
$ nvm npm_mirror https://npm.taobao.org/mirrors/npm/
# 设置 npm 下载包的镜像地址
$ npm config set registry https://registry.npm.taobao.org
# 查看可用的 Node.js版本
$ nvm list available
# 挑选一个最新的 v12 的 LTS 版本进行安装
$ nvm install 12.20.1
$ nvm use 12.20.1
# 查看已经安装的所有 Node.js 版本
$ nvm list
# 切换希望使用的版本
$ nvm use < nodeVersion >
# 查看当前的 Node.js 版本 和 npm 版本
$ node -v
$ npm -v
注:管理プラットフォームのフロントエンドを実行する前に、最初にサービスエンドのバックグラウンドを実行するのが最善です。
$ git clone https://github.com/bianyun1981/spring-rest-admin.git
$ cd spring-rest-admin
$ npm install
注: npm install
コマンドを実行すると、エラー情報がnpm ERR! Failed at the [email protected] install script.
場合、次のコマンドnpm install
実行できます。
$ npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
NPMインストールステージに他の障害がある場合、それは一部のパッケージをTaobao Mirror Stationからダウンロードできず、外部ネットワークアドレスのダウンロードにアクセスできない人に直接アクセスする必要があるためですが、ダウンロードに失敗した場合は、試すことができます。再テスト後にエージェント構成を追加します。
$ npm config set proxy http://username:password@host:port
$ npm config set https-proxy http://username:password@host:port
npm install
が正常に実行された場合、エラーはありません。実行を続けることができます
$ npm run serve
しばらくすると、ブラウザが自動的に開かれ、アドレスhttp://localhost:9527/login
にジャンプします。
注:ログインする前に、サーバーの背景を開始する必要があります。
Vue-Element-Adminは、マルチ環境構成をサポートし.local
環境構成ファイル名形式はgit
によってバージョンライブラリにアップロードされません.env.[环境名]
注:開発環境構成.env.development
および.env.development.local
に加えて、環境設定ENV
NODE_ENV = production
環境設定ファイルの一部に対応する必要があります。 .env
と.local
環境に加えて、インターフェイスコールアドレスVUE_APP_BASE_API
も変更する必要があります。
注:構成ファイルの他の環境変数を定義する場合は、 VUE_APP_
から始めて、コードのprocess.env.VUE_APP_xxxx
を使用してコードでそれを取得する必要があります。
注:梱包前に、 npm install
とnpm run serve
両方が正常に実装できることを確認してください。
パッキングコマンドは次のとおりです。NPM npm run build -- --mode <环境名>
、上記の図は例です。パッキングコマンドは次のとおりです。
$ npm run build -- --mode vm-centos7
コマンドが正常に実行された後、パッケージ結果ファイルはDISTディレクトリにあります。
注:コード圧縮プラグインcompression-webpack-plugin
以前のバージョンV6のみを使用でき、最新のV7バージョンは使用できません。そうしないと、エラーを報告するようです。
さらに、このプロジェクトのルーティングモードは、このモードで実行する必要がある場合、対応する構成を実行する必要があります( history.pushState
のルーティングを参照)。同時に、GZIP関連の構成を追加します(この構成の行のみが必要です):
location / {
gzip_static on ;
try_files $uri $uri / /index.html;
}