写一个基于node.js的api后台管理系统(三)
创建登录页面
在项目目录下创建一个名为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操作。