WebMan技術を活用したオンライン図書館システムの導入方法-Workerman-php.cn

WebMan技術を活用したオンライン図書館システムの導入方法

王林

リリース： 2023-08-26 12:52:45

オリジナル

773 人が閲覧しました

WebMan技術を活用したオンライン図書館システムの導入方法

WebMan テクノロジーを使用してオンライン図書館システムを実装する方法

今日のデジタル時代では、図書館はもはや従来の物理的な形式に限定されず、徐々にオンライン図書館システムに移行しつつあります。。 WebMan テクノロジーにより、ユーザーが書籍を管理するのに便利なオンラインプラットフォームを構築できます。この記事では、WebMan テクノロジを使用してオンラインライブラリシステムを実装する方法を紹介し、読者の理解と実践に役立つコード例を提供します。

1. 技術アーキテクチャと要件分析

オンラインライブラリシステムには、主にフロントエンドユーザーインターフェイスとバックエンドサーバーという 2 つの主要モジュールが含まれています。フロントエンドユーザーインターフェイスは、図書館の書籍情報を表示し、ユーザーの操作要求に応答する役割を果たします。一方、バックエンドサーバーは、ユーザーの要求を処理し、ユーザーと書籍の情報を管理する責任を負います。

フロントエンドユーザーインターフェイスの場合、HTML、CSS、JavaScript を使用してライブラリ表示ページを実装できます。基本的なページ構造は HTML によって作成され、CSS はページスタイルを美しくするために使用され、JavaScript はバックエンドサーバーとの対話とデータの処理を担当します。

バックエンドサーバーには、Node.js などの強力な WebMan テクノロジの使用を選択できます。 Node.js は、効率的でスケーラブルな Web アプリケーションを構築するためのテクノロジーです。これはイベント駆動型のノンブロッキング I/O モデルに基づいており、同時リクエストを効率的に処理する機能を備えています。

2. 実装手順

プロジェクトフォルダーの作成

まず、ローカルコンピューター上にプロジェクトフォルダーを作成し、コマンドラインツールを使用する必要があります。このフォルダに入れます。

プロジェクトの初期化

コマンドラインに次のコマンドを入力して、新しい Node.js プロジェクトを初期化します:

npm init -y

ログイン後にコピー

これにより、プロジェクトが初期化されます。プロジェクトの依存関係を管理するために使用される package.json ファイルを生成します。

必要な依存関係をインストールします

コマンドラインに次のコマンドを入力して、必要な依存関係をインストールします:

npm install express body-parser --save

ログイン後にコピー

これにより、Express フレームワークと本文 - パーサーモジュールは、HTTP リクエストを処理し、POST リクエストのパラメータを解析するために使用されます。

サーバーの作成

server.js という名前の新しいファイルを作成し、次のコードをそのファイルにコピーします:

// 引入所需模块
const express = require('express');
const bodyParser = require('body-parser');

// 创建Express应用
const app = express();

// 解析处理POST请求的参数
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// 设置路由
app.get('/', (req, res) => {
  res.send('欢迎访问图书馆系统');
});

// 启动服务器
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`服务器已启动，监听端口${port}`);
});

ログイン後にコピー

このコードは、単純な Express アプリケーションを定義し、GET リクエストルートを設定します。ユーザーがルートパスにアクセスすると、ようこそページが返されます。

サーバーを実行します

コマンドラインに次のコマンドを入力してサーバーを起動します:

node server.js

ログイン後にコピー

この時点で、サーバーは起動されています。ポート 3000 でリッスンしています。

ライブラリページの作成

プロジェクトフォルダー内に public という名前の新しいフォルダーを作成し、フロントエンドページドキュメントを保存します。

public フォルダーに新しい HTML ファイルを作成し、index.html という名前を付け、次のコードをファイルにコピーします:

<!DOCTYPE html>
<html>
<head>
  <title>图书馆系统</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>欢迎访问图书馆系统</h1>
  <script src="script.js"></script>
</body>
</html>

ログイン後にコピー

このコードは、単純な HTML ページを定義し、CSS ファイルと JavaScript ファイルを導入します。

スタイルファイルとスクリプトファイルの作成

public フォルダーに新しい CSS ファイルを作成し、style.css ## という名前を付けます。 # そしてスタイルを追加します。

public フォルダーに新しい JavaScript ファイルを作成し、script.js という名前を付け、対話型ロジックを追加します。

server.js ファイルの末尾に次のコードを追加して、静的ファイルディレクトリを設定します。およびルーティング:

// 设置静态文件目录
app.use(express.static('public'));

// 设置API路由
app.get('/api/books', (req, res) => {
  // 处理获取书籍的逻辑
});

// 运行服务器
...

ログイン後にコピー

このコードは、

/api/books パスを GET リクエストルートにマップします。次のステップでこのルートのロジックを実装します。

server.js ファイルで、/api/books# の GET に次のコードを追加します。 ## リクエストルーティングロジックでは、書籍を取得するロジックを処理するために使用されます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>// 模拟书籍数据 const books = [ { id: 1, title: '书籍1' }, { id: 2, title: '书籍2' }, { id: 3, title: '书籍3' } ]; // 处理GET请求路由 app.get('/api/books', (req, res) => { // 返回书籍数据 res.json(books); });</pre><div class="contentsignin">ログイン後にコピー</div></div>このコードは、シミュレートされた書籍データを定義し、書籍を取得するための GET リクエストルートでこれらのデータを返します。 <p></p>完璧な図書館システム<ol start="10"> <li>これで、シンプルなオンライン図書館システムの構築が完了しました。 </ol>http://localhost:3000<p> にアクセスして図書館の表示ページを表示し、<code>http://localhost:3000/api/books にアクセスして書籍情報を取得できます。ユーザーは、フロントエンドページを通じて書籍を参照および取得したり、API にリクエストを送信して書籍情報を取得、追加、削除したりできます。図書館システムをさらに改良し、ユーザー認証や本の貸し出しなど、ニーズに応じて機能を追加することができます。

概要

この記事の概要とサンプルコードを通じて、WebMan テクノロジを使用してオンラインライブラリシステムを構築する方法を学びました。フロントエンドユーザーインターフェイスとバックエンドサーバー間の対話とデータ処理は、Express フレームワークと Node.js を使用して簡単に実現できます。読者は、実際のニーズに応じてライブラリシステムをさらに拡張およびカスタマイズして、より良いユーザーエクスペリエンスを提供できます。

参考資料

Express 公式ドキュメント: https://expressjs.com/