Vue+SpringBoot でブログ管理プラットフォームを実装する方法-jsチュートリアル-php.cn

Vue+SpringBoot でブログ管理プラットフォームを実装する方法

亚连

リリース： 2018-06-15 11:24:50

オリジナル

3852 人が閲覧しました

V Tribe は、マルチユーザーのブログ管理プラットフォームです。この記事では主に V Tribe ブログ管理プラットフォームの Vue+SpringBoot 開発について紹介します。必要な友達は参考にしてください

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

デモアドレス: http://45.77.146.32:8081/index.html

プロジェクトアドレス: https://github.com/lenve/VBlog

ログインページ

記事一覧

記事の公開

ユーザー管理

列管理

データ統計

テクノロジースタック

バックエンドテクノロジースタック

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

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 にあります

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

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

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

ログイン後にコピー

データを SpringBoot に転送するように vueblog プロジェクトでポート転送を設定したので、プロジェクトの開始後、ブラウザーに次のように入力します。 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

上記は、将来役立つことを願っています。

vue vuex vue-rouert 権限ルーティング (詳細なチュートリアル)

Angular で orderBy 並べ替えとファジークエリを実装する方法

Angular で機密テキストプロンプトを実装する方法

方法Angularで非表示表示を実装するには

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