React的学习之路（四）整合React前台与SpringBoot后台

1.确定前端请求方式

1.1安装Axios

1.运行npm install axios --save安装保存Axios模块。
2.创建src文件夹（眼瘸，没看见已经有一个src包了，就这样吧），并创建server.js文件，目录与server.js代码如下：

import axios from "axios";
import qs from "qs";
let http ={
  post:"",
  get:""
}
http.post = function(api,data){
  let params = qs.stringify(data)
  return new Promise((resolve,reject)=>{
    axios.post(api,params).then((res)=>{
      resolve(res)
    })
  })
}
 
http.get = function(api,data){
  let params = qs.stringify(data)
  return new Promise((resolve,reject)=>{
    axios.get(api,params).then((res)=>{
      resolve(res)
    })
  })
}

export default http

至此，就将axios做了简单的封装。

2.修改Login代码，测试请求

2.1修改Login.js代码，并发起测试请求。

代码如下：

import './Login.css';
import React from 'react';
import { Form, Input, Button, Checkbox,Card } from 'antd';
import http from './src/server';
const Login = () => {
  const onFinish = async(values: any) => {
    console.log('Success:', values);
    const res = await http.post('/out',values);
    console.log(res);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div className="loginForm">
      <Card title="Login" style={{ width: 300 }}>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off">
          <Form.Item
            label="Username"
            name="username"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="Password"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
          <Input.Password />
          </Form.Item>
          <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
            <Checkbox>Remember me</Checkbox>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              Login
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};
export default Login;

当我们输入用户名密码之后，发起登录请求，我们发现，前端控制台会报错：

这是因为我们的向后台发起请求时，请求地址还是前端服务器的地址。我们需要做一下代理。

3.代理地址配置，并解决跨域问题

3.1配置package.json文件。

其实解决地址代理问题很简单，只需要在package.json文件底部加一行
"proxy":"http://127.0.0.1:8083"
即可。这行配置将会将我们的请求转发给http://127.0.0.1:8083这个地址，并解决跨域问题。

此时，我们再次发起请求，发现依旧是404错误。原因很简单，我们后台代码还没写。接下来完成后台代码。

3.2 后台代码结构如下

3.2.1 创建Login包目录

3.2.2 创建LoginController，代码如下：

package manage.login.controller;

import entity.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.HashMap;

@Controller
public class LoginController {
    @RequestMapping("/out")
    @ResponseBody
    public HashMap out(User param){
        System.err.println(param);
        HashMap newmap = new HashMap();
        newmap.put("code","success");
        return newmap;
    }
}

3.2.3创建entity实体类包，并创建user实体类，代码如下：

package entity;

import lombok.Data;

@Data
public class User {
    public int id;
    public String userno;
    public String username;
    public String password;
    public String sex;
    public int age;
    public String position;
    public String remember;

    public void setId(int id) {
        this.id = id;
    }

    public void setUserno(String userno) {
        this.userno = userno;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public void setPosition(String position) {
        this.position = position;
    }

    public void setRemember(String remember) {
        this.remember = remember;
    }

    public int getId() {
        return id;
    }

    public String getUserno() {
        return userno;
    }

    public String getUsername() {
        return username;
    }

    public String getPassword() {
        return password;
    }

    public String getSex() {
        return sex;
    }

    public int getAge() {
        return age;
    }

    public String getPosition() {
        return position;
    }

    public String getRemember() {
        return remember;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", userno='" + userno + '\'' +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", sex='" + sex + '\'' +
                ", age=" + age +
                ", position='" + position + '\'' +
                ", remember='" + remember + '\'' +
                '}';
    }
}

接下来，重启后台，发起请求，发现控制台输出：

成功！

4.总结：

总结一下，其实跨域问题前后台都可以解决，且解决一次就可以了。前台不做配置的话，可以直接在axios封装进代码去，然后在后台解决跨域问题，但是我选择了在前台解决，比较简单。
到目前为止前后台已经初步搭建，我发现贴代码会越来越多，并不简洁，我会渐渐的将代码上传至git，如有需求可自行下载。如若截止目前还没有成功运行，可随时留言咨询。
接下来我准备搭建后台的一套东西，数据库（mysql）、安全框架、redis、kafka、我会一一学习使用，与大家共勉。
鸣谢：刘少我的好大儿的指点: 奋斗的新丁.