本文共 3315 字,大约阅读时间需要 11 分钟。
我又又回来了,本次快速建立一个spring boot+react前后端的hello world的demo!!!
前后端分离(解耦)的核心思想:前端HTML页面通过Ajax调用后端的RestFul API并使用JSON数据进行交互。
传统的MVC的设计模式:
即Model-View-Controller 即模型-视图-控制器
MVC设计流程:
模型和视图通过控制器来进行黏合,例如,用户发送一个HTTP请求,此时请求首先会进入控制器,然后控制器去获取数据并将其封装为模型,最后将模型传递到视图中展现。
前后端分离的设计流程:
注意:
1.之前的方式:
2.前后分离的方式:
(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@Configurationpublic 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("过滤器销毁了"); }}
建立一个controller
在游览器输入http://localhost:8080/hello
(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组件
大功告成,放图镇楼!!!
转载地址:http://legbf.baihongyu.com/