Full Stack Dev with Spring Boot 3 and React

搞了本前后使用React的小书,先敲一遍热热身,然后用Spring Boot 4来写项目。 记录一些其中的要点。 多对多设置关系的时候,要使用Set 。 JsonIgnore 来自 com.fasterxml.jackson.annotation.JsonIgnore 在多对多关系上加在一边以避免无

搞了本前后使用React的小书,先敲一遍热热身,然后用Spring Boot 4来写项目。

记录一些其中的要点。

  1. 多对多设置关系的时候,要使用Set

  2. JsonIgnore 来自 com.fasterxml.jackson.annotation.JsonIgnore 在多对多关系上加在一边以避免无限序列化。这样还可以直接生成嵌套的JSON。

  3. Java 里保存关联关系,都从设置外键的那一方去保存,不要通过mapped_by所在的哪一方去保存,会保存不进去.

  4. 可以设置忽略null的字段json,这样返回更容易控制

  5. 统一返回200响应给前端,简化逻辑。

准备开始自己的项目了

前端项目叫艾比斯的Altairion,后端用斯蕾的Vegalion,前后端合体就威力无穷了。

说是开发,其实还是先开发后端,然后摸索前端的使用方法。还是有点难的,尤其现在前端工程化好久没跟上了。

后端采用Spring boot 4.0.6,组件如下:

  1. spring web

  2. spring security

  3. spring data jpa

  4. lombok

  5. postgresql

  6. redis

  7. java mail

  8. actuator

  9. validation

  10. devtools

将来肯定还需要读取Excel的组件了,到时候再添加,看能不能先搭一个框架出来。

前端项目用的组件:

  1. vite+react

  2. @tanstack/react-query

  3. react-router v7

  4. @mui/material

  5. @emotion/react

  6. @emotion/styled

  7. @mui/icons-material

  8. @mui/x-data-grid

  9. zustand

  10. axios

先启动两个项目,慢慢开始编写了。

用户方面的设计

1 整个基础的URL还是根路径,这个将来做一个高端一点的页面,纯静态,不需要任何功能,点击按钮进入系统。就需要登录了。

2 首页的路径就是index,放基础的几个功能的展示,这个将来等其他的内容有了,单独进行开发。

3 然后还是要根据不同的页面来展示不同的内容。这个逻辑基本上和原来的前后端不分离的样式差不多。在侧边栏结合各种东西的使用来展开多级菜单。从一级起算,最多到三级,不能超过三级。功能要额外再使用。

4 先写好基础的登录功能,然后是用户注册功能,然后是其他功能。之后要把用户的功能也包含在普通的页面里。

5 对外暴露的URL,只有根目录和Login,其他的都用路由守卫来进行验证和保护登录状态。

登录状态的编写

先从最基础的开始。

基础的用户循环设置

1 先写一个整体的用户流程。

用户打开页面-到localstorage中获取登录状态和用户的名称-到后端去获取。

后端的错误信息

1 重新思考了一下,Result类还是要实现的,但是HTTP标准的状态码也是要实现的,这样方便统一拦截处理。

2 这个时候就需要全局的错误处理器帮忙。

如果验证JWT失败,统一需要设置401

如果是权限失败,还是需要设置403

找不到URL路径,返回404

剩下的错误,都返回500错误,但是要带上信息供前端查看。

只有正确没问题的,再返回200相应。

LICENSED UNDER CC BY-NC-SA 4.0
Comment