VueとDjangoに基づく個人ブログシステム-グラフィックの説明

システムを作成する場合：最初にUIデザイン、つまり実行するページを決定し、次にページ間をジャンプする方法を決定します。次に、テクノロジースタック、つまりシステムを完成させるために使用するテクノロジーの決定を開始します。、一般的にフロントエンド、バックエンド、データベースなどを含みます。最後に、実際の運用を開始しました。最も重要なことは、システム全体のロジックを分析し、各部分を論理的に実装する方法を考えることです。データベースの設計などを開始します。

このプロジェクトでは、私が選択したテクノロジースタックは次のとおりです。

フロントエンド：Vue。
バックエンド：Django。
データベース：MysqlとRedis。

フロントエンドとバックエンドが分離されていないので、最初にDjangoのMTVモードを見てみましょう。

Mはモデル（モデル）を表します。プログラムが持つべき機能であり、ビジネス・オブジェクトとデータベースの間のマッピング（ORM）を担当します。
Tはテンプレートの略です。ユーザーにページ（html）を表示する方法を担当します。
VはViewの略です。ビジネスロジックを担当し、必要に応じてモデルとテンプレートを呼び出します。

たぶんこれが当てはまり、少し抽象的なので、システム全体のユーザー操作フローチャートを分析してみましょう。

ここに画像の説明を挿入

今から始めます！

8ページ

最初のページ：登録ページ。
2番目のページ：ログインページ。
3ページ目：パスワードを忘れたページ。
4番目のページ：ユーザーセンターページ。
5ページ目：ホームページ。
6ページ目：ブログページを作成します。
7ページ目：ブログ詳細ページ。
8ページ目：404ページ。

もちろん、これは私がすでに書いたページであり、論理的なジャンプも実現できます。始めたばかりの場合は、ページ構造を設計した後、最初に静的ページを記述し、後で変更することができます。

2つのサブアプリ

上記の8ページから、おそらく次の機能の合計があることがわかります。

登録機能（画像確認コード、SMS確認コード）
ログイン機能（携帯電話番号、パスワード）
ログアウト機能（Cookieとセッションのクリーニング）
パスワードを忘れた場合機能（登録機能と同様）
ユーザーセンター機能（画像、プロファイルの変更）
ホームページ表示機能（列分類、ブログ一覧、ページング機能）
ブログ機能を書く（リッチテキストエディタ）
ブログ詳細機能（記事詳細、おすすめ機能、コメント機能）

基本的に、上記の機能は2つのモジュールに分けることができます。

1つは、ユーザー登録、ログイン、ログアウト、パスワードの忘れ、ユーザーセンター、ブログの作成などのユーザーモジュールです。
1つは、ホームページの表示、ブログの詳細（コメントの投稿）を含むホームページモジュールです。

このようにして、ロジックを少し単純化し、ユーザーサブアプリケーションとホームサブアプリケーションに分割します。

4つのエンティティ

上記のページと関数から、後続のデータアクセスなどを容易にするためにいくつかのエンティティを抽象化できます。

最初のエンティティはユーザーです。これには、登録、ログイン、パスワードを忘れた場合、およびパーソナルセンターが含まれるため、ユーザーテーブルで次の関連フィールドを定義できます。
2番目のエンティティはカテゴリです。これは比較的単純です。Djangoに付属のORMが自動的にIDの作成に役立つため、カテゴリに名前を付けるのはほぼ同じです。
3番目のエンティティは記事です。記事は個人がどのようにデザインするかによって異なります。ここでは、記事の作成者、記事のタイトル画像、記事のタイトル、記事が属するカテゴリ、記事、記事の内容、記事のページビュー数、記事へのコメント数など。
4番目のエンティティはレビューであり、レビュー担当者、レビューされた記事、レビューの内容、レビューの時間などが含まれます。

最初は、このデータベースの設計も非常に複雑だと感じましたが、実際には、機能要件とページ構造が考案された後、これらのページに必要なデータ、そしてデータの出所と基本的なフォームをデザインし、主要な機能が実装された後、独自のアイデアを追加することができます。

その間、注意してください！「データベースの削除と暴走」を防ぐために、データベースに関連するすべての操作を例外として処理する必要があります。

10個のビュー機能

最初のビュー関数：画像検証コードビューImageCodeView。

これは、登録およびパスワードを忘れた場合のページに必要な画像確認コードです。パスワードを登録または忘れるためにURLが見つかると、マウントされたライフサイクル関数でgenerate_image_code（）メソッドが呼び出されるため、image_code_urlは/ imagecode /？uuid =として割り当てられ、画像検証時にimgタグが設定されます。 htmlページのコード。、srcをimage_code_urlにバインドしてから、このクラスのビュー関数を見つけるためにurlにリクエストを送信します。
```
该视图函数主要流程(get)：
①获取uuid。
②验证uuid。
③生成验证码。
④将键值对(uuid，text)保存到redis中。
⑤返回image。
```
2番目のビュー機能：SMS検証コードビューSmsCodeView。

これは、登録およびパスワードを忘れた場合のページに必要なSMS確認コードです。登録ページでは、各フォームの値が対応するデータにバインドされ、フォームタグ変数を使用してフォーム値のエラーメッセージが表示されます。クリックしてSMS確認コードを送信すると、それに応じてmobileとimage_codeがチェックされ、'/ smscode /？mobile ='+ this.mobile +'＆image_code ='+ this.image_code +'＆uuid='+thisに進みます。 .uuidリクエストを送信します。成功した場合はボタンにカウントダウンが表示され、エラーが発生した場合は対応する場所にエラーが表示されます。上記のリクエストのURLは、このタイプのビュー関数に対応します。
```
该视图函数主要流程(get)：
①获取url？后面对应的三个参数。
②验证参数，比对image_code和从redis中取出的text。
③随机生成短信验证码。
④将键值对（mobile，sms_code）存入到redis中。
⑤发送短信。
```
3番目のビュー機能：ビューRegisterViewを登録します。

ボタンを含むページの場合：一般に2つの処理関数があります。1つはgetで、主に対応するページを返し、ページに必要なデータを取得してからページに渡します。もう1つはpostです。データが入力され、送信ボタンをクリックした後、データベースアクセスやページジャンプなどの一連の処理が実行されます。
```
该视图函数主要流程（post）：
①获取表单参数。
②验证表单参数（虽然前端也有验证）。
③验证成功后将数据存到数据库user表中。
④使用login进行状态保持（会生成唯一标识sessionid）。
⑤页面跳转重定向。
⑥设置cookie（方便后续在其他页面使用相关信息）。
```

4番目のビュー機能：ログインビューLoginView。

该视图函数主要流程（post）：
①获取表单参数。
②验证表单参数。
③使用系统自带认证authenticate进行用户认证。
④使用login进行状态保持。
⑤根据next参数来进行页面的跳转（因为系统对于未登录会自动跳转到next）。
⑥页面重定向。

5番目のビュー機能：ログアウトビューLogoutViewのログアウト。
```
该视图函数主要流程（get）：
①清理session。
②清理cookie。
```

6番目のビュー関数：ForgetPasswordViewForgetPasswordView。

该视图函数主要流程（post）：
①获取表单参数。
②验证表单参数。
③根据mobile参数查询数据库user表，如果没有就创建新的用户，反之则将修改数据保存到数据库对应用户字段上。
④重定向页面。

7番目のビュー関数：UserCenterViewUserCenterView。

该视图函数主要流程（post）：
①获取表单参数。
②修改保存到数据库user表。
③重定向页面。

8番目のビュー関数：ブログビューの書き込みWriteBlogView。

该视图函数主要流程（post）：
①获取表单参数。
②验证表单参数。
③验证成功的数据保存到数据库。
④重定向页面。

9番目のビュー機能：ホームビューIndexView。

该视图函数主要流程（get）：
①获取所有分类和选中分类。
②查询点击分类对应的所有文章。
③获取分页处理对应的参数。
④返回页面。

10番目のビュー機能：ブログ詳細ビューDetailView。

该视图函数主要流程（post）：
①接收用户信息并且判断是否登录。
②未登录用户则跳转到登录页面。
③登录用户则可以接收form数据（包含评论文章id和评论内容content）。
④保存评论数据到数据库comment并且刷新页面。

ほぼ完成です！！

2022年3月16日0:01王暁満！！

起きたら、再審査の準備に集中しましょう。この10日間は急いでいます！！