Springboot学习笔记4.1
1.登录优化-Redis

每次请求除了前端传来的JWT令牌,还需要Redis传来一份一模一样的令牌,那么一旦你的令牌修改,那么原令牌就与Redis中的令牌不匹配,无法请求服务器中的的数据。

Springboot集成Redis:

1.引入起步依赖:

2.配置文件 配置文件配置Redis连接信息:

3.测试用例通过StringRedisTemplate,往Redis里面去存入一个键值对

令牌主动失效机制:

 1.登录成功以后我们不止给前端传一个JWT,还给Redis传一个JWT。
2.拦截器里面不仅去检测请求头里的token是否合法,还要检验Redis中是否有这个token,没有则抛出异常。 3.修改密码以后要将Redis里的原token删除,只有用户重新登陆才会部署新token。
 3.修改密码以后要将Redis里的原token删除,只有用户重新登陆才会部署新token。

Springboot项目部署:


引入打包插件:
 
 


Springboot属性配置方法
方法一:通过在启动命令行时在末尾添加--server.port=9090等属性来配置。

配置系统的环境变量:

如果需要配置的属性特别多,则需要外部配置文件的方式:

配置的优先级:

Springboot多环境开发-Profiles
在不同开发环境下的配置信息是不同的,使用springboot提供的profiles方法来为每个开发环境提供单独的配置。

 

在创建时添加dev.properties,pro.properties,test.properties三个配置文件分别配置不同的属性。然后在Application.properties里面通过profiles.active=...激活环境。
 

多环境开发-profiles-分组(在配置文件内容特别多时,我们可以将文件中的不同配置也分组)

 
具体实现:
1.application.yml文件指定分组,并且指定当前使用的分组名。

2.不同分组提供不同的配置信息 
 
至此,我们要开始前端的学习了。
实战第九课,前端开发
前置知识:JavaScript的导入导出

当导入一个js文件,编辑器会把js文件的所有函数都导入进来,而如果我只想用其中一部分函数,那就会导致性能的浪费。


具体实现:
在js文件里面需要export函数,可以在函数前加export: ,也可以在末尾统一指出要导出的函数:
,也可以在末尾统一指出要导出的函数:
当我们添加了Default使用默认导出时,我们在导入的时候就有一定区别,messageMethods代表的是js文件中的默认导出函数,而我们在使用的时候要注意使用messageMethods.来使用函数:

vue组件开发:
1.什么是vue

学习路径:

快速入门:


vue的常用指令:

v-for:
 
具体实现,给需要遍历的组件添加v-for,注意格式v-for="(item,index) in items":
 


 v-bind 
 
v-if以及v-show:

 具体实现:
 具体实现:
v-on:

具体实现:

v-model:

 
具体实现:


vue的生命周期:


Axios:
基本方法:

请求方法别名:


具体实现(别名方式),我们基本上都是使用别名的方式去发送请求:

vue案例

1. 钩子函数mounted中,获取所有的文章数据

2.使用v-for指令,把数据渲染到表格上展示

3.使用v-model指令完成表单数据的双向绑定
3.使用v-on指令为搜索按钮绑定单击事件
一些疑惑:
1.我之前学了vue2.0他是<templet/><script/><style/>格式,为什么我现在看Vue3.0发现差别好大,为啥<script/>可以写在HTML里面?
1. 传统 Options API 写法(Vue 2 风格)
<template><div>{{ message }}</div>
</template><script>
export default {data() {return {message: "Hello Vue 2!"}}
}
</script><style>
/* 样式 */
</style>2. Vue 3 新增的 <script setup> 写法
 
<script setup>
// 所有内容都写在 script 标签内
const message = "Hello Vue 3!"
</script><template><div>{{ message }}</div>
</template>主要区别和原因:
-  更简洁的 Composition API 
 Vue 3 推荐使用<script setup>语法,这是 Composition API 的语法糖,让你可以直接在<script>中写逻辑,不再需要export default。
-  顶层绑定自动暴露 
 在<script setup>中声明的变量、函数会自动暴露给模板,无需再通过return返回。
-  更好的 TypeScript 支持 
 这种写法对 TypeScript 的类型推断更友好。
-  编译时优化 
 Vue 3 会对<script setup>进行更高效的编译,减少运行时开销。
为什么能这样设计?
-  这是 Vue 编译器的新能力,能识别 <script setup>并对其进行特殊处理
-  底层仍然是组件,只是语法更简洁 
-  完全兼容 Options API,你可以继续用 Vue 2 的写法 
注意事项:
-  两种写法可以共存,但通常建议选择一种风格保持统一 
-  需要工具链支持(Vue CLI 4.5+ 或 Vite) 
-  某些选项(如 name)需要通过额外插件支持
Vue 3 这样设计是为了:
-  降低学习成本(对新手更友好) 
-  提升开发体验 
-  更好的类型推导 
-  更灵活的代码组织方式 
