用Node编写RESTful API接口的示例代码

yizhihongxing

使用Node.js编写RESTful API接口需要以下步骤:

  1. 初始化项目
npm init
  1. 安装必要的依赖

以下是常用的依赖:

  • express:用于创建服务器和路由处理
  • body-parser:解析请求参数
  • cors:处理跨域请求

执行以下命令安装:

npm install express body-parser cors --save
  1. 编写代码

app.js:

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')

const app = express()
app.use(bodyParser.json())
app.use(cors())

app.get('/api', (req, res) => {
  res.json({ message: 'Hello World!' })
})

app.post('/api/login', (req, res) => {
  const { username, password } = req.body
  if (username === 'admin' && password === 'admin') {
    res.json({ message: 'Login success!', token: '123456' })
  } else {
    res.status(401).json({ message: 'Incorrect username or password.' })
  }
})

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

以上代码定义了一个基本的API,包括一个GET请求和一个POST请求,分别返回JSON数据和处理请求参数。

  1. 启动服务器

在命令行中执行以下命令:

node app.js
  1. 测试API

用浏览器或Postman等工具打开 http://localhost:3000/apihttp://localhost:3000/api/login 地址,如果能正确返回预期结果,则说明API已经正常启动。

以下是一个用React写的示例:

import React, { useState } from 'react'

function App() {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')

  const handleLogin = async () => {
    const url = 'http://localhost:3000/api/login'
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ username, password })
    })
    const data = await response.json()
    console.log(data)
  }

  return (
    <div>
      <input value={username} onChange={e => setUsername(e.target.value)} />
      <input value={password} onChange={e => setPassword(e.target.value)} />
      <button onClick={handleLogin}>登录</button>
    </div>
  )
}

export default App

以上代码提供了一个登录表单,提交表单请求http://localhost:3000/api/login地址来验证账号密码。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:用Node编写RESTful API接口的示例代码 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • Vue响应式系统的原理详解

    Vue响应式系统的原理详解 什么是响应式系统? 响应式系统是现代JavaScript框架中最重要的概念之一。它可以让你的组件根据数据的变化自动重新渲染。Vue是一个基于响应式系统构建的现代JavaScript框架。响应式系统在Vue中可以实现双向绑定,使得一个组件中的数据变化可以影响到其它组件。 响应式系统基础 Vue中的响应式系统是建立在ES6的Proxy…

    Vue 2023年5月27日
    00
  • 使用Vue-axios进行数据交互的方法

    当我们需要在Vue.js前端应用中与服务器进行数据交互时,常常使用axios库。axios是一个基于Promise的HTTP库,在浏览器和node.js中都可以运行。这里我们需要集成Vue和axios,使用Vue-axios插件来处理这种需求。 安装Vue-axios 在使用Vue-axios之前,我们需要先进行安装。在终端窗口中运行以下命令: npm in…

    Vue 2023年5月28日
    00
  • vue获取input值的三种常用写法

    下面详细讲解“vue获取input值的三种常用写法”的完整攻略,过程中包含两条示例说明。 一、获取input的value值 1. 使用v-model双向绑定 在Vue中,可以使用v-model指令将表单元素的值绑定到Vue实例上,实现双向绑定。例如: <template> <div> <input type="text…

    Vue 2023年5月27日
    00
  • TypeScript类型使用示例剖析

    接下来我将为您详细讲解“TypeScript类型使用示例剖析”的完整攻略。首先,我们需要了解什么是TypeScript。 TypeScript是由微软开发的开源编程语言,基于JavaScript语言语法之上,它可以在开发大型项目时提供更好的代码维护性和可读性。TypeScript支持静态类型、类和接口,并兼容ES6规范。接下来,我将通过两个示例说明如何使用T…

    Vue 2023年5月28日
    00
  • websocket在springboot+vue中的使用教程

    下面是关于使用WebSocket在Spring Boot和Vue中的完整攻略。 WebSocket 在 Spring Boot 和 Vue 中的使用教程 什么是 WebSocket? WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单、更便捷,且可以实现低…

    Vue 2023年5月28日
    00
  • vue2.0组件之间传值、通信的多种方式(干货)

    Vue2.0组件之间传值、通信的多种方式(干货) 在Vue.js中,组件间的通信是一个非常重要的话题。本篇文章将详细介绍Vue2.0中的组件通信方式,以及针对不同场景使用哪种方式更为适合。 props和$emit事件 Vue.js中常用的父组件向子组件传递数据的方式就是通过props属性。在父组件中,我们可以使用v-bind指令将数据传递给子组件,如下所示:…

    Vue 2023年5月27日
    00
  • Vue3 Vant组件库使用过程中的避坑点

    下面是详细讲解Vue3 Vant组件库使用过程中的避坑点的完整攻略: 1. 导入组件时注意组件名称 在使用Vant组件库时,要注意组件名称的大小写问题。在Vue3中,组件名称必须采用小写字母加横线的形式。而在Vant组件库中,组件名称采用的是带有大写字母的驼峰式命名。这就需要我们在使用Vant组件时进行一些转换。 例如,在使用Tab栏组件时,如果我们想使用命…

    Vue 2023年5月29日
    00
  • Vue列表渲染v-for的使用案例详解

    下面是“Vue列表渲染v-for的使用案例详解”的完整攻略。 什么是Vue列表渲染 Vue.js是一个数据驱动的JavaScript框架,该框架可以将数据和DOM元素绑定在一起,实现视图和数据的同步更新。这使得数据的展示和渲染非常容易实现,使网页的开发变得更高效和简洁。 Vue中的列表渲染就是一种数据渲染方式,它可以根据一个数组自动创建一些DOM元素,以此来…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部