SpringBoot实现Vue-Admin-Template跨域访问资源
发布日期:2022-03-30 18:18:27
浏览次数:53
分类:博客文章
本文共 6258 字,大约阅读时间需要 20 分钟。
SpringBoot+Vue-admin-template 实现跨域数据查询
前言
本文的案例是基于Vue-admin-template项目改造的简化版Vue后台管理模板案例
在前两篇的实案例之上,记录一下实现登录、退出、查询数据、以及跨域访问资源
的一些细节,方便自己日后忘了快速捡起,同时也是对之前两篇vue实践文章总结
技术栈
技术栈还是沿用中技术,版本也一致
案例演示
案例实践
1.完全按照前端的定义好的请求格式实现登录和退出接口
1.1 保持根目录下.env.development的基础API路径不变
# base apiVUE_APP_BASE_API = '/dev-api'
1.2 设置根目录下vue.config.js的代理到后端服务8080端口
devServer: { port: port, open: false, overlay: { warnings: false, errors: true }, // before: require('./mock/mock-server.js') 注释mock-server生成的模拟数据 proxy: { '/dev-api': { target: `http://localhost:8080`, // 后台服务地址 changeOrigin: true, pathRewrite: { '^/dev-api': '/dev-api' // 路径重写 } } } },
1.3 保持src\api\user.js的登录、获取用户信息、退出的接口不变
export function login(data) { return request({ url: '/vue-admin-template/user/login', method: 'post', data })}export function getInfo(token) { return request({ url: '/vue-admin-template/user/info', method: 'get', params: { token } })}export function logout() { return request({ url: '/vue-admin-template/user/logout', method: 'post' })}
2.前端mock模拟生成的数据细节
2.1 login登录接口和info接口详细的数据封装
// 定义tokens对象存放token 在对象中模拟admin和editor两个角色的token const tokens = { admin: { token: 'admin-token' }, editor: { token: 'editor-token' }}// 分别以admin和editor两个角色的token值作为key,然后返回的数据封装成一个整体对象存放进valueconst users = { 'admin-token': { roles: ['admin'], introduction: 'I am a super administrator', avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', name: 'Super Admin' }, 'editor-token': { roles: ['editor'], introduction: 'I am an editor', avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', name: 'Normal Editor' }}// 模块化导出登录接口(可以理解为向外暴露,方便JS识别)export default [ // user login { url: '/vue-admin-template/user/login', type: 'post', // ES6箭头函数 response: config => { const { username } = config.body // 从body中取出username const token = tokens[username] //根据username在tokens中获取对应token // mock error 当不是admin或者editor账号登录时,就会获取不到token报错 产生mock error if (!token) { return { code: 60204, message: 'Account and password are incorrect.' } } // 成功就会返回code为20000,data是返回数据的key值,token是一个value值的对象 return { code: 20000, data: token } } }, // get user info 获取用户信息 { url: '/vue-admin-template/user/info\.*', type: 'get', response: config => { const { token } = config.query // 从config中取出token const info = users[token] // 根据token从用户中取出对应用户信息 // mock error if (!info) { return { code: 50008, message: 'Login failed, unable to get user details.' } } return { code: 20000, data: info // 返回用户信息 } } }, // user logout 用户退出 { url: '/vue-admin-template/user/logout', type: 'post', response: _ => { return { // 无请求内容直接返回 success和20000 code: 20000, data: 'success' } } }]
2.2 login登录接口返回的数据格式具体表现形式
{ "code": 20000, "data": { "token": "admin-token" }}
2.3 info接口返回的数据格式具体表现形式
{ "code":20000, "data":{ "roles":["admin"], "introduction":"I am a super administrator", "avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif", "name":"Super Admin" }}
2.4 logout接口返回的数据格式具体表现形式
{ "code":20000, "data":"success"}
3.用SpringBoot编写与mock.js同样的数据返回
3.1 User.java实体类
@Datapublic class User { private Listroles; private String introduction; private String avatar; private String name; private String username; private String password;}
3.2 LoginController.java控制器类
@Controllerpublic class LoginController { @CrossOrigin @PostMapping(value = "/vue-admin-template/user/login") @ResponseBody public Map login(@RequestBody User user) { String username = user.getUsername(); HashMaptokens = new HashMap<>(); tokens.put("admin","admin-token"); tokens.put("editor","editor-token"); HashMap response = new HashMap<>(); HashMap responseData = new HashMap<>(); responseData.put("token",tokens.get(username)); response.put("code",20000); response.put("msg","登录成功"); response.put("data",responseData); return response; } @CrossOrigin @GetMapping(value = "/vue-admin-template/user/info") @ResponseBody public Map info(@RequestParam("token")String token) { HashMap users = new HashMap<>(); User adminUser = new User(); User editorUser = new User(); List adminRole = new ArrayList (); adminRole.add("admin-token"); List editorRole = new ArrayList (); adminRole.add("editor-token"); adminUser.setRoles(adminRole); adminUser.setIntroduction("I am a super administrator"); adminUser.setAvatar("https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"); adminUser.setName("Super Admin"); editorUser.setRoles(editorRole); editorUser.setIntroduction("I am an editor"); editorUser.setAvatar("https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"); editorUser.setName("Normal Editor"); users.put("admin-token",adminUser); users.put("editor-token",editorUser); HashMap responseData = new HashMap<>(); responseData.put("code",20000); responseData.put("msg","登录成功"); responseData.put("data",users.get(token)); return responseData; } @CrossOrigin @PostMapping(value = "/vue-admin-template/user/logout") @ResponseBody public Map logout() { HashMap responseData = new HashMap<>(); responseData.put("code",20000); responseData.put("msg","退出成功"); responseData.put("data","success"); return responseData; }}
4.同源策略以及跨域访问资源
4.1同源策略
同源策略是一种保证浏览器网络较为安全的策略模式和功能,同源策略最早出现在网景公司旗下的网景浏览器上
什么是同源
源:由协议,域名,端口三者组成,
同源:指协议,域名,端口这三者相同
同源策略: 浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源
举个例子:
http://localhost:9528下的脚本在没有明确授权的情况下,是不能读写http://localhost:8080下的资源
什么是跨域
浏览器在遵守同源策略模式下,不是同源的脚本不能操作其他源下面的对象。
想要操作另一个源下的对象是就需要跨域。
举例:
http://localhost:9528下的脚本想要访问http://localhost:8080下的JSON数据或者CSS,IMAGES等静态资源,需要进行跨域操作,这种操作称为跨域访问资源(跨域读和写资源)
4.2跨域解决方案(跨域的实现方式)
1.JSONP方式
首先必须要知道的是带有"src"这个属性的标签都拥有跨域的能力,比如
转载地址:https://www.cnblogs.com/codeluojay/p/13191052.html 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
表示我来过!
[***.240.166.169]2024年03月29日 01时08分08秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
python创建nc文件_工具箱第2期 用python玩转NC
2019-04-21
拆分文件_文件拆分与合并
2019-04-21
开发优势_小程序开发优势好处有哪些
2019-04-21
4光影补丁_我的世界seus光影包
2019-04-21
aria手机下载_Aria2App
2019-04-21
汇编指令msr_ARM汇编:MRS和MSR指令
2019-04-21
lsof查看占用高_lsof解决磁盘占用过高,查询却无大文件处理一例!
2019-04-21
java ee6教程_Java EE 极简教程(六):框架的选择
2019-04-21
java io流过滤流_IO流分类详细介绍和各种字节流类介绍与使用 过滤流 字节流
2019-04-21
java预处理指令_Java程序员学C++_1_C++中的预处理命令 | 学步园
2019-04-21
java中的%不对 如何处理_Java心得--异常及其处理
2019-04-21
java 上传速度计算_java常见3种文件上传速度对比和文件上传方法详细代码
2019-04-21
java 试图模版_图解Java设计模式之模板模式
2019-04-21
支付宝 java 乱码_支付宝即时到账接口中文乱码问题
2019-04-21
java中的handler理解_handler 与message的一些理解
2019-04-21