当前位置：极客教程 > Node.js > Node.js 精品文章 > Node.js 如何构建员工管理系统

Node.js 如何构建员工管理系统

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();

重新排列您的目录： 需要将HTML文件的扩展名改为’.ejs’，以便在其中使用EJS。然后，您需要将每个’.ejs’文件移动到根目录下的views目录中。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 的节点包。

安装 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 employees = [ 
  { 
    employeeId: "1", 
    employeeName: "Aditya Gupta", 
    employeePost: "Manager", 
    userSalary: "43000", 
  }, 
  { 
    employeeId: "2", 
    employeeName: "Vanshita Jaiswal", 
    employeePost: "Assistant Manager", 
    userSalary: "21000", 
  }, 
]; 
  
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: employees, 
  }); 
}); 
  
app.listen(3000, (req, res) => { 
  console.log("App is running on port 3000"); 
});

由于我们在数组中有许多元素，并且我们必须打印每个元素，所以我们必须使用ForEach循环来遍历我们集合中的每个元素并显示详情。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Employee Management System</title> 
  
    <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> 
</head> 
  
<body> 
    <h2>Employee Management System</h2> 
    <table> 
        <tr> 
            <th>Id</th> 
            <th>Name</th> 
            <th>Post</th> 
            <th>Salary</th> 
        </tr> 
        <% data.forEach(element=> { %> 
            <tr> 
                <td> 
                    <%= element.employeeId %> 
                </td> 
                <td> 
                    <%= element.employeeName %> 
                </td> 
                <td> 
                    <%= element.employeePost %> 
                </td> 
                <td> 
                    <%= element.employeeSalary %> 
                </td> 
            </tr> 
            <% }) %> 
    </table> 
  
</body> 
  
</html>

步骤3：添加员工： 对于这一步骤，我们需要在‘app.js’文件中创建一个表单，并使用Body Parser来处理表单数据。

<form action="/" method="post">
    <input type="text" placeholder="Employee Name"
         name="employeeName">
    <input type="text" placeholder="Employee Post"
         name="employeePost">
    <input type="text" placeholder="Employee Salary"
         name="employeeSalary">
    <button type="submit">Submit</button>
</form>

在‘app.js’内处理表单数据：我们必须使用req.body.valueName从表单中获取值，然后将其组织成一个对象，并将其推送到我们的员工数组中。

app.post("/", (req, res) => {
   const inputEmployeeId = employees.length + 1;
   const inputEmployeeName = req.body.employeeName
   const inputEmployeePost = req.body.employeePost
   const inputEmployeeSalary = req.body.employeeSalary
   employees.push({
       employeeId: inputEmployeeId,
       employeeName: inputEmployeeName,
       employeePost: inputEmployeePost,
       employeeSalary: inputEmployeeSalary
   })
   res.render("home", {
       data: employees
   })
})

步骤4：移除员工： 更新网页以提供”移除”选项：我们需要创建一个表单，将要移除的员工的姓名发送到服务器文件’app.js’。

<form action="/delete" method="post">
    <input type="text"
        style="display: none;"  
        name="employeeId"
        value="<%= element.employeeId %>">
    <button type="submit">Delete</button>
</form>

对于删除员工，我们需要创建一个Remove路由，在这里我们将获取请求的员工名字并搜索具有相同名字的员工，然后删除该元素。

app.post('/delete', (req, res) => {
   var requestedEmployeeId = req.body.employeeId;
   var j = 0;
   employees.forEach(employee => {
       j = j + 1;
       if (employee.employeeId === requestedEmployeeId) {
           employees.splice((j - 1), 1)
       }
   })
   res.render("home", {
       data: employees
   })
})

步骤5：更新职位和薪水： 创建一个更新选项的网页来更新：我们需要创建一个表单，该表单能够发送要更新的员工姓名。

<form action="update" method="post">
    <input type="text" placeholder="Employee Id"
           name="employeeId">
    <input type="text" placeholder="Employee Name" 
        name="employeeName">
    <input type="text" placeholder="Employee Post" 
        name="employeePost">
    <input type="text" placeholder="Employee Salary"
         name="employeeSalary">
    <button type="submit">Update</button>
</form>

为了更新员工信息，我们需要创建一个更新路由，通过这个路由，我们会获取请求的员工姓名，并搜索具有相同姓名的员工，然后用新数据（比如薪水或职位）来更新这个员工的信息。

app.post('/update', (req, res) => {
   const requestedEmployeeId = req.body.employeeId;
   const inputEmployeeName = req.body.employeeName
   const inputEmployeePost = req.body.employeePost
   const inputEmployeeSalary = req.body.employeeSalary

   var j = 0;
   employees.forEach(employee => {
       j = j + 1;
       if (employee.employeeId === requestedEmployeeId) {
           employee.employeeName = inputEmployeeName,
           employee.employeePost = inputEmployeePost,
           employee.employeeSalary = inputEmployeeSalary
       }
   })
   res.render("home", {
       data: employees
   })
})

示例： 以下是使用Node.js构建图书馆管理系统的完整代码：

app.js

const express = require("express"); 
const bodyParser = require("body-parser"); 
const employees = [ 
  { 
    employeeId: "1", 
    employeeName: "Aditya Gupta", 
    employeePost: "Manager", 
    employeeSalary: "43000", 
  }, 
  { 
    employeeId: "2", 
    employeeName: "Vanshita Jaiswal", 
    employeePost: "Assistant Manager", 
    employeeSalary: "21000", 
  }, 
]; 
  
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: employees, 
  }); 
}); 
  
app.post("/", (req, res) => { 
  const inputEmployeeId = employees.length + 1; 
  const inputEmployeeName = req.body.employeeName; 
  const inputEmployeePost = req.body.employeePost; 
  const inputEmployeeSalary = req.body.employeeSalary; 
  
  employees.push({ 
    employeeId: inputEmployeeId, 
    employeeName: inputEmployeeName, 
    employeePost: inputEmployeePost, 
    employeeSalary: inputEmployeeSalary, 
  }); 
  
  res.render("home", { 
    data: employees, 
  }); 
}); 
  
app.post("/delete", (req, res) => { 
  var requestedEmployeeId = req.body.employeeId; 
  var j = 0; 
  employees.forEach((employee) => { 
    j = j + 1; 
    if (employee.employeeId === requestedEmployeeId) { 
      employees.splice(j - 1, 1); 
    } 
  }); 
  res.render("home", { 
    data: employees, 
  }); 
}); 
  
app.post("/update", (req, res) => { 
  const requestedEmployeeId = req.body.employeeId; 
  const inputEmployeeName = req.body.employeeName; 
  const inputEmployeePost = req.body.employeePost; 
  const inputEmployeeSalary = req.body.employeeSalary; 
  
  var j = 0; 
  employees.forEach((employee) => { 
    j = j + 1; 
    if (employee.employeeId == requestedEmployeeId) { 
      (employee.employeeName = inputEmployeeName), 
        (employee.employeePost = inputEmployeePost), 
        (employee.employeeSalary = inputEmployeeSalary); 
    } 
  }); 
  res.render("home", { 
    data: employees, 
  }); 
}); 
  
app.listen(3000, (req, res) => { 
  console.log("App is running on port 3000"); 
});

home.ejs

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Employee Management System</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> 
    <h2>Employee Management System</h2> 
    <table> 
        <tr> 
          <th>Id</th> 
          <th>Name</th> 
          <th>Post</th> 
          <th>Salary</th> 
          <th>Delete</th> 
        </tr> 
        <% data.forEach(element => { %> 
        <tr> 
          <td><%= element.employeeId %></td> 
          <td><%= element.employeeName %></td> 
          <td><%= element.employeePost %></td> 
          <td><%= element.employeeSalary %></td> 
          <td> 
                <form action="/delete" method="post"> 
                  <input type="text" style="display: none;" 
                     name="employeeId" 
                     value="<%= element.employeeId %>"> 
                  <button type="submit">Delete</button> 
                </form> 
          </td> 
        </tr> 
        <% }) %> 
  </table> 
  
    <h2>Add Employee</h2> 
  
    <form action="/" method="post"> 
        <input type="text" placeholder="Employee Name" 
            name="employeeName"> 
        <input type="text" placeholder="Employee Post" 
            name="employeePost"> 
        <input type="text" placeholder="Employee Salary" 
            name="employeeSalary"> 
        <button type="submit">Submit</button> 
    </form> 
  
    <h2>Update Employee</h2> 
  
    <form action="/update" method="post"> 
        <input type="text" placeholder="Employee Id" 
            name="employeeId"> 
        <input type="text" placeholder="Employee Name"
            name="employeeName"> 
        <input type="text" placeholder="Employee Post"
            name="employeePost"> 
        <input type="text" placeholder="Employee Salary"
            name="employeeSalary"> 
        <button type="submit">Update</button> 
    </form> 
</body> 
  
</html>

运行应用程序的步骤：

在终端内输入以下命令

node app.js

输出:

Node.js 如何构建员工管理系统

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

Node.js 精品教程