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。
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 这样设计是为了:
-
降低学习成本(对新手更友好)
-
提升开发体验
-
更好的类型推导
-
更灵活的代码组织方式