一个简单的nodejs写前端接口案例

435 阅读3分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

 在重新复习node的时间点,网上搜罗扒拉整理了下面一个node服务端提供前端api的案例。

案例代码如下:

const express = require('express')
const app = express()

// 使用时bodyParser被编译器划上横线提示已弃用(19年已弃用)
// const bodyParser = require('body-parser')
// app.use(bodyParser.json())
// app.use(bodyParser.urlencoded({ extended: true }))

// 解决办法(直接使用express代替bodyParser进行调用)
// json请求
app.use(express.json())
// 表单请求
app.use(express.urlencoded({ extended: false }))

// 设置跨域
app.all('*', (req, res, next) => {
    // //设置请求头
    // //允许所有来源访问
    // res.header('Access-Control-Allow-Origin', '*')
    // //用于判断request来自ajax还是传统请求
    // res.header('Access-Control-Allow-Headers', 'X-Requested-With')
    // //允许访问的方式
    // res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
    // //修改程序信息与版本
    // res.header('X-Powered-By', '3.2.1')
    // //内容类型:如果是post请求必须指定这个属性
    // res.header('Content-Type', 'application/json;charset=utf-8')

    // 上面的请求头配置,在前端接口请求的content-type是application/json的时候会报错:'...Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.';
    // 所以第二项"Access-Control-Allow-Headers",需要设置请求类型

    //设置请求头
    //允许所有来源访问
    res.header('Access-Control-Allow-Origin', '*')
    //用于判断request来自ajax还是传统请求
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    //允许访问的方式
    res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
    //修改程序信息与版本
    res.header('X-Powered-By', '3.2.1')
    //内容类型:如果是post请求必须指定这个属性
    res.header('Content-Type', 'application/json;charset=utf-8')
    next()
})

// 模拟返回数据
const comebackData = [
    {
        name: 'jimson',
        age: 18,
        sex: '男'
    },
    {
        name: 'licy',
        age: 18,
        sex: '女'
    }
]

// 定义接口
app.get('/123', (req, res) => {
    res.status(200)
    res.json(comebackData)
})
app.post('/test234', (req, res) => {
    console.log(req.stack);
    console.log(req.body);
    console.log(req.url);
    console.log(req.query);
    res.json(req.body)
})

// 配置服务
const server = app.listen(9527, () => {
    const host = server.address().address
    const port = server.address().port
    console.log("This app listen at http://%s:%s", host, port)
})

步骤总结:

1)使用有一定历史的,稳定的express作为接口请求的定义工具(注意bodyParser已在2019年弃用,所以直接使用express定义接口请求);

2)定义json和表单两种类型请求;

3)配置跨域和请求头其他参数,注意'Access-Control-Allow-Headers'这一项的配置;

4)分别定义了get和post请求类型的接口,并且返回不同类型的数据;

5)配置服务,开启端口,即可在浏览器地址栏进行接口请求。

接口请求方式如下:

1、get请求: 地址栏直接请求,得到返回的数据。

2、post请求: 我们也可以通过定义一个html文件,在这个文件里面进行接口的请求(比如通过ajax)来模拟post请求。

<!DOCTYPE html>
<html lang="en">

<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="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>

<body>
    <script>
        comebackData = {
            name: 'jimson',
            pass: '123456'
        }

        $(function () {
            $.ajax({
                type: 'POST',
                url: 'http://localhost:9527/test234',
                dataType: 'JSON', //请求类型指定JSON
                data: JSON.stringify(comebackData), //请求参数JSON序列化
                contentType: 'application/json;charset=utf-8', //指定请求头内容类型
                success(data) {
                    console.log(data, '1111111')
                },
                error(err) {
                    console.log(err)
                }
            })
        })
    </script>
</body>

</html>

这时候,我们双击执行这个html文件(这里的名字是index.html),即可实现接口的请求:

 这个html页面也会得到返回的数据:

注意: 服务端配置跨域的时候记得配置Content-Type:

如果使用Vue写前端页面

我们知道Vue项目写前端项目,后面都会被编译压缩成html代码和js代码,所以本质上和上面的index.html执行的时候,调用接口发起请求的情况是一致的。

唯独不同的是,我们在开发Vue项目的时候有调试阶段,即接口请求调试,这时候要注意本地环境和线上环境的接口请求地址的替换,一般Vue项目会有vue.config.js文件进行devServer配置代理,发布线上的时候也会有nginx.conf文件进行请求地址的配置。

所以,写完Vue项目调试完毕之后,需要进行地址配置替换,然后再在服务器上面部署Vue项目代码(前端代码)和后端代码(node服务代码或java服务代码)。