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 List
roles; 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();        HashMap
tokens = 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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:SpringBoot+Vue-admin-template 实现增删改查
下一篇:SpringBoot2.X整合Redis

发表评论

最新留言

表示我来过!
[***.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
慕课python第五周测试答案_中国大学MOOC(慕课)_python+_满分章节测试答案 2019-04-21
lsof查看占用高_lsof解决磁盘占用过高,查询却无大文件处理一例! 2019-04-21
python调用oracle过程 权限不足_oracle-存储过程提示 ORA-01031: 权限不足 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 支持分词的高性能拼音转换工具,速度是 pinyin4j 的两倍... 2019-04-21
java中的%不对 如何处理_Java心得--异常及其处理 2019-04-21
java 上传速度计算_java常见3种文件上传速度对比和文件上传方法详细代码 2019-04-21
java 中区分月份_输入一年当中的月份,判断是哪个季节.(用java编写并且用到了import java.io.*;)... 2019-04-21
java 试图模版_图解Java设计模式之模板模式 2019-04-21
java.exe占用cpu_Windows服务器java.exe占用CPU过高问题分析及解决 2019-04-21
支付宝 java 乱码_支付宝即时到账接口中文乱码问题 2019-04-21
java中的handler理解_handler 与message的一些理解 2019-04-21