Vue+Springboot前后端交互_springboot和vue前后端交互

1：什么是Vue？

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

2：Vue的定义

    关于Vue简介，百度百科给出的解释是：Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

    Vue.js 是一个提供了 MVVM 风格双向数据绑定的 Javascript 库（无依赖别的js库，直接引入一个js文件就可以使用，跟jquery差不多），专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

3：什么是axios？

Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。说到get、post，大家应该第一时间想到的就是Jquery吧，毕竟前几年Jquery比较火的时候，大家都在用他。但是由于Vue、React等框架的出现，Jquery也不是那么吃香了。也正是Vue、React等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了。

4:axios特性

1、可以在浏览器中发送 XMLHttpRequests
2、可以在 node.js 发送 http 请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求数据和响应数据
6、能够取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 XSRF 攻击

5:axios用在什么场景？

在特性里面已经有提到，浏览器发送请求，或者Node.js发送请求都可以用到Axios。像Vue、React、Node等项目就可以使用Axios，如果你的项目里面用了Jquery，此时就不需要多此一举了，jquery里面本身就可以发送请求。

6:为什么要使用axios

Vue界面在前后端交互的过程中使用的是AJAX的方式来进行的数据交互，我们一般来说使用较多的是Vue-resource 以及 axios 这俩个组件来实现Vue的前后端的交互。但是在Vue1.0中官方推荐使用vue-resource，在Vue2.0的时候，官方推荐使用axios。并且在之后对Vue-resource不再进行维护更新。所以今天我就来说一说axios的使用.

---

示例代码如下：

如何使用axios？

第一种，安装模版

npm install axios

第二种，直接引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

引入之后就可以直接使用了

我这里写了两种方式，

1：通过参数，把值写到{}中进行传值

2：通过URL（Qs，官方推荐 ），将参数以？形式拼接到URl后面        

	const app= Vue.createApp({
					data() {
						return{
							emp1:"",
							emp2:""
						}
					},
					methods:{
						btn(){
                 //第一种，通过参数
							axios.get("http://localhost:8080/test/selectbyid",{params:{id:1}}).then(res=>{
								console.log(res);
								this.emp1=res.data.data
							}).catch(function(){
								console.log("失败")
							})
						},
						btn2(){
                  //第二种，通过URL
							axios.get("http://localhost:8080/test/selectbyid?id=1").then(res=>{
								console.log(res)
								this.emp2=res.data.data
							}).catch(function(){
								console.log("失败")
							})
						}
					}
				})
				app.mount("#app")

我们开启一个Springboot项目，在开启我们的Vue项目进行一下访问，这时候会弹出一个报错

翻译过来就是：

Access to XMLHttpRequest at 'http://localhost:8080/test/selectbyid?
访问XMLHttpRequest在'http://localhost:8080/test/selectbyid?
id-1' from origin 'http://127.0.0.1:8848' has been blocked by CORs policy: No 'Access-Control-Allow-Origin' header is axios-1.html:1 present on the requested resource.
id-1'来自原点'http://127.0.0.1:8848'被CORs策略阻止:请求的资源上没有'Access-Control-Allow-Origin'标头是axios-1.html:1。

说白了就是跨域问题

那么什么是跨域呢？

跨域（Cross-Origin Resource Sharing，简称 CORS）是一种安全策略，用于限制一个域的网页如何与另一个域的资源进行交互。这是浏览器实现的同源策略（Same-Origin Policy）的一部分，旨在防止恶意网站通过一个域的网页访问另一个域的敏感数据。

由于浏览器实施的同源策略（Same Origin Policy），这是一种基本的安全协议，它确保了浏览器的稳定运行。没有同源策略，浏览器的许多功能可能无法正常工作。整个Web体系建立在同源策略之上，浏览器是这一策略的具体实现。该策略禁止来自不同域的JavaScript脚本与另一个域的资源进行交互。所谓同源，指的是两个页面必须具有相同的协议（protocol）、域名（host）和端口号（port）。

就是从一个服务器去访问另一个服务器，就好比自己想要进别人家，那肯定不能随便就进，需要人家同意之后才可以。

跨域解决办法

在允许跨域访问的Controller类或里面的方法头上添加该注解：@CrossOrigin

@CrossOrigin是一个用于处理跨域请求的注解。在Web开发中，跨域请求是指从一个域名的网页向另一个域名的服务器发送HTTP请求。由于浏览器的同源策略限制，跨域请求可能会被阻止。为了允许跨域请求，可以使用@CrossOrigin注解来配置服务器允许特定的跨域请求                

接下来@CrossOrigin下的路径都将都将被认为允许跨域访问，这样就可以请求数据了

后端返回过来的参数都放在了res下的data中

以上是一个Get请求，下面演示一下如何向后端传值，使用post请求

这里没有使用params,是因为这是一个post请求，需要返回一个JSON，其他的请求都如出一辙

	btn3(){
							axios.post("http://localhost:8080/test/update",{id:0,stuname:'迪迦奥特曼',sex:'男'}).then(res=>{
								console.log(res);
								this.empList=res.data.data
							}).catch(function(){
								console.log("失败")
							})
						},
 
 
 
//该URL方法，不需要在Controller方法上加@RequestBody注解，因为该注解的意思是从一个方法体中取出某个数据，而这种URL传值方式，传到后端的每个值都是单体的属性值。
	btn4(){
							axios.post(`http://localhost:8080/test/update?id=${this.id}&stuname=${this.stuname}&sex=${this.sex}`).then(res=>{
								console.log(res);
								this.empList=res.data.data
							}).catch(function(){
								console.log("失败")
							})
						}

  @PostMapping("update")
    public Result Update(@RequestBody Emp emp) {
        return Result.success(myService.Byupdate(emp));
    }