ブログコンテンツ管理システムの詳しい説明-jsチュートリアル-php.cn

1. コンテンツの更新

データベースが再設計され、ユーザーごとにグループ化された subDocs データベース構造に変更されました
データベースの変更に応じて、すべてのインターフェースが再設計され、インターフェースのスタイルは Get と一致しました。すぐにリッチ
元のゲストモードを削除し、ログイン登録機能を追加し、ポップアップログインをサポートします。
最新の公開記事や登録ユーザーを表示するホームページを追加
パスワード変更、ログアウト、ログアウトなどの機能を追加します。
ポップアップウィンドウコンポーネントを最適化します。これはよりスマートで、より多くの構成項目があり、NetEase $.dialog コンポーネントに似ています。また、一連のコードは CSS を変更するだけで、PC 側のポップアップウィンドウと WAP 側のトースト機能を同じインターフェイスで実現します。
モバイル適応を追加
元のコードを最適化し、いくつかのバグを修正します。

さらに更新されたコンテンツについては、プロジェクト CMS-of-Blog_Production および CMS-of-Blog に移動してください。

2. コアコード分析

1. データベース

元のデータベースを再設計し、ユーザーごとにグループ化された subDocs データベース構造に変更します。これにより、ユーザー全体のデータベース構造がより明確になり、操作や読み取りも容易になります。コードは次のとおりです。

コードの先頭で、articleSchema、linkSchema、userSchema の 3 つの新しいスキーマが定義されています。 ArticleSchema と linkSchema は userSchema にネストされ、ユーザーごとにグループ化された subDocs データベース構造を形成します。スキーマはファイル形式で保存されたデータベースモデルのスケルトンであり、データベースを操作する機能はありません。その後、スキーマはモデルとして公開されます。モデルは、スキーマパブリッシングによって生成されるモデルであり、抽象的なプロパティと動作を持つデータベース操作のペアです。 Modelで作成できるエンティティ例えば、新規ユーザー登録時にエンティティが作成されます。

データベースが作成されたら、それを読み取って操作する必要があります。登録時に電子メール確認コードを送信するコードを見て、感覚をつかむことができます。

電子メール確認コードの送信リクエストを受信した後、バックグラウンドで tmp ユーザーが初期化されます。 new db.User() を使用すると User のインスタンスが作成され、save() オペレーションを実行するとこのデータがデータベースに書き込まれます。 30 分以内に登録が成功しなかった場合、このデータは電子メールアドレスを照合してから db.User.remove() によって削除されます。より具体的な使用方法については、公式ドキュメントnew db.User()会创建一个User的实例，然后执行save()操作会将这条数据写到数据库里。如果在半小时内没有注册成功，通过匹配邮箱，然后db.User.remove()将这条数据删除。更多具体用法请移步官方文档。

2. 后台

将所有请求分为三种：

ajax异步请求，统一路径：/web/
公共页面部分，如博客首页、登录、注册等，统一路径：/
与博客用户id相关的博客部分，统一路径：/:id/

这样每个用户都可以拥有自己的博客页面，具体代码如下：

具体的ajax接口代码大家可以看server文件夹下的index.js文件。

3. pop/toast组件

3.1 pop/toast组件配置参数说明

pop: 弹窗的显示与否, 根据content参数，有内容则为true
css: 自定义弹窗的class, 默认为空
showClose: 为false则不显示关闭按钮, 默认显示
closeFn: 弹窗点击关闭按钮之后的回调
title: 弹窗的标题，默认’温馨提示’, 如果不想显示title, 直接传空
content（required）: 弹窗的内容，支持传html
btn1: ‘按钮1文案|按钮1样式class’, 格式化后为btn1Text和btn1Css
cb1: 按钮1点击之后的回调，如果cb1没有明确返回true，则默认按钮点击后关闭弹窗
btn2: ‘按钮2文案|按钮2样式class’, 格式化后为btn2Text和btn2Css
cb2: 按钮2点击之后的回调，如果cb2没有明确返回true，则默认按钮点击后关闭弹窗。按钮参数不传，文案默认’我知道了’，点击关闭弹窗
init: 弹窗建立后的初始化函数，可以用来处理复杂交互（注意弹窗一定要是从pop为false变成true才会执行）
destroyを参照してください。
🎜
🎜2. Backstage 🎜🎜 は、すべてのリクエストを 3 つのタイプに分類します。 🎜
🎜このようにして、各ユーザーは自分の自分のブログページの具体的なコードは次のとおりです。 🎜🎜 特定の Ajax インターフェイスコードについては、サーバーフォルダーにあるindex.js ファイルを参照してください。 🎜🎜
🎜3. ポップ/トーストコンポーネント🎜
🎜3.1 ポップ/トーストコンポーネントの設定パラメータの説明
wapGoDialog: モバイル端末でポップアップウィンドウを使用するかどうか、デフォルトは false、トーストを使用しますwapGoDialog: 在移动端时，要不要走弹窗，默认false，走toast

3.2 pop/toast组件代码

3.3 pop/toast组件参数格式化代码

为了使用方便，我们在使用的时候进行了简写。为了让组件能识别，需要在vuex的action里对传入的参数格式化。

为了让移动端兼容pop弹窗组件，我们采用mediaQuery对移动端样式进行了更改。增加参数wapGoDialog

3.2 ポップ/トーストコンポーネントコード

3.3 ポップ/トーストコンポーネントパラメータのフォーマットコード

便宜上使用する場合は省略して使用します。コンポーネントを認識するには、受信パラメータを vuex アクションでフォーマットする必要があります。

モバイル端末をポップアップウィンドウコンポーネントに対応させるために、mediaQueryを使用してモバイル端末のスタイルを変更します。パラメータ wapGoDialog を追加して、モバイル端末を使用しているときにポップアップウィンドウを使用するかどうかを指定します。デフォルトは false で、トーストを使用します。このようにして、1 セットのコードで PC と WAP に互換性を持たせることができます。

追記ここでは主にバックエンドとデータベースを分析しますが、比較的簡単なソースコードを確認できます。つまり、これはバックエンドとデータベースから始まるフロントエンドの良い例です。機能が豊富でvue.jsを学ぶことができます。