排行榜 统计
  • 建站日期:2020-07-15
  • 文章总数:63 篇
  • 评论总数:1436 条
  • 分类总数:6 个
  • 最后更新:2023年03月28日

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

本文阅读 13 分钟
首页 精品教程 正文

要开发一个基于node.js的API后台管理系统,需要完成以下步骤:

确定后台管理系统的需求和功能。你需要了解你的系统需要实现哪些功能,包括用户身份验证、数据的增删改查、API输出等。

创建一个基本的node.js项目。可以使用node.js的命令行工具或者IDE(例如VS Code)来创建一个基本的node.js项目。

配置项目所需的依赖项。需要安装一些npm包来支持项目的各种功能,例如Express.js用于构建Web应用程序,MongoDB驱动程序用于连接和操作MongoDB数据库等等。

创建管理页面。你需要创建一个管理页面,让管理员可以登录和管理数据。你可以使用前端框架(例如React.js、Vue.js等)来创建用户界面,也可以使用模板引擎(例如EJS、Handlebars等)来生成HTML页面。

实现用户身份验证。管理员需要登录才能管理数据,因此你需要实现用户身份验证功能。你可以使用Passport.js等身份验证中间件来验证用户身份,并将验证结果存储在session中。

连接数据库。你需要使用MongoDB驱动程序来连接数据库,并编写代码来处理增删改查操作。你可以使用mongoose这个库来简化与MongoDB的交互。

编写API。你需要编写API来输出数据,以便其他应用程序可以使用你的数据。你可以使用Express.js来创建API路由,并使用mongoose来操作数据库。API可以输出JSON数据,也可以输出其他格式的数据(例如XML、CSV等)。

测试并部署。完成开发后,你需要对应用程序进行测试,并将其部署到生产环境中。你可以使用测试框架(例如Mocha、Jest等)来测试应用程序,使用Docker、Heroku等云平台来部署应用程序。

接下来,我们按照上面提到的步骤来逐步实现你的API后台管理系统。

创建一个基本的node.js项目

首先,打开命令行窗口或者IDE,使用以下命令创建一个基本的node.js项目:

mkdir myproject
cd myproject
npm init

该命令会在当前目录下创建一个名为myproject的文件夹,并生成一个package.json文件。

配置项目所需的依赖项

接下来,我们需要安装一些npm包来支持我们的项目。我们需要使用Express.js、MongoDB驱动程序和Passport.js等包,使用以下命令安装这些包:

npm install express mongodb mongoose passport passport-local express-session

以上命令会安装express用于构建Web应用程序,mongodb和mongoose用于连接和操作MongoDB数据库,passport和passport-local用于用户身份验证,express-session用于在服务器端存储session数据。

创建管理页面

我们将使用React.js来创建用户界面。首先,使用以下命令安装create-react-app:

npm install -g create-react-app

接下来,在命令行窗口中进入项目根目录,使用以下命令创建一个名为client的React应用程序:

create-react-app client

以上命令会在当前目录下创建一个名为client的文件夹,并生成一个React应用程序。

实现用户身份验证

我们需要实现用户身份验证功能,让管理员可以登录管理页面。在服务器端,我们需要使用Passport.js中间件来验证用户身份。首先,创建一个名为auth.js的文件,并添加以下代码:

const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const User = require('./models/User');

passport.use(new LocalStrategy(
  (username, password, done) => {
    User.findOne({ username: username }, (err, user) => {
      if (err) { return done(err); }
      if (!user) { return done(null, false); }
      if (!user.verifyPassword(password)) { return done(null, false); }
      return done(null, user);
    });
  }
));

passport.serializeUser((user, done) => {
  done(null, user.id);
});

passport.deserializeUser((id, done) => {
  User.findById(id, (err, user) => {
    done(err, user);
  });
});

以上代码创建了一个本地策略,用于验证用户名和密码。我们还需要编写User模型,并在其中添加verifyPassword方法,用于验证密码。在User模型中,我们还需要使用bcrypt库来对密码进行加密。下面是User模型的示例代码:

const mongoose = require('mongoose');
const bcrypt = require('bcrypt');

const userSchema = new mongoose.Schema({
  username: { type: String, unique: true },
  password: String,
  role: String
});

userSchema.pre('save', function(next) {
  const user = this;

  if (!user.isModified('password')) {
    return next();
  }

  bcrypt.genSalt(10, (err, salt) => {
    if (err) { return next(err); }

    bcrypt.hash(user.password, salt, (err, hash) => {
      if (err) { return next(err); }
      user.password = hash;
      next();
    });
  });
});

userSchema.methods.verifyPassword = function(password) {
  return bcrypt.compareSync(password, this.password);
};

const User = mongoose.model('User', userSchema);

module.exports = User;

在以上代码中,我们使用bcrypt库对密码进行加密,生成一个10位的盐,并将盐和密码一起进行哈希处理。我们还为User模型添加了verifyPassword方法,用于验证密码。

接下来,在服务器端创建一个名为users.js的文件,并添加以下代码:

const express = require('express');
const passport = require('passport');
const User = require('../models/User');

const router = express.Router();

router.post('/login', (req, res, next) => {
  passport.authenticate('local', (err, user, info) => {
    if (err) { return next(err); }
    if (!user) { return res.status(401).json({ message: 'Authentication failed' }); }
    req.logIn(user, (err) => {
      if (err) { return next(err); }
      return res.json(user);
    });
  })(req, res, next);
});

router.post('/logout', (req, res) => {
  req.logout();
  res.json({ message: 'Successfully logged out' });
});

module.exports = router;

以上代码创建了一个名为/login的POST路由,用于用户登录。我们使用Passport.js的authenticate方法验证用户身份,如果验证通过,则使用req.logIn方法登录用户。我们还为/logout路由添加了一个POST路由,用于用户注销。

创建API路由

接下来,我们需要创建一些API路由,用于实现数据的增删改查。在服务器端创建一个名为tasks.js的文件,并添加以下代码:

const express = require('express');
const Task = require('../models/Task');

const router = express.Router();

router.get('/', (req, res, next) => {
  Task.find({}, (err, tasks) => {
    if (err) { return next(err); }
    res.json(tasks);
  });
});

router.post('/', (req, res, next) => {
  const task = new Task(req.body);
  task.save((err, task) => {
    if (err) { return next(err); }
    res.json(task);
  });
});

router.put('/:id', (req, res, next) => {
  const id = req.params.id;
  Task.findByIdAndUpdate(id, req.body, (err, task) => {
    if (err) { return next(err); }
    res.json(task);
  });
});
router.delete('/:id', (req, res, next) => {
  const id = req.params.id;
  Task.findByIdAndDelete(id, (err, task) => {
    if (err) { return next(err); }
    res.json(task);
  });
});

module.exports = router;

以上代码创建了四个路由:/用于获取所有任务,POST /用于创建新任务,PUT /:id用于更新任务,DELETE /:id用于删除任务。我们使用Mongoose的CRUD方法对数据库进行操作。

将路由添加到应用程序中

现在,我们需要将所有路由添加到应用程序中。在服务器端的app.js文件中添加以下代码:

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const passport = require('passport');
const session = require('express-session');
const LocalStrategy = require('passport-local').Strategy;
const User = require('./models/User');
const tasks = require('./routes/tasks');
const users = require('./routes/users');

const app = express();

mongoose.connect('mongodb://localhost/mydatabase', { useNewUrlParser: true });

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.use(session({
  secret: 'mysecret',
  resave: false,
  saveUninitialized: false
}));

passport.use(new LocalStrategy((username, password, done) => {
  User.findOne({ username: username }, (err, user) => {
    if (err) { return done(err); }
    if (!user) { return done(null, false); }
    if (!user.verifyPassword(password)) { return done(null, false); }
    return done(null, user);
  });
}));

passport.serializeUser((user, done) => {
  done(null, user.id);
});

passport.deserializeUser((id, done) => {
  User.findById(id, (err, user) => {
    done(err, user);
  });
});

app.use(passport.initialize());
app.use(passport.session());

app.use('/tasks', tasks);
app.use('/users', users);

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在以上代码中,我们首先使用mongoose.connect方法连接到MongoDB数据库。然后,我们使用body-parser中间件来解析HTTP请求体,使用express-session中间件来管理会话。我们还使用Passport.js来进行用户认证,使用LocalStrategy策略来验证用户名和密码,并在serializeUser和deserializeUser方法中将用户数据存储在会话中。

最后,我们使用app.use方法将所有路由添加到应用程序中,并使用app.listen方法启动服务器。

这就是一个基于Node.js的API后台管理系统的基本实现步骤。当然,具体实现还需要根据具体业务需求进行调整和完善。

接下来我们写API输出的功能,以下是具体实现步骤:

定义API路由

在routes/tasks.js中添加以下代码:

router.get('/api', (req, res, next) => {
  Task.find((err, tasks) => {
    if (err) { return next(err); }
    res.json(tasks);
  });
});

router.get('/api/:id', (req, res, next) => {
  const id = req.params.id;
  Task.findById(id, (err, task) => {
    if (err) { return next(err); }
    res.json(task);
  });
});

以上代码创建了两个API路由:GET /api用于获取所有任务,GET /api/:id用于获取特定任务。我们使用Mongoose的查询方法获取数据库中的数据,并使用res.json方法将数据作为JSON对象返回。

将API路由添加到应用程序中

在app.js文件中添加以下代码:

app.use('/tasks', tasks);
app.use('/users', users);

app.get('/tasks/api', tasks);
app.get('/tasks/api/:id', tasks);

以上代码将/tasks/api和/tasks/api/:id路由添加到应用程序中。
现在,我们就可以使用以下URL来访问API:

其中,:id表示特定任务的ID。

接下来我们还要写一个可视化的管理页面,以下是前端页面的实现步骤:

创建前端页面

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

<!DOCTYPE html>
<html>
<head>
  <title>Task Management</title>
</head>
<body>
  <h1>Task Management</h1>

  <form id="addTaskForm">
    <input type="text" name="name" placeholder="Task name">
    <input type="text" name="description" placeholder="Task description">
    <button type="submit">Add Task</button>
  </form>

  <hr>

  <table id="tasksTable">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Description</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

以上代码创建了一个表单,用于添加新任务,以及一个表格,用于显示所有任务。我们还引入了jQuery库和一个名为app.js的JavaScript文件。

实现前端页面功能

在public文件夹下创建一个名为app.js的JavaScript文件,添加以下代码:

$(function() {
  // 获取所有任务并显示在表格中
  $.get('/tasks/api', function(tasks) {
    for (var i = 0; i < tasks.length; i++) {
      var task = tasks[i];
      addTaskToTable(task._id, task.name, task.description);
    }
  });

  // 表单提交事件
  $('#addTaskForm').submit(function(e) {
    e.preventDefault();
    var name = $('input[name="name"]').val();
    var description = $('input[name="description"]').val();
    $.post('/tasks', { name: name, description: description }, function(task) {
      addTaskToTable(task._id, task.name, task.description);
      $('#addTaskForm')[0].reset();
    });
  });

  // 添加任务到表格中
  function addTaskToTable(id, name, description) {
    var tr = $('<tr>');
    tr.append($('<td>').text(id));
    tr.append($('<td>').text(name));
    tr.append($('<td>').text(description));
    tr.append($('<td>').html('<button class="deleteTaskButton" data-id="' + id + '">Delete</button>'));
    $('#tasksTable tbody').append(tr);
  }

  // 删除任务按钮点击事件
  $('#tasksTable').on('click', '.deleteTaskButton', function() {
    var id = $(this).data('id');
    $.ajax({
      url: '/tasks/' + id,
      type: 'DELETE',
      success: function() {
        $('#tasksTable tbody tr[data-id="' + id + '"]').remove();
      }
    });
  });
});

以上代码实现了前端页面的基本功能,包括获取所有任务并将其显示在表格中,提交表单以创建新任务,将新任务添加到表格中,以及点击“删除”按钮以删除任务。

创建登录页面

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

本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.i4qq.com/jpjc/ygjynodejsdapiglxt1.html
关于typecho1.2适配的问题新版
« 上一篇 11-16
开源原创智能水印相机微信小程序
下一篇 » 03-28

发表评论

成为第一个评论的人

作者信息

热门文章

标签TAG

热评文章