Springboot+JWT+SpringSecurity+Vue+Redis 前后端分离登录(2前端)

本文涉及的产品
云原生内存数据库 Tair,内存型 2GB
云数据库 Redis 版,标准版 2GB
推荐场景:
搭建游戏排行榜
简介: Springboot+JWT+SpringSecurity+Vue+Redis 前后端分离登录(2前端)

后端接口测试成功后只需要对接前端,首次登录成功后将后端传递的token利用vuex相关知识进行存储,在全局请求拦截器前添加相应的token

前端跨域

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})
module.exports = {
  devServer: {                //记住,别写错了devServer//设置本地默认端口  选填
    port: 8080,
    proxy: {                 //设置代理,必须填
      '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字,名字可以自己定
        target: 'http://localhost:9090',     //代理的目标地址
        changeOrigin: true,              //是否设置同源,输入是的
        pathRewrite: {                   //路径重写
          '^/api': ''                     //选择忽略拦截器里面的内容
        }
      }
    }
  }
}

axios封装工具

import axios from 'axios'
import store from '@/store'
const request = axios.create({
    baseURL: '/api',  // 注意!! 这里是全局统一加上了 '/api' 前缀,也就是说所有接口都会加上'/api'前缀在,页面里面写接口的时候就不要加 '/api'了,否则会出现2个'/api',类似 '/api/api/user'这样的报错,切记!!!
    timeout: 5000
})
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token,对请求参数统一加密
request.interceptors.request.use(config => {
    // config.headers.token=store.getters.Get_token
     const  token=store.state.token
    config.headers!.token=token
    return config
}, error => {
    return Promise.reject(error)
});
// response 拦截器
// 可以在接口响应后统一处理结果
// request.interceptors.response.use(
//     response => {
//         let res = response.data;
//         // 如果是返回的文件
//         if (response.config.responseType === 'blob') {
//             return res
//         }
//         // 兼容服务端返回的字符串数据
//         if (typeof res === 'string') {
//             res = res ? JSON.parse(res) : res
//         }
//         return res;
//     },
//     error => {
//         console.log('err' + error) // for debug
//         return Promise.reject(error)
//     }
// )
export default request

番外篇


由于文字代码太多,文字太少,这里写个java学习路线总结


对于想要学习Java编程语言的人来说,制定学习路线是非常重要的。在这篇文章中,我将为您提供一个基础的Java学习路线,帮助您更快地掌握Java编程语言。


Java 基础


首先,您需要了解Java基础知识。这些知识包括Java语法、变量和数据类型、运算符、流程控制语句、数组、类和对象等。这个阶段最好通过阅读一些Java入门书籍或者在线教程来学习。我的建议是,如果您已经有编程经验,可以选择一些更深入的学习资源,例如《Java核心技术》或者《Thinking in Java》。


面向对象编程


Java 是一种面向对象的程序设计语言。因此,在学习Java时,必须熟悉面向对象编程思想。这个阶段,您应该学习对象、类、封装、继承、多态等面向对象编程的概念。我的建议是在学习Java的同时,也可以去学习其他语言的面向对象编程,如C++或Python等。


Java 集合框架


Java集合框架是Java中最重要的部分之一。它包括了Java中大部分用于数据存储和处理的类和接口。了解集合框架非常重要,因为它们是您在编写Java程序时必须使用的最常见工具之一。我的建议是学习ArrayList、LinkedList、HashMap、HashSet等基本的集合类。


Java 输入输出流


在Java编程中,输入输出流是必不可少的。Java提供了各种各样的类和接口来访问文件、网络和其他设备上的数据。这个阶段,您应该学习如何使用Java的输入输出流来读取和写入文件、网络连接和其他数据源。我的建议是学习Java.io包中的InputStream和OutputStream类。


Java 网络编程


Java 是一个广泛用于网络编程的语言。了解Java网络编程对于开发网络应用程序非常重要。这个阶段,您应该去了解Java网络编程所需要的Socket编程、TCP协议和UDP协议。我的建议是跟随一些使用Java进行网络编程的教程学习,例如《Java网络编程》或者《Head First Java》。


Java 多线程编程


Java 实现多线程编程非常容易,并且可以有效地提高程序的性能。了解多线程编程对于开发复杂的应用程序至关重要。这个阶段,您应该学习Java中的线程模型、线程安全、同步和锁等概念。我的建议是学习Java中的Thread类和Runnable接口。


Java 数据库编程


Java 与数据库的连接对于许多应用程序来说是至关重要的。Java提供了一个称为JDBC(Java Database Connectivity)的API,它允许您使用Java编写与各种关系型数据库进行交互的应用程序。这个阶段,您应该学习如何使用JDBC API来连接数据库、执行SQL语句和处理结果集。我的建议是学习Java中的JDBC技术。


Servlet 和 JSP


Servlet 和 JSP 是Java Web开发的基础。Servlet 允许在Web服务器上运行Java代码,而JSP 允许您在HTML文档中嵌入Java代码。这个阶段,您应该学习如何编写Servlet和JSP以及如何将它们部署到Web服务器上。我的建议是学习Java EE平台相关的知识,如Tomcat或者其他应用服务器。


SSM ,Springboot, Springcloud等框架


Spring 是一个非常流行的Java应用程序开发框架。它提供了大量的组件和工具,以帮助您更轻松地编写高质量的Java应用程序。Spring家族非常强大。


总结


以上就是基础的Java学习路线总结。学习Java需要长时间的投入和练习,但如果您按照上述路线进行学习,您将能够快速地掌握Java编程语言并开始开发自己的Java应用程序。记住,不要害怕犯错,不断尝试和实践,这是成为一名优秀Java程序员的关键。

相关实践学习
基于Redis实现在线游戏积分排行榜
本场景将介绍如何基于Redis数据库实现在线游戏中的游戏玩家积分排行榜功能。
云数据库 Redis 版使用教程
云数据库Redis版是兼容Redis协议标准的、提供持久化的内存数据库服务,基于高可靠双机热备架构及可无缝扩展的集群架构,满足高读写性能场景及容量需弹性变配的业务需求。 产品详情:https://www.aliyun.com/product/kvstore     ------------------------------------------------------------------------- 阿里云数据库体验:数据库上云实战 开发者云会免费提供一台带自建MySQL的源数据库 ECS 实例和一台目标数据库 RDS实例。跟着指引,您可以一步步实现将ECS自建数据库迁移到目标数据库RDS。 点击下方链接,领取免费ECS&RDS资源,30分钟完成数据库上云实战!https://developer.aliyun.com/adc/scenario/51eefbd1894e42f6bb9acacadd3f9121?spm=a2c6h.13788135.J_3257954370.9.4ba85f24utseFl
相关文章
|
12天前
|
JavaScript 前端开发 开发者
Vue.js 框架大揭秘:响应式系统、组件化与路由管理,震撼你的前端世界!
【8月更文挑战第27天】Vue.js是一款备受欢迎的前端JavaScript框架,以简洁、灵活和高效著称。本文将从三个方面深入探讨Vue.js:响应式系统、组件化及路由管理。响应式系统为Vue.js的核心特性,能自动追踪数据变动并更新视图。例如,通过简单示例代码展示其响应式特性:`{{ message }}`,当`message`值改变,页面随之自动更新。此外,Vue.js支持组件化设计,允许将复杂界面拆分为独立且可复用的组件,提高代码可维护性和扩展性。如创建一个包含标题与内容的简单组件,并在其他页面中重复利用。
33 3
|
10天前
|
JavaScript 前端开发 开发者
哇塞!Vue.js 与 Web Components 携手,掀起前端组件复用风暴,震撼你的开发世界!
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发,单个组件包含模板、脚本和样式,方便构建复杂用户界面。Web Components作为新兴技术标准,利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素,实现跨框架复用。结合二者,不仅增强了Web Components的逻辑和交互功能,还实现了Vue.js组件在不同框架中的复用,提高了开发效率和可维护性。未来前端开发中,这种结合将大有可为。
40 0
|
10天前
|
JavaScript 前端开发 API
揭秘现代前端开发秘籍:Vue.js与ES6如何联手打造惊艳应用?
【8月更文挑战第30天】本文介绍如何从零开始使用Vue.js与ES6创建现代前端应用。首先,通过简要介绍Vue.js和ES6的新特性,使读者了解这两者为何能有效提升开发效率。接着,指导读者使用Vue CLI初始化项目,并展示如何运用ES6语法编写Vue组件。最后,通过运行项目验证组件功能,为后续开发打下基础。适用于希望快速入门Vue.js与ES6的前端开发者。
23 3
|
14天前
【Azure APIM】在APIM中实现JWT验证不通过时跳转到Azure登录页面
【Azure APIM】在APIM中实现JWT验证不通过时跳转到Azure登录页面
|
15天前
|
JavaScript Java 关系型数据库
毕设项目&课程设计&毕设项目:基于springboot+vue实现的前后端分离的考试管理系统(含教程&源码&数据库数据)
在数字化时代背景下,本文详细介绍了如何使用Spring Boot框架结合Vue.js技术栈,实现一个前后端分离的考试管理系统。该系统旨在提升考试管理效率,优化用户体验,确保数据安全及可维护性。技术选型包括:Spring Boot 2.0、Vue.js 2.0、Node.js 12.14.0、MySQL 8.0、Element-UI等。系统功能涵盖登录注册、学员考试(包括查看试卷、答题、成绩查询等)、管理员功能(题库管理、试题管理、试卷管理、系统设置等)。
毕设项目&课程设计&毕设项目:基于springboot+vue实现的前后端分离的考试管理系统(含教程&源码&数据库数据)
|
17天前
|
设计模式 JavaScript 前端开发
Vue.js 组件设计模式:在前端热潮中找到归属感,打造可复用组件库,开启高效开发之旅!
【8月更文挑战第22天】Vue.js 以其高效构建单页应用著称,更可通过精良的组件设计打造可复用组件库。组件应职责单一、边界清晰,如一个显示文本并触发事件的按钮组件,通过 props 传递标签文本,利用插槽增强灵活性,允许父组件注入动态内容。结合 CSS 预处理器管理和封装独立模块,配以详尽文档,有效提升开发效率及代码可维护性。合理设计模式下,组件库既灵活又强大,持续实践可优化项目工作流。
31 1
|
20天前
|
JavaScript 算法 前端开发
"揭秘Vue.js的高效渲染秘诀:深度解析Diff算法如何让前端开发快人一步"
【8月更文挑战第20天】Vue.js是一款备受欢迎的前端框架,以其声明式的响应式数据绑定和组件化开发著称。在Vue中,Diff算法是核心之一,它高效计算虚拟DOM更新时所需的最小实际DOM变更,确保界面快速准确更新。算法通过比较新旧虚拟DOM树的同层级节点,递归检查子节点,并利用`key`属性优化列表更新。虽然存在局限性,如难以处理跨层级节点移动,但Diff算法仍是Vue高效更新机制的关键,帮助开发者构建高性能Web应用。
33 1
|
8天前
|
Android开发 iOS开发 C#
Xamarin:用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App,体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架,允许开发者使用单一的 C# 代码库构建高性能的原生移动应用,支持 iOS、Android 和 Windows 平台。作为微软的一部分,Xamarin 充分利用了 .NET 框架的强大功能,提供了丰富的 API 和工具集,简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用,包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能,帮助开发者提高开发效率并实现一致的用户体验。
15 0
|
8天前
|
开发者 Android开发 iOS开发
Xamarin开发者的神器!揭秘你绝不能错过的插件和工具,让你的开发效率飞跃式提升
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架,让开发者通过单一共享代码库构建跨平台移动应用,支持 iOS、Android 和 Windows。使用 C# 和 XAML,它简化了多平台开发流程,保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用介绍 Xamarin.Forms 的基本功能和工作原理。首先配置 Visual Studio 开发环境,然后创建并运行一个包含标题、按钮和消息标签的示例应用,展示如何定义界面布局及处理按钮点击事件。这帮助开发者快速入门 Xamarin.Forms,提高跨平台应用开发效率。
23 0
|
9天前
|
JavaScript 前端开发 开发者
Vue.js的未来已来:掌握最新功能,驾驭前端开发的新浪潮!
【8月更文挑战第30天】Vue.js作为前端开发领域的明星框架,凭借其轻量级、响应式及组件化特性,深受全球开发者喜爱。它持续进化,引入新功能并优化性能,如提升渲染速度和减小打包体积,增强TypeScript支持,简化组件编写流程,进一步提升应用响应性和加载速度,改善开发者体验。活跃的社区和丰富的开源项目如“vuejs-challenges”推动其不断发展。未来,Vue.js将探索更多新特性,如宏和非虚拟DOM模式,巩固其在现代前端框架中的领先地位。
16 0