一、搭建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;
}
}