w blog

wブログ

説明する

バックエンドで Spring Boot 2.x、フロントエンドで nuxtJs、バックエンドで vue を使用する個人のブログ

導入

1. リンク

   • ジーティーリンク:
     • API: https://gitee.com/windsnowli/w-blog-api
     • フロントデスク： https://gitee.com/windsnowli/vue-ssr-blog ://gitee.com/windsnowli/vue-ssr-blog
     • バックエンド: https://gitee.com/windsnowli/vue-admin-blog
   • GitHub リンク:
     • API: https://github.com/WindSnowLi/w-blog-api
     • フロントデスク: https://github.com/WindSnowLi/vue-ssr-blog
     • バックエンド: https://github.com/WindSnowLi/vue-admin-blog

2. 単純な個人ブログ プロジェクトは、前台、后台、 apiの 3 つの部分に分かれています。

   • api: バックエンドはSpringBootに基づいています。主にMybatis 、 Mybatis-Redis 、 Redis 、 fastjson 、 DruidDataSource 、 Lombok 、 java-jwt 、 aliyun-sdk-oss 、 knife4jなどに依存します。データベースはMySQL8.0+使用します。

   • フロントデスク: フロントデスクの主なスタイルは、元はどこから来たのかはわかりませんが、インターネット上のBizBlogテンプレートから来ており、オリジナルに基づいてnuxtJsプロジェクトに書き直されました。

   • バックエンド: バックエンド UI で使用される vue-element-admin は、基本的には直接使用されます。自分でカスタマイズしたい場合は、強度上それができません。

3. 例: 緑色の食品 - Cai Dog

ローカルで開始

プロジェクトごとに開始

api: フロントエンドとバックエンドによって要求された API は同じプロジェクトを使用します

1. git clone https://gitee.com/WindSnowLi/w-blog-api.gitまたはgit clone https://github.com/WindSnowLi/w-blog-api.gitでプロジェクトをローカルにクローン作成します

2. mvn clean install dependency:treeインストールの依存関係

3. データベースを作成し、 UTF8エンコード ( utf8mb4 ) に設定します。

4. 環境設定を変更する

   • 開発環境application-dev.ymlおよび本番環境application-prod.ymlのデータベース構成情報を変更します。
   • redis.properties内のRedis関連情報を変更します。
   • 注: knife4jは開発環境でのみアクティブ化されます。

5. mvn clean package -Dmaven.test.skip=trueテストをスキップし、 jarパッケージを生成します

6. java -jar 生成的包名.jar開発構成環境の実行に使用されます。データベースは最初の実行時に自動的に初期化されます (実稼働環境では、ロードされる構成ファイル--spring.profiles.active="prod" )

7. apiドキュメントを参照するには、 http://127.0.0.1:9000/doc.htmlにアクセスしてください。

8. 依存関係を自動的に処理し、操作を容易にするために、IDEA を使用してプロジェクト フォルダーを開くことをお勧めします。

フロントデスク

1. git clone https://gitee.com/WindSnowLi/vue-ssr-blog.gitまたはgit clone https://github.com/WindSnowLi/vue-ssr-blog.gitプロジェクトをローカルにクローンします
2. npm installインストールの依存関係
3. config/sitemap.xmlファイル内のhostアドレスを変更して、アクセス マップを生成できます。
4. nuxt.config.jsのポート番号は変更可能です
5. package.jsonファイル内のscriptのBASE_URL変更して、バックエンドapiアドレスを指定できます。
6. npm run build
7. npm startローカルで実行

バックステージ

1. git clone https://gitee.com/WindSnowLi/vue-admin-blog.gitまたはgit clone https://github.com/WindSnowLi/vue-admin-blog.gitプロジェクトをローカルにクローンします
2. npm installインストールの依存関係
3. npm run devシミュレートされたデータ プレビュー インターフェイスを使用します
4. .env.productionファイル内のVUE_APP_BASE_APIアドレスをバックエンドapiのアドレスに変更します。
5. npm run build:prodコンパイル
6. distフォルダー内のコンパイルされたファイルは、アクセスのためにhttpサーバー ( npm使用してhttp-serverをインストールできます) の下に配置できます。

Docker統合が開始されました

1. git clone https://gitee.com/WindSnowLi/w-blog.gitまたはgit clone https://github.com/WindSnowLi/w-blog.git w-blogリポジトリをローカルにクローンします
2. cd w-blogて、 w-blogルート ディレクトリに切り替えます。
3. sh ./step-1-clone.sh w-blog-api 、 vue-ssr-blog 、 vue-admin-blogリポジトリをルート ディレクトリにクローンします
4. 各プロジェクトに関連する構成を変更する
   1. w-blog-apiプロジェクト
      1. 開発環境application-dev.ymlおよび本番環境application-prod.ymlのデータベース構成情報を変更します。
      2. redis.properties内のRedis関連情報を変更します。
      3. 注: knife4jは開発環境でのみアクティブ化されます。
      4. redis可自行安装、 docker-compose.yml関連する設定を指定することもできます
   2. vue-ssr-blogプロジェクト
      1. config/sitemap.xmlファイル内のhostアドレスを変更して、アクセス マップを生成できます。
      2. nuxt.config.jsのポート番号は変更可能です
      3. package.jsonファイル内のscriptのBASE_URL変更して、バックエンドapiアドレスを指定できます。
   3. vue-admin-blogプロジェクト
      1. .env.productionファイル内のVUE_APP_BASE_APIアドレスをバックエンドapiのアドレスに変更します。
5. sh ./step-2-build.sh依存関係をインストールし、関連ファイルを生成します
6. docker-compose.ymlの関連するポート マッピングとフォルダー マッピングを変更します。
7. docker-compose up -d docker镜像を生成して実行します

インターフェース表示

フロントデスク

バックステージ

ライセンス

マサチューセッツ工科大学

Copyright (c) 2021 WindSnowLi