Node.js 如何构建医院管理系统
在本文中,我们将创建一个医院管理系统。医院管理系统主要用于管理医院中的患者。它可以帮助查看哪些患者没有被分配病床,如果有多余的病床,或者没有病床。它确保已出院的患者的床位不应该空着,它们应该分配给那些需要的人。
功能: 医院可以使用该医院管理系统执行以下操作:
- 显示所有患者
- 添加新患者
- 如果没有可用的床位,则不会添加新患者
- 出院患者
方法: 我们将使用Body Parser来捕获用户从表单中输入的值,例如患者的姓名、编号、出生日期、城市、电话号码和房间号,并将它们存储在一个集合中。然后我们将使用EJS将患者的数据发送到网页。EJS是一个中间件,可以方便地将数据从服务器文件(app.js或server.js)发送到网页。我们还将创建一个出院路由来出院患者。
实现: 下面是以上方法的逐步实现。
步骤1:项目设置:
初始化NPM: 创建并定位您的项目文件夹到终端并输入以下命令
npm init -y
它初始化我们的节点应用程序并创建一个package.json文件。
安装依赖项: 将您的根项目目录定位到终端,并输入以下命令
npm install express ejs body-parser
安装Express、EJS和Body Parser作为项目的依赖项
创建服务器文件: 在’ app.js ‘文件中请求Express模块,并创建一个常量’app’以创建express模块的实例,然后将EJS设置为默认视图引擎。
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
我们还创建一个常量 availableBeds ,并将其设置为可用床位的数量。
const availableBeds = 2;
重新排列目录:
为了在HTML文件中使用EJS,需要将扩展名改为’.ejs’,而不是’.html’。然后,您需要将views目录中的每个’.ejs’文件移到根目录中。EJS默认情况下会在views文件夹中查找’.ejs’文件。
使用EJS变量:
在更新后的.ejs文件中,您需要使用EJS变量来接收来自服务器文件的值。您可以像这样在EJS中声明变量:
<%= variableName %>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<%= variableName %>
</body>
</html>
将数据发送到变量: 在您的服务器文件(app.js或index.js)中,您可以使用render方法将EJS文件和一些数据发送出去。
app.get("/", (req, res) => {
res.render("home", { variableName: "Hello Geeks!" })
})
const express = require('express')
const app = express()
app.set('view engine', 'ejs')
app.get("/", (req, res) => {
res.render("home", { variableName: "Hello Geeks!" })
})
app.listen(3000, (req, res) => {
console.log("App is running on port 3000")
})
从表单获取数据并传递到app.js: 要接收表单的输入值,我们必须使用一个名为body-parser的node包。
安装body-parser:
npm install body-parser
需要安装 body-parser 模块:
const bodyParser = require('body-parser')
然后:
app.use( bodyParser.json() );
app.use(bodyParser.urlencoded({
extended: true
}));
然后我们可以使用请求对象来处理表单数据。
步骤2: 获取病人记录: 我们有一个包含不同属性的病人数组。让我们将该数组发送到我们的网页上。在之前的步骤中,我们只是发送一个值到变量,现在我们发送完整的数组。
const express = require('express')
const bodyParser = require('body-parser')
const patients = [{
name: 'Aditya',
number: '8175826846',
dob: '29/09/2001',
city: 'Mirzapur',
roomNo: '1',
}]
const app = express()
app.set('view engine', 'ejs')
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}))
app.get("/", function (req, res) {
res.render("home", {
data: patients
})
})
app.listen(3000, (req, res) => {
console.log("App is running on port 3000")
})
由于我们的数组中有很多元素,我们必须打印每个元素,所以我们必须使用For Each循环来遍历集合中的每个单个元素并显示详情。
<!DOCTYPE html>
<html>
<head>
<title>HMS</title>
</head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<body>
<h1>All Patients</h1>
<table>
<tr>
<th>Name</th>
<th>Number</th>
<th>DOB</th>
<th>City</th>
<th>Room No.</th>
</tr>
<% data.forEach(element=> { %>
<tr>
<td>
<%= element.name %>
</td>
<td>
<%= element.number %>
</td>
<td>
<%= element.dob %>
</td>
<td>
<%= element.city %>
</td>
<td>
<%= element.roomNo %>
</td>
</tr>
<% }) %>
</table>
</body>
</html>
步骤3: 添加病人到列表中: 对此,我们需要创建一个表单,并使用Body Parser在我们的app.js文件中处理表单数据。
<form action="/" method="post">
<input type="text" placeholder="Name" name="name">
<input type="number" placeholder="Number" name="number">
<input type="text" placeholder="DOB" name="dob">
<input type="text" placeholder="City" name="city">
<button type="submit">Add</button>
</form>
在‘app.js’中处理表单数据:我们必须使用req.body.valueName从表单中提取值,然后按照对象的形式进行整理,并将其推入我们的病人数组中。
app.post("/", (req, res) => {
const name = req.body.name
const number = req.body.number
const dob = req.body.dob
const city = req.body.city
if (patients.length < availableBeds) {
const roomNo = patients.length + 1;
patients.push({
name: name,
number: number,
dob: dob,
city: city,
roomNo: roomNo
})
res.render("home", {
data: patients
})
}
else {
res.send("No room available");
}
})
只有在有空床位的情况下,我们才会推送患者,如果没有,就简单地返回 没有空房间 的消息。
步骤4:出院患者: 更新网页并提供出院选项:我们需要创建一个表单,将想要出院的患者姓名发送到服务器文件’app.js’。
<form action="/discharge" method="post">
<input type="text" style="display: none;"
name="name" value="<%= element.name %>">
<button type="submit">Discharge</button>
</form>
对于出院患者,我们必须创建一个出院路线,在其中我们将获取请求的患者姓名并搜索具有相同姓名的患者,并删除该元素。
app.post('/discharge', (req, res) => {
var name = req.body.name;
var j = 0;
patients.forEach(patient => {
j = j + 1;
if (patient.name == name) {
patients.splice((j - 1), 1)
}
})
res.render("home", {
data: patients
})
})
完整代码:
app.js
const express = require('express')
const bodyParser = require('body-parser')
const patients = [{
name: 'Aditya',
number: '8175826846',
dob: '29/09/2001',
city: 'Mirzapur',
roomNo: '1',
}]
const availableBeds = 2;
const app = express()
app.set('view engine', 'ejs')
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}))
app.get("/", function (req, res) {
res.render("home", {
data: patients
})
})
app.post("/", (req, res) => {
const name = req.body.name
const number = req.body.number
const dob = req.body.dob
const city = req.body.city
if (patients.length < availableBeds) {
const roomNo = patients.length + 1;
patients.push({
name: name,
number: number,
dob: dob,
city: city,
roomNo: roomNo
})
res.render("home", {
data: patients
})
}
else {
res.send("No room available");
}
})
app.post('/discharge', (req, res) => {
var name = req.body.name;
var j = 0;
patients.forEach(patient => {
j = j + 1;
if (patient.name == name) {
patients.splice((j - 1), 1)
}
})
res.render("home", {
data: patients
})
})
app.listen(3000, (req, res) => {
console.log("App is running on port 3000")
})
home.ejs
<!DOCTYPE html>
<html>
<head>
<title>HMS</title>
</head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<body>
<h1>All Patients</h1>
<table>
<tr>
<th>Name</th>
<th>Number</th>
<th>DOB</th>
<th>City</th>
<th>Room No.</th>
<th>Discharge</th>
</tr>
<% data.forEach(element=> { %>
<tr>
<td><%= element.name %></td>
<td><%= element.number %></td>
<td><%= element.dob %></td>
<td><%= element.city %></td>
<td><%= element.roomNo %></td>
<td>
<form action="/discharge" method="post">
<input type="text" style="display: none;"
name="name" value="<%= element.name %>">
<button type="submit">Discharge</button>
</form>
</td>
</tr>
<% }) %>
</table>
<h1>Add Patient</h1>
<form action="/" method="post">
<input type="text" placeholder="Name" name="name">
<input type="number" placeholder="Number" name="number">
<input type="text" placeholder="DOB" name="dob">
<input type="text" placeholder="City" name="city">
<button type="submit">Add</button>
</form>
</body>
</html>
运行该应用的步骤: 在终端内输入运行脚本的命令。
node app.js
输出: