ブログコンテンツ管理システムの詳しい説明

1. コンテンツの更新

1. データベースが再設計され、ユーザーごとにグループ化された subDocs データベース構造に変更されました

2. データベースの変更に応じて、すべてのインターフェースが再設計され、インターフェースのスタイルは Get と一致しました。すぐにリッチ

3. 元のゲストモードを削除し、ログイン登録機能を追加し、ポップアップログインをサポートします。

4. 最新の公開記事や登録ユーザーを表示するホームページを追加

5. パスワード変更、ログアウト、ログアウトなどの機能を追加します。

6. ポップアップ ウィンドウ コンポーネントを最適化します。これはよりスマートで、より多くの構成項目があり、NetEase $.dialog コンポーネントに似ています。また、一連のコードは CSS を変更するだけで、PC 側のポップアップ ウィンドウと WAP 側のトースト機能を同じインターフェイスで実現します。

7. モバイル適応を追加

8. 元のコードを最適化し、いくつかのバグを修正します。

さらに更新されたコンテンツについては、プロジェクト 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 非同期リクエスト、統合パス: /web/🎜🎜🎜🎜ブログのホームページ、ログイン、登録などのパブリック ページ パーツ、統合パス: / 🎜🎜🎜🎜ブログユーザーIDに関連するブログパーツ、統一パス: /:id/🎜🎜
  🎜このようにして、各ユーザーは自分の自分のブログ ページの具体的なコードは次のとおりです。 🎜🎜 特定の Ajax インターフェイス コードについては、サーバー フォルダーにあるindex.js ファイルを参照してください。 🎜🎜🎜3. ポップ/トースト コンポーネント🎜

  🎜3.1 ポップ/トースト コンポーネントの設定パラメータの説明

  🎜🎜pop: ポップアップ ウィンドウが表示されるかどうかは、content パラメーターに従って、コンテンツがあれば true になります🎜 🎜🎜🎜css code>: ポップアップ ウィンドウ クラスをカスタマイズします。デフォルトは空です🎜🎜🎜🎜<code>showClose: false の場合、閉じるボタンは表示されません。デフォルトが表示されます🎜🎜🎜🎜closeFn: ウィンドウが閉じるボタンをクリックした後のポップアップ コールバック🎜🎜🎜🎜title: ポップアップのタイトルウィンドウ、デフォルトは「ウォームリマインダー」です。タイトルを表示したくない場合は、空にしてください🎜🎜🎜🎜content(必須): ポップアップウィンドウのコンテンツはサポートされていますHTML を渡します🎜🎜🎜🎜btn1: 'ボタン 1 のコピー|ボタン 1 スタイル クラス'、btn1Text および btn1Css にフォーマットされます🎜🎜🎜🎜cb1: ボタン 1 がクリックされた後のコールバックcb1 が明示的に true を返さない場合、ボタンをクリックした後、デフォルトでポップアップ ウィンドウが閉じます🎜🎜🎜🎜btn2: 'Button 2 copy Button 2 style class'、btn2Text にフォーマットされます。 btn2Css🎜🎜🎜🎜cb2: ボタン 2 がクリックされた後のコールバック cb2 が明示的に true を返さない場合、デフォルトではボタンをクリックした後にポップアップ ウィンドウが閉じます。ボタンのパラメーターは渡されず、コピー テキストはデフォルトで「理解しました」になります。 クリックしてポップアップ ウィンドウを閉じます🎜🎜🎜🎜init: ポップアップ ウィンドウの作成後の初期化関数。 、複雑なインタラクションを処理するために使用できます (ポップアップ ウィンドウは、pop が false から true に変化した場合にのみ実行されることに注意してください)🎜🎜🎜🎜destroy:ポップアップウィンドウが消えます🎜

• 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を学ぶことができます。

関連する推奨事項:

最も完全な PHP オープンソース コンテンツ管理システム CMS

20 の PHP CMS オープン ソース コンテンツ管理システム

🎜🎜🎜laravel フレームワーク コンテンツ管理システムに基づく🎜🎜🎜

以上がブログコンテンツ管理システムの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。