使用React和springboot做前后端分离项目的步骤方式
前端React准备
第一步,全局安装:npm i -g create-react-app
第二步,切换到想创项目的目录,使用命令:create-react-app 加你要创建的项目名,例如create-react-app hello-react
第三步,进入项目文件夹:cd hello-react
第四步,安装yarn add axios
第五步,启动项目:npm start 或者yarn start
第六步,要修改的文件有以下两个
App.js
import React,{Component} from 'react' import axios from 'axios' export default class App extends Component{ state = { //初始化状态 aaa:[] } getStudentData = ()=>{ axios.get('http://localhost:3000/api1/ltl/students').then( response => {console.log('成功了',response.data.user); this.setState({aaa:response.data.user}) }, error => {console.log('失败了',error);} ) } render(){ const {aaa}=this.state console.log("111",aaa) return ( <div> <button onClick={this.getStudentData}>点我获取学生数据</button> <ul> { aaa.map((user)=>{ return ( <li> <div key={user.id}> <p>id: {user.id} 名字:{user.name} 密码:{user.pwd}</p> </div> </li> ) }) } </ul> </div> ) } }
setupProxy.js
const proxy = require('http-proxy-middleware') module.exports = function(app){ app.use( proxy('/api1',{ //遇见/api1前缀的请求,就会触发该代理配置 target:'http://localhost:8080', //请求转发给谁 changeOrigin:true,//控制服务器收到的请求头中Host的值 pathRewrite:{'^/api1':''} //重写请求路径(必须) }) ) }
后端准备
一、创建springboot项目
二、准备Maven依赖
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.76</version> </dependency>
三、写实体类和Controller
User.java
public class User { private Integer id; private String name; private String pwd; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getPwd() { return pwd; } public void setPwd(String pwd) { this.pwd = pwd; } @Override public String toString() { return "User{" + "id=" + id + ", name='" + name + '\'' + ", pwd='" + pwd + '\'' + '}'; } public User() { super(); } public User(Integer id,String name, String pwd){ this.id=id; this.name=name; this.pwd=pwd; } }
jsonController.java
import com.alibaba.fastjson.JSONObject; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.ArrayList; import java.util.List; @RestController @RequestMapping("/ltl") public class jsonController { @RequestMapping("/students") public JSONObject jsonTest(){ User user1 = new User(1,"小明","123456xm"); User user2 = new User(2,"小红","123456xh"); User user3 = new User(3,"小李","123456xl"); List list = new ArrayList<User>(); list.add(user1); list.add(user2); list.add(user3); JSONObject jsonObject2 = new JSONObject(); jsonObject2.put("user",list); System.out.println(jsonObject2); return jsonObject2; } }
前后端启动
前端默认是3000端口号,后端默认为8080端口号
点击按钮可以接收到后端数据
点击按钮后后端接口成功被访问
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Spring Data JPA框架快速入门之自定义Repository接口
Spring Data JPA是Spring基于JPA规范的基础上封装的⼀套 JPA 应⽤框架,可使开发者⽤极简的代码即可实现对数据库的访问和操作,本篇我们来了解Spring Data JPA框架的自定义Repository接口2022-04-04如何使用Spring Cloud Feign日志查看请求响应
这篇文章主要介绍了如何使用Spring Cloud Feign日志查看请求响应,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
最新评论