【node进阶】深度解析express框架---编写接口|解决跨域问题---上篇

简介: 【node进阶】深度解析express框架---编写接口|解决跨域问题---上篇

学前先知:req.body | req.query | req.params


想要从web的后台中获取接口的数据,传参是必不可少的,后台想要接收前台传来的数据需要借助一些内置的方法:


req.body


express框架中,用req.body接收post客户端的数据,该属性主要用于post()方法时传递参数使用,用法最广泛,在你想使用这个方法的时候必须要导入第三方中间件body-parser.


演示代码:



const express = require('express')
const app = express()
const body_parser = require('body-parser')
app.use(body_parser.urlencoded({extended : false}))
app.post('/user',(req,res)=>{
    console.log(req.body);   //[Object: null prototype] { name: 'james', age: '37', gender: '男' }
    res.send('ok')
})
app.listen(80,()=>{
    console.log('http://127.0.0.1');
})


这里使用了postman测试工具,打印出来的req.body为前台传给后台的参数,后台告诉了前台接收到了参数,打印了ok


req.query


req.query用来获取get方法传递的参数,在这里就无需载入中间件了。


演示代码:



const express = require('express');
const app = express();
// 测试地址:http://127.0.0.1/user/?name=james
app.get('/user', function(req, res){
    let param = req.query.name;  
    console.log(param) //james
  res.send('ok');
});
app.listen(80,()=>{
    console.log('http://127.0.0.1');
})


在postman中测试地址为http://127.0.0.1?name=james,通过req.query取到了一个对象{name : 'james'},随后拿到name属性即可


req.params


有时候我们遇到的地址栏可能会是这种形式:http://127.0.0.1/user/1,这时候就需要我们的req.params去接收前台传来的参数


演示代码:



const express = require('express')
const app = express()
app.get('/user/:id', function(req, res){
    let param = req.params.id;  //1
    console.log(param)
  res.send('ok');
});
app.listen(80,()=>{
    console.log('http://127.0.0.1');
})


在postman中自创地址http://127.0.0.1/user/1,通过req.query获取到一个对象{id:1},随后取出对象中的属性即可


使用express编写接口


  • 创建基本的服务器



const express = require('express')
//创建express实例
const app = express()
//在这里写下你的业务代码...
//调用app.listen 方法,指定端口号并启动web服务器
app.listen('80',()=>{
    console.log('http://127.0.0.1');
})


  • 创建api路由模块



const express = require('express')
const apiRouter = express.Router()
//在这里写下你所创建的路由...
//将apiRouter导出为一个模块
module.exports = apiRouter


将模块导入创建基本服务的文件中



const express = require('express')
const app = express()
const apiRouter = require('./16.apiRouter')
app.use('/api',apiRouter)
app.listen('80',()=>{
    console.log('http://127.0.0.1');
})


  • 编写get接口



apiRouter.get('/get',(req,res)=>{
    // 通过 req.query 获取客户端通过查询字符串,发送到服务器的数据
    const query = req.query
    // 调用 res.send() 方法,向客户端响应处理的结果
    res.send({
        status : 0, // 0 表示处理成功,1 表示处理失败
        msg : 'GET请求成功!',  // 状态的描述
        data : query // 需要响应给客户端的数据
    })
})


  • 编写post接口



apiRouter.post('/post',(req,res)=>{
    // 通过 req.body 获取请求体中包含的 url-encoded 格式的数据
    const body = req.body
    // 调用 res.send() 方法,向客户端响应结果
    res.send({
        status : 0, 
        msg : 'post请求成功!',
        data : body
    })
})


注意:如果要获取 URL-encoded 格式的请求体数据,须配置中间件:app.use(express.urlencoded({ extended: false }))


  • 编写delete接口



// 定义 DELETE 接口
apiRouter.delete('/delete', (req, res) => {
    res.send({
      status: 0,
      msg: 'DELETE请求成功',
    })
  })


跨域问题


什么是跨域


我们刚才编写的接口,存在一个很严重的问题:不支持跨域请求。那么什么是跨域(CORS)呢?


当一个请求url的协议、域名、端口号三者之间任意一个与当前页面url不同即为跨域.

举个例子:我当前的url为:http://127.0.0.1/user,但是我想访问url为https://127.0.0.1/admin中的数据,我能访问的到吗?显然是不可能的,这就产生了跨域问题!


为什么会产生跨域问题


出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。


可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。

所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)。


相关文章
|
存储 缓存 JavaScript
node 框架
Node 框架以其独特的优势和广泛的应用场景,成为了现代 Web 开发中不可或缺的一部分。掌握 Node 框架的开发技能,对于开发者来说具有重要的意义。
594 156
|
Web App开发 缓存 监控
如何解决Node框架中内存管理的挑战?
解决 Node 框架中内存管理的挑战需要综合运用多种方法,并且需要在开发过程中保持谨慎和细心,不断优化和改进代码。同时,定期进行内存管理的检查和维护也是非常重要的。
440 160
|
安全 前端开发 JavaScript
Node框架的优缺点
Node 框架的优点使其在现代 Web 开发中具有重要地位,但同时也需要开发者在使用过程中注意其缺点,合理选择和应用,以充分发挥其优势,避免潜在问题的出现。随着技术的不断发展和完善,Node 框架也在不断改进和优化,以更好地适应各种应用需求。
587 155
|
存储 JavaScript 搜索推荐
Node框架的安装和配置方法
安装 Node 框架是进行 Node 开发的第一步,通过正确的安装和配置,可以为后续的开发工作提供良好的基础。在安装过程中,需要仔细阅读相关文档和提示,遇到问题及时解决,以确保安装顺利完成。
914 155
|
9月前
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
|
Web App开发 JSON JavaScript
Node.js 中的中间件机制与 Express 应用
Node.js 中的中间件机制与 Express 应用
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
JavaScript
使用node.js搭建一个express后端服务器
Express 是 Node.js 的一个库,用于搭建后端服务器。本文将指导你从零开始构建一个简易的 Express 服务器,包括项目初始化、代码编写、服务启动与项目结构优化。通过创建 handler 和 router 文件夹分离路由和处理逻辑,使项目更清晰易维护。最后,通过 Postman 测试确保服务正常运行。
868 1
|
10月前
|
算法 测试技术 C语言
深入理解HTTP/2:nghttp2库源码解析及客户端实现示例
通过解析nghttp2库的源码和实现一个简单的HTTP/2客户端示例,本文详细介绍了HTTP/2的关键特性和nghttp2的核心实现。了解这些内容可以帮助开发者更好地理解HTTP/2协议,提高Web应用的性能和用户体验。对于实际开发中的应用,可以根据需要进一步优化和扩展代码,以满足具体需求。
957 29
|
10月前
|
前端开发 数据安全/隐私保护 CDN
二次元聚合短视频解析去水印系统源码
二次元聚合短视频解析去水印系统源码
427 4