vue-admin-template 基础版本api接口配置和springboot跨域问题(学习记录)
vue-admin-template
PanJiaChen/vue-admin-template: 基于 Vue.js 和 Element UI 的后台管理系统模板,支持多语言、主题和布局切换。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
项目地址:https://gitcode.com/gh_mirrors/vu/vue-admin-template
免费下载资源
·
一、vue-admin-template 代理设置
1,打开vue.config.js文件在overlay后新增
proxy: {
'/api': {
// 后端地址
target: 'http://localhost:8081/',
// 允许跨域
changeOrigin: true,
// 路径重写:我们可以应/api,替代上述后端url
pathRewrite: {
'^/api': '/'
}
}
},
2,自己开发时候找到 .env.development 文件设置 VUE_APP_BASE_API里的地址为你的后台api接口地址即可
VUE_APP_BASE_API = 'http://127.0.0.1:8081'
注:线上需要修改.env.production里的VUE_APP_BASE_API
二 、springboot 跨域
1,在controller同级创建config包,在config包里创建CorsConfig.java文件
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
@EnableWebMvc
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry){
//设置允许跨域的路径
registry.addMapping("/**")
//设置允许跨域请求的域名
.allowedOriginPatterns("*")
//这里:是否允许证书 不再默认开启
.allowCredentials(true)
//设置允许的方法
.allowedMethods("*")
//跨域允许时间
.maxAge(3600);
System.out.println("跨域配置已执行 ");
}
}
2,打开***Application文件,使其实现WebMvcConfigurer类
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@SpringBootApplication
public class KousuanApplication implements WebMvcConfigurer {
public static void main(String[] args) {
SpringApplication.run(KousuanApplication.class, args);
}
}
3,测试控制器
import com.example.kousuan.pojo.LoginModel;
import com.example.kousuan.pojo.Subject;
import com.example.kousuan.service.User.KSUserService;
import com.example.kousuan.until.ApiResUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.*;
@RestController
public class UserController {
/**
* 登录
*/
@RequestMapping("/api/user/login")
public void login(@RequestBody LoginModel loginModel){
System.out.println(loginModel.getUsername());
}
}
GitHub 加速计划 / vu / vue-admin-template
16
5
下载
PanJiaChen/vue-admin-template: 基于 Vue.js 和 Element UI 的后台管理系统模板,支持多语言、主题和布局切换。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
最近提交(Master分支:4 个月前 )
4c18a3f4 - 3 年前
714ded11 - 4 年前
更多推荐
已为社区贡献1条内容
所有评论(0)