springboot+react实现前后端交互

一、搭建springboot后台

1. 创建一个Springboot项目， 然后导入pom依赖， 本着一切从简的原则，如果不连接数据库的话，有个spring-boot-starter-web的依赖就够用了。 

        <!--mybatis-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.1.1</version>
        </dependency>

        <!--MySql连接驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

2. 因为是前后端分离开发，所以React不放在springboot目录下， 如果要连接数据库

application.properties配置

#数据库连接信息
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/test?characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=root

#配置mybatis信息
mybatis.type-aliases-package=com.jarvis.springboot_mybatis.Entity
mybatis.mapper-locations=classpath:mapper/*Mapper.xml


sql 
DROP TABLE IF EXISTS `user`;
create table `user`(
    `id` int(11) NOT NULL auto_increment,
    `username` varchar(50) default null,
    `password` varchar(50) default null,
    `name` varchar(50) default null,
    primary key (`id`)
)ENGINE = InnoDB AUTO_INCREMENT=10 DEFAULT  CHARSET=utf8;


insert into `user` values ('1','zhangsan','123','张三');
insert into `user` values ('2','lisi','123','里斯');

不连接数据库, 再根据下面修改就好。

@Controller
public class MybatisController {

    @RequestMapping(value = "/hello")
    @@ResponseBody
    public String queryUserList(){
        String s = "[{" + "\"name\":\"奥利给\"" + "}]";
        return s;
    }
}

3. 实体类配置以及mapper配置

public class User{
    private Integer id;
    private String username;
    private String password;
    private String name;
    
    //get/set自己加    alt+insert
    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", name='" + name + '\'' +
                '}';
    }
}

import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface UserMapper {
    List<User> queryUserList();
}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.jarvis.springboot_mybatis.mapper.UserMapper">
    <select id="queryUserList" resultType="user">
        select * from user;
    </select>

</mapper>

4. 创建一个controller目录， 然后在创建一个类，加个@Controller注解

二、编写react

1. 复杂的也不会写，就是简单做个数据交互，安装好node和npm后， 利用npm命令 npm install create-react-app 下载create-react-app，然后再create-react-app 项目名创建项目, 具体如何创建自己百度。

删除掉没用的后

2. 配置页面跳转

import React, {Component} from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Home from './Home';
import Page1 from './Page1';
import Page2 from './Page2';

class App extends Component{
  render() {
    return (
        <Router>
          <div>
              {/*访问其他页面不显示Home*/}
            <Route exact path="/" component={Home}/>
            <Route path="/Page1" component={Page1}/>
            <Route path="/Page2" component={Page2}/>
          </div>
        </Router>
    )
  }
}

export default App;



--------------Home
import React, {Component} from 'react';
import {Link} from 'react-router-dom';

class Home extends Component{
    render() {
        return (
            <React.Fragment>
                <div>
                    This is Home!
                </div>
                <div>
                    <Link to="/Page1" style={{color:'black'}}>
                        <p>点击跳转到Page1</p>
                    </Link>
                    <Link to="/Page2" style={{color:'black'}}>
                        <p>点击跳转到Page2</p>
                    </Link>
                    <Link to="/Page3" style={{color:'black'}}>
                        <p>点击跳转到Page3</p>
                    </Link>
                </div>
            </React.Fragment>
        )
    }
}
export default Home;

3. 因为react的访问地址是http://127.0.0.1:3000, tomcat访问地址是http://127.0.0.1:8080，端口号不同，所以涉及到跨域问题， 有兴趣可以搜一下。

所以我采用两种方式进行跨域数据交互

第一种： fetch方式， 在前端修改请求头， 然后再后端在加上@CrossOrigin注解，可直接加在方法上，加在类上对应所有方法。

import React, {Component} from 'react'

class Page1 extends Component{
    constructor(props){
        super(props);
        this.state={
            mytext: []
        }
    }
    getData(){
        //修改请求头
        let myHeaders = new Headers({
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'text/plain'
        });
        fetch('http://127.0.0.1:8080/hello',{
            method:'GET',
            headers: myHeaders,
            mode: 'cors',
            //转或称字符串格式
        }).then(res=>res.json()).then(
            data=>{
                console.log(data);
                // eslint-disable-next-line
                data.map((key)=>{
                    this.setState({
                        mytext: [...this.state.mytext, key]
                    })
                })
            }
        )
    }
    //React周期函数，防止死循环,在组建被渲染前调用
    componentWillMount(){
        this.getData();
    }
    render() {
        return (
            <React.Fragment>
                <ul>
                    {
                        this.state.mytext.map((key, index)=>{
                            return <li key={index}>{key.name}</li>
                        })
                    }
                </ul>
            </React.Fragment>
        )
    }
}
export default Page1;

import com.jarvis.springboot_mybatis.Entity.User;
import com.jarvis.springboot_mybatis.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;

import java.util.List;

@Controller
@CrossOrigin
public class MybatisController {

    @Autowired
    private UserMapper userMapper;

    @RequestMapping(value = "/hello", method = RequestMethod.GET)
    @ResponseBody
    public List<User> hello(){
        List<User> user = userMapper.queryUserList();
        System.out.println(user);
        return user;
    }
}

第二种方式是XMLHttrRequest方式， 这种方式在前端不用配置，需要在后端设置请求头， 请求的时候需要将localhost改成127.0.0.1,要不然因为不识别会报错， 然后是setResponse需要和Origin保持一致。（ F12）

true和false那是发不发送cookie，自行解决。

import React, {Component} from 'react'

class Page2 extends Component{
    constructor(props){
        super(props)
        this.state={
            service: [],
        }
    }
    componentDidMount() {
        //ajax方法去服务器取数据,异步true
        const xhr = new XMLHttpRequest()
        xhr.open("GET", "http://127.0.0.1:8080/Page22", true)
        //根据情况选择是否要随get请求发送用于身份认证的信息
        xhr.withCredentials = false
        xhr.send()

        xhr.onreadystatechange = () =>{
            /**
             *   0 UNSENT- open（）尚未被调用
                 1 OPENED- send（）尚未被调用
                 2 HEADERS_RECEIVED- send（）已被调用，并且头和状态可用
                 3 LOADING下载；- responseText的保持部分数据
                 4 - 的操作完成
             */
            // eslint-disable-next-line
            if(xhr.readyState == XMLHttpRequest.DONE){
                // eslint-disable-next-line
                if(xhr.status == 200){
                    let gotService = JSON.parse(xhr.responseText)
                    this.setState({
                        service: gotService
                    })
                }
            }else {
                console.log(xhr.readyState + "---加载中")
            }
        }
    }

    render() {
        const serviceShows = this.state.service.map((user, index)=>{
            return (
                <tr key={index}>
                    <td>{user.id}</td>
                    <td>{user.username}</td>
                    <td>{user.name}</td>
                </tr>
            )
        })
        return (
            <table>
                <tbody>
                    {serviceShows}
                </tbody>
            </table>
        )
    }
}
export default Page2;

import com.jarvis.springboot_mybatis.Entity.User;
import com.jarvis.springboot_mybatis.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;

import javax.servlet.http.HttpServletResponse;

import java.util.List;

@Controller
@CrossOrigin
public class MybatisController {

    @Autowired
    private UserMapper userMapper;

    @RequestMapping(value = "/Page22", method = RequestMethod.GET)
    @ResponseBody
    public List<User> helloPage2(HttpServletResponse response){
        List<User> user = userMapper.queryUserList();
        System.out.println(user);
        //response.setHeader("Access-Control-Allow-Credentials","True");
        response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:3000");
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
        return user;
    }
}