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

最新推荐文章于 2024-04-18 10:08:37 发布

袁代码

最新推荐文章于 2024-04-18 10:08:37 发布

阅读量1.7k

点赞数 1

分类专栏：小白专区文章标签： node.js javascript 前端

本文链接：https://blog.csdn.net/qq_39653624/article/details/129041733

版权

小白专区专栏收录该内容

11 篇文章 0 订阅

订阅专栏

创建登录页面

在项目目录下创建一个名为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操作。

袁代码

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
写一个基于node.js的api后台管理系统(三)

接下来是前端页面，并试运行程序
复制链接

扫一扫

专栏目录