说明
- 本次使用的到的数据均为假数据,并未使用数据库。
- vue文件中的方法调用注意看文件的引入。
- 其中有些使用伪代码的方式。
前期准备
- 创建一个spring boot项目,
项目结构如下:
说明:
config:
GlobalCORSConfig:配置vue-element-admin与springboot之间的跨域请求
model:
vo: 返回给前端的实体对象。
po:service 与dao之前传递的对象。
service:接口层
impl:service接口的实现层,其下的类需要实现service中的接口。且顶部加入注解 @Service。
controller:控制器层,接收前端数据和响应数据到前端。
跨域请求解决:
GlobalCORSConfig代码如下:
package com.example.demo.config;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Component
public class GlobalCORSConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("POST","GET")
.allowCredentials(false)
.maxAge(30);
}
}
或者在控制器的方法上加入注解 @CrossOrigin,如下:
@CrossOrigin
@PostMapping(value = "/doLogin")
public String doLogin(
@RequestParam(value = "username") String username,
@RequestParam(value = "password") String password
){
if (StringUtils.isEmpty(username)) return ResponseUtil.error("用户名不能为空");
if (StringUtils.isEmpty(password)) return ResponseUtil.error("密码不能为空");
String resStr = "";
return resStr;
}
导入下面的依赖。
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId></