Vue利用Axios二次封装实现与Springboot数据交互
Vue利用Axios二次封装实现与Springboot数据交互
开发工具：WebStorm、IDEA
技术框架：SpringBoot、Vue、Axios
内容简介：首先这是一个待完善的小案例，案例目的是为了实现利用Axios进行二次封装，然后传递请求给后端，后端接收数据，返回给前端的过程。适合做一个刚刚练手的小案例，再次期间碰到了许多小问题，例如跨云问题、数据解析问题，在这里我也会一一描述，然就给大家解决方案！
面向群众：适合vue刚入门的小白！！！
前端结构框架：
（1）安装axios:在你当前的文件夹内输入：npm install axios --save
（2）对Axios进行二次封装：在这里因为是初学者，没有配置请求拦截器和响应拦截器，就是单纯的发请求！！！
import axios from "axios";
const request = axios.create({
baseURL: 'http://localhost:8082', // 注意!! 这里是全局统一加上了 '/api' 前缀,也就是说所有的接口都会加上'/api'前缀名
timeout: 5000
})
// // request( 请求拦截器 )
// // 可以在( 请求发送前 ) 对请求做一些处理( 比如加上token，对一些参数统一加密 ) 箭头函数：config =>{},error =>{}
// request.interceptors.request.use( config => {
// return config;
// }, error => {
// return Promise.reject(error);
// }
// );
//
// // response( 响应拦截器 )
// // 可以在( 响应后 ) 统一处理结果 箭头函数：response =>{},error =>{}
// request.interceptors.response.use( response => {
// let res = response.data
//
// // 如果是返回的文件
// if (response.config.responseType === 'blob') {
// return res
// }
//
// // 兼容服务端返回的字符串数据
// if (typeof res === 'string') {
// res = res ? JSON.parse(res) : res
// }
// return res
// }, error => {
// console.log('err' + error) // for debug
// return Promise.reject(error);
// }
// );
export default request;
在这里注意：baseURL这里如果只写/aaa，那么他就会默认访问http://localhost:8080/aaa/****，所以如果你前端和后端开的端口号是一样的话，需要改一下端口号，然后地址要这样改才可以！！！注意注意！！！！
（3）js包导入封装好的request.js
import request from '@/request/request'
export function login(username, password) {
const data = {
username,
password
}
return request({
url: '/vue/loginVue',
method: 'post',
data
})
}
(4)在vue文件中调用该方法，先用import导入，然后在调用，大家应该看出来了，没错就是那个测试登录按钮那个触发登陆事件。哈哈哈！
<template>
<div>
<h1>商品分类</h1>
<button @click = "TestArray()">按钮1</button>
<button @click="TestBoolean">按钮2</button>
<button>按钮3</button>
<button @click = "TestThis()" >按钮4</button>
<button v-on:click="TestFilter()">按钮5</button>
<div id="wrap">
<button @click = "addEventListener()">click me</button>
</div>
<button @click="testLogin()">测试登录按钮</button>
<el-button @click = "elButton">el-button</el-button>
</div>
</template>
<script>
import {
login
} from '@/api/login';
export default {
data(){
return{
}
},
methods:{
elButton(){
console.log("测试方法过来了没")
},
testLogin(){
login("admin","123");
},
TestBoolean(){
var test=new Boolean();
console.log('new Boolean()'+test)
var test=new Boolean(0);
console.log('new Boolean(0)'+test)
var test=new Boolean(1);
console.log('new Boolean(1)'+test)
var test=new Boolean(null);
console.log('new Boolean(null)'+test)
var test=new Boolean(undefined);
console.log('new Boolean(undefined)'+test)
var test=new Boolean("");
console.log('new Boolean("")'+test)
var test=new Boolean("aa");
console.log('new Boolean("aa")'+test)
var test=new Boolean(NaN);
console.log('new Boolean(NaN)'+test)
},
TestArray(){
var array=[-1,1,3,4,6,10];
array.sort(function(a, b) {
console.log(array)
console.log(a)
console.log(b)
return a-b;
});
//array.sort((a,b)=>Math.abs(a-3)-Math.abs(b-3));
console.log(array)
},
TestThis(){
console.log(this.TestFilter())
},
addEventListener(){
console.log("点击事件")
// setTimeout(()=>{ //箭头函数可以使this不重新绑定
// console.log(this.TestFilter); //即this为button对象
// this.innerHTML='clicked'
// },1000)
},
TestFilter(){
// var
// r,
// arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry','apple'];
//
// r = arr.filter(function (element, index, self) {
// return false;
// });
//
// console.log(r)
// var arr = ['A', 'B', 'C'];
// var r = arr.filter(function (element, index, self) {
// console.log("分割线")
// console.log(element); // 依次打印'A', 'B', 'C'
// console.log(index); // 依次打印0, 1, 2
// console.log(self); // self就是变量arr
// return true;
// });
var arr = [10, 20, 1, 2];
// arr.sort(function (x, y) {
// if (x < y) {
// return -1;
// }
// if (x > y) {
// return 1;
// }
// return 0;
// }); // [1, 2, 10, 20]
arr.sort();
console.log(arr)
}
}
}
</script>
--------------------------------------------------~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~____________________
至此前端的配置工作做完了，下面开始做后端了！！
第一步，因为我前端的端口号是8080，所以第一步改后端的端口号，如果这里改了，name前端的那个request.js的baseUrl也需要改成一致的端口号！！！
在这里我出现了一个很大的问题：就是跨域问题，然后解决方法很简单，写一个配置类或者加注解。具体我在上一篇博客上面写了，在这里写一个地址吧：https://blog.csdn.net/weixin_43388691/article/details/126939114?spm=1001.2014.3001.5502
然后就写一个Controller,注意相应的各种注解一定要配置，这个我就不细说了，具体代码：这里注意接受前端的post请求要用@RequestBody 来接受！！！在返回数据时，要用@ResponseBody，返回json格式的数据！或者一开始直接使用@RestControlelr
package com.blog.controller.Vue;
import com.blog.pojo.User;
import com.blog.pojo.UserVue;
import com.blog.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@ResponseBody
@RequestMapping("/vue")
public class VueLoginController {
@Autowired
private UserService userService;
@PostMapping("/loginVue")
public User loginVue(@RequestBody UserVue userVue){
//HttpSession session = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest().getSession();
User user = userService.checkUser(userVue.getUsername(), userVue.getPassword());
// System.out.println("查询的用户为"+user);
// if(user != null){
// user.setPassword(null);
// session.setAttribute("user", user);
// return "admin/index";
// }else {
// attributes.addFlashAttribute("msg", "用户名或密码错误");
// return "redirect:/admin";
// }
System.out.println(user);
return user;
}
}
至此你就会发现，后端已经可以接受前端的请求了，然后也可以返回数据给前端了！！！
完结撒花！！！如果有问题，欢迎留言！！！！
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
1
0- 0
已为社区贡献7条内容
所有评论(0)