AJAX
不是一种新的编程语言, 是一种异步通信技术. 在无需重新加载网页的情况下, 就可以更新部分网页.
但是原生的比较弱, 我们这里就用Vue中封装好的Ajax, 其可以提供一个拦截器.
使用
要先启动java项目, 并先用postman调试好, 然后进行测试. 可以在浏览器的调试工具中看到和postman中看到的相同的结果.
简单使用
在Login.vue中Login()的函数中直接编写调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 下面这行写在<script>开头
import axois from "axios";
login() {
// 也就是说可以双向改变
// console.log(this.username);
// this.username = "test";
axois.get("http://localhost:8888/user/all").then(response => {
console.log(response.data);
});
if (this.username == "admin" && this.password == "1234") {
console.log("登录成功");
// 引用 main.js中import的文件
this.$router.push(`/home`);
} else {
console.log("登录失败");
}
}
进阶
新建request.js文件, 将Url配置, 拦截器(令牌校验, 错误跳转)进行封装., 然后在Login.vue中编写request调用.
// src/utils/request.js
import axios from 'axios'
import {
getToken,
setToken,
removeToken
} from '@/utils/localStorage.js'
// 创建axios实例
const service = axios.create({
baseURL: 'http://localhost:8888', // api的base_url
timeout: 5000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(config => {
console.log("请求拦截");
// 统一加上令牌
if (getToken() !== "") {
config.headers.token = getToken();
}
return config
}, error => {
return Promise.reject(error);
})
// respone拦截器
service.interceptors.response.use(
response => {
console.log(response);
console.log("响应拦截");
// 没有token跳转到登录
// 跨域问题
if (response.data.code == 4) {
window.location.href = "/";
return;
}
return response;
}, error => {
console.log(error);
return Promise.reject(error.response.data)
})
export default service
// src/views/Login.vue
import request from "@/utils/request.js";
// 无用的部分在此没有写出
login() {
// 复用性较差,对于获取所有人的信息,可能会造成代码的冗余
// 所以创建src/api文件用以提高复用性
request({
// 和request中的service拼接路径
url: "/user/all",
method: "get"
}).then(response => {
console.log(response.data);
});
}
api方式
保留上个方法中的request.js 新建api文件夹, 中间存放user.js. 将request的设置也一并封装成js函数, 在vue文件中直接调用函数.
此处一定要注意, 这里一定要写 data:data 这种形式, 后一个data表示数据的参数, 前者表示类型, 如果前者为 params , 则为路径形式的传参
// src/api/user.js
import request from "@/utils/request.js";
// 可以和后端代码不那么严丝合缝的对应
// 获取所用用户数据
const basePath = "/user"
// 添加用户
export function insert(data) {
return request({
url: basePath,
method: "post",
data: data
});
}
// 修改用户
export function update(data) {
return request({
url: basePath,
method: "put",
data: data
});
}
// 删除用户
export function deleteElem(ids) {
return request({
url: basePath,
method: "delete",
data: ids
});
}
// 获取分页信息
export function getPage(data) {
return request({
url: basePath + "/query",
method: "post",
data: data
});
}
// 获取所有用户信息
export function getAll() {
return request({
url: basePath + "/all",
method: "get",
});
}
import {
getUsers
} from "@/api/user.js";
// 无用的部分在此没有写出
login() {
// 复用性较差,对于获取所有人的信息,可能会造成代码的冗余
// 所以创建src/api文件用以提高复用性
getUsers().then(response => {
console.log(response.data);
});
}
操作每行数据
跨域错误
跨域访问(CORS)是由于浏览器的保护机制引起的. 最开始的解决方案是: 在UserController.java(这个就是View层的控制器, 用以映射url与业务层接口)上加入@CrossOrigin以允许跨域. 但是并不是完善的解决方案. 最好如下操作.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// src\main\java\com\neuedu\config\GlobalCorsConfig.java
// 过滤器
@Configuration
public class GlobalCorsConfig {
@Bean
public CorsFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
config.addAllowedOrigin("*");
config.setAllowCredentials(true);
config.addAllowedMethod("*");
config.addAllowedHeader("*");
UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config);
return new CorsFilter(configSource);
}
}
