Cara melaksanakan sistem perpustakaan dalam talian melalui teknologi WebMan
Dalam era digital hari ini, perpustakaan tidak lagi terhad kepada bentuk fizikal tradisional, tetapi secara beransur-ansur beralih kepada sistem perpustakaan dalam talian. Melalui teknologi WebMan, kami boleh membina platform dalam talian yang memudahkan pengguna menguruskan buku. Artikel ini akan memperkenalkan cara menggunakan teknologi WebMan untuk melaksanakan sistem perpustakaan dalam talian, dan menyediakan contoh kod untuk membantu pembaca memahami dan mengamalkan dengan lebih baik.
1. Senibina Teknikal dan Analisis Keperluan
Sistem perpustakaan dalam talian terutamanya merangkumi dua modul utama: antara muka pengguna bahagian hadapan dan pelayan bahagian belakang. Antara muka pengguna bahagian hadapan bertanggungjawab untuk memaparkan maklumat buku perpustakaan dan bertindak balas kepada permintaan operasi pengguna, manakala pelayan bahagian belakang bertanggungjawab untuk memproses permintaan pengguna dan mengurus maklumat pengguna dan buku.
Untuk antara muka pengguna bahagian hadapan, kami boleh menggunakan HTML, CSS dan JavaScript untuk melaksanakan halaman paparan perpustakaan. Struktur halaman asas dicipta melalui HTML, CSS digunakan untuk mencantikkan gaya halaman, dan JavaScript bertanggungjawab untuk berinteraksi dengan pelayan bahagian belakang dan memproses data.
Untuk pelayan bahagian belakang, kita boleh memilih untuk menggunakan teknologi WebMan yang berkuasa seperti Node.js. Node.js ialah teknologi untuk membina aplikasi web yang cekap dan berskala. Ia berdasarkan model I/O dipacu peristiwa dan tidak menyekat dan mempunyai keupayaan untuk mengendalikan permintaan serentak dengan cekap.
2. Langkah pelaksanaan
Pertama, kita perlu mencipta folder projek pada komputer tempatan dan menggunakan alat baris arahan untuk memasuki folder.
Masukkan arahan berikut pada baris arahan untuk memulakan projek Node.js baharu:
npm init -y
Ini akan memulakan projek dan menjana fail package.json
untuk Pengurusan Projek tanggungan. package.json
文件,用于管理项目的依赖。
在命令行中输入以下命令,安装需要的依赖:
npm install express body-parser --save
这将安装Express框架和Body-parser模块,用于处理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请求路由逻辑中,用于处理获取书籍的逻辑:
// 模拟书籍数据 const books = [ { id: 1, title: '书籍1' }, { id: 2, title: '书籍2' }, { id: 3, title: '书籍3' } ]; // 处理GET请求路由 app.get('/api/books', (req, res) => { // 返回书籍数据 res.json(books); });
这段代码定义了一个模拟的书籍数据,并在获取书籍的GET请求路由中返回这些数据。
现在,我们已经完成了一个简单的在线图书馆系统的搭建。可以通过访问http://localhost:3000
来查看图书馆的展示页面,并通过访问http://localhost:3000/api/books
Masukkan arahan berikut pada baris arahan untuk memasang kebergantungan yang diperlukan:
rrreeeIni akan memasang rangka kerja Ekspres dan modul Penghurai Badan, digunakan untuk mengendalikan HTTP permintaan dan Parse parameter permintaan POST.
Buat pelayan
server.js
dan salin kod berikut ke dalam fail: awam
, untuk menyimpan fail halaman hadapan. 🎜🎜Buat fail HTML baharu dalam folder awam
, namakannya index.html
dan salin kod berikut ke dalam fail: 🎜rrreee🎜Takrifan kod ini Cipta ringkas halaman HTML dan memperkenalkan fail CSS dan fail JavaScript. 🎜awam
dan namakannya style.css
, dan tambah sedikit gaya. 🎜🎜Buat fail JavaScript baharu dalam folder public
, namakannya script.js
dan tambahkan beberapa logik interaktif. 🎜server.js
, tambahkan kod berikut pada penghujung fail untuk menetapkan direktori dan penghalaan fail statik: 🎜rrreee 🎜Kod ini memetakan laluan /api/books
ke laluan permintaan GET Kami akan melaksanakan logik laluan ini dalam langkah seterusnya. 🎜server.js
, tambahkan kod berikut pada logik penghalaan permintaan GET /api/books code> , digunakan untuk mengendalikan logik mendapatkan buku: 🎜rrreee🎜Kod ini mentakrifkan data buku simulasi dan mengembalikan data ini dalam laluan permintaan GET untuk mendapatkan buku. 🎜<ol start="10">🎜Sistem perpustakaan yang sempurna🎜🎜🎜Kini, kami telah menyiapkan pembinaan sistem perpustakaan dalam talian yang mudah. Anda boleh melihat halaman paparan perpustakaan dengan melawati <code>http://localhost:3000
dan mendapatkan buku dengan melawati maklumat http://localhost:3000/api/books
. 🎜🎜Pengguna boleh menyemak imbas dan mendapatkan buku melalui halaman hujung hadapan, dan mendapatkan, menambah atau memadam maklumat buku dengan menghantar permintaan kepada API. Anda boleh menambah baik sistem perpustakaan dan menambah lebih banyak fungsi mengikut keperluan anda sendiri, seperti pengesahan pengguna, peminjaman buku, dll. 🎜🎜Ringkasan🎜🎜Melalui pengenalan dan contoh kod artikel ini, kami telah mempelajari cara menggunakan teknologi WebMan untuk membina sistem perpustakaan dalam talian. Interaksi dan pemprosesan data antara antara muka pengguna bahagian hadapan dan pelayan bahagian belakang boleh dicapai dengan mudah menggunakan rangka kerja Express dan Node.js. Pembaca boleh mengembangkan lagi dan menyesuaikan sistem perpustakaan mengikut keperluan sebenar untuk memberikan pengalaman pengguna yang lebih baik. 🎜🎜Bahan rujukan🎜🎜🎜Dokumentasi rasmi Express: https://expressjs.com/🎜🎜Tapak web rasmi Node.js: https://nodejs.org/🎜🎜Atas ialah kandungan terperinci Bagaimana untuk melaksanakan sistem perpustakaan dalam talian melalui teknologi WebMan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!