使用Node.js实现RESTful API的示例

使用Node.js实现RESTful API是现代Web开发的一种趋势。下面是一个完整的攻略,你可以跟着这个攻略一步步实现一个简单的RESTful API。

第一步:设置项目

在项目的根目录下,打开命令行工具,依次输入以下指令:

mkdir my-restful-api
cd my-restful-api
npm init -y

这一步会创建一个名为my-restful-api的项目,并创建package.json文件。

第二步:安装依赖

我们需要使用Express.js框架来构建RESTful API,而且我们还需要用到一些插件,因此我们需要在命令行中安装Express.js和其他插件。

npm install express body-parser cookie-parser cors crypto --save

在这个命令中,我们安装了Express.js框架,以及一些插件。

  • body-parser:将请求的正文解析为JSON格式
  • cookie-parser:将Cookie解析为对象
  • cors:允许跨域请求
  • crypto:用于加密和解密数据

第三步:创建主文件

我们需要创建一个名为index.js的文件,并在其中设置我们的API。

const express = require('express');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const cors = require('cors');
const crypto = require('crypto');

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(cors());

const users = [
  { id: 1, username: 'user1', password: 'password1' },
  { id: 2, username: 'user2', password: 'password2' },
  { id: 3, username: 'user3', password: 'password3' },
];

app.get('/users', (req, res) => {
  res.send(users);
});

app.post('/login', (req, res) => {
  const { username, password } = req.body;
  const targetUser = users.find(user => user.username === username && user.password === password);
  if (targetUser) {
    const token = crypto.randomBytes(16).toString('hex');
    res.cookie('token', token);
    res.status(200).send({ message: 'Login successfully', accessToken: token });
  } else {
    res.status(401).send({ message: 'Unauthorized' });
  }
});

const server = app.listen(8080, () => {
  const { address, port } = server.address();
  console.log(`Listening on http://${address}:${port}`);
});

在这段代码中,我们定义了一个users数组,它表示用户数据。我们定义了两个路由:获取用户列表和登录。在登录路由中,我们检查用户的用户名和密码,如果验证通过,则发送一个名为accessToken的Cookie,并向客户端发送一条成功登录的消息。如果验证失败,则发送一个未经授权的消息。最后,我们启动服务器并监听端口。

第四步:测试API

我们的API已经设置好了,在浏览器中打开http://localhost:8080/users,可以看到我们的用户列表。在Postman中,我们可以使用POST请求http://localhost:8080/login来测试登录。为了登录成功,需要在请求体中提供一个具有正确用户名和密码的对象。登录成功后,我们将在响应体中获得一个名为accessToken的Cookie,这将允许我们访问被保护的路由。

示例一:获取用户列表

为了演示如何使用RESTful API获取用户列表,下面是一个使用jQuery的示例。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Users</title>
  </head>
  <body>
    <ul id="users"></ul>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(document).ready(() => {
        $.get('http://localhost:8080/users', data => {
          const users = data.map(user => `<li>${user.username}</li>`);
          $('#users').html(users);
        });
      });
    </script>
  </body>
</html>

这个示例中,我们使用jQuery来发起一个GET请求,以获取用户列表。在获得响应后,我们将用户数据转换为HTML代码,并在页面上显示出来。

示例二:登录并获取保护资源

为了演示如何使用RESTful API登录并获取被保护资源,下面是一个使用Vue.js的示例。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Login</title>
  </head>
  <body>
    <div id="app">
      <div v-if="!loggedIn">
        <input type="text" v-model="username">
        <input type="password" v-model="password">
        <button @click="login">Login</button>
      </div>
      <div v-else>
        <h1>Welcome, {{ username }}!</h1>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          username: '',
          password: '',
          loggedIn: false,
        },
        methods: {
          login() {
            axios.post('http://localhost:8080/login', { username: this.username, password: this.password })
              .then(response => {
                const accessToken = response.data.accessToken;
                document.cookie = `token=${accessToken}`;
                this.loggedIn = true;
              })
              .catch(error => {
                console.error(error);
              })
          },
        },
        mounted() {
          const token = document.cookie.match(/token=([^;]+)/);
          if (token) {
            axios.get('http://localhost:8080/users', { headers: { Authorization: `Bearer ${token[1]}` } })
              .then(response => {
                console.log(response.data);
                this.loggedIn = true;
              })
              .catch(error => {
                console.error(error);
              });
          }
        },
      });
    </script>
  </body>
</html>

这个示例中,我们使用Vue.js来创建一个简单的登录页面。我们在登录按钮的点击事件中使用Axios插件来发起一个POST请求以登录,然后在回调函数中将响应体中的accessToken Cookie存入cookies中,并将登陆状态设置为true。登录后,我们发送一个GET请求来访问我们的用户列表,并使用名为Authorization的HTTP头来携带访问令牌。

在这个攻略中,我们学习了如何使用Node.js和Express.js框架来实现一个简单的RESTful API,学习了如何使用jQuery和Vue.js来调用这个API。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:使用Node.js实现RESTful API的示例 - Python技术站

(0)
上一篇 2023年6月8日
下一篇 2023年6月8日

相关文章

  • nodejs 十六进制字符串型数据与btye型数据相互转换

    要将数字或者字符串转换为十六进制字符串,Node.js提供了toString()方法,而将十六进制字符串转换为byte型数据可以借助Buffer类的构造函数。 以下是 nodejs 十六进制字符串型数据与 byte型数据相互转换的完整攻略: 将byte型数据转换为十六进制字符串 使用 toString() 将二进制数据转换为十六进制字符串: const by…

    node js 2023年6月8日
    00
  • node和vue实现商城用户地址模块

    商城用户地址模块可以通过node和vue来进行实现。本攻略将详细介绍如何使用node和vue实现商城用户地址模块,包括前端和后端的所有代码和示例。 前端部分 1.项目初始化 首先使用vue-cli进行项目初始化,具体步骤: npm install -g vue-cli vue init webpack address-module 2.样式开发 使用elem…

    node js 2023年6月8日
    00
  • nw.js实现类似微信的聊天软件

    要实现类似微信的聊天软件,可以使用nw.js来构建跨平台应用程序。下面是实现的完整攻略: 准备工作 下载安装node.js,然后在命令行工具中输入以下命令,检查是否安装成功。 node -v npm -v 下载安装nw.js,并解压到本地文件夹,用于后续开发。 创建工程 在本地空文件夹中创建package.json文件,用于管理开发依赖。 { "n…

    node js 2023年6月8日
    00
  • npm install –save 、–save-dev 、-D、-S 的区别与NODE_ENV的配置方法

    npm是前端开发过程中重要的包管理工具,其中涉及到的命令及参数如下: npm install 该命令用于安装指定模块,例如: npm install package-name npm install –save 或者 -S 该命令用于安装指定模块并将其保存到生产环境中,即为生产依赖。可以通过 package.json 文件中的 dependencies 字…

    node js 2023年6月8日
    00
  • 纯JS 绘制数学函数

    下面就让我来为您详细讲解“纯JS 绘制数学函数”的完整攻略。 什么是纯JS 绘制数学函数? 纯JS 绘制数学函数是一种使用 JavaScript 语言编写程序,通过绘制图形的方式来展示数学函数的方法。使用此方法,可以实现用代码来绘制各种不同的数学函数图形,而无需借助于任何第三方库和工具。 绘制数学函数的基本原理 首先需要明确的是,绘制数学函数的本质就是将数学…

    node js 2023年6月8日
    00
  • AJAX实现仿Google Suggest效果

    下面是AJAX实现仿Google Suggest效果的完整攻略。 前言 Google Suggest是指当用户在搜索框中输入关键字时,搜索框下方会弹出一些匹配这些关键字的搜索建议,帮助用户更快速、准确地输入搜索内容。该功能采用了 AJAX 技术(Asynchronous JavaScript and XML,异步JavaScript和XML),在用户输入文本…

    node js 2023年6月8日
    00
  • node.js express框架简介与实现

    Node.js是一个基于Chrome V8引擎的JavaScript运行环境,可用于快速构建高性能、可扩展的网络应用程序。Express.js是一个基于Node.js的快速、灵活的Web应用框架。 一、Node.js express框架简介 1.1 什么是Express框架 Express框架是一个快速、开放、极简的Web应用框架,是基于Node.js环境的…

    node js 2023年6月8日
    00
  • vue安装node-sass和sass-loader报错问题的解决办法

    安装node-sass和sass-loader是在使用Vue框架中使用Sass时必须要进行的步骤。然而,在安装这两个模块时,可能会遇到各种报错问题。本文将详细讲解如何解决这些报错问题。 问题1:node-sass安装失败 执行以下命令时,可能会遇到node-sass安装失败的问题: npm install node-sass 这时候,可能会看到类似以下的错误…

    node js 2023年6月8日
    00
合作推广
合作推广
分享本页
返回顶部