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

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

関連する推奨事項:

PHP で簡単なブログを作成する方法

サンプルの詳細な説明 Angular は、類似したブログのコメントの再帰表示を実装し、データを取得します返信コメントの数

Yii2 フレームワークを使用した完全なブログ システムの構築に関するリソースの共有

以上がV族ブログ管理プラットフォームVue+SpringBoot開発の詳細例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。