一个简单的前后端分离案例

一、IDEA 建一个spring boot 工程，只要spring web依赖即可

二、写一个测试接口

package com.example.demo;import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.HashMap;
import java.util.Map;@RestController
public class TestController {@CrossOrigin //允许跨域请求@GetMapping("test")public Map test(String word){Map<String,String> resData = new HashMap<>();resData.put("msg",word);return resData;}
}

三、webstorm 新建一个react app

alt+F121进入控制台，装axios
npm install --save axios

写一个组件main.jsx

/* 用 户 登陆 的 路 由 组 件 */
import React, {Component} from 'react'
import axios from 'axios'export default class Main extends React.Component {constructor(props) {super(props);this.state = {msg: 'original sentence',};}render() {return (<div><button onClick = {() => {let params = {params:{  //这个是发送给后端的参数，需要有params作为key值word:'Hello,World!',}}axios.get('http://localhost:8080/test',params).then((response)=>{console.log(response.data);let {msg} = response.data;console.log(msg)this.setState({msg: response.data.msg})}).catch((error)=>{console.log(error)})// this.setState({msg: 'button onclick'})}}>调用接口</button>{this.state.msg}</div>);}
}

index.js

/* 入 口 JS */
import React from 'react'
import ReactDOM from 'react-dom'import Main from './containers/main/main'ReactDOM.render(<Main/>, document.getElementById('root'))

四、演示效果

当点击按钮时触发接口调用改变状态机的值

一个简单的前后端分离案例相关推荐

从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目
从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建参考学习vue官网文档 https://v3.cn.vuejs.org/guide/installati ...
Vue+SpringBoot+Mybatis+Mysql前后端分离案例
Vue+SpringBoot+Mybatis+Mysql前后端分离案例(二) 前端开发 main.js代码如下 import Vue from 'vue' import App from './App ...
2021年数据库课设该怎么做？一个超市管理系统，简单的前后端分离项目，带你从概要设计走到项目发布！(Vue.js+SpringBoot+MybatisPlus)
由于本文格式原来是word,所以文中有些格式不太对.如果这篇文章对你有帮助,麻烦点赞评论一下谢谢!源码和word文档可私聊领取~ 目录一.相关技术介绍 1.1 RDBMS: 1.2应用程序开发环境: ...
最简单的前后端分离部署（Koa2）
前后端分离开发应该已经是很多公司的标配了,然而,在前端工程化的体系下,开发环境代码和生产环境代码往往是平级的,不再是整个文件夹往服务器上一扔就了事,这让每次的部署过程相当繁琐. 如下是常见的项目目录: ...
超详细！4小时开发一个SpringBoot+vue前后端分离博客项目！！
小Hub领读: 前后端分离的博客项目终于出来啦,真是花了好多心思录制咧.文末直接进入B站看视频哈! 作者:吕一明项目代码:https://github.com/MarkerHub/vueblog 项 ...
怎样判断一个网站是不是前后端分离的？
1.页面右击选择[检查]或者打开谷歌开发者模式 2.选择[NetWork],重新刷新页面 3. 选择XHR 全称(xmlhttprequest),后,下面会有地址列表:查看页面的数据是从页面渲染的数据 ...
简单了解前后端分离架构（MVVM）
JavaWeb 项目前后端分离架构前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式有效解耦,并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构.多端 ...
【个人理解】简单理解前后端分离，微服务，分布式开发
前后端分离就是分开开发前端和后台不在同一个应用中.而是两个不同的项目每个项目都有不同的域名和端口号,如果前端需要数据,就去访问后台得项目接口获取数据就比如说,数据库和后台是分开的, 数据库和后台 ...
简单理解前后端分离，微服务，分布式开发
前后端分离就是分开开发前端和后台不在同一个应用中.而是两个不同的项目每个项目都有不同的域名和端口号,如果前端需要数据,就去访问后台得项目接口获取数据就比如说,数据库和后台是分开的, 数据库和后台 ...
从0搭建一个Springboot+vue前后端分离项目(七)完善前台与后台的联系,完善功能接口
将之前前端写的表格内容,与数据库新建的表进行对应启动项目把写死的TableDa数据删掉.因为最终要从后台读取完善新增接口 <el-button type="primary&quo ...

一个简单的前后端分离案例

一个简单的前后端分离案例相关推荐

最新文章

热门文章