WhiteJotter

---

これは、主に Vue.js + SpringBoot テクノロジーを使用して開発された、シンプルなフロントエンドとバックエンドの分離プロジェクトです。

入門演習として使用するだけでなく、このプロジェクトを一般的な Web プロジェクトの足場としても使用して、Web サイトの構築プロセスを簡素化できることを願っています。 0 から始まり、時間の経過とともに徐々に改善されるため、ホワイト ジョッターと呼ばれます。

フロントエンドリポジトリ：https://github.com/realdonald1994/WhiteJotter_Vue

バックエンドリポジトリ：https://github.com/realdonald1994/WhiteJotter

ホワイトジョッターへの参加を歓迎します!

全体表示

1. ホーム

このプロジェクトの開発のための主要な参考資料、最近の更新情報、スローガンを含む表示ページとして

2. 図書館

本や映画の情報表示機能を提供

3. ジョッター

メモ、ブログ投稿表示機能を提供

4.バックグラウンド管理

ダッシュボード、コンテンツ管理、ユーザーと権限の管理などが含まれます。

5.私について

自己紹介と関連リンク

建築

• 応用

• テクノロジー

テクノロジースタック

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

1.Vue.js
2.要素UI
3.アクシオス
4.ビュークス

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

1.スプリングブーツ
2.Springデータ+JPA
3.MySQL
4.シロ

3. データベース

1.MySQL

4. サーバー

1.セントス7
2.Nginx
3.高速DFS

5. テスト

1.ジュニット
2.冗談

導入

1.プロジェクトをローカルにクローンします

フロントエンド：

git clone https://github.com/realdonald1994/WhiteJotter_Vue

バックエンド:

git clone https://github.com/realdonald1994/WhiteJotter

2.mysqlでデータベースwhite_jotter作成し、プロジェクトを実行すると、データが自動的に挿入されます。

Redis ポートは 6379 (デフォルト ポート) で、パスワードは空白です。

3.データベースはバックエンド プロジェクトのsrc main resourcesディレクトリにあるapplication.propertiesファイルで構成されており、mysql のバージョンは 8.0.15 です。

4.IntelliJ IDEA でバックエンド プロジェクトを実行します。プロジェクトが正常に実行されることを確認するには、 pom.xml右クリックし、maven->reimport を選択してプロジェクトを再起動します。

この時点で、サーバーは正常に起動され、同時にフロントエンド プロジェクトを実行し、 http: // localhost: 8080にアクセスしてログイン ページに入ることができます。デフォルトのアカウントはadmin 、パスワードは123です。

二次開発を行う場合は、引き続き 5 番目と 6 番目のステップをご覧ください。

5.フロントエンド プロジェクトのルート ディレクトリを入力し、コマンド ラインで次のコマンドを順番に入力します。

# Install dependencies
  npm install

# Start the project at localhost: 8080
  npm run dev

wj-frontプロジェクトではデータを SpringBoot に転送するようにポート転送が設定されているため、プロジェクトの開始後、ブラウザにhttp: // localhost: 8080と入力してフロントエンド プロジェクトにアクセスします。すべてのリクエストはデータを SpringBoot に転送します。ポート転送を使用します (この時点では SpringBoot プロジェクトを閉じないでください)。

6.最後に、 WebStormやその他のツールを使用してwj-frontプロジェクトを開いて開発を続行できます。開発が完了した後、プロジェクトをオンラインにするときは、引き続きwj-frontディレクトリに入り、次のコマンドを実行します。

 npm run build

コマンドが正常に実行されると、wj-front ディレクトリーの下にdistフォルダーが生成され、そのフォルダー内の 2 つのファイルassetsとindex.htmlを nginx にコピーできます。次に、バックエンドのルート ディレクトリーに入り、コマンド ラインを実行します。

 mvn clean install

最後に、新しく生成されたtargetディレクトリにコマンド ラインjava -jar xxx.jar入力します。バックエンドサーバーを起動します。

nginx ファイルの下にコマンド ラインstart nginxを入力します。フロントエンドサーバーを起動します。

アップデート

2020年

08-20 Redis を追加
06-09 Vue テスト ユーティリティと Jest を使用した単体テストを追加
06-04 gzip を使用して Web ページの読み込みが遅い問題を解決する
06-02 プロジェクトがクラウド サーバーにデプロイされ、Web サイトが初めて公開されました。
05-29 フロントエンドとバックエンドのプロジェクトを分離
04-20 オープンソースのマークダウンエディタを利用して記事表示と管理モジュールを実現

...