[开发篇]10分钟快速spring boot+react前后端分离

【开发篇】10分钟快速上手spring boot+react后端分离教程

我又又回来了，本次快速建立一个spring boot+react前后端的hello world的demo！！！

1.前后端分离

前后端分离（解耦）的核心思想：前端HTML页面通过Ajax调用后端的RestFul API并使用JSON数据进行交互。

1.1 传统的MVC设计流程

传统的MVC的设计模式：

即Model-View-Controller 即模型-视图-控制器

MVC设计流程：

模型和视图通过控制器来进行黏合，例如，用户发送一个HTTP请求，此时请求首先会进入控制器，然后控制器去获取数据并将其封装为模型，最后将模型传递到视图中展现。

1.2 前后端分离设计流程

前后端分离的设计流程：

注意：

1.之前的方式：

• 客户端请求
• 服务端的servlet或controller接受请求（后端控制路由与渲染页面）
• 调用service，dao代码完成业务逻辑
• 返回jsp
• jsp展现一些动态的代码

2.前后分离的方式：

• 游览器发送请求
• 直接到达html页面（前端控制路由与渲染页面，整个页面开发的权重前移）
• html页面负责调用游览器端接口产生的数据（通过ajax后台返回json格式数据）
• 填充html，展现动态效果，在页面上进行解析并操作DOM。

1.3 前后端分离会遇到的跨域问题

（1）.遇到跨域问题：

react与spring boot前后端分离，react端口为300而spring boot端口为8080，跨端口访问寻常的ajax是无法跨域访问的。

（2）.什么是跨域？

当客户端向游览器发起一个网络请求，url会有包含三个主要信息：协议（protocal），域名（host），端口号（port）。当三部分都和服务器相同的情况下，属于同源。但是只要有一个不同，就属于跨域调用，会受到同源策略的限制。

（3）.同源策略

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

（4）.解决措施

在spring boot中添加spring mvc底层实现的web配置适配器，增加cors相关的配置信息；

// An highlighted block
@Configuration
public class CorsConfig implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        System.out.println("过滤器创建了");
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        String path = request.getServletPath();
        //前端react项目的域名
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        //设置允许访问cookie
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        if (request.getMethod().equals("OPTIONS")) {
            response.setStatus(HttpServletResponse.SC_OK);
        }else{
            chain.doFilter(request, res);
        }
    }
    @Override
    public void destroy() {
        System.out.println("过滤器销毁了");
    }
}

2.建立一个spring boot项目

建立一个controller

在游览器输入http://localhost:8080/hello

3.建立react项目

（1）建立一个react项目

 npx create-react-app react_login

（2）整理代码架构

在src下面新建assets以及componets文件夹。

其中assets中划分css，js，images文件夹。

（3）配置服务器端端口地址

即config/config.js

global.AppConfig = {

  //serverIP后端服务器地址

  serverIP:'http://172.xx.xx.xx:8080'

}

(4)前端axios发送请求

记得下载一下axios

npm install axios --save

import React from 'react';

import '../config/config.js';

import axios from 'axios';



class Welcome extends React.Component {

  constructor(props) {

​    super(props);

​    this.state = { 

​      welcome_list:''

​     };

  }

  componentDidMount(){

​    let api = global.AppConfig. serverIP + "/hello";

​    const axios = require('axios');

​    axios.get(api)

​      .then((response)=> {

​        // handle success

​        console.log(response.data);

​        let tempData = response.data

​        this.setState({

​          welcome_list:tempData

​        })

​      })

​      .catch(function (error) {

​        // handle error

​        console.log(error);

​      })

  }



  render() {

​    return (

        
欢迎来到{this.state.welcome_list}

​    );

  }

}

export default Welcome;

(5)react中引入welcome组件

大功告成，放图镇楼！！！