springboot+react实现前后端交互 |
您所在的位置：网站首页 › 前后端怎么配合 › springboot+react实现前后端交互 |
springboot+react实现前后端交互
|
一、搭建springboot后台
1. 创建一个Springboot项目， 然后导入pom依赖， 本着一切从简的原则，如果不连接数据库的话，有个spring-boot-starter-web的依赖就够用了。
org.mybatis.spring.boot
mybatis-spring-boot-starter
1.1.1
mysql
mysql-connector-java
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 queryUserList();
}
select * from user;
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 (
{/*访问其他页面不显示Home*/}
)
}
}
export default App;
--------------Home
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
class Home extends Component{
render() {
return (
This is Home!
{color:'black'}}>
点击跳转到Page2 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |