V族ブログ管理プラットフォームVue+SpringBoot開発の詳細例-jsチュートリアル-php.cn

V族ブログ管理プラットフォームVue+SpringBoot開発の詳細例

小云云

リリース： 2017-12-27 14:58:28

オリジナル

7598 人が閲覧しました

V Tribe は、マルチユーザーのブログ管理プラットフォームです。この記事では主に V tribe ブログ管理プラットフォームの Vue+SpringBoot 開発について紹介しますので、困っている方の参考になれば幸いです。

V Tribe は、Vue+SpringBoot を使用して開発されたマルチユーザーブログ管理プラットフォームです。

ログインページ

記事一覧

記事を公開

ユーザー管理

コラム管理

統計

テクノロジースタック

バックエンド技術スタック

バックエンドは主に以下を使用します:

1.SpringBoot

2.SpringSecurity

3.MyBatis

4. 一部のインターフェースはRestfulスタイルに従います

5.MySQL

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

フロントエンドは主に以下を使用します:

1.Vue

2.axios

3.ElementUI

4.vue-echarts

5.mavon-editor

6.vue-router

他にもあります些細なことなので、ここではすべてのテクノロジーを列挙するつもりはありません。

すぐに実行します

1. このプロジェクトのクローンをローカル

git@github.com:lenve/VBlog.git

2. blogserver プロジェクトのリソースディレクトリで vueblog.sql ファイルを見つけます。 MySQL データベースを実行します

3. データベース設定は SpringBoot プロジェクトの application.properties にあります

この時点で、サーバーは正常に起動しました。この時点で、アドレスバーに http://localhost:8081/index.html と入力するだけでプロジェクトにアクセスできます。二次開発を行う場合は、手順 5 と 6 に進んでください。

5. vueblog ディレクトリに入り、コンソールで次のコマンドを入力します:

# 安装依赖
npm install
# 在 localhost:8080 启动项目
npm run dev

ログイン後にコピー

vueblog プロジェクトでデータを SpringBoot に転送するようにポート転送を設定したので、プロジェクトの開始後、http を入力します。 //localhost:8080 をサーバーに接続してフロントエンドプロジェクトにアクセスします。すべてのリクエストはポート転送を通じて SpringBoot にデータを転送します (この時点で SpringBoot プロジェクトを閉じないように注意してください)。

6. 最後に、WebStorm などのツールを使用して vueblog プロジェクトを開いて開発を続行できます。開発が完了し、プロジェクトがオンラインになる直前に、vueblog ディレクトリに入り、次のコマンドを実行します。

npm run build

ログイン後にコピー

コマンドが正常に実行されたら、vueblog ディレクトリに dist フォルダーを生成し、そのフォルダー内の static とindex.html の 2 つのファイルを SpringBoot プロジェクトの resource/static/ ディレクトリにコピーしてアクセスします。ステップ 4 と同様に直接実行します。

ステップ 5 では、全員が NodeJS や NPM などの使用経験を持っている必要があります。慣れていない友人は、まず自分で検索して学習することができます。Vue 公式チュートリアルをお勧めします。

プロジェクトの依存関係

1. vue-echarts

2. mavonEditor