使用Node编写简单的接口实现前后端交互_用nodejs做前后端

目录

前言

下载安装Node.js

创建最基本的web服务器

nodemon

模块化路由Router

回到开始创建的web服务器中注册路由模块

编写GET接口

编写POST请求

获取req.body中的数据

前端页面

axios

发起GET请求

发起POST请求

跨域问题

在Node中解决跨域

前言

本文介绍如何使用node.js实现简单的接口编写并实现简单的前后端交互

下载安装Node.js

https://nodejs.org/zh-cn/download/

创建最基本的web服务器

创建node文件夹，在vscode中打开终端

安装Express

npm i express

导入express模块

const express = require('express')

创建web服务器

const app = express()

启动服务器

这里使用80端口（因为80端口可以在请求的url中省略不写）

app.listen(80,()=>{})

在终端中输入

node 要启动的文件路径

在app.listen()中console.log打印一段话，用来验证web服务器是否启动。当成功打印时，则代表已经成功启动服务器

nodemon

当我们项目代码修改时就需要重新启动项目，再输入一次node命令，十分不便。这里我们引用nodemon来监听项目状态，当项目代码改变时，自动重新启动项目

全局安装nodemon

npm i -g nodemon

于是启动项目变为

nodemon 要启动的项目路径

模块化路由Router

创建自定义模块，js文件

在新建的js页面中同样需要导入express

const express = require('express')

创建路由对象

const router = express.Router()

挂载路由（get,post请求）

router.get('请求的路径'，(req,res)=> {
 
       res.send()
 
})
 
router.post('请求的路径'，(req,res)=> {
 
       res.send()
 
})

req:是请求对象，包含了客户端相关的数据和属性

res:是响应对象。包含了服务器相关的数据和属性

res.send():向客户端发送指定内容

最后需要向外导出创建的路由对象,这样外界才能使用

module.exports = router

回到开始创建的web服务器中注册路由模块

导入刚创建好的路由

const userRouter = require('路由路径')

注册路由模块

app.use(userRouter)

编写GET接口

router.get('/get',(req,res) => {
    const query = req.query
    res.send({
        msg:'get请求成功',
        data:query
    })
})

req.query:获取url中携带的参数（使用postman模拟发送请求）

编写POST请求

router.post('/post',(req,res) => {
    const body = req.body
    res.send({
        msg:'post请求成功',
        data:body
    })
})

req.body:获取请求中的数据

获取req.body中的数据

这里如果想要获取req.body中的数据，需要在web服务器中配置中间件，配置中间件一定要在路由之前

app.use(express.urlencoded({extended:false}))

这样就可有获得req.body中的数据

前端页面

axios

在前后端交互中，最重要的一环就是需要前端页面发起请求，而发起请求这礼拜又需要引入axios

axios是一个基于 promise 网络请求库，作用于node.js 和浏览器中

我们需要将他引入到我们的网页中

在线地址：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

或者从github上下载下来，这里我们已经下载下来了，直接引入

 <script src="./axios/dist/axios.js"></script>

发起GET请求

我们简单编写两个按钮，GET按钮和POST按钮

 <button class="api1">GET</button>
 <button class="api2">POST</button>

获取元素并监听事件，当点击GET按钮时，发起GET请求

 const button1 = document.querySelector('.api1')
       button1.addEventListener('click',async function(){
        const res = await axios({
            url:'http://127.0.0.1/get',
            method:'get',
            params:{
                name:'ls',
                age:20,
                gender:'男'
            }
        })
        console.log(res);
       })

url地址：http://127.0.0.1是我们的本机地址，自己测试都使用本机地址

发起POST请求

点击POST按钮时，发起POST请求

const button2 = document.querySelector('.api1')
       button2.addEventListener('click',async function(){
        const res = await axios({
            url:'http://127.0.0.1/post',
            method:'post',
            data:{
                name:'zs',
                age:22,
                gender:'男'
            }
        })
        console.log(res);
       })

跨域问题

但当我们点击按钮时，控制台报错

这就涉及到了跨域问题

跨域问题是浏览器的同源安全策略阻止网页跨域获取资源。当一个请求url的协议，域名，端口三者之间任意一个与当前页面url不同即为跨域。

在Node中解决跨域

引入CORS或者JSONP,但JSONP只支持GET请求，所以我们这里使用CORS

CORS是express中的第三方中间件

安装cors

npm i cors

导入cors

const cors = require('cors')

全局挂载配置cors

app.use(cors())

​

这样，通过node.js实现简单的接口编写并实现简单的前后端交互就完成了

​