上个月插了个旗说端午节前上线一个前后端分离的博客项目,好现在上线了,只不过是在本地doge 。鉴于这个项目比较简约所以solo还是会一直用的。本来想细致的写下这块的代码,毕竟功能点还是挺多的。但是最近工作时间比较紧凑啊。而且算了算,加上日常的工作时间,后续还要深入去研究java反序列化漏洞、逆向工程核心原理、一个40多小时的springcloud课程、另一个更加细致的前后端项目、docker和k8s、云开发等等等等,要干想干的事简直能排到年末啦,所以呢,在这里就简要记下这个博客项目中以前做的比较少的功能点吧:

这个前后端分离项目是照MarkerHub老师教程一步步做的,贴一些网站:

开发文档:https://juejin.cn/post/6844903823966732302

一个比较全的该项目链接:https://blog.csdn.net/weixin_43247803/article/details/113666136

用户认证:基于jwt和session的区别和优缺点https://www.cnblogs.com/yuanrw/p/10089796.html

项目效果图:

1.PNG

后端要点

1、整合mbg和mybatis plus,表自己建,就两张,用户表和博客表,用官网demo生成包前好像有个类方法一直引不进来爆红,之后我把maven中插件版本升到最新的3.4.1就行了。同时记得照规范把配置都写好。

2、封装result类,基本就是建个result实体然后各种方法重载,这里继承了一下序列化接口。

3、整合jwt和shiro和会话共享,比较关键的一点,需要在ShiroConfig中写的比较多,分别是:

(1)、自定义realm (2)、自定义rediscache (3)取消shiro自带的session用jwt替代 (4)、使权限校验都要过

JwtFilter类

用jwt的话就会替代shrio以前的UsernamePasswordToken这个方法,所以需要自己重写生成token的方法,一顿操作之后,写了好多类,终于可以在登录成功后生成token了。

总之这一大块对类的继承和重写做了好多操作。

4、全局异常处理类,引注解就好。

5、实体参数校验,引注解就好。我当时有个类好像是忘写@Data了,一直报空指针,太傻批了。。。

6、跨域,贴代码,这块有个爆红好像是改个写法就行。

7、登录接口开发,逻辑是post用户名密码的form然后去数据库查先判断用户名,然后密码,都匹配上jwt会根据用户Id生成token存在header中返回给前端。退出接口就是调用的shiro中自己的登出方法,服务端清空session。

jwt token的作用就是第一次登录成功后端header res返回给前端后,前端将token存在本地localstorage中,以后调用后端哪个接口都要用token来验一下是否可以自动请求。

而session只要在服务端存储,那一次登录成功后,只要不清session,以后都能一直访问请求。

综合一下,各有好处,看上面那篇文章链接,我个人还是用session吧。。。

8、博客接口开发,简单的增和查,都是对数据库操作,用mybatis plus继承的basemapper基本都能实现了,

@RequiresAuthentication说明需要登录之后才能访问的接口。

9、后面会写到纯前端校验token的机制,这里的token校验是要前端通过axios包在header中发到后端去(在JwtFilter中校验)。可以理解为是个对token的双重校验,先走前端判断第一次登录成功后token是否已经存在本地了,没问题的话进入路由再去通过axios去将这个token发到后端再校验。可以参照博客编辑接口。

登录图:

2.PNG

前端要点

1、这次用了vue3.x脚手架了,果然是只要他更新的够快,我们的学习速度就追不上他。用vue ui生成的项目。

3.x的目录结构也有所变化(看不动了,对了那本vue.js从入门到实战,还有一本阿里淘系的前端设计也都没有看),然后引element-ui和axios。

2、路由的话,由于功能比较简单,所以就有博客首页、编辑、详情和登录这几个路由就够了

3、几个组件的界面设计:包括登录、编辑、详情页、首页。其中里面有些element-ui的组件、vue的指令(v-show、v-for、v-bind等等),还有一些数据,方法的利用、还有created()中初始化用户的信息、引入markdown等等都要关注,哦对,还引了一个Header.vue的组件作为那几个组件的头了。

4、token的状态同步在store/index.js,这块感觉是前端存token的核心代码了,我看不懂,但我大受震撼

import Vue from 'vue'
import Vuex from 'vuex'
import {getNodeKey} from "element-ui/packages/tree/src/model/util";

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token:'',
    userInfo: JSON.parse(sessionStorage.getItem("userInfo"))
  },
  mutations: {
    // set
    SET_TOKEN:(state,token)=>{
      state.token = token
      localStorage.setItem("token",token)
    },
    SET_USERINFO:(state,userInfo)=>{
      state.userInfo = userInfo
      sessionStorage.setItem("userInfo",JSON.stringify(userInfo))
    },
    REMOVE_INFO:(state)=>{
      state.token = ''
      state.userInfo = {}
      localStorage.setItem("token",'')
      sessionStorage.setItem("userInfo",JSON.stringify(''))
    }
  },
  getters:{
    //get
    getUser:state => {
      return state.userInfo
    }
  },
  actions: {
  },
  modules: {
  }
})

5、新建了一个axios.js全局引入后,作为了一个全局校验错误状态的弹窗(大佬开发文档叫后置拦截)

6、路由权限拦截,新建了一个js全局引入后,在访问每个路由前都判断token的状态,觉得是否需要跳转到登录页面。这句可能不太对,也好像是先去判断该路由是否需要登录权限才能访问(对应之前我们再定义页面路由时候的的meta信息,指定requireAuth: true,需要登录才能访问),是的话去校验本地的token状态,本地没有那就是没登录过呗,所以跳回登录是这个意思吧哈哈哈,所以这个权限校验和后端一点关系都没有喽。这块也没太懂,主要是对jwt原理不熟,端午节会找个jwt实例看一看。

7、css,主要以居中为主。

大致就这么多吧,不太细致,工作太多了哈哈哈,端午节参加完qw杯可要好好歇几天了(qw杯就是去凑个人数,娱乐一下,坐在电脑前发呆两天的节奏)😏


标题:记录一个小型前后端分离博客系统要点
作者:jyl
地址:http://jinyunlong.xyz/articles/2021/06/11/1623342125002.html