前後端分離實踐（五）—— 前端與後端的集成

前後端分離實踐系列文章總目錄

目錄

一、前端服務層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);
        });
});

4、啓動Node應用查看通過Node層獲取到的接口數據

訪問地址：http://localhost:3000/api/hello

二、前端展示層Vue應用與前端服務層Nodejs應用的集成

1、在Node應用的app.js中添加允許跨域訪問的header並重啓

注意：不要添加到最後面去了，添加在var app = express();的下面，添加內容如下：

app.all('*', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');//允許的域名
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');//服務器支持的頭信息
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');//允許的方法
    //res.header("X-Powered-By",' 3.2.1');
    //res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

2、更改前端vue應用的啓動端口

由於後端Java應用佔用了8080端口，所以這裏將vue的啓動端口修改爲8081。打開config目錄下的index.js文件，將prot修改爲8081。

3、註釋掉mock功能並添加對Node服務層的數據訪問

在Vue應用的main.js文件中添加如下內容：

var url="http://localhost:3000/api/hello";
axios.get(url)
  .then(function (response) {
    console.log(response);
    //將app2中雙向綁定的msg數據更改爲Java接口數據
    app2.msg = response.data.data;
  })
  .catch(function (error) {
    console.log(error);
  });

4、訪問fbsep-vue應用

訪問地址：http://localhost:8081/#/

注意：這裏將端口號更改爲了8081