Blog - フロントエンドとバックエンドのブログは、SpringBoot + Vueの開発に基づいて分離されており、権限管理、ElasticSearch全文検索、QQのサポート、Weiboサードパーティのログイン、オンラインチャット、公開などの機能にSpringSecurityを使用しています。

(基于SpringBoot + Vue 开发的前后端分离博客,采用SpringSecurity进行权限管理,ElasticSearch全文搜索,支持QQ、微博第三方登录、在线聊天、发布说说等功能。)

Created at: 2020-07-11 20:47:18
Language: Java
License: Apache-2.0

ブログ紹介

FengYuの個人ブログ

Springboot+Vue開発に基づくフロントエンドとバックエンドの分離ブログ

オンラインアドレス|ディレクトリ構造|プロジェクトの機能|テクノロジーの紹介|実行環境|開発環境|プロジェクトのスクリーンショット|クイックスタート|メモ|プロジェクトの概要|コミュニケーショングループ

オンラインアドレス

プロジェクトリンク: www.talkxj.com

背景リンク: admin.talkxj.com

テストアカウント:test@qq.com、パスワード:1234567、バックグラウンドでログインして表示できます。

Githubアドレス: https ://github.com/X1192176811/blog

Giteeアドレス: https ://gitee.com/feng_meiyu/blog

オンラインインターフェイスのドキュメントアドレス: https ://www.talkxj.com/api/doc.html

あなたの星は私が頑張る原動力です。あなたのサポートに感謝します。一緒にプロジェクトを改善するためにprを提出することを歓迎します。

ディレクトリ構造

フロントエンドプロジェクトはblog-vueの下にあり、blogがフォアグラウンド、adminがバックグラウンドです。

バックエンドプロジェクトはblog-springbootの下にあります。

SQLファイルはルートディレクトリのblog-mysql8.sqlにあり、MYSQL8以降が必要です。

プロジェクトをローカルに直接インポートし、バックエンド構成ファイルのデータベースおよびその他の接続情報を変更し、プロジェクトで使用されるAlibabaCloud機能とサードパーティの許可されたログインをアクティブ化できます。

プロジェクトをローカルで複製する場合は、電子メールアカウント:admin@qq.com、パスワード:1234567を使用してログインするか、自分のアカウントを登録して管理者の役割に変更することができます。

ローカルアクセスインターフェイスのドキュメントアドレス:http ://127.0.0.1:8080 / doc.html

ps:最初にバックエンドプロジェクトを実行してから、フロントエンドプロジェクトを開始してください。フロントエンドプロジェクトの構成は、バックエンドによって動的に読み込まれます。

blog-springboot
├── annotation    --  自定义注解
├── aspect        --  aop模块
├── config        --  配置模块
├── constant      --  常量模块
├── consumer      --  MQ消费者模块
├── controller    --  控制器模块
├── dao           --  框架核心模块
├── dto           --  dto模块
├── enums         --  枚举模块
├── exception     --  自定义异常模块
├── handler       --  处理器模块(扩展Security过滤器,自定义Security提示信息等)
├── service       --  服务模块
├── strategy      --  策略模块(用于扩展第三方登录,搜索模式,上传文件模式等策略)
├── util          --  工具类模块
└── vo            --  vo模块

プロジェクトの特徴

  • フロントは美しくシンプルでレスポンシブな体験ができる「Hexo」の「Butterfly」デザインを参考にしています。
  • 背景は「element-admin」のデザインを参照し、サイドバー、履歴タブ、およびブレッドクラムが自動的に生成されます。
  • マークダウンエディタを使用すると、書き込み方法は簡単です。
  • コメントは式入力応答などをサポートします。スタイルについてはValineを参照してください。
  • 曲のオンライン検索をサポートする音楽プレーヤーを追加します。
  • フロントエンドとバックエンドは、現在のトレンドに適応するために別々に展開されます。
  • 登録コストを削減するためのサードパーティのログインへのアクセス。
  • 公開と会話をサポートし、いつでも興味深いストーリーを共有できます。
  • メッセージは、よりクールな弾丸カーテンウォールを採用しています。
  • コードの強調表示とコピー、画像プレビュー、ダークモード、その他の機能をサポートして、ユーザーエクスペリエンスを向上させます。
  • 検索記事は単語のセグメンテーションをサポートし、応答速度は速いです。
  • ユーザーエクスペリエンスを最適化するために、記事カタログ、推奨記事、その他の機能を追加しました。
  • 引き出し、音声入力、未読数などの機能をサポートするオンラインチャットルームを追加しました。
  • ログ管理を実装するためのaopアノテーションが追加されました。
  • 動的なアクセス許可の変更をサポートし、RBACモデルを採用し、フロントエンドメニューとバックグラウンドのアクセス許可をリアルタイムで更新します。
  • 背景管理は、背景画像、ブログ構成、その他の情報の変更をサポートし、操作が簡単で、フォトアルバムのアップロードをサポートします。
  • このコードは、複数の検索モード(ElasticsearchまたはMYSQL)をサポートし、複数のアップロードモード(OSSまたはローカル)をサポートし、構成をサポートします。
  • コードはAlibabaの開発仕様に準拠しており、開発者が学ぶのに役立ちます。

テクノロジーの紹介

フロントエンド: vue + vuex + vue-router + axios + vuetify + element + echarts

バックエンド: SpringBoot + nginx + docker + SpringSecurity + Swagger2 + MyBatisPlus + Mysql + Redis + elasticsearch + RabbitMQ + MaxWell + Websocket

その他: QQへのアクセス、Weiboでのサードパーティのログイン、Tencent Cloudヒューマンマシン認証へのアクセス、WebSocket

動作環境

サーバー: Tencent Cloud 2 Core 4G CentOS7.6

CDN: Aliyunサイト全体の加速

オブジェクトストレージ: Alibaba Cloud OSS

このセットの応答速度は非常に速く、応答時間は100ms未満です。

最小構成: 1コア2Gサーバー(ElasticSearchを閉じる)

開発環境

開発ツール 説明する
考え Java開発ツールIDE
VSCode Vue開発ツールIDE
Navicat MySQLリモート接続ツール
別のRedisデスクトップマネージャー Redisリモート接続ツール
Xシェル Linuxリモート接続ツール
Xftp Linuxファイルアップロードツール
開発環境 バージョン
JDK 1.8
MySQL 8.0.20
Redis 6.0.5
Elasticsearch 7.9.2
RabbitMQ 3.8.5

プロジェクトのスクリーンショット

QQスクリーンショット20210320171133.png

QQスクリーンショット202103202355191.jpg

QQスクリーンショット20210320171338.png

QQスクリーンショット20210320171401.png

クイックスタート

プロジェクト環境のインストール

詳細については、Dockerのインストールとランタイム環境の記事を参照してください。

プロジェクト構成

詳細については、プロジェクト構成チュートリアルの記事を参照してください

Dockerデプロイメントプロジェクト

詳細については、プロジェクト展開チュートリアルの記事を参照してください。

予防

  • プロジェクトをプルダウンして実行した後、バックグラウンド管理ページのWebサイト構成セクションでブログ関連情報を変更できます。
  • 電子メール構成とサードパーティ認証構成は、自分で適用する必要があります。
  • ElasticSearchは、最初に独自のインデックスを作成する必要があります。これについては、プロジェクト実行環境のチュートリアルで説明されています。

プロジェクトの概要

ブログは初心者にとって非常に優れたエントリープロジェクトであり、プロジェクトで使用されるテクノロジースタックは、初心者が学ぶのに適した幅広い範囲をカバーしています。主な問題は、権利管理、サードパーティのログイン、およびWebSocketにあります。うまくいかなかった場合はご容赦ください。ご不明な点やご提案がございましたら、プライベートチャットでご連絡ください。

交換グループ

ブログ技術交流グループチャットQRcode.png