后端开发框架详解：优势与选择指南

我们需要重写几个方法：

createToken：为了实现登录，我们需要生成我们自定义支持的JwtToken

onAccessDenied：拦截验证，当header中没有Authorization的时候我们直接传递过去，不进行自动登录，当有的时候我们先验证jwt的合法性，如果没有问题的话，直接执行executeLogin方法，实现自动登录。

onLoginFailure：登录异常时进入的方法，我们直接把异常信息封装起来抛出即可

preHandle：拦截器的前置拦截。因为我们是前后端分析的项目，所以除了跨域全局配置外，还需要在拦截器中提供跨域支持。这样，拦截器在进入Controller之前就不会受到限制。

我们先来看一下整体代码：

所以到这里我们的shiro就已经集成了，并且使用jwt来进行身份验证。

5. 异常处理

======

有时候难免会出现服务器报错的情况，如果不配置异常处理机制，就会返回tomcat或者nginx默认的5XX页面，对普通用户来说不是很友好，用户也看不懂到底是怎么回事。这时候就需要我们程序员设计一个友好、简洁的格式返回给前端了。

解决办法是：使用@ControllerAdvice进行统一的异常处理，@ExceptionHandler(value = RuntimeException.class)指定捕获的Exception类型。这个异常处理是全局的，所有类似的异常都会在这里处理。

第二步：定义全局异常处理。@ControllerAdvice表示定义全局的控制器异常处理，@ExceptionHandler表示针对性的异常处理，可以针对性的处理每一个异常。

我们捕获了上面几个异常：

6. 实体验证

======

当我们提交表单数据的时候，我们可以使用一些像jQuery Validate这样的js插件来实现前端的验证，同时我们可以使用Hibernate validator来做后端的验证。

我们使用springboot框架作为基础，因此自动集成了Hibernate验证器。

那么它在使用上是什么样子的？

步骤1：首先对实体的属性添加相应的验证规则，例如：

第二步：这里我们使用了@Validated注解的方法，如果实体不满足要求，系统会抛出异常，这个异常会被我们的异常处理中捕获。

MethodArgumentNotValidException。

7. 跨域问题

======

因为是前后端解析，跨域问题无法避免，我们直接在后台进行全局跨域处理：

好的，因为我们系统开发的界面比较简单，所以我就不去集成swagger2了，swagger2也比较简单，现在直接进入我们的正题，写登录界面吧。

8.登录界面开发

========

登录逻辑其实很简单，只需要接受账号和密码，然后带着用户的id生成jwt返回给前端即可。为了后续可以扩展jwt，我们将jwt放在header中，具体代码如下：

接口测试：

9.博客界面开发

========

我们的骨架已经完成了，接下来就可以添加我们的业务接口了，下面我以一个简单的博客列表和博客详情页为例：

注意@RequiresAuthentication表示该接口需要登录后才能访问，其他需要权限的接口可以添加相关Shiro注解。接口比较简单就不多说了，基本就是增删改查。注意edit方法是受限制的资源，需要登录后才能操作。

接口测试：

10. 后端总结

=======

好吧，一篇文章就讲完一个基础框架似乎有些仓促，不过基础的东西已经讲完了，后面我们会开发前端界面。

请转发+关注项目代码和项目视频，然后私信回复我“项目”即可获取免费版本！

Vue前端页面开发

=========

1 简介

====

接下来我们来完成vueblog前端的一些功能，可能用到的技术有以下几点：

本次项目实践需要一定的Vue基础，希望大家对一些Vue指令有所了解，这样我们讲解起来就会容易很多。

2. 项目演示

======

我们先来看看需要完成的项目是什么样子的，考虑到很多同学对样式掌握的不是很好，我尽量使用 element-ui 原生组件的样式来完成整个博客界面，废话不多说，上图：

3.环境准备

======

高楼大厦，始于平地，我们来一步步完成吧，首先我们安装vue环境，我练习的环境是windows10。

1、首先我们进入node.js官网（），下载最新的长期版本，直接运行安装，完成后我们已经有了node和npm环境。

安装完成后，检查版本信息：

2.接下来我们安装vue环境

4. 新建项目

======

上面我们安装了淘宝npm和cnpm，是为了加快依赖的安装速度。vue ui是@vue/cli3.0新增的可视化项目管理工具，可以运行项目，打包项目，check等操作。对于初学者来说，可以少记一些命令，哈哈。3.创建vueblog-vue项目

运行vue ui之后会为我们打开一个地址为:8080的页面：

然后切换到【创建】，注意创建的目录要和你运行vue ui的目录同级，这样管理和切换比较方便，然后点击【在此创建新项目】按钮

接下来一步在项目文件夹中输入项目名“vueblog-vue”，其他什么都不要改。点击下一步，选择【手动】，再点击下一步。点击如图按钮，勾选 Router 和 State Management Vuex，将 js 勾选去掉。

接下来步骤同样选择【对路由器使用历史模式】，点击创建项目，然后在弹出的窗口中选择按钮【创建项目而不保存预设】，进​​入项目创建。

稍等片刻，项目就初始化完成了。在上面的步骤中，我们创建了一个 vue 项目，并且安装了 Router 和 Vuex。所以后面可以直接使用它们。

我们先来看一下整个 vueblog-vue 项目结构

5. 安装 element-ui

==============

接下来我们引入element-ui组件()，这样我们就可以得到好看的vue组件，开发出好看的博客界面了。

命令很简单：

然后我们打开项目src目录下的main.js，并引入element-ui依赖。

这样我们就可以开心的在官网上选择组件并将代码复制到我们的项目中直接使用啦。

6.安装axios

=========

接下来我们来安装axios()，这是一个基于promise的HTTP库，当我们打通前后端的时候，使用这个工具可以提高我们的开发效率。

安装命令：

然后我们还在main.js中全局导入axios。

在组件中我们可以通过this.$axios.get()发起我们的请求。

7. 页面路由

======

接下来我们定义路由和页面，因为我们只是在做一个简单的博客项目，页面很少，所以我们可以先定义好，然后再慢慢开发，这样在需要的地方就可以直接使用链接了：

我们在views文件夹中定义了几个页面：

然后配置路由中心：

接下来我们来开发我们的页面，其中的meta:requireAuth:true表示这是一个受限制的资源，需要登录字词才能访问，后面我们拦截路由权限的时候会用到这个。

8. 登录页面

======

接下来我们来做一个登录页面，我们直接在element-ui官网上找表单组件就可以了，登录页面就两个输入框，一个提交按钮，比较简单，然后我们最好在页面中添加js验证，emmm，我直接贴代码吧~~

我实在找不到很好的办法来解释，所以就先贴出代码再解释吧。上面的代码中，其实主要做了两件事：

1. 表单验证

2.登录按钮点击登录事件

表单验证规则没问题，写法也比较固定，查看element-ui组件就能发现，我们来分析一下发起登录后的代码：

从返回结果请求头中获取token信息，然后使用store提交token的状态和用户信息，完成操作之后我们调到/blogs路由，也就是博客列表页。

Token状态同步

==========

因此在 store/index.js 中，代码如下所示：

存储token我们用localStorage，存储用户信息我们用sessionStorage，毕竟我们不需要长期保留用户信息，保存token信息之后，随时可以初始化用户信息。当然因为这个项目比较简单，考虑到初学者，我并没有做很多相对复杂的封装和功能，当然学习了这个项目之后，想再深入一点，就完成了，大家可以自行学习改造。

定义一个全局的 axios 拦截器

============

点击登录按钮，发起登录请求，如果返回数据成功，如果密码错误，是不是也要弹窗提示信息？为了让这个错误弹窗能适用于所有地方，我为axios做了一个后置拦截器。即在返回数据时，如果结果码或者状态异常，就弹窗提示信息。

在src目录下（与main.js同级）创建文件axios.js，定义axios的拦截：

前置拦截其实可以给所有需要权限的请求都配备上header token信息，所以使用的时候不需要配置，我的小项目比较小，所以还是略过不谈吧。

然后在main.js中导入axios.js

因为后端返回的实体是Result，成功时code为200，失败时code为400，所以可以根据这个判断结果是否正常。另外，当权限不足时，可以通过请求结果的状态码来判断结果是否正常。这里就做了简单的处理。

异常登录效果如下：

9. 博客列表

======

登录之后直接进入博客列表页，然后加载博客列表数据并渲染，同时我们需要在页眉展示用户信息，因为这个模块用到的地方比较多，所以我们把页眉中的用户信息提取出来作为一个组件。

标头用户信息

======

然后我们先在header中完善一下用户的信息，里面应该包含id、avatar、username三部分信息，而这些信息在登录之后就已经存在于sessionStorage中了。因此，我们可以通过store的getters来获取到用户的信息。

看上去不是很复杂，我们贴出代码：

上述代码中，create()初始化了用户信息，通过hasLogin状态控制登录注销按钮的切换，并且禁用了文章发布链接，这样就可以展示用户信息了。然后是注销按钮，methods中有一个logout()方法。逻辑比较简单，直接访问/logout，因为之前我们在axios.js中已经设置了axios请求的baseURL，所以这里不再需要link前缀。因为是登录后才可以访问的限制资源，所以header中带上了Authorization。返回结果会清除store中的用户信息和token信息，并跳转到登录页面。

那么需要header用户信息的页面只需要几个步骤：

博客分页

====

接下来是列表页，需要分页。列表我们直接用element-ui里面的timeline组件作为我们的列表样式，挺不错的。还有我们的分页组件。

需要几条信息：

在data()中我们定义了博客列表blogs和一些分页信息。在methods()中我们定义了分页调用接口page(currentPage)，参数是需要调整的页码currentPage，拿到结果后直接赋值即可。然后初始化的时候我们在mounted()方法中直接调用第一页this.page(1)。完美。用element-ui组件简单又快捷，哈哈！注意我们在标题上加了链接，用的是标签。

10.博客编辑（发布）

===========

我们点击博客文章链接调整到/blog/add页面，这里需要用到markdown编辑器，在vue的组件中，比较好用的就是mavon-editor，我们就直接用吧，首先安装mavon-editor相关组件：

安装 mavon-editor

Mavon-editor，基于 Vue 的 Markdown 编辑器

然后在main.js中全局注册：

好的，那么我们来定义我们的博客表单：

逻辑还是很简单的，验证表单，然后点击按钮提交表单，注意在header中添加了Authorization信息，结果弹窗提示操作成功，然后跳转到博客列表页。emm，跟写ajax没什么区别，熟悉一些vue指令就行。然后因为编辑和添加都是在同一个页面，所以有一个create()方法，比如从编辑链接/blog/7/edit中获取blogId为7的id。然后echo博客信息，获取方法是const blogId = this.$route.params.blogId。

顺便说一句，由于 mavon-editor 已经全局注册，我们可以直接使用该组件：

效果如下：

11. 博客详细信息

=======

博客信息需要在博客详情中呼应，那么就有一个问题了，后端传过来的博客内容是markdown格式的，我们需要对其进行渲染展示，这里我们使用一个插件markdown-it来解析md文档，然后导入github-markdown-c，也就是所谓的md风格。

我先自我介绍一下，我2013年毕业于上海交通大学，在小公司工作过，也进过华为、OPPO等大公司，2018年加入阿里巴巴，一直到现在。

我知道大部分想要提升技能的前端工程师往往都是自学或者上课，但培训机构的学费动辄几千元，压力真的很大。没有系统的自学效率低、耗时长，而且非常容易碰天花板、停滞不前！

因此我收集整理了一本《2024年Web前端开发全套学习资料》，初衷很简单，就是为了帮助那些想提升自己却不知道从何下手的朋友，同时也减轻大家的负担。

里面既有适合初学者学习的零基础教材，也有适合3年以上经验者深入学习提高的进阶课程，基本覆盖了95%以上的前端开发知识点，真正做到了系统化！

由于文件比较大，这里只截图部分目录，每个节点都有大公司面试经历，学习笔记，源码讲义，实战项目，讲解视频，会持续更新！

如果你觉得这些内容对你有帮助的话，可以扫码获取！！（注：前端）

终于：

总结一下，一次成功的面试=基础知识+项目经验+表达能力+运气。运气我们无法掌控，但我们可以把更多的时间花在其他地方，提前做好每一步的准备。

面试的目的一方面是为了找到工作，升职加薪，另一方面也是对自身能力的考验。一次成功的面试不仅仅来自于面试前的临时抱佛脚，更重要的是在日常学习和工作中的不断积累和坚持，对每一个知识点、每一个项目开发、遇到的每一个难点知识的积累、练习和总结。

点击此处获取Web前端开发经典面试题

我一般都是自学或者报班，但培训机构的学费动辄几千元，压力真的很大。没有系统的自学效率低，耗时长，而且很容易碰天花板、停滞不前！**

因此我收集整理了一本《2024年Web前端开发全套学习资料》，初衷很简单，就是为了帮助那些想提升自己却不知道从何下手的朋友，同时也减轻大家的负担。

[外部链接图片正在转移...(
img-BP3UkhzT-1712454002139)]

[外部链接图片正在转移...(
img-E5aYMZrf-1712454002139)]

里面既有适合初学者学习的零基础资料，也有适合3年以上经验者深入学习提高的进阶课程，基本覆盖了95%以上的前端开发知识点，真正做到了系统化！

[外部链接图片正在转移...(
img-f2PvzSqm-1712454002140)]

由于文件比较大，这里只截图部分目录，每个节点都有大公司面试经历，学习笔记，源码讲义，实战项目，讲解视频，会持续更新！

如果你觉得这些内容对你有帮助的话，可以扫码获取！！（注：前端）

终于：

总结一下，一次成功的面试=基础知识+项目经验+表达能力+运气。运气我们无法掌控，但我们可以把更多的时间花在其他地方，提前做好每一步的准备。

面试的目的一方面是为了找到工作，升职加薪，另一方面也是对自身能力的考验。一次成功的面试不仅仅来自于面试前的临时抱佛脚，更重要的是在日常学习和工作中的不断积累和坚持，对每一个知识点、每一个项目开发、遇到的每一个难点知识的积累、练习和总结。

点击此处获取Web前端开发经典面试题