学前先知: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)。