[Spring Cloud] (4)搭建Vue2与网关、微服务通信并配置跨域

文章目录

  • 前言
  • gatway
    • 网关跨域配置
    • 取消微服务跨域配置
  • 创建vue2项目
    • 准备一个原始vue2项目
      • 安装vue-router
      • 创建路由
      • vue.config.js配置修改
      • App.vue修改
    • 添加接口访问
      • 安装axios
      • 创建request.js
      • 创建index.js
      • 创建InfoApi.js
    • main.js
    • securityUtils.js
  • 前端登录界面
    • 登录
    • 消息提示框
  • 最终效果

前言

一个完整的项目都需要前后端,有些小伙伴会认为,为什么后端依然要学习前端的一些知识?只能说,技多不压身,也是一些必须的内容,因为你在学习的过程中,不免会使用到前端的东西。你总不能找个前端女朋友给你写测试demo吧?所以只能自力更生。。。
本文就从零搭建一个前端项目,以配合后端的各种拦截器的处理规则。(前端有些地方可能处理的不好,敬请见谅)
本文gateway,微服务,vue已开源到gitee
杉极简/gateway网关阶段学习

gatway

网关跨域配置

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;
import org.springframework.web.util.pattern.PathPatternParser;@Configuration
public class CorsConfig {@Beanpublic CorsWebFilter corsFilter() {CorsConfiguration config = new CorsConfiguration();config.addAllowedMethod("*");config.addAllowedOrigin("*");config.addAllowedHeader("*");UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());source.registerCorsConfiguration("/**", config);return new CorsWebFilter(source);}
}

取消微服务跨域配置

注释删除微服务的跨域,否则会使跨域失效(网关与微服务不能同时开启跨域)
image.png

    @Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOriginPatterns("*").allowedMethods("GET","HEAD","POST","DELETE","OPTIONS").allowCredentials(true).maxAge(3600).allowedHeaders("*");}

创建vue2项目

准备一个原始vue2项目

最初的应该是这样的
image.png

安装vue-router

npm install  vue-router@2.8.1

创建路由

image.png

import Router from 'vue-router'
import Vue from "vue";
import loginTest from "@/views/loginTest.vue";Vue.use(Router)const routes = [{path: '/',name: 'login',component: loginTest},
]const router = new Router({mode: 'history',base: process.env.BASE_URL,routes: routes
})export default router

vue.config.js配置修改

image.png
引入polyfill

 npm i node-polyfill-webpack-plugin

修改vue.config.js

const { defineConfig } = require('@vue/cli-service')
// 引入polyfill
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')module.exports = defineConfig({transpileDependencies: true,// 引入polyfillconfigureWebpack: {plugins: [new NodePolyfillPlugin({})]},devServer: {client: {overlay: false}}
})

App.vue修改

image.png

<template><div id="app"><div class="version-switch"><button @click="switchVersion('/')">登录</button></div><router-view></router-view></div>
</template><script>export default {name: 'App',components: {},methods: {switchVersion(path) {this.$router.push(path);},}}
</script><style>#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;/*color: #2c3e50;*/min-height: 100vh; /* 最小高度为视口高度,确保垂直居中 */}.version-switch {width: 100%; /* 宽度设置为100%,独占一整行 */height: 2%; /* 宽度设置为100%,独占一整行 */margin-top: 20px;margin-bottom: 20px;}.version-switch button {padding: 5px 10px;margin-right: 5px;justify-content: center; /* 水平居中 */}
</style>

添加接口访问

安装axios

npm install axios --save

创建request.js

image.png

import axios from 'axios'//引入axios
// 动态获取本机ip,作为连接后台服务的地址,但访问地址不能是localhost
// 为了灵活配置后台地址,后期需要更改为,配置文件指定字段决定优先使用配置ip还是自己生产的ip(如下)
const hostPort = document.location.host;
const hostData = hostPort.split(":")
const host = hostData[0];//axios.create能创造一个新的axios实例
const server = axios.create({baseURL: "http" + "://" + host + ":51001", //配置请求的urltimeout: 6000, //配置超时时间headers: {'Content-Type': "application/x-www-form-urlencoded",}, //配置请求头})/** 请求拦截器 **/
server.interceptors.request.use(function (request) {// 非白名单的请求都加上一个请求头return request;
}, function (error) {return Promise.reject(error);
});/** 响应拦截器 **/
server.interceptors.response.use(function (response) {return response.data;
}, function (error) {// axios请求服务器端发生错误的处理return Promise.reject(error);
});/*** 定义一个函数-用于接口* 利用我们封装好的request发送请求* @param url 后台请求地址* @param method 请求方法(get/post...)* @param obj 向后端传递参数数据* @returns AxiosPromise 后端接口返回数据*/
export function dataInterface(url, method, obj) {return server({url: url,method: method,params: obj})
}export default server

创建index.js

image.png

/*** HTTP 库* 存储所有请求*//** 节点测试接口 **/
import InfoApi from "@/api/InfoApi"export default {...InfoApi,
}

创建InfoApi.js

import {dataInterface} from "@/utils/request";export default {/** 系统登陆接口 **/login(obj) {return dataInterface("/auth/login","get", obj)},oneGetValue(obj){return dataInterface("/api-one/getValue", "get", obj)},twoGetValue(obj){return dataInterface("/api-two/getValue", "get", obj)},
}

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import http from "@/api/index";
import securityUtils from "@/utils/securityUtils";Vue.config.productionTip = falseVue.prototype.$http = http;
Vue.prototype.$securityUtils = securityUtils;import MessageBox from './components/MessageBox.vue'Vue.component('MessageBox', MessageBox)// 将 MessageBox 组件挂载到 Vue.prototype 上
Vue.prototype.$message = function ({ message, duration, description }) {const MessageBoxComponent = Vue.extend(MessageBox)const instance = new MessageBoxComponent({propsData: { message, duration, description }})const vm = instance.$mount()document.body.appendChild(vm.$el)setTimeout(() => {document.body.removeChild(vm.$el)vm.$destroy()}, duration * 1000)
}// 在组件中使用 this.$message
// this.$message({ message: 'Hello world!', duration: 1.5, description: '' })new Vue({router,render: h => h(App),
}).$mount('#app')

securityUtils.js

image.png
securityUtils作为与后端网关通信的主要对象,之后的所有验证操作都在此处文件中处理。
对于不需要令牌头的请求,设置白名单放过指定的请求whiteList
对于普通的数据接口,需要增加令牌Authorization以通过后端的请求校验。

/** 全局变量配置-start **/// url白名单设置
const whiteList = ["/tick/auth/login",
]/** 全局变量配置-end **/export default {/*** 读取信息*/get(key) {return sessionStorage.getItem(key)},/*** 添加信息*/set(key, value) {sessionStorage.setItem(key, value)},/*** 登录之后进行处理*/loginDeal(token){this.set("token", token)},/*** gateway网关验证信息处理(请求头)*/gatewayRequest(config) {let key = true;whiteList.find(function (value) {if (value === config.url) {key = false;}});// 对非白名单请求进行处理if (key) {// 请求体数据let token = this.get("token")// 请求中增加tokenif (token) {config.headers.Authorization = token;}}return config;},}

前端登录界面

登录

image.png

<template><div><div><div class="login-form"><div><div><label>用户名:&nbsp;</label><input type="text" v-model="login.username"></div><div><label >密&nbsp;&nbsp;&nbsp;码:&nbsp;</label><input type="text" v-model="login.password"></div></div></div><div><button @click="loginApi">用户登录</button></div><div><div class="input-container2"><textarea class="my-input" v-model="token"/></div></div></div><div class="my-container"><button class="my-button" @click="oneValue">微服务一测试接口</button><div><textarea class="my-input" v-model="microserviceOneJsonFormData"></textarea></div><div><textarea class="my-input" v-model="microserviceOneJsonData"></textarea></div></div><div class="my-container"><button class="my-button" @click="twoValue">微服务二测试接口</button><div><textarea class="my-input" v-model="microserviceTwoJsonData"></textarea></div></div></div>
</template><script>export default {name: "loginTest",data() {return {token: "",login: {username: "fir",password: "123",},// 微服务节点一microserviceOneJsonFormData: {"msg": "普通的客户端消息",},microserviceOneJsonData: {},// 微服务节点二microserviceTwoJsonData: {},};},created() {this.jsonString();this.connection()},methods: {jsonString() {// 将JSON数据转换为字符串this.microserviceTwoJsonData = JSON.stringify(this.microserviceTwoJsonData, null, 2);this.microserviceOneJsonData = JSON.stringify(this.microserviceOneJsonData, null, 2);this.microserviceOneJsonFormData = JSON.stringify(this.microserviceOneJsonFormData, null, 2);},/*** 获取与后端建立通信的必备信息*/loginApi() {this.$http.login(this.login).then(res => {let code = res.codelet msg = res.msg// let data = res.dataif (code === 200) {this.$message({message: msg, duration: 1.5, description: ''})} else {this.$message({message: "错误", duration: 1.5, description: ''})}})},/** 微服务-1 **/oneValue() {// 在这里可以编写按钮被点击时需要执行的代码let data = JSON.parse(this.microserviceOneJsonFormData);this.$http.oneGetValue(data).then(res => {let msg = res.msglet replaceAfter = res;replaceAfter = JSON.stringify(replaceAfter, null, 2);this.microserviceOneJsonData = replaceAfter;this.$message({message: msg, duration: 1.5, description: ''})})},/** 微服务-2 **/twoValue() {this.$http.twoGetValue().then(res => {let msg = res.msglet replaceAfter = resreplaceAfter = JSON.stringify(replaceAfter, null, 2);this.microserviceTwoJsonData = replaceAfter;this.$message({message: msg, duration: 1.5, description: ''})})},},
}
</script><style scoped>/* 水平布局,且向左浮动 */
.login-form {margin-top: 40px;
}.login-input {display: flex;flex-direction: row;
}.login-form > div {float: left;margin-right: 10px;
}/* 全局安全痛惜参数-start */
.my-container {width: 100%;display: flex;justify-content: flex-start;flex-wrap: wrap;.input-container > label {flex: 1;}
}.my-container > button {align-self: flex-start;
}.my-container > .input-container {display: flex;flex-direction: column;align-items: center;
}.my-input {width: 300px; /* 设置输入框的宽度 */height: 200px; /* 设置输入框的高度 */border: 1px solid #ccc; /* 设置输入框的边框 */border-radius: 5px; /* 设置输入框的圆角 */padding: 5px; /* 设置输入框的内边距 */font-size: 14px; /* 设置输入框的字体大小 */color: white; /* 设置输入框的字体颜色为白色 */background-color: #434554; /* 设置输入框的背景色 */resize: vertical; /* 设置输入框垂直方向可自适应 */float: left; /* 将两个元素浮动在左侧 */box-sizing: border-box; /* 元素的内边距和边框不会增加元素的宽度 */
}.my-button {float: left; /* 将两个元素浮动在左侧 */box-sizing: border-box; /* 元素的内边距和边框不会增加元素的宽度 */
}
</style>

消息提示框

image.png

<template><div class="message-box"><div class="message-box__header">{{ message }}</div><div class="message-box__body">{{ description }}</div><button class="message-box__close" @click="close">X</button></div>
</template><script>
export default {name: "MessageBox",props: {message: { type: String, default: '' },duration: { type: Number, default: 1.5 },description: { type: String, default: '' },},methods: {close() {this.$emit('close')},},mounted() {setTimeout(() => {this.close()}, this.duration * 1000)},
}
</script><style scoped>
.message-box {position: fixed;top: 1%;left: 50%;transform: translateX(-50%);z-index: 9999;width: 300px;height: 20px;padding: 20px;background-color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}.message-box__header {font-size: 16px;font-weight: bold;margin-bottom: 10px;
}.message-box__body {font-size: 14px;line-height: 1.5;margin-bottom: 20px;
}.message-box__close {position: absolute;top: 10px;right: 10px;width: 20px;height: 20px;padding: 0;border: none;background-color: transparent;cursor: pointer;font-size: 16px;font-weight: bold;color: #666;
}
</style>

最终效果

此时我们需要先登录,之后就可以正常访问微服务。
image.png此时如果不登陆就直接访问数据接口的话,则会提示登录过期,无法获取数据。
image.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/826751.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

故障诊断 | 用于跨机器工况下故障诊断的深度判别迁移学习网络附Pytorch代码

目录 基础代码小结基础 目前,研究者已经提出了很多用于解决目标域和源域之间的分布对齐和知识迁移问题的领域自适应方法。然而,大多数研究方法只关注到边缘分布对齐,忽略了目标域和源域之间判别性特征的学习。因此,在某些案例中,这些方法仍然不能很好地满足故障诊断要求。…

【iOS安全】iOS ARM汇编

mov指令 MOV X22, X0 将X0的值移到X22中 参数传递 参数1&#xff1a;寄存器X0传递 参数2&#xff1a;寄存器X1传递 参数3&#xff1a;寄存器X2传递 参数4&#xff1a;寄存器X3传递 &#xff08;这里的X0传递的就是第一个实际参数&#xff0c;而不是self、selector之类的&…

InFusion:通过从扩散先验学习深度完成来修复3D高斯

InFusion: Inpainting 3D Gaussians via Learning Depth Completion from Diffusion Prior InFusion&#xff1a;通过从扩散先验学习深度完成来修复3D高斯 Zhiheng Liu * 刘志恒 *1144Hao Ouyang * 欧阳浩 *2233Qiuyu Wang 王秋雨33Ka Leong Cheng 郑家亮2233Jie Xiao 街小…

Elasticsearch常用查询语法及RestClient操作

DSL Query基本语法 1&#xff0c;查询所有数据matchall&#xff08;当然并不是会显示所有数据&#xff09; #查询所有数据 GET /索引名/_search {"query": {"查询类型": {"查询条件":"条件值"}} }2&#xff0c;全文搜索检索-分词搜索…

从零实现诗词GPT大模型:实现Transformer架构

专栏规划: https://qibin.blog.csdn.net/article/details/137728228 首先说明一下,跟其他文章不太一样,在本篇文章中不会对Transformer架构中的自注意力机制进行讲解,而是后面单独1~2篇文章详细讲解自注意力机制,我认为由浅入深的先了解Transformer整体架构和其中比较简单…

IDEA JAVA项目如何设置JVM参数

问题背景&#xff1a; 有时候项目在本地启动时会报参数引用不到&#xff0c;如果确实找不到在哪里添加的话&#xff0c;我们可以先加JVM参数来暂时解决本地环境的调试。 解决方案&#xff1a; 编辑配置Edit Configurations 选择需要配置的项目&#xff0c;点击Modify options 选…

React基础知识大汇总

函数组件和类组件 函数组件与类组件有什么区别呢&#xff1f; function getName(params:{name:string}){const count 0;return params.name -count; } getName({name:"test"}) getName({name:"哈哈哈"})getName是一个纯函数&#xff0c;不产生任何副作用…

mfc140.dll丢失如何修复,分享多种有效的修复方法

在日常操作和使用电脑的过程中&#xff0c;我们可能会遇到一种较为常见的问题&#xff0c;即在尝试启动或运行某个应用程序时&#xff0c;系统突然弹出一个错误提示窗口&#xff0c;明确指出“mfc140.dll文件丢失”。这个mfc140.dll实际上是一个动态链接库文件&#xff08;DLL&…

mysql基础19——日志

日志 mysql的日志种类非常多 通用查询日志 慢查询日志 错误日志 与时间有关联 二进制日志 中继日志 与主从服务器的同步有关 重做日志 回滚日志 与数据丢失有关 通用查询日志 记录了所有用户的连接开始时间和截至时间 以及给mysql服务器发送的所有指令 当数据异常时&…

计算机体系结构

体系结构 CPU&#xff1a;运算器和控制器 运算器&#xff1a;进行算术和逻辑运算控制器&#xff1a; 输入设备&#xff1a;鼠标、键盘、显示器、磁盘、网卡等输出设备&#xff1a;显卡&#xff0c;磁盘、网卡、打印机等存储器&#xff1a;内存&#xff0c;掉电易失总线&#xf…

借助 NVivo 彻底改变业务创新

在收集定性数据时&#xff0c;通常很难确定信息的情感底蕴。尤其是在金融行业&#xff0c;当涉及到经济金融状况和股票走势等问题时&#xff0c;通过文章、社交媒体和其他消费者平台了解市场的真实整体感受至关重要。这就是对数据应用情绪分析可以提供帮助的地方。 在德勤 针对…

代码随想录第42天|416. 分割等和子集

416. 分割等和子集 416. 分割等和子集 - 力扣&#xff08;LeetCode&#xff09; 代码随想录 (programmercarl.com) 动态规划之背包问题&#xff0c;这个包能装满吗&#xff1f;| LeetCode&#xff1a;416.分割等和子集_哔哩哔哩_bilibili 给你一个 只包含正整数 的 非空 数组…

软件测试之【软件测试概论一】

读者大大们好呀&#xff01;&#xff01;!☀️☀️☀️ &#x1f525; 欢迎来到我的博客 &#x1f440;期待大大的关注哦❗️❗️❗️ &#x1f680;欢迎收看我的主页文章➡️寻至善的主页 文章目录 前言软件生命周期软件项目开发过程软件项目组织架构软件开发相关模型 软件测试…

深入理解与实践“git add”命令的作用

文章目录 **git add命令的作用****git add命令的基本作用****高级用法与注意事项** git add命令的作用 引言&#xff1a; 在Git分布式版本控制系统中&#xff0c;git add命令扮演着至关重要的角色&#xff0c;它是将本地工作区的文件变动整合进版本控制流程的关键步骤。本文旨…

JVM 引用的分类

引用计数算法和根搜索算法都需要通过判断引用的方式判断对象是否可回收。 JDK1.2 之前&#xff0c;Java 中引用的定义很传统&#xff1a;如果 reference 类型的数据存储的数值代表的是另一块内存的起始地址&#xff0c;就称这块内存代表一个引用。 在 JDK 1.2 之后&#xff0c;…

每周一算法:负环判断

题目链接 负环 题目描述 给定一个 n n n 个点的有向图&#xff0c;请求出图中是否存在从顶点 1 1 1 出发能到达的负环。 负环的定义是&#xff1a;一条边权之和为负数的回路。 输入格式 本题单测试点有多组测试数据。 输入的第一行是一个整数 T T T&#xff0c;表示测…

《乱弹篇(30)厌战的杜诗》

时下地球村有一伙成天叫嚣着“打打杀杀”、鼓吹快快发动战争的狂人&#xff0c;他们视老百姓的生命如草芥&#xff0c;毫不珍惜。没有遭受过战火焚烧的人&#xff0c;也跟着成天吠叫“快开战吧”。然而中国唐朝大诗人却是个“厌战派”&#xff0c;他对战争的厌恶集中表现在诗《…

[系统安全] 五十七.恶意软件分析 (9)利用MS Defender实现恶意样本家族批量标注(含学术探讨)

您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列。因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全、逆向分析和恶意代码检测,“系统安全”系列文章会更加聚焦,更加系…

WebRTC的3A和SpeexDSP如何选择

SpeexDSP 是一个专门用于语音处理的开源库&#xff0c;它是从 Speex 项目中分离出来的。SpeexDSP 提供了多种音频处理功能&#xff0c;包括回声消除&#xff08;AEC&#xff09;、噪声抑制&#xff08;ANS&#xff09;、自动增益控制&#xff08;AGC&#xff09;以及声音的预处…

基于单目相机的标靶三维定位——编程实现

上一章内容中我们描述了基于单目相机实现标靶三维定位的原理,关键步骤为1)计算得到相机的内参和畸变系数;2)计算得到标靶角点的世界坐标和像素坐标;3)计算标靶坐标系到相机坐标系的变换矩阵。 第一点我们通过相机标定得到;第二点的核心功能我们可以借助cv::findChessboa…