【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)。


相关文章
|
1月前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它采用中间件系统增强功能,如日志和错误处理,集成多种模板引擎(EJS、Jade、Pug)用于HTML渲染,并提供安全中间件提升应用安全性。其可扩展性允许选用合适插件扩展功能,加速开发进程。
|
3月前
|
JSON JavaScript 前端开发
超级实用!详解Node.js中的util模块和express模块
超级实用!详解Node.js中的util模块和express模块
|
3月前
|
人工智能 JavaScript 前端开发
【利用AI让知识体系化】入门Express框架(三)
【利用AI让知识体系化】入门Express框架
|
18天前
|
开发框架 JavaScript 中间件
node+express搭建服务器环境
node+express搭建服务器环境
node+express搭建服务器环境
|
14天前
|
开发框架 JavaScript 前端开发
【Node系列】Express 框架
Express.js 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,提供一系列强大的特性来帮助你创建各种 web 和移动设备应用。
33 2
|
1月前
|
Web App开发 JavaScript 前端开发
使用Node.js和Express构建RESTful API
使用Node.js和Express构建RESTful API
19 0
|
2月前
|
开发框架 JavaScript 前端开发
比较两个突出的node.js框架:koa和express
接上文讲述了 koa框架,这边文章比较一下这两个突出的node.js框架:koa和express
|
2月前
|
Web App开发 缓存 JavaScript
【安装指南】nodejs下载、安装与配置详细教程
这篇博文详细介绍了 Node.js 的下载、安装与配置过程,为初学者提供了清晰的指南。读者通过该教程可以轻松完成 Node.js 的安装,了解相关配置和基本操作。文章首先介绍了 Node.js 的背景和应用场景,随后详细说明了下载安装包、安装步骤以及配置环境变量的方法。作者用简洁明了的语言,配以步骤图示,使得读者能够轻松跟随教程完成操作。总的来说,这篇文章为初学者提供了一个友好的入门指南,使他们能够顺利开始使用 Node.js 进行开发。
197 1
【安装指南】nodejs下载、安装与配置详细教程
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
77 0
|
3月前
|
JavaScript 前端开发 API
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)(下)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
35 0

推荐镜像

更多