[云服务器8] 搭建图书馆管理系统

PatrickYao0422

已于 2024-09-08 11:50:30 修改

阅读量847

点赞数 25

文章标签：服务器运维

于 2024-09-08 11:38:22 首次发布

本文链接：https://blog.csdn.net/2301_76197567/article/details/142012495

版权

获得云服务器

为了部署我们的项目，我们需要一台服务器（happy）。

让我们打开雨云：

在这里插入图片描述

注册一个账号，然后找到_可爱的“云服务器”，点击_{可爱的(bushi}“购买云服务器”：

区域我们可以选择中国香港，优点是不用备案，这样就不用傻傻的等审核了……

CPU 三区是只有Amd的EPYC，四区只有Xeon Gold，大家可以自行选择。

套餐的话，emm……

如果你只想试着玩，可以尝试KVM 标配版，但如果你来看这篇文章是为了正式搭建，可以选择更HIGH的配置。

操作系统我推荐Ubuntu，当然只要是Linux旗下的都可以。

在这里插入图片描述

购买好后，我们来到服务器的管理面板，找到远程连接这一栏。

打开你喜欢的SSH软件，可以是Win10+/MacOS/Linux自带的SSH，也可以类似Xterminal类似的软件，当然也可以用雨云自带的Xtermjs。

在这里插入图片描述

此时我们输入：

apt update
apt upgrade
reboot

然后你会发现，reboot后，连接断开了！

不要慌，过个3-5分钟重新连接好了！

数据库初始化

首先，我们需要设计一个数据库的模型。

请自行安装MySQL后，在SSH里输入：

mysql_secure_installtion
mysql -u root -p

然后输入你的密码（在mysql_secure_installtion中设置的密码），登录成功后输入：

create database library;
create user 'libuser'@'localhost' identified by 'password'
grant all privileges on library.* to 'libuser'@'localhost';
flush privileges

这样，我们就创建好了我们的数据库。

构建后端API

首先，我们需要安装NodeJS和npm（可能已经安装了）：

apt install nodejs npm

创建后端项目：

mkdir library-backend
cd library-backend
npm init -y
npm install express mysql body-parser

在这个文件夹下创建server.js文件，这个文件负责进行端口监听。

const express = require("express");
const mysql = require("mysql");
const bodyParser = require("body-parser");

const app = express();
const port = 12000;

app.use(bodyParser.json());

const database = mysql.createConnection({
	host: "127.0.0.1",
	user: "libuser",
	password: "password",
	database: "library"
});

database.connect((err) => {
	if (err) throw err;
	console.log("Connected to database");
});

app.get("/books",(req,res) => {
	const query = "select * from books";
	database.query(query,(err,res2) => {
		if (err) throw err;
		res.json(res2);
	});
});

app.post("/borrow",(req,res) =>{
	const {bookId,userId} = req.body;
	const query = "insert into borrow_records (book_id,user_id) values (?,?)";
	database.query(query,[bookId,userId],(err,res2) => {
		if (err) throw err;
		res.json({message:"Book borrowed successfully"});
	});
});

app.listen(port,() => {
	console.log("Server is running, visit https://server_ip:12000");
});

构建前端界面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>Library system - Powered by Node.JS</title>

	<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container mt-5">
		<h1 class="text-center">Library Books</h1>
		<div id="books" class="row mt-4">
			<!-- Blank -->
		</div>
	</div>
	
	<script>
		async function fetchBooks() {
			const response = await fetch("/books");
			const books = await response.json();
			const booksDiv = document.getElementById("books");
			
			booksDiv.innerHTML = '';
			books.forEach(book => {
				const bookCard = document.createElement("div");
				bookCard.className = "col-md-4 mb-4";
				const cardHTML = `
				<div class="card">
					<div class="card-body">
						<h5 class="card-title">${book.title}</h5>
						<h6 class="card-subtitle mb-2 text-muted">${book.author}</h6>
						<p class="card-text">Available"${book.available?"Yes":"No"}</p>
					</div>
				</div>
				`;
				bookCard.innerHTML = cardHTML;
				booksDiv.appendChild(bookCard);
			});
		}
		fetchBooks();
	</script>
</body>
</html>