Nodejs编写接口_nodejs写简单的接口

作者：IT小白 | 2024-02-08 12:03:30

踩

nodejs写简单的接口

编写接口

1.自定义路由模块

const express=require('express')
const router=express.Router()

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

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

module.exports=router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2.将路由注册到服务器实例上

1.并且引入cors中间件注册到服务器实例上，解决跨域问题
2.将自定义路由模块挂载到服务器上，/api请求
3.express.urlencoded({extends:false} 解析表单中间件

// 导入express
const express=require('express')
// 创建服务实例
const app=express()

// 配置解析表单数据的中间件
app.use(express.urlencoded({extends:false}))

// 一定要在路由之前，配置cors这个中间件，从而解决接口跨域问题
const cors=require('cors')
app.use(cors)

// 导入路由模块
const router=require('./02_apiRouter')
// 把路由模块,注册到app上
app.use('/api',router)

// 启动服务器
app.listen(8080,()=>{
    console.log('Express server running st http://127.0.0.1:8080');
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

测试接口跨域问题

在导入路由模块前，将cors中间件注册到服务器实例上

// 导入express
const express=require('express')
// 创建服务实例
const app=express()

// 配置解析表单数据的中间件
app.use(express.urlencoded({extends:false}))

// 一定要在路由之前，配置cors这个中间件，从而解决接口跨域问题
const cors=require('cors')
app.use(cors)

// 导入路由模块
const router=require('./02_apiRouter')
// 把路由模块,注册到app上
app.use('/api',router)

// 启动服务器
app.listen(8080,()=>{
    console.log('Express server running st http://127.0.0.1:8080');
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

cors介绍：

在这里插入图片描述

使用express写接口

CORS响应头

1.Access-Control-Allow-Origin

允许那些网站能够请求
在这里插入图片描述

2.限制客户端发送过来的请求头：Access-Control-Allow-Headers
客户端发送请求过来，不能发送额外的请求头信息，因为CORS设定好了，除非在服务端对 Access-Control-Allow-Headers 进行声明
在这里插入图片描述
3.限制请求方式：Access-Control-Allow-Methods

在这里插入图片描述
4.简单请求

5.预检请求
就是对CORS默认的放行资源之外的请求就叫预检请求
在这里插图片预检请求描述

简单请求和预检请求的区别

在这里插入图片描述

JSONNP接口

1.概念：

JSONP是一个跨域解决方案，目的是跨域请求JSON数据，因为JSON数据是不能跨域请求的，但是我们js跨域请求js脚本是可以的，可以把数据封装成一个js语句，做一个方法的调用。跨域请求js脚本即可获取数据

1. 标签script的src属性是可以跨域的，所以我们跨域的服务器只要写成调用本地的函数，回调数据就可以实现跨域了
1. 过我们发现，web页面调用js文件则不受跨域的影响（不仅如此，我们还发现凡是拥有“src”这个属性的标签都拥有跨域的能力，比如<\script>、<\img>、<\iframe>）
1. 恰巧我们知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据。

在这里插入图片描述
注意事项：

2.实践，实现JSONP接口的步骤：

在这里插入图片描述

代码：

// 导入express
const express=require('express')
// 创建服务实例
const app=express()

// 配置解析表单数据的中间件
app.use(express.urlencoded({extends:false}))


// 配置json接口(必须在配置cors中间件前配置jsonp接口)
app.get('/api/jsonp',(req,res)=>{
//   1.得到回调函数的名称
const funcName=req.query.callback 
    
//   2.定义要发送到客户端的数据对象（回调的数据）
const data={ name: 'zs', age: 22 }
//   3.拼接出函数调用的字符串（请求的名称+数据）
const scriptStr = `${funcName}(${JSON.stringify(data)})`
//   4.把拼接的字符串响应给客户端
 res.send(scriptStr)
})

// 一定要在路由之前，配置cors这个中间件，从而解决接口跨域问题
const cors=require('cors')
app.use(cors)

// 导入路由模块
const router=require('./02_apiRouter')
// 把路由模块,注册到app上
app.use('/api',router)

// 启动服务器
app.listen(8080,()=>{
    console.log('Express server running st http://127.0.0.1:8080');
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

网页：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>
    <button id="btnget">get</button>
    <button id="btnpost">post</button>
    <button id="btndelete">delete</button>
    <button id="btnJSONP">jsonp</button>
    <script>
        $(function(){
            // 1.测试get接口
            $('#btnget').on('click',function(){
                $.ajax({
                    type:'GET',
                    uel:'http://127.0.0.1/api/get',
                    data:{name:'cc',age:18},
                    success:function(res){
                        console.log(res);
                    }
                })
            })

            // 2.测试delete接口
            $('#btndelete').on('click',function(){
                $.ajax({
                    type:'DELETE',
                    uel:'http://127.0.0.1/api/delete',
                    data:{name:'cc',age:18},
                    success:function(res){
                        console.log(res);
                    }
                })
            })

            $('#btnJSONP').on('click',function(){
                $.ajax({
                  type: 'GET',
                  url: 'http://127.0.0.1/api/jsonp',
                  dataType: 'jsonp',
                  success: function(res){
                    console.log(res)
                  },
                })
            })

            // 2.测试post接口
            // $('#btnpost').on('click',function(){
            //     $.ajax({
            //         type:'POST',
            //         uel:'http://127.0.0.1/api/post',
            //         data:{bookname:'水浒传',author:'施耐庵'},
            //         success:function(res){
            //             console.log(res);
            //         }
            //     })
            // })
        })
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

测试发现得到回调后服务端所发来的数据
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/69010