【开发篇】10分钟快速上手spring boot+react登录前后端分离

之前的预备知识：

• 10分钟快速上手git与github
• 10分钟快速上手springboot
• 10分钟快速springboot+react前后端分离
• 10分钟快速上手springboot+mybatis增删改查

本次将带来前后端分离的spring boot+react的登录demo。

接下来，让我们在学习的海洋中畅游吧！！！

一、前后端分离

1.1 前后端分离

在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的显示，前端与后端耦合度很高。

1.2 前后端分离

在前后端分离的应用模式中，后端仅返回前端所需的数据，不再渲染HTML页面，不再控制前端的效果。至于前端用户看到的效果，从后端请求的数据如何加载到前后端中，都有前端自己决定，网页有网页的处理方法，但无论哪种前端，所需的数据基本相同，后端仅需开发一套逻辑对外提供数据即可。

二、后端设计

2.1 数据库表设计

2.2 技术

• spring boot
• mybatis

2.3 项目结构

1.entity

package com.lcz.login.entity;
/**
* @author : codingchao
* @date : 2020-08-16 14:02
* @Description:
**/
public class User {
private int id;
private String username;
private String password;
public User(String username, String password) {
this.username = username;
this.password = password;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}

package com.lcz.login.entity;
import java.io.Serializable;
import java.util.HashMap;
import java.util.Map;
/**
* @author : codingchao
* @date : 2020-08-16 14:15
* @Description:
**/
public class Result<T> {
// 错误码
private Integer code;
// 提示信息
private String msg;
// 具体内容
private T data;
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public T getData() {
return data;
}
public void setData(T data) {
this.data = data;
}
}

2.mapper

package com.lcz.login.mapper;
/**
* @author : codingchao
* @date : 2020-08-16 14:04
* @Description:
**/
import com.lcz.login.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository
@Mapper
public interface UserMapper {
// 通过账户名来查询密码
User findUserByName(String username);
}

3.service

package com.lcz.login.service;
import com.lcz.login.entity.User;
import com.lcz.login.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* @author : codingchao
* @date : 2020-08-16 14:07
* @Description:
**/
public interface UserSerice {
public User findUserByName(String name);
}

4.service/impl

package com.lcz.login.service.impl;
import com.lcz.login.entity.Result;
import com.lcz.login.entity.User;
import com.lcz.login.mapper.UserMapper;
import com.lcz.login.service.UserSerice;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* @author : codingchao
* @date : 2020-08-16 14:09
* @Description:
**/
@Service
public class UserServiceImpl implements UserSerice {
@Autowired
private UserMapper userMapper;
@Override
public User findUserByName(String name) {
User user = userMapper.findUserByName(name);
return user;
}
}

5.controller

package com.lcz.login.controller;
import com.lcz.login.entity.Result;
import com.lcz.login.entity.User;
import com.lcz.login.service.impl.UserServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
/**
* @author : codingchao
* @date : 2020-08-16 14:10
* @Description:
**/
@RestController
@RequestMapping(value="/crud",method = {RequestMethod.GET,RequestMethod.POST})
public class UserController {
@Autowired
private UserServiceImpl userService;
@PostMapping("/listUserByName")
public Result<User> findUserByName(@RequestParam("username")String username,
@RequestParam("password")String password){
User user = userService.findUserByName(username);
Result result = new Result();
if (user.getPassword().equals(password)){
result.setCode(0);
result.setMsg("成功");
result.setData(user);
}else{
result.setCode(-1);
result.setMsg("失败");
result.setData("");
}
return result;
}
}

6.resource/mapper/UserMapper.xml

<?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.lcz.login.mapper.UserMapper">
<resultMap id="result" type="com.lcz.login.entity.User">
<result property="username" column="username"/>
<result property="password" column="password"/>
</resultMap>
<select id="findUserByName" resultMap="result">
SELECT * FROM user where username=#{username}
</select>
</mapper>

其余的配置，可参考[开发篇]10分钟快速上手spring
boot+mybatis增删改查

三、前端设计

前端在一个bootstrap开源框架上进行操作的。

3.1 技术

• React
• Bootstrap
• font-awesome

3.2 功能实现

登录界面输入账号密码->发送请求到后端进行验证->验证成功进入主页->选择退出账号->回到登录页面

3.3 重要技术

1.跨域请求

• 前端的端口在localhost:3000
• 后端的端口在localhost:8081

属于跨域请求，本次在前端通过http-proxy-middleware模块来实现跨域请求

在src下新建setupProxy.js

// 跨域请求
const {createProxyMiddleware} = require('http-proxy-middleware');
module.exports = function (app) {
app.use(createProxyMiddleware('/listUserByName', {target: 'http://localhost:8081/crud/', changeOrigin: true}))
}

2.LocalStoage存取

//localstorage读取
setStorage(name,data){
let dataType = typeof data;
// json
if(dataType === 'object'){
window.localStorage.setItem(name,JSON.stringify(data));
}else if( ['number','string','boolean'].indexOf(dataType) >=0 ){
window.localStorage.setItem(name,data);
}else{
alert("该类型不能用于本地存储");
}
}
getStorage(name){
let data = window.localStorage.getItem(name);
if(data){
return JSON.parse(data);
}else{
return '';
}
}
removeStorage(name){
window.localStorage.removeItem(name);
}

3.登录

• 表单验证在前端，看账号和密码是否为空以及是否满足要求
• 回车提交表单请求
• 登录成功之后将用户存入localstorage
• 主页界面读取localstorage的信息并显示用户名

request(param) {
return new Promise((resolve, reject) => {
$.ajax({
type: param.type || 'get',
url: param.url || '',
dataType: param.dataType || 'json',
data: param.data || null,
success: res => {
resolve(res);
},
error: err => {
resolve(err);
}
})
})
}

 onSubmit = () => {
let loginInfo = {
username: this.state.username,
password: this.state.password,
redirect : '/'
};
// 表单验证
let checkResult = _mm.checkLoginInfo(loginInfo);
// console.log(checkResult);
if (checkResult.status) {
_mm.request({
type : 'post',
url: '/listUserByName',
data:{
username: this.state.username,
password: this.state.password
}
}).then((res) => {
if(res.code==-1){
_mm.errorTips("账号密码错误");
}else if(res.code==0){
_mm.setStorage('userInfo',res);
this.props.history.push(this.state.redirect);
}
}, (errMsg) => {
console.log(errMsg);
})
} else {
_mm.errorTips(checkResult.msg);
}
}

4.退出

• 点击退出，删除localstorage中的信息
• 游览器获得不到localstorage信息，则进入登录界面

// 这是退出登录
onLogout = () => {
_mm.removeStorage('userInfo');
window.location.href = ("/login");
}
// 验证是否有登录信息
componentWillMount(){
if(_mm.getStorage("userInfo") == ''){
window.location.href = ("/login");
}
}

好了，本次学习的旅程，到此结束！！！