当前位置：首页 > news >正文

写一个基于node.js的api后台管理系统(三)

news 文章来源：https://blog.csdn.net/qq_39653624/article/details/129041733 2025/5/4 7:26:50

创建登录页面

在项目目录下创建一个名为public的文件夹，并在其中创建一个HTML文件login.html。添加以下代码：

<!DOCTYPE html>
<html>
<head><title>Login - Task Management</title>
</head>
<body><h1>Login</h1><form id="loginForm"><input type="text" name="username" placeholder="Username"><input type="password" name="password" placeholder="Password"><button type="submit">Login</button></form><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="login.js"></script>
</body>
</html>

以上代码创建了一个登录表单，用于输入用户名和密码。我们还引入了jQuery库和一个名为login.js的JavaScript文件。

实现登录页面功能

在public文件夹下创建一个名为login.js的JavaScript文件，添加以下代码：

$(function() {// 表单提交事件$('#loginForm').submit(function(e) {e.preventDefault();var username = $('input[name="username"]').val();var password = $('input[name="password"]').val();$.post('/login', { username: username, password: password }, function(data) {if (data.success) {window.location.href = '/';} else {alert('Invalid username or password.');}});});
});

以上代码实现了登录表单的提交事件，通过Ajax发送POST请求到/login路由，将用户名和密码作为请求体，服务端进行验证，并返回一个布尔值表示验证结果。如果验证成功，前端页面跳转到/路由，否则弹出一个警告框提示用户。

添加登录路由

在app.js中添加以下代码，用于处理登录路由：

app.post('/login', function(req, res) {var username = req.body.username;var password = req.body.password;// TODO: 从数据库中查询用户信息，验证用户名和密码是否正确if (username === 'admin' && password === 'password') {req.session.isLoggedIn = true;res.json({ success: true });} else {req.session.isLoggedIn = false;res.json({ success: false });}
});

以上代码模拟了从数据库中查询用户信息，验证用户名和密码是否正确，如果验证成功，将isLoggedIn设置为true，否则设置为false，并返回一个JSON对象表示验证结果。

添加登录验证中间件

在app.js中添加以下代码，用于添加一个登录验证中间件：

function requireLogin(req, res, next) {if (req.session.isLoggedIn) {next();} else {res.redirect('/login');}
}app.use(requireLogin);

以上代码定义了一个requireLogin中间件，如果用户已经登录，调用next()函数让请求继续执行，否则重定向到登录页面。

修改任务管理页面路由

在app.js中，将任务管理页面路由/tasks修改为如下代码：

app.get('/tasks', function(req, res) {Task.find({}, function(err, tasks) {if (err) {console.error(err);return res.status(500).send('Server Error');}res.render('tasks', { tasks: tasks });});
});

以上代码首先使用Mongoose查询所有的任务，并将结果传递给视图引擎，使用tasks.ejs模板文件渲染页面。

修改模板文件

在views文件夹下，打开tasks.ejs模板文件，并添加如下代码：

<% if (isLoggedIn) { %><a href="/logout">Logout</a>
<% } else { %><a href="/login">Login</a>
<% } %><h1>Task List</h1><table><tr><th>Title</th><th>Description</th><th>Due Date</th><th></th></tr><% tasks.forEach(function(task) { %><tr><td><%= task.title %></td><td><%= task.description %></td><td><%= task.dueDate.toDateString() %></td><td><a href="/tasks/<%= task.id %>/edit">Edit</a> | <a href="/tasks/<%= task.id %>/delete">Delete</a></td></tr><% }); %>
</table><a href="/tasks/new">New Task</a>

以上代码在任务列表页面上添加了一个登录链接和一个注销链接，根据isLoggedIn变量动态显示。如果用户已经登录，显示注销链接，否则显示登录链接。此外，还添加了一个"New Task"链接，用于创建新的任务。

添加注销路由

在app.js中添加以下代码，用于处理注销路由：

app.get('/logout', function(req, res) {req.session.isLoggedIn = false;res.redirect('/login');
});

以上代码将isLoggedIn设置为false，并重定向到登录页面。

将静态资源托管

在app.js中添加以下代码，以使用Express框架托管静态资源：

app.use(express.static(path.join(__dirname, 'public')));

启动服务器

在终端中运行以下命令，以启动服务器：

node app.js

现在，您应该可以通过浏览器访问http://localhost:3000/来访问您的应用程序，并使用前端页面执行CRUD操作。