SpringBoot+Vue博客项目中遇到的坑

shiro整合jwt，用于用户登录逻辑流程：

登录流程：
用户登录：输入用户名和密码–>后端校验：
–>有异常：处理异常
–>正常，生成jwt
访问接口时，统一被jwtFilter，即：shiro过滤器过滤， 进行登录处理：
1.无jwt直接访问接口：
在Controller层中加上@RequirtRole标签，过滤注解拦截，如果用户无jwt直接访问接口，则被拦截，并通过jwtFilter的异常处理功能，进行无权限的异常抛出处理
2.有jwt访问接口：
进行shiro登录处理，有问题（账号密码不对或者账号过期、无权限等）就抛异常，正常则访问接口，并返回数据

IService：
Mybatis-plus封装好的service方法，service层以继承的方式实现：extends IService<实体类>
ServiceImpl
同样时Mybatis-plus封装好的service层实现方法：extends ServiceImpl<实体类的Dao层, 实体类>
而dao层的mapper也要继承extends BaseMapper<实体类>才能实现，有了这些简单的增删改查的sql语句和service方法便可以省略不用写
Controller层：

Service层：

ServiceImpl实现曾：

dao层：

vue：

cmd启动vue ui 没有反应，首先输入vue -V或者vue -version查看当前版本，因为vue ui时vue3.0以后的指令，如果时因为版本低，可以先卸载vue，指令： npm/cnpm uninstall vue-cli -g，npm和cnpm都可以，然后根据你是否全局安装选择是否加-g，安装后再次使用vue -V查看版本，确认是否安装成功：

如果，卸载后，任然能看到老版本vue存在（博主就是），可以使用where vue查看vue位置：

然后去该目录，或者通过cmd的cd功能直接删除，dir为列出当前文件夹文件，del删除文件；
在查看版本确认是否删除成功，成功后下载安装vue3.0版本，指令为：npm install -g @vue/cli
详细安装和卸载指令可以查看一下链接：
https://www.jianshu.com/p/670b7d0691f8

安装成功后，如果在cmd中无法运行vue指令，可能是卸载时，连同环境变量也卸载了需要重新配置，找到vue.cmd所在目录，复制，然后去环境变量path中粘贴就可以了：
配置环境变量：
https://www.cnblogs.com/xiaqin/p/12609911.html

配置好后，便可以在你项目存放目录中，运行cmd然后，运行vue ui
便可以使用新版本vue的可视化界面来新建项目了

vue调用后端数据的坑：

后端开发人员通过vue完成前端调用后端数据时，需要注意，调用路径是否正确，路径名称是否正确，后端输出和接收的参数和前端发送输出的参数，是否拼写一致。
因为当我们完成后端开发，并且通过PostMan发送请求测试通过时，证明数据的传送是没问题的，个人在第一次开发SpringBooth+vue时，前端的问题有：
1.封装格式：后端用什么格式封装，一般情况下每个项目都会有一个统一封装类，来帮助controller以什么格式发送数据到前端，而公司开发前在需求评审上也会规定以什么格式封装数据，所以前端只需要注意点就可以了，在数据展示方面，可以通过Element ui来实现需求上的页面。
我在开发时，遇到的最大难题便是，同样的代码，为什么别人能实现的功能，我实现不了。而每次的原因都是，他调用后端的参数和我是不一样的，这时候就体现了前端数据输出的重要性了：

输出数据console.log()和alert()，他们的区别是：

console.log()输出数据时，并不影响程序的运行，而alert()则是当程序运行到它是，便会停止，并且内容会在页面上以弹框的形式输出，点击弹框上的确定键才会继续下去，然后你就可以通过F12查看数据是否输出了，输出了，证明数据你拿到了，没输出，首先检查后端对应页面模块是否有问题，然后便是前端，调用路径是否有问题，同样使用输出的方式确定。
console.log()和alert()的区别：
https://www.cnblogs.com/Narcotic/p/6839577.html

isNull和notNull的区别：

前者isNull表示不为空，后者notNull表示为空，不注意和容易容混，我就是，


当时Vue调用数据时，后端都不报错，只能console.log()和alert()输出数据才确定是没有调到数据;


当时情况有点妖孽，一会儿报了：该博客已被删除，一会儿又不报，很混乱，让人无法确定，还是打了断点，有在vue输出数据，看F12页面才确定，希望大家能引以为戒，养成输出和打断点的习惯。

安装mavon-editor

基于Vue的markdown编辑器mavon-editor

cnpm install mavon-editor --save

这个是我写博客编辑时，被推荐的编辑器，只要在Vue上安装了它，并且导入到项目中便可以出现一下内容，之所以说这个，是我用来它才知道，前端和后端一样很多我们新手看起来很难的却很常见的东西，老手却很轻松的原因是因为已经有大佬封装好了，可以直接拿来用了。

目前，我还在理shiro+jwt登录的逻辑，虽然是封装好的，但是至少你要知道它使用的原理，等以后学到那个层次再来了解详细，关于这个基于springBoot+Vue前后端分离博客项目，作者在B站，gitHub上都有分享，有兴趣的朋友可以去看看，多了解，世界就没那么复杂，虽然它仍然很大。
Springboot+Vue前后端分离博客项目https://juejin.im/post/5ecfca676fb9a04793456fb8#heading-33

关联文章：
https://blog.csdn.net/ZXin153/article/details/107579706