m0_74059961的博客

浪花项目优化：强制登录，使用 Axios 前端全局响应拦截器，自动跳转到登录页

浪花主页用户推荐页的初步开发，抽取了用户列表组件。介绍了导入大量数据的几种方式：使用可视化界面（IDEA 中的 DataGrip）、执行 SQL 的 INSERT 语句、编写 Java 程序控制数据导入。还使用了分页查询对查询结果进行过滤

前端通过 Axios 请求获取当前登录用户信息，首先要先进行用户登录步骤，让后端种上 Cookie，通过配置 withCredential 让前端发送请求时携带 Cookie，后端识别用户登录态返回当前登录用户的个人信息进行展示。完善更新用户信息功能，发送 Axios 请求更新成功返回展示页面，

完善后端接口并使用 Knife4j 接口文档进行测试。完成根据标签搜索接口的前后端联调，前端使用 Axios 向后端发起请求，解决前后端服务的跨域问题后，使用 qs 库的 querystring parser 传参解析器序列化前端的请求参数列表，接收后端响应数据并引入 Vant 提供的 Empty 空状态组件处理响应数据为空时的前端视图页面。将跨域问题的几种方式附在文章末尾，并附上使用 Nginx 网关支持跨域的配置代码。

开发浪花 - 搜索结果展示页，使用 Vant 提供的 Button 按钮组件触发搜索操作、Card 商品卡片组件展示用户列表，并使用 vue-router 提供的两个钩子函数 useRouter() 和 useRoute() 在路由跳转时传递和接收路径参数，展示了用户搜索页面的初步效果

介绍了状态管理库 Vuex 及使用方式，包含如何使用 Vuex 定义和展示数据以及同步操作如何修改共享数据和异步操作如何修改共享数据，通过使用 Vuex 可以让多个组件之间方便地共享数据

完成了浪花前端用户编辑信息页的开发，主要记录了开发过程中如何通过绑定路由跳转的路径参数进行表单的展示和数据的修改，还辨析了 vue-router 提供的 useRouter() 和 useRoute() 两种钩子函数的区别

本文介绍了 Vue 的响应式对象 ref，并附 Vue 的响应式系统的工作方式。开发了浪花搜索页面的搜索过滤和取消搜索功能，记录了踩坑过程和注意事项

为浪花的搜索页面选择合适的组件，包括搜索框、可关闭标签和 TreeSelect 分类选择组件. 介绍了使用 Vue 框架时路由跳转的两种方法并实践. 展示搜索页面的初步设计效果并附 Vue 的内置指令 v-for 的使用示例

详细介绍了前端 Vue 项目整合路由的每一个过程，并测试组件是否能够正常跳转

使用 Vue 框架进行前端主页布局设计和开发，引入 Vant 组件的 NavBar 和 Tabbar 分别作为顶部导航栏和底部标签栏

使用 Vue 官方的项目脚手架工具进行前端初始化，创建一个 Vue 应用