spring-boot项目二:Spring Boot整合react-app实现前后端分离

最新推荐文章于 2024-04-17 10:40:14 发布

heshengfu1211

最新推荐文章于 2024-04-17 10:40:14 发布

阅读量9.6k

点赞数 3

分类专栏： Java react 前端 js 前后端分离跨域

本文链接：https://blog.csdn.net/heshengfu1211/article/details/92445267

版权

Java 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

前后端分离

3 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

前言：目前web开发越来越采用前后端分离的开发模式，使从事后台和前端开发的程序员分别精通于自己的方向，同时也有效提高团队的工作效率。后台接口主要返回Json格式的数据，无需按照Spring-MVC模式把渲染视图的工作也交给后台完成；而前端比较流行的三框架有Vue,React和Angular，它们比起传统的js都具有显著的优势。其中React采用虚拟dom节点渲染视图，即每次dom节点发生变化只渲染发生变化的部分（react底层采用了differ算法），显著提升了页面的加载速度和网络开销。前端采用react框架开发出来的web项目一个显著的优点是实现组件化，大大提高代码的复用率，开发过程中代码修改后自动实现编译和热加载。比起传统的javascript实现网页功能，流畅效果非常明显！本文在上一篇spring-boot项目博客的基础上，前端采用react-app实现前后端分离，实现一个简单的用户信息的登录+修改信息等功能，解决了开发过程中遇到的棘手的跨域问题。

1. React的安装

1.1 通过npm 使用 React

1) 如果你的系统还不支持 Node.js 及 NPM，可以参考菜鸟教程的Node.js教程:https://www.runoob.com/nodejs/nodejs-tutorial.html

2) 建议在 React 中使用 CommonJS 模块系统，比如 browserify 或 webpack，本文使用 webpack

3）国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

$ cnpm install [name]

2. 使用 create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

在D:/myproject目录下右键Git Bash Here（需要安装Git）执行以下命令创建项目：

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

在浏览器中打开 http://localhost:3000/ ，结果如下图所示：

项目的目录结构如下：

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
    manifest.json
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

manifest.json 指定了开始页面 index.html，一切的开始都从这里开始，所以这个是代码执行的源头。

3 使用React的render函数和生命周期函数componentDidMount完成自定义页面功能

本项目的前台脚本从修改src/App.js 文件代码开始：

由于项目中需要用到jquery插件，因此在项目的根目录下执行如下Bash脚本

cnpm install jquery

npm安装后的jquery最新版本是3.4.0

一个登陆页面需要一个登陆用的form表单及登陆按钮，贴上修改后的js代码如下

import React, { Component } from 'react';
import * as $ from 'jquery';
// import logo from './logo.svg';
import './App.css';


class App extends Component {
  
  componentDidMount(){
    
    this.login=this.login.bind(this);
    
  }
  
  login(){
     let userAccount = $('#userAccount').val();
     let password = $('#password').val();
     var xhr = new XMLHttpRequest();
     xhr.withCredentials=true;
     var postUrl = "http://localhost:8080/myApp/login?userAccount="+userAccount+"&password="+password;
     xhr.open('post', postUrl, true);
     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
     xhr.send();
     xhr.onreadystatechange = function() {
      if (xhr.readyState ===4 && xhr.status === 200) {
          alert(xhr.responseText);
      }
    };
   
  }



  render() {
    return (
      <div className="App">
        <div className="app-body">
            <form name="login-form" className="login-form">
                <div className="line-div">
                    <label className="text">账号:</label>
                    <input placeholder="请输入你的账号" type="text" id="userAccount" name="userAccount" className="content"/>
                </div>
                <div className="line-div">
                    <label className="text">密码:</label>
                    <input placeholder='请输入密码' type="password" id="password" name="password" className="content"/>
                </div>
                <div className="line-div btn">
                      <div className="left-div login">
                          <input className="def-btn login" type="button" name="login" value="登录" onClick={this.login} />
                      </div>
                      <div className="left-div register">
                          <input className="def-btn register" type="button"  name="register" value="没有账号，点击注册"/>
                      </div>
                </div>
                <div className="line-div btn">
                    <input className="def-btn forget-pass" type="button" name="forget-pass" value="忘记密码"/>
                </div>
            </form>
            
        </div>
      </div>
    );
  }
}

export default App;

由于本项目的开发在跨域方面遇到了阻塞，因此没有使用传统的ajax请求，而是使用了XMLHttpRequest对象xhr

login()方法中，除了xhr需要设置xhr.withCredentials=true及设置xhr的请求头信息Content-Type为application/x-www-form-urlencoded外（注意，这里不能设置为application/json,否则会报错，Content-Type为application/json格式无法通过的Bug下期楼主会解决）还需要后台服务端设置允许跨域，服务端控制层代码如下

后台代码用的都是“spring-boot项目一”博文中所构建的代码，只是在UserController类上加上了@CrossOrigin注解

package com.spring.samples.impl.controller;

import com.spring.samples.common.enums.ResponseEnum;
import com.spring.samples.common.response.ServiceResponse;
import com.spring.samples.common.web.BaseController;
import com.spring.samples.common.web.form.UserForm;
import com.spring.samples.impl.model.UserInfo;
import com.spring.samples.impl.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

@RestController
@CrossOrigin(origins = {"http://localhost:3000"},allowCredentials = "true",allowedHeaders = {"X-Custom-Header"},
        maxAge = 3600L, methods={RequestMethod.GET,RequestMethod.POST,RequestMethod.HEAD})
public class UserController extends BaseController {
    @Autowired
    private IUserService userService;

    @RequestMapping(path="/saveUser",method= RequestMethod.POST)
    public UserInfo saveUser(@RequestBody UserInfo userInfo){
        logger.info("/saveUser request parameters:{}",userInfo.toString());
        return userService.saveUser(userInfo);
    }

    @RequestMapping(path = "/findUser",method=RequestMethod.GET)
    public UserInfo findUserbyUserAccount(@RequestParam("userAccount") String userAccount){
        logger.info("/findUser request param:{}",userAccount);
        return userService.findUserByUserAccount(userAccount);
    }

    @RequestMapping(path="/login",method= RequestMethod.POST)
    public ServiceResponse<String> userLogin(@RequestParam("userAccount") String userAccount, @RequestParam("password") String password,
                                             HttpServletRequest request){
        UserForm form = new UserForm();
        form.setUserAccount(userAccount);
        form.setPassword(password);
        logger.info("/login request params:{}",form);
        ServiceResponse<String> response = null;
        if(StringUtils.isEmpty(form.getUserAccount())){
            response = new ServiceResponse<>(ResponseEnum.PARAM_ERROR.getStatus(),"userAccount cannot be null");
            return response;
        }
        if(StringUtils.isEmpty(form.getPassword())){
            response = new ServiceResponse<>(ResponseEnum.PARAM_ERROR.getStatus(),"password cannot be null");
            return response;
        }
        HttpSession session = request.getSession();

        //在此之前未登录
        if(null==session.getAttribute("userAccount")){
            boolean  result = userService.login(form.getUserAccount(),form.getPassword());
            if(result){
                session.setAttribute("userAccount",form);
//                session.setMaxInactiveInterval(30);
                response = new ServiceResponse<>(ResponseEnum.SUCCESS.getStatus(),ResponseEnum.SUCCESS.getMsg());
                response.setData("login success");
            }else{
                response = new ServiceResponse<>(ResponseEnum.LOGIN_ERROR.getStatus(),ResponseEnum.LOGIN_ERROR.getMsg());
                response.setData("login failed");
            }
        }else{
            response = new ServiceResponse<>(ResponseEnum.SUCCESS.getStatus(),ResponseEnum.SUCCESS.getMsg());
            response.setData("You already have login success!");
        }
        return response;
    }

    @RequestMapping(path="/logout/{userAccount}",method = RequestMethod.GET)
    public ServiceResponse<String> logout(@PathVariable String userAccount, HttpServletRequest request){
        logger.info("/logout request param:{}",userAccount);
        ServiceResponse<String> response = null;
        if(StringUtils.isEmpty(userAccount)){
            response = new ServiceResponse<>(ResponseEnum.PARAM_ERROR.getStatus(),"userAccount cannot be null");
            return response;
        }
        HttpSession session = request.getSession();
        //删除session中的用户信息
        session.removeAttribute("userAccount");
        response = new ServiceResponse<>(ResponseEnum.SUCCESS.getStatus(),"login out success");
        return response;
    }

    @RequestMapping(path="/modify/pass",method = RequestMethod.POST)
    public ServiceResponse<String> modifyPassword(@RequestBody UserForm form){
        logger.info("/modify/pass request params:{}",form);
        ServiceResponse<String> response = null;
        if(StringUtils.isEmpty(form.getUserAccount())){
            response = new ServiceResponse<>(ResponseEnum.PARAM_ERROR.getStatus(),"userAccount cannot be null");
            return response;
        }
        if(StringUtils.isEmpty(form.getPassword())){
            response = new ServiceResponse<>(ResponseEnum.PARAM_ERROR.getStatus(),"password cannot be null");
            return response;
        }
        userService.modifyPassword(form.getUserAccount(),form.getPassword());
        response = new ServiceResponse<>(ResponseEnum.SUCCESS.getStatus(),ResponseEnum.SUCCESS.getMsg());
        response.setData("modify password success");
        return response;
    }


}

之前使用ajax向后台发送登录请求一直报无法通过预检请求，错误信息如下

jquery.js:8663 OPTIONS http://localhost:8080/myApp/login 403 ()

Failed to load http://localhost:8080/myApp/login: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 403.

后来发现是我后台写的处理跨域请求的拦截器一直没生效，一时没有找到为啥没生效的原因和解决办法，于是改成在控制器上添加跨域注解

App.css样式表代码如下

.app-body{
  margin-top:15px;
  width:100%;
  height:auto;
  font-family: serif;
  font-size: 12px;
  color: #333333;
  background-color: #f1f2f3;
}

form.login-form{
  width: 50%;
  margin-left: 25%;
  margin-top: 30px;

}

div.line-div{
  width:100%;
  height:35px;
  margin-top:10px;
}

label.text{
  width:30%;
  height:26px;
  padding-top:5px;
  text-align: right;
  font-size:14px;
}

input[type='text'],input[type='password']{
    width: 50%;
    height: 24px;
    padding-top: 4px;
    padding-left: 5px;
    margin-left: 10px;
    border-radius: 2px;
}
div.left-div{
  height:32px;
  float:left;
}
div.login{
  width:30%;
}
div.line-div.btn{
  margin-left:5%;
}
input.def-btn.login{
  width:85%;
}


div.register{
  width:50%;
}

input.def-btn{
  width:50%;
  height:32px;
  text-align: center;
  background-color: #61dafb;
  color:#ffffff;
  font-size: 14px;
  border-radius: 10px;
  cursor: pointer;
}
input.def-btn.forget-pass{
  width:26%;
}

input[name='register']{
  color:yellow;
}

#messageBox{
  width: 60px;
  height:30px;
  color:#333333;
  text-align: center;
}

启动后台服务器后，在前端myapp项目的根目录下使用Git Bash控制台运行npm start命令，控制台出现Complied successfully !信息表示react项目启动成功，如下图所示

在谷歌浏览器中输入http://localhost:3000/回车后登录界面效果如下图所示

输入数据库中存入正确的账号和密码：heshengfu251/Aa123456后点击登录按钮后弹出如下信息，表示跨域调用后台http://localhost:8080/myApp/login 接口成功！

关于在前后端分离项目中实现跨域的系统解决方案请感兴趣的同学参考下面这篇博文

前端如何去做跨域解决方案

heshengfu1211

关注

3
点赞
踩
33

收藏

觉得还不错? 一键收藏
打赏
3
评论
spring-boot项目二:Spring Boot整合react-app实现前后端分离

前言：目前web开发越来越采用前后端分离的开发模式，使从事后台和前端开发的程序员分别精通于自己的方向，同时也有效提高团队的工作效率。后台接口主要返回Json格式的数据，无需按照Spring-MVC模式把渲染视图的工作也交给后台完成；而前端比较流行的三框架有Vue,React和Angular，它们比起传统的js都具有显著的优势。其中React采用虚拟dom节点渲染视图，即每次dom节点发生变化只渲染...
复制链接

扫一扫