《Vue3实战》篇章整体栏目
—————————————————————————————
【第一章】node.js/npm安装、配置
【第二章】创建项目和目录结构
【第三章】基础语法
【第四章】条件语句、循环语句
【第五章】计算、监听属性
【第六章】样式绑定和事件处理
【第七章】表单
【第八章】自定义指令
【第九章】路由
【第十章】Element plus指南
【第十一章】Vue里的Axios及使用get、post请求
—————————————————————————————
目录
—————————————————————————————
前言
Axios是一个基于promise 的 HTTP 库，可以用在浏览器和 node.js中。
1、安装
cnpm install axios
或
npm install axios
2、解决Java后台跨域的几种方式
2.1、springboot项目添加跨域配置类
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 所有接口
.allowCredentials(true) // 是否发送 Cookie
.allowedOriginPatterns("*") // 支持域
.allowedMethods(new String[]{
"GET", "POST", "PUT", "DELETE"}) // 支持方法
.allowedHeaders("*")
.exposedHeaders("*");
}
}
2.2、在java类上增加@CrossOrigin配置
package com.kelvin.spiderx.controller;
import org.springframework.web.bind.annotation.CrossOrigin;
/***
* @title CsdnQcController
* @desctption CSDN博客质量查询
* @author kelvin
* @create 2023/7/1 14:33
**/
@CrossOrigin("*")
public class CsdnQcController {
}
2.3、在java方法上增加@CrossOrigin配置
@CrossOrigin
// 执行查询操作
public ResutlDto executeCsdnQc(String username) {
return ResutlTools.buildSuccess(csdnQcService.allBlogQcDataByRest(username));
}
2.4、通过HttpServletResponse 配置跨域
// 执行查询操作
public ResutlDto executeCsdnQc(String username , HttpServletResponse response) {
//解决跨域问题
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");
response.setHeader("Access-Control-Allow-Credentials", "true");
//返回数据时指定编码格式:utf-8
response.setContentType("application/json;charset=utf-8");
response.setCharacterEncoding("UTF-8");
return ResutlTools.buildSuccess(csdnQcService.allBlogQcDataByRest(username));
}
3、get调用
<template>
<h1>
<button @click="invokeUserList">点我</button>
</h1>
<h1>
<ol>
<li v-for="userInfo in userList" :key="userInfo.id">
{
{userInfo.userAccount}}
</li>
</ol>
</h1>
</template>
<script>
import axios from 'axios'
export default {
name: 'HelloWorld',
data(){
return{
userList:[]
}
},
mounted(){
this.invokeUserList();
},
methods:{
invokeUserList(){
//axios调用后台get方法
axios.get("http://localhost:8001/user/userInfoList")
.then(response =>{
//对返回结果进行处理
this.userList = response.data;
console.log(this.userList);
}).catch(function(error){
//异常处理
console.log(error);
})
}
}
}
</script>
4、post调用
<template>
<h1>
<button @click="invokeUserList">点我</button>
</h1>
<h1>
<ol>
<li v-for="userInfo in userList" :key="userInfo.id">
{
{userInfo.userAccount}}
</li>
</ol>
</h1>
</template>
<script>
import axios from 'axios'
export default {
name: 'HelloWorld',
data(){
return{
userList:[]
}
},
mounted(){
this.invokeUserList();
},
methods:{
invokeUserList(){
axios.post("http://localhost:8001/user/userInfoList",
{
account:'tiger',pwd:'123456'})
.then(response =>{
this.userList = response.data;
console.log(this.userList);
}).catch(function(error){
console.log(error);
})
}
}
}
</script>
5、总结
在此，我们使用Vue里的Axios，调用了get、post请求。