ホーム>ASPソースコード>その他のカテゴリー
ダウンロード

プロジェクト紹介

コンテンツ管理システムである Alibaba Baixiu は、コンテンツ管理とコンテンツ表示という 2 つのコア機能に分かれています。

1. 機能モジュール

1.1 コンテンツ管理

モジュール関数
ユーザーログイン、ログアウト、ユーザーの追加、削除、変更、問い合わせ
記事記事管理
分類分類管理
コメントコメント管理
ウェブサイトの設定キーワード、説明、Web サイトのロゴ、カルーセル画像

1.2 コンテンツの表示

モジュール関数
フロントページナビゲーション、記事データ表示
一覧ページカテゴリ別の記事一覧を表示します
詳細ページ記事詳細表示とコメント機能を実装

2. 開発モード

2.1 フロントエンドとバックエンドの混合開発モデル

すべての HTML コードとデータはサーバー側で結合され、すべてのコンテンツが一度にクライアントに送信され、ブラウザーがコードを実行してユーザーにコンテンツを表示します。

02

質問：

  1. フロントエンド開発者とバックエンド開発者はお互いのコードに精通していないため、混合開発でお互いのコードを扱うのは非常に困難です。
  2. 開発プロセスではコードが必然的に重複し、作業負荷が 2 倍になります。

2.2 フロントエンドとバックエンドの分離開発モデル

03

利点: 明確な責任と役割分担、独立した開発、相互影響なし。

3. プロジェクトの構造

システムの階層化テクノロジーを活用する
データ層モンゴDB
サービス層ノード.js (高速)
クライアントアート テンプレート、jQuery、font-awesome、スワイプ

4. プロジェクトの動作環境の設定（プロジェクトを実行するために知っておくべきこと）

  1. node.js ソフトウェアをインストールし、正常にインストールされたかどうかをテストします。
    1. Win + R で Windows システムで実行中のプログラムが開き、実行中のプログラムで「powershell」と入力し、Enter キーを押してコマンド ライン プログラムを開きます。
    2. node -vコマンドを入力して、node.js のバージョンを確認します。コマンド ライン プログラムにバージョン番号が出力され、エラーが報告されなければ、インストールは成功しています。
  2. mongodb および mongodb-compass ソフトウェアをインストールする
  3. Alibaba Baixiu プロジェクト フォルダーをハードディスクにコピーします (サーバー側プログラム)
  4. コマンドラインツールでプロジェクトのルートディレクトリに移動します。
    1. Shift キーを押したまま右クリックして、「ここで PowerShell ウィンドウを開く」を選択します。
  5. npm installコマンドを使用して、プロジェクトに必要な依存関係ファイルをインストールします。
  6. app.js ファイルを開き、47 行目のデータベース接続セクション「mongodb://itcast:itcast@localhost:27017/alibaixiu」を変更します。

「mongodb://localhost:27017/alibaixiu」の場合

(1) 理由: mongodb データベース接続アカウントとパスワード情報を作成しませんでした。mongodb データベースにログインするためにデフォルトの方法を使用することを選択しました。

(2) アカウントとパスワードを使用してデータベースにログインする場合。参照してください: https://www.cnblogs.com/b02330224/p/10049395.html

コマンドラインにコマンドを順番に入力します: use alibaixiu #Enter alibaixiu Database

db.createUser({user:'itcast',pwd:'itcast',roles:['readWrite']}) #データベース ユーザーの作成

権限が不十分であるというメッセージが表示された場合は、上記のリンクを参照して、まず mongodb 管理者アカウントでデータベースにログインしてください。

7. (新しいステップ) 最近、db_data データベースのデータがアップロードされ、mongodb-compass ソフトウェアを通じて alibaixiu データベースに入ることができるようになりました。

db_data フォルダー内の json データと同じ名前で、 users 、 comment 、 slides 、 categories 、 posts 、 settingsコレクションを作成します。

(コレクション)、最後に各コレクションの対応する json データを順番にインポートします。

インポートデータ

8. コマンドラインツールにnode app.jsと入力してプロジェクトを開始します

5. プロジェクト実行後の注意点（好看的项目実行するために知っておくべきこと）

1. ブラウザを開き、ブラウザのアドレス バーに「localhost:3000/admin/login.html」と入力してログイン ページにアクセスします。

システムのデフォルトのユーザー名を入力します: (元の) [email protected] (現在) [email protected] パスワード: 123456 管理者ページに入る

2. データベース ファイルがアップロードされていないため、すべてのデータを手動で追加する必要があります (db_data に json データが導入されている場合は、手順 2 ～ 10 をスキップします)。

3. 管理者ページに入り、まずアカウント情報を変更（パスワード変更など）し、ユーザーアバターをアップロードします。

4. 次に、記事情報、システム設定情報、カルーセル画像情報を追加します（順序は必須ではありません。追加とは、フォーム情報の入力、画像ファイルの選択などを意味します）

5. 分類情報を変更する場合、fa-phone、fa-gift などの font-awesome で分類情報のアイコンを検索する必要があることに注意してください。

font-awesome で検索されるイメージ クラス名の形式は、fa fa-xxx-xxx です。その後に fa-xxx-xxx の部分を追加するだけです。

6. 基本的なデータベース情報を追加した後、ログアウトして新しいユーザーを登録することを選択できます (登録ユーザーのデフォルトは通常のユーザーです)。

または、管理者のユーザー追加権限を使用して一般ユーザーを追加します。

7. 背景データを追加した後、通常のユーザー アカウントを使用してフロントエンド記事表示ページに入ります (ページのコンテンツをより充実させたい場合)

記事情報は15件程度、カテゴリ情報は4件程度追加することを推奨します）

8. 管理者アカウントを使用して Web サイトにアクセスする場合は、管理者アカウントからログアウトしないでください。ブラウザで新しいタブを開きます

アドレスバーに「localhost:3000」と入力して、フロント記事表示ページに入ります。

9. 管理者がコメント機能をオンにすると、フロント記事詳細ページにコメント機能が表示されます。 管理者がコメント機能をオフにすると、フロント記事詳細ページにコメント機能が表示されます。

このページにはコメント機能が表示されません

10. 管理者がコメントレビュー機能をオンにした場合、ユーザーのコメントはページにすぐには表示されず、管理者はバックグラウンドで作業する必要があります

コメントは管理ページ上で審査し、承認された後に記事ページに表示されます。管理者がコメント機能をオフにすると、

記事詳細ページに表示されます。

11. それでもプロジェクトを実行できない場合は、1565066165 までご連絡ください。

6.プロジェクトアドレス

ホームページ: http://luoxu.ltd:3000/ (ドメイン名登録時に http://luoxucoder.icu に一時的に変更されました)

ログインページ: http://luoxu.ltd:3000/admin/login.html (同様)

プロジェクトエフェクト表示

1. フロントエンド記事表示ページ

索引

2. フロントエンド記事分類ページ

カテゴリ

3. フロントエンド記事詳細ページ

役職

4. ログインページ

ログイン

5. 登録ページ

登録する

6.バックエンド管理ページ

管理者

プロジェクト機能

1. ユーザー機能

1.1 ログイン

  1. ログインボタンのクリックイベントを追加
  2. ユーザーがテキストボックスに入力したユーザー名とパスワードを取得します
  3. ユーザーがユーザー名とパスワードを入力したかどうかを確認し、入力していない場合は、プログラムが下向きに実行されるのを防ぎ、ユーザーにユーザー名とパスワードの入力を求めます。
  4. ログイン機能を実装したインターフェースを呼び出します。ログインに成功すると、データ管理のホームページにジャンプします。ログインに失敗すると、ユーザー名またはパスワードが間違っていることを示すメッセージが表示されます。

1.2 ログインの傍受

  1. script タグを使用して、サーバーから提供されたインターフェイス アドレスをロードします。
  2. isLogin 変数の値を確認します。値が false の場合は、ログイン ページにジャンプします。

1.3 ユーザーの追加

  1. ユーザー機能を追加する各フォーム項目に name 属性を追加します。name 属性値は、インターフェイス ドキュメントで必要なパラメーター名と一致している必要があります。
  2. 送信イベントをフォームにバインドし、イベント ハンドラー関数でデフォルトでフォームが送信されないようにします。
  3. ユーザーがフォームに入力した内容をイベントハンドラー関数で取得する
  4. 追加ユーザー インターフェイスを呼び出し、インターフェイスを通じて取得したコンテンツをサーバーに送信します。操作が成功すると、ページが更新され、ユーザー プロンプトが表示されます。

1.4 ユーザー一覧の表示

  1. Ajaxリクエストをサーバーに送信してユーザーリストデータをリクエストします
  2. 2 番目のステップは、テンプレート エンジンを使用してデータと HTML テンプレートを結合することです。
  3. 3 番目のステップは、結合されたコンテンツをページ上に表示することです

1.5 ユーザーアバターのアップロード

  1. ファイル選択コントロールに onchange イベントを追加し、イベント処理関数でユーザーが選択したファイルを取得します。
  2. 画像ファイルをアップロードするための formData オブジェクトを作成する
  3. 画像ファイルアップロードインターフェースを呼び出して画像アップロードを実装します。
  4. 新しいユーザーの追加フォームに新しい隠しフィールドを追加し、画像アドレスを隠しフィールドに保存します。

1.6 ユーザー一覧表示

  1. ページの読み込み時にサーバーに Ajax リクエストを送信してユーザー リスト データをリクエストします
  2. テンプレート エンジンを使用してデータと HTML テンプレートを結合する
  3. 結合されたコンテンツをページ上に表示します

1.7 利用者情報の変更

  1. イベント委任を通じて編集ボタンのクリックに対するイベントを追加する
  2. イベント処理関数で現在クリックされているユーザーのID値を取得する
  3. ユーザーIDを基にユーザーの詳細情報を取得し、テンプレートエンジンを通じてユーザーの詳細情報を左側のフォームに描画します
  4. 変更ボタンのクリックイベントを追加し、イベント処理関数でユーザーがフォームに入力した内容を取得し、ユーザー情報変更インターフェースを呼び出すことでユーザー情報変更機能を実装します。

1.8 ユーザーの削除

  1. 削除ボタンのクリックイベントを追加
  2. ユーザーが操作を削除するかどうかを確認します
  3. 現在クリックされているユーザーのIDを取得します
  4. 削除ユーザー インターフェイスを呼び出して、ID に基づいてユーザーを削除します。削除が成功した場合は、現在のページを更新して、ページに最新のコンテンツが表示されます。

1.9 ユーザーを一括削​​除する

  1. チェックボックスのチェック状態を管理する
    1. 「すべて選択」ボタンを選択すると、すべてのユーザーが選択され、「すべて選択」ボタンを選択解除すると、すべてのユーザーの選択が解除されます。
    2. ユーザーの目の前にあるチェックボックスボタンの状態が変化した場合、未選択状態のユーザーがいるかどうかを確認し、そうでない場合はすべてのユーザーが選択状態であることを意味します。このとき、全選択ボタンは選択状態に設定されます。
  2. 一括削除ボタンのステータスを管理する
    1. 「すべて選択」ボタンが選択されている場合は「一括削除」ボタンが表示されます。「すべて選択」ボタンが選択されていない場合は、「一括削除」ボタンは非表示になります。
    2. ユーザーの前のチェックボックスボタンの状態が変化したときに、すべてのユーザーの選択状態を確認し、すべてのユーザーが選択されていない場合は、一括削除ボタンを表示します。
  3. ユーザー一括削除機能を実装
    1. クリックイベント処理関数では、一括削除ボタンにクリックイベントを追加し、選択したすべてのユーザーIDを配列に格納します。
    2. ユーザー削除機能を実装するには、削除ユーザー インターフェイスを呼び出します。

1.10 パスワードの変更

  1. パスワード変更フォームの各フォーム項目に name 属性を追加します。 name 属性の値は、インターフェイスのパラメータ名と一致している必要があります。
  2. パスワード変更フォームにフォーム送信イベントを追加し、イベント ハンドラー関数でフォームのデフォルトの送信動作を防止します。
  3. ユーザーがフォームに入力した内容を取得します
  4. パスワード変更インターフェースを呼び出してパスワード変更機能を実装すると、パスワードが正常に変更された場合は、ログイン ページにジャンプし、ユーザーが再度ログインできるようにします。

1.11 ログインユーザー情報の表示

  1. userId変数の値に応じて、現在ログインしているユーザーの情報をサーバーから取得します。
  2. ページの左側にユーザ​​ー情報を表示します

2.分類機能

2.1 カテゴリを追加する

  1. フォーム内の各フォーム項目に name 属性を追加します。 name 属性の値は、インターフェイス ドキュメントで必要なパラメーター名と一致している必要があります。
  2. フォーム送信イベントをフォームに追加し、イベント ハンドラー関数でフォーム送信のデフォルト動作を防止します。
  3. ユーザーがフォームに入力した内容を取得します
  4. カテゴリ追加インターフェイスを呼び出してカテゴリ追加機能を実装します。

2.2 機密データの表示

  1. Ajax リクエストをサーバーに送信してカテゴリ ページ データをリクエストします
  2. テンプレート エンジンを使用して、サーバーから返されたデータを HTML テンプレートと結合します。
  3. 結合されたコンテンツをページ上に表示します

2.3 機密データの改ざん

  1. イベントデリゲーションにより編集ボタンにクリックイベントを追加し、イベント処理関数で変更対象の分類データIDを取得します。
  2. IDに応じてインターフェースを呼び出し、機密データの詳細情報を取得します
  3. テンプレート エンジンを使用して、分類されたデータと HTML 文字を結合します。結合が完了すると、コンテンツがページにレンダリングされます。
  4. 変更ボタンにクリックイベントを追加し、管理者がフォームに入力した内容をイベントハンドラー関数で取得します
  5. 分類データ変更関数を実装するには、分類データ変更インターフェースを呼び出します。

2.4 機密データの削除

  1. イベント委任を通じてクリック イベントを削除ボタンに追加すると、クリック イベント ハンドラーに削除確認ボックスがポップアップ表示されます。
  2. ユーザーが削除を確認するためにクリックした後、削除する機密データの ID を取得します。
  3. 削除カテゴリ データ インターフェイスを呼び出して、カテゴリ データを削除する機能を実装します。カテゴリが正常に削除された場合は、ページを更新します。

3.記事機能

3.1 記事を追加する

  1. 記事分類データを取得し、管理者が選択できるカテゴリのドロップダウン リストにデータを表示します。
  2. 記事のカバー画像をアップロードし、アップロードした画像アドレスを非表示フィールドに保存します
  3. 記事追加フォームの各フォーム項目に name 属性を追加します。name 属性値は、インターフェイスで必要なパラメーター名と一致している必要があります。
  4. フォーム送信イベントを記事追加フォームにバインドし、イベント ハンドラー関数でデフォルトでフォームが送信されないようにします。
  5. 管理者がフォームに入力した内容を取得します
  6. 記事追加機能を実装するためにサーバーに記事追加リクエストを送信し、記事の追加が成功すると記事一覧ページにジャンプします。

3.2 記事一覧データ表示

  1. ページが表示されたら、サーバーに記事一覧データのリクエストを送信します。
  2. テンプレートエンジンを使用して記事リストデータとHTMLを結合すると、ページ上にコンテンツが表示されます。
  3. ページングデータを基にしたリストデータページング機能の実装

3.3 記事データリストのフィルタリング

  1. サーバーにリクエストを送信して記事分類データを要求し、データが属するカテゴリのドロップダウン リストにデータを表示します。
  2. フィルターボタンにクリックイベントを追加し、イベントハンドラー関数でユーザーが選択した内容を取得します
  3. 管理者が要求した記事一覧データをサーバーにリクエストし、ページ上に表示します

3.4 記事の編集

  1. 編集ボタンにリンクを追加し、記事編集ページへのリンクのクエリ パラメーターとして記事 ID を渡します。
  2. 記事編集ページのアドレスバーにあるidパラメータを取得します。
  3. IDを基に記事詳細を取得し、記事編集フォームに記事情報を表示します
  4. フォーム送信イベントをバインドして記事フォームを変更し、イベント ハンドラー関数でデフォルトでフォームが送信されないようにします。
  5. ユーザーがフォームに入力した内容を取得します
  6. 記事情報変更機能を実装するためにサーバーにリクエストを送信し、記事情報の変更が成功すると記事一覧ページにジャンプします。

3.5 記事の削除

  1. イベントデリゲーションにより削除ボタンにクリックイベントを追加し、イベント処理機能で削除確認ボックスをポップアップ表示し、管理者に削除操作を確認する
  2. イベントハンドラー関数で削除する記事のIDを取得する
  3. Ajax リクエストを送信して削除操作を実行すると、削除操作が成功し、ページが更新されます。

3.6 人気記事のおすすめ

  1. 人気のある推奨データを取得するためにサーバーにリクエストを送信します

  2. テンプレート エンジンを使用してデータと HTML テンプレートを結合し、結合されたコンテンツをページ上に表示します

     var str = '<div>{{name}}</div>' ;
var obj = { name : '张三' }
var html = template . render ( str , obj ) ;

3.7 論文検索

  1. フォーム送信イベントを検索フォームにバインドする
  2. イベント ハンドラーでフォームのデフォルトの送信動作を防止し、ユーザーが入力した検索キーワードを取得します。
  3. 検索結果ページにジャンプし、ユーザーが入力した検索キーワードを検索結果ページに渡します。
  4. 検索結果ページでは、ユーザーが入力したキーワードはアドレス バーのクエリ パラメーターから取得されます。
  5. ユーザーが入力した検索キーワードに従って検索インターフェイスが呼び出され、サーバーがデータを返すと、検索結果データと HTML テンプレートが結合され、結合されたコンテンツが最終的にページに表示されます。

4.コメント機能

4.1 コメント一覧表示

  1. サーバーにリクエストを送信してコメントリストデータを取得します
  2. テンプレート エンジンを使用してコメント リスト データと HTML テンプレートを結合し、結合完了後にページにコンテンツを表示します。
  3. ページングデータに基づいたページング機能の実装

4.2 コメントの管理

  1. 現在のコメントのステータスに基づいて、モデレート ボタンのテキストを変更します。現在のコメントがレビューされていない場合、ボタンには [承認] が表示され、現在のコメントがレビューされている場合、ボタンには [却下] が表示されます。
  2. イベントデリゲーションによりレビューボタンにクリックイベントを追加し、イベント処理関数で現在のコメントのステータスを取得します。
  3. サーバーにリクエストを送信し、コメントをどの状態に変更するかをサーバーに伝えます。変更が成功した場合は、ページを更新して、最新のデータがページに表示されます。

4.3 コメントの削除

  1. イベントデリゲーションを通じて削除ボタンにクリックイベントを追加し、イベント処理関数で削除確認ボックスをポップアップします。
  2. 管理者が削除したいコメントのID値を取得します
  3. コメントを削除するリクエストをサーバーに送信します。コメントが正常に削除された場合は、ページを更新します。

5.カルーセルチャート機能

5.1 画像カルーセルデータの追加

  1. 画像アップロード機能を実装し、アップロードされた画像アドレスを隠しフィールドに保存します
  2. 画像カルーセル フォームの各フォーム項目に name 属性を追加します。 name 属性の値は、インターフェイスで必要なパラメーター名と一致している必要があります。
  3. フォーム送信イベントを画像カルーセル フォームにバインドし、イベント ハンドラー関数でデフォルトでフォームが送信されないようにします。
  4. 管理者がフォームに入力した内容を取得します
  5. 画像カルーセルデータの追加機能を実装するリクエストをサーバーに送信します。データが正常に追加された場合は、ページを更新します。

5.2 カルーセルチャートのデータ表示

  1. 画像カルーセルリストデータのリクエストをサーバーに送信します。
  2. テンプレート エンジンを使用して、画像カルーセル リスト データと HTML テンプレートを結合します。結合が完了すると、コンテンツがページに表示されます。

5.3 画像カルーセルデータの削除

  1. イベントデリゲーションを通じて削除ボタンにクリックイベントを追加する
  2. イベントハンドラー関数で削除確認ボックスをポップアップ表示します。
  3. 削除するカルーセル画像データのIDを取得する
  4. 削除操作を実行するリクエストをサーバーに送信します。削除操作は成功し、ページが更新されます。

5.4 カルーセルチャートのデータ表示（更新）

  1. カルーセル データのリクエストをサーバーに送信します
  2. テンプレート エンジンを使用してデータと HTML 文字列を結合し、結合されたコンテンツをページ上に表示します
  3. カルーセル効果を実装する元の JavaScript コードを、ajax メソッドの success 関数の最後に移動します。

6. ウェブサイト設定機能

6.1 ウェブサイトの設定

  1. Web サイトのロゴ画像のアップロードを実装し、アップロードされた画像アドレスを隠しドメインに保存します
  2. フォーム内の各フォーム項目に name 属性を追加します。 name 属性の値は、インターフェイス ドキュメントで必要なパラメーター名と一致している必要があります。
  3. 送信イベントをフォームにバインドし、イベント ハンドラー関数でデフォルトでフォームが送信されないようにします。
  4. 管理者がフォームに入力した内容を取得します
  5. Webサイト設定データ追加機能を実装するためにサーバーにリクエストを送信します。

6.2 ウェブサイト設定データの表示

  1. サーバーにリクエストを送信してWebサイトの設定データを取得します
  2. サーバーから返されたデータが true であるかどうかを判断し、true である場合は、そのデータをフォームに表示します。

7. ウェブサイト最新更新機能

7.1 ページには記事コメント情報が表示されます

1. 記事IDから記事のコメントを検索

2. 承認されたコメントはページに直接表示されます

3. 最新のコメントが最適化されました

4. 管理ページで未承認のコメントは赤色で表示されます

7.2 ページの最適化

1. すべてのいいねボタンはいいね機能を実装します

2. コメントリンクはコメント記事へジャンプする機能を実装

3. すべての分類ボタンに分類ページへのジャンプ機能を実装

7.3 登録ページ

1. ログインページにユーザー登録ボタンを追加

2. 登録ページの js は、フロントエンドの登録情報の基本的な検証を実装します

3. ブートストラップを使用して開発されたページ機能

4. 登録ページに登録するユーザーは全て一般ユーザーです

5. メールアドレスからユーザーを検索する機能を実装しました

詳細については、インターフェイスのドキュメントを参照してください。

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて