前后端分离实践（五）—— 前端与后端的集成

最新推荐文章于 2024-09-04 18:39:27 发布

_云卷云舒_

最新推荐文章于 2024-09-04 18:39:27 发布

阅读量3.1k

点赞数 2

分类专栏：前后端分离前后端分离文章标签：前后端分离

本文链接：https://blog.csdn.net/Alexshi5/article/details/90246903

版权

本文详细介绍了如何进行前后端分离实践，包括前端服务层Nodejs应用与后端Springboot应用的集成，以及前端展示层Vue应用与Nodejs服务层的集成。在集成过程中，涉及了Springboot API的访问，axios的安装，Nodejs跨域配置，Vue端口更改以及数据访问的调整。

摘要由CSDN通过智能技术生成

前后端分离实践系列文章总目录

一、前端服务层Nodejs应用与后端Springboot应用的集成

1、启动Springboot应用访问/api/hello接口确保能正常访问

2、在fbsep-node目录下安装axios

3、在routes目录的api.js中添加访问Java接口的内容

4、启动Node应用查看通过Node层获取到的接口数据

二、前端展示层Vue应用与前端服务层Nodejs应用的集成

1、在Node应用的app.js中添加允许跨域访问的header并重启

2、更改前端vue应用的启动端口

3、注释掉mock功能并添加对Node服务层的数据访问

4、访问fbsep-vue应用

一、前端服务层Nodejs应用与后端Springboot应用的集成

1、启动Springboot应用访问/api/hello接口确保能正常访问

访问地址：http://localhost:8080/api/hello

2、在fbsep-node目录下安装axios

3、在routes目录的api.js中添加访问Java接口的内容

var axios = require('axios');
var url = "http://localhost:8080/api/hello";

router.get('/hello', function(req, res, next) {
    axios.get(url)
        .then(function (response) {
            console.log(response);
            res.send(response.data);
        })
        .catch(function (error) {
            console.log(error);
        });
});