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

Node.js 如何构建用户管理系统

Node.js 如何构建用户管理系统

在这篇文章中，我们将创建一个用户管理系统。用户管理系统主要用于管理任何组织的用户，组织可以查看用户、添加用户、删除用户和更新用户。

我们将设置一个中间件EJS。EJS可以方便地将数据从服务器文件（app.js或server.js）发送到网页。之后，我们将使用Body Parser来捕获用户从表单中输入的值，并将它们存储在一个集合中。然后，我们将把该集合的数据发送到网页上。我们还将创建用于删除用户的删除路由和用于更新用户数据的更新路由。

方法： 下面是以上方法的逐步实现。

步骤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');

重新排序您的目录： 使用EJS时，必须将HTML文件的扩展名更改为’.ejs’，而不是’.html’。然后，您需要将views目录中的每个’.ejs’文件移动到根目录下。EJS默认在views文件夹中查找’.ejs’文件。

使用EJS变量： 在您更新的.ejs文件中，您必须使用EJS变量来接收来自服务器文件的值。您可以使用以下方式声明EJS变量：

<%= variableName %>

home.ejs

<!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 World!" })
})

app.js

const express = require('express') 
const app = express() 
app.set('view engine', 'ejs') 
  
app.get("/", (req, res) => { 
     res.render("home", { variableName: "Hello World!" }) 
}) 
  
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：获取当前用户： 我们有一个包含不同属性的用户列表数组。让我们将该数组发送到我们的网页并显示当前用户列表。在之前的步骤中，我们只发送了一个值给变量，现在我们要发送整个数组。

app.js

const express = require('express') 
const bodyParser = require('body-parser') 
const users = [{ 
    userName: "Aditya Gupta", 
    userEmail: "aditya@gmail.com", 
    userAge: "22", 
    userUniqueId: '1'
}, 
{ 
    userName: "Vanshita Jaiswal", 
    userEmail: "vanshita@gmail.com", 
    userAge: "21", 
    userUniqueId: '2'
}, 
{ 
    userName: "Sachin Yadav", 
    userEmail: "sachin@gmail.com", 
    userAge: "22", 
    userUniqueId: '3'
} 
] 
  
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: users 
    }) 
}) 
  
app.listen(3000, (req, res) => { 
    console.log("App is running on port 3000") 
})

由于我们的数组内有很多元素，而且我们需要打印每一个元素，所以我们必须使用ForEach循环来遍历集合中的每个元素并显示详细信息。

home.ejs

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>User 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>User Management System</h2> 
    <table> 
        <tr> 
            <th>User Id</th> 
            <th>User Name</th> 
            <th>User Email</th> 
            <th>Age</th> 
        </tr> 
        <% data.forEach(element=> { %> 
            <tr> 
                <td> 
                    <%= element.userUniqueId %> 
                </td> 
                <td> 
                    <%= element.userName %> 
                </td> 
                <td> 
                    <%= element.userEmail %> 
                </td> 
                <td> 
                    <%= element.userAge %> 
                </td> 
            </tr> 
        <% }) %> 
    </table> 
</body> 
  
</html>

步骤2：将用户添加到列表中：

对此，我们需要创建一个表单，并在我们的 ‘app.js’ 文件中使用 Body Parser 处理表单数据。

home.ejs

<h2>Add User</h2>

<form action="/" method="post">
       <input type="text" placeholder="User
         Unique Id" name="userUniqueId">
       <input type="text" placeholder="User Name" 
           name="userName">
       <input type="text" placeholder="User Email"
            name="userEmail">
       <input type="text" placeholder="User Age"
            name="userAge">
       <button type="submit">Submit</button>
</form>

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

app.post("/", (req, res) => {
   const inputUserName = req.body.userName
   const inputUserEmail = req.body.userEmail
   const inputUserAge = req.body.userAge
   const inputUserUniqueId = req.body.userUniqueId

   users.push({
        userName: inputUserName,
        userEmail: inputUserEmail,
        userAge: inputUserAge,
        userUniqueId: inputUserUniqueId
   })

   res.render("home", {
       data: users
   })
})

步骤3：删除用户： 更新网页以提供删除选项： 我们需要创建一个发送用户唯一标识符到服务器文件‘app.js’的表单。

home.ejs

<table>
       <tr>
         <th>User Id</th>
         <th>User Name</th>
         <th>User Email</th>
         <th>Age</th>
         <th>Delete</th>
       </tr>
       <% data.forEach(element => { %>
       <tr>
         <td><%= element.userUniqueId %></td>
         <td><%= element.userName %></td>
         <td><%= element.userEmail %></td>
         <td><%= element.userAge %></td>
         <td>
      ****        <form action="/delete" method="post">
                 <input type="text" style="display: none;" 
                    name="userUniqueId" 
                    value="<%= element.userUniqueId %>">
                 <button type="submit">Delete</button>
               </form>
         </td>
       </tr>
       <% }) %>
</table>

要删除一个用户，我们需要创建一个删除路由，在这个路由中，我们将获取组织想要删除的请求用户的“userUniqueId”，然后搜索具有相同“userUniqueId”的元素，并删除该元素。

app.js

app.post('/delete', (req, res) => {
       var requestedUserUniqueId = req.body.userUniqueId;
       var j = 0;
       users.forEach(user => {
           j = j + 1;
           if (user.userUniqueId === requestedUserUniqueId) {
               users.splice((j - 1), 1)
           }
       })
       res.render("home", {
           data: users
       })
})

步骤4：更新用户数据： 让我们添加一个表单来更新用户的数据

home.ejs

<h2>Update User</h2>

<form action="update" method="post">
       <input type="text" placeholder="User Unique Id"
        name="userUniqueId">
       <input type="text" placeholder="User Name" 
           name="userName">
       <input type="text" placeholder="User Email" 
           name="userEmail">
       <input type="text" placeholder="User Age" 
           name="userAge">
       <button type="submit">Update</button>
</form>

为用户数据创建更新路由： 再次，我们需要从更新表单中获取详细信息，并且搜索具有与我们从表单中获取的’userUniqueId’相同的元素，然后将所有获取的详细信息重写到找到的元素中。

app.js

app.post('/update', (req, res) => {
       const inputUserName = req.body.userName
       const inputUserEmail = req.body.userEmail
       const inputUserAge = req.body.userAge
       const inputUserUniqueId = req.body.userUniqueId
       var j = 0;

       users.forEach(user => {
           j = j + 1;
           if (user.userUniqueId === inputUserUniqueId) {
               user.userName = inputUserName
               user.userEmail = inputUserEmail
               user.userAge = inputUserAge
           }
       })

       res.render("home", {
           data: users
       })
})

完整代码：

home.ejs

const express = require('express') 
const bodyParser = require('body-parser') 
const users = [{ 
        userName: "Aditya Gupta", 
        userEmail: "aditya@gmail.com", 
        userAge: "22", 
        userUniqueId: '1' 
    }, 
    { 
        userName: "Vanshita Jaiswal", 
        userEmail: "vanshita@gmail.com", 
        userAge: "21", 
        userUniqueId: '2' 
    }, 
    { 
        userName: "Sachin Yadav", 
        userEmail: "sachin@gmail.com", 
        userAge: "22", 
        userUniqueId: '3' 
    } 
] 
  
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: users 
    }) 
}) 
  
app.post("/", (req, res) => { 
    const inputUserName = req.body.userName 
    const inputUserEmail = req.body.userEmail 
    const inputUserAge = req.body.userAge 
    const inputUserUniqueId = req.body.userUniqueId 
  
    users.push({ 
         userName: inputUserName, 
         userEmail: inputUserEmail, 
         userAge: inputUserAge, 
         userUniqueId: inputUserUniqueId 
    }) 
  
    res.render("home", { 
        data: users 
    }) 
}) 
  
app.post('/delete', (req, res) => { 
    var requestedUserUniqueId = req.body.userUniqueId; 
    var j = 0; 
    users.forEach(user => { 
        j = j + 1; 
        if (user.userUniqueId === requestedUserUniqueId) { 
            users.splice((j - 1), 1) 
        } 
    }) 
    res.render("home", { 
        data: users 
    }) 
}) 
  
app.post('/update', (req, res) => { 
    const inputUserName = req.body.userName 
    const inputUserEmail = req.body.userEmail 
    const inputUserAge = req.body.userAge 
    const inputUserUniqueId = req.body.userUniqueId 
  
    var j = 0; 
    users.forEach(user => { 
        j = j + 1; 
        if (user.userUniqueId === inputUserUniqueId) { 
            user.userName = inputUserName 
            user.userEmail = inputUserEmail 
            user.userAge = inputUserAge 
        } 
    }) 
    res.render("home", { 
        data: users 
    }) 
}) 
  
app.listen(3000, (req, res) => { 
    console.log("App is running on port 3000") 
})

app.js

const express = require('express') 
const bodyParser = require('body-parser') 
const users = [{ 
    userName: "Aditya Gupta", 
    userEmail: "aditya@gmail.com", 
    userAge: "22", 
    userUniqueId: '1'
}, 
{ 
    userName: "Vanshita Jaiswal", 
    userEmail: "vanshita@gmail.com", 
    userAge: "21", 
    userUniqueId: '2'
}, 
{ 
    userName: "Sachin Yadav", 
    userEmail: "sachin@gmail.com", 
    userAge: "22", 
    userUniqueId: '3'
} 
] 
  
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: users 
    }) 
}) 
  
app.post("/", (req, res) => { 
    const inputUserName = req.body.userName 
    const inputUserEmail = req.body.userEmail 
    const inputUserAge = req.body.userAge 
    const inputUserUniqueId = req.body.userUniqueId 
  
    users.push({ 
        userName: inputUserName, 
        userEmail: inputUserEmail, 
        userAge: inputUserAge, 
        userUniqueId: inputUserUniqueId 
    }) 
  
    res.render("home", { 
        data: users 
    }) 
}) 
  
app.post('/delete', (req, res) => { 
    var requestedUserUniqueId = req.body.userUniqueId; 
    var j = 0; 
    users.forEach(user => { 
        j = j + 1; 
        if (user.userUniqueId === requestedUserUniqueId) { 
            users.splice((j - 1), 1) 
        } 
    }) 
    res.render("home", { 
        data: users 
    }) 
}) 
  
app.post('/update', (req, res) => { 
    const inputUserName = req.body.userName 
    const inputUserEmail = req.body.userEmail 
    const inputUserAge = req.body.userAge 
    const inputUserUniqueId = req.body.userUniqueId 
  
    var j = 0; 
    users.forEach(user => { 
        j = j + 1; 
        if (user.userUniqueId === inputUserUniqueId) { 
            user.userName = inputUserName 
            user.userEmail = inputUserEmail 
            user.userAge = inputUserAge 
        } 
    }) 
    res.render("home", { 
        data: users 
    }) 
}) 
  
app.listen(3000, (req, res) => { 
    console.log("App is running on port 3000") 
})

输出：

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 精品教程