主页

本文是昨天文章的姊妹篇，昨天我们从 ElementUI 按需加载和 Spring Boot 开启 gzip 压缩两个方面来聊了 Spring Boot+Vue 项目首屏优化的问题: 如何提高Spring Boot+Vue前后端分离项目首页加载速度的 但是我们也说了，前后端分离开发主流的部署是分开部署，即前端使用 Nginx 来部署。如果使用 Nginx 来部署前端项目，优化要怎么做？一起来看下：

前后端分离项目如果做成 SPA（单页面）的形式，就必然面临一个首屏加载的问题，因为默认情况下首页文件比较大，可能超过 1 MB，进而带来首页加载很慢的问题。所以我们要通过优化，来提高首页的加载速度。 问题的解决，一般来说有这样几种思路： UI 组件按需加载 路由懒加载 组件重复打包 gzip 这些加载方式中，UI 组件按需加载和 gzip 是两种比较常用的方案，另外两种优化方式则要结合具体的项目，看看是否具备相关条件。 所以，本文松哥就先来和大家聊一聊 UI 组件懒加载和 gzip。 44.1. ElementUI 按需加载 44.1.1 问题复现 先来看松哥录制的一段视频：

Spring Boot + Vue 这一对技术栈目前看来可以说是非常的火热，关于 Spring Boot 松哥已经写过多篇教程，如： 40 篇原创干货，带你进入 Spring Boot 殿堂！ 前后端分离的文章也写过好几篇了，例如： 一个Java程序猿眼中的前后端分离以及Vue.js入门 前后端分离开发思路探讨 前后端分离时代，Java 程序员的变与不变！ 相信大家也从中学到了不少干货。 老实说，前后端分离其实并不难，前后端分离之后，Java 工程师只需要专心写页面就可以了，在我看来工作可比以前轻松多了。 如果让一个专业的前端工程师来写前端页面，其实也不难，Vue 算是三大前端框架中最容易上手的了。 那怎么样就有难度了呢？ 让同一个人既写前端又写...

[TOC] 在 Spring Boot 前后端分离环境下做文件上传，这个松哥之前在公众号上发过一篇文章来和大家介绍，但是在之前的文章中，为了省事，文件我是直接保存在本地临时目录下的，这带来了另外一个问题，就是项目重启之后，临时目录失效，之前上传的文件又访问不到了。 很显然在实际开发中我们不会这么搞！在生产环境中，我们可以搭建独立的文件服务器，结合 FastDFS 还可以搭建独立的分布式文件服务系统，这样文件管理服务器不仅方便管理还易于扩展，也解决了前面所说的临时目录失效的问题。 今天松哥想和大家聊一下在微人事中，我是如何通过 Spring Boot + Vue + FastDFS 来实现前后端分离文件上传的。 学习本文需要大家先搞定 FastDFS，如果大家对于 FastDFS...

前置知识： 松哥手把手教你用 FastDFS 构建分布式文件管理系统 Spring Boot + Vue，手把手教你做文件上传 在微人事中使用 FastDFS，首先准备三件事： 开启 FastDFS 服务（Tracker Server,Storage Server 以及 Nginx） 微人事中加入 FastDFS 相关依赖 <dependency> <groupId>net.oschina.zcx7878</groupId> <artifactId>fastdfs-client-java</artifactId> <version>1.27.0.0</v...

[TOC] 说起分布式文件管理系统，大家可能很容易想到 HDFS、GFS 等系统，前者是 Hadoop 的一部分，后者则是 Google 提供的分布式文件管理系统。除了这些之外，国内淘宝和腾讯也有自己的分布式文件管理系统，都叫 TFS（Taobao File System 和 Tencent File System）。 相对于上面提到的这些分布式文件管理系统而言，FastDFS 可能离我们 Java 工程师更近一些，因为文件上传这个功能太常见了，而想要搭建独立的分布式文件管理系统，FastDFS+Nginx 组合无疑是最佳方案。因此，松哥今天就来和大家简单聊一聊这个问题。 如果小伙伴们还不懂在传统的开发环境下如何进行文件上传，可以参考松哥之前发的文件上传教程： Sprin...

Spring Security 中用户信息更新问题。 如何获取用户信息 在 Spring Security 中提供了一个 Authentication ，我们可以在一个 Controller 或者一个 Service 中，直接注入 Authentication，注入成功后，就能直接使用。 @GetMapping("/hr/info") public Hr getCurrentHr(Authentication authentication) { return ((Hr) authentication.getPrincipal()); } 这个方法用来获取当前用户信息，方法参数就是由 Spring Security 提供的。 如何更新用户信息 @Pu...

在传统的前后端不分的开发中，权限管理主要通过过滤器或者拦截器来进行（权限管理框架本身也是通过过滤器来实现功能），如果用户不具备某一个角色或者某一个权限，则无法访问某一个页面。 但是在前后端分离中，页面的跳转统统交给前端去做，后端只提供数据，这种时候，权限管理不能再按照之前的思路来。 首先要明确一点，前端是展示给用户看的，所有的菜单显示或者隐藏目的不是为了实现权限管理，而是为了给用户一个良好的体验，不能依靠前端隐藏控件来实现权限管理，即数据安全不能依靠前端。 这点就像普通的表单提交一样，前端做数据校验是为了提高效率，提高用户体验，后端才是真正的确保数据完整性。 所以，真正的数据安全管理是在后端实现的，后端在接口设计的过程中，就要确保每一个接口都是在满足某种权限的基础上才能访问，也...

前端网络访问，主流方案就是 Ajax，Vue 也不例外，在 Vue2.0 之前，网络访问较多的采用 vue-resources，Vue2.0 之后，官方不再建议使用 vue-resources ，这个项目本身也停止维护，目前建议使用的方案是 axios。今天松哥就带大家来看看 axios 的使用。 37.1 axios 引入 axios 使用步骤很简单，首先在前端项目中，引入 axios： npm install axios -S 装好之后，按理说可以直接使用了，但是，一般在生产环境中，我们都需要对网络请求进行封装。 因为网络请求可能会出错，这些错误有的是代码错误导致的，也有的是业务错误，不管是哪一种错误，都需要开发者去处理，而我们不可能在每一次发送请求时都去枚举各种错误情...

在Vue.js 中，如果网络请求使用 axios ，并且使用了 ElementUI 库，那么一般来说，文件上传有两种不同的实现方案： 通过 Ajax 实现文件上传 通过 ElementUI 里边的 Upload 组件实现文件上传 两种方案，各有优缺点，我们分别来看。 36.1 准备工作 首先我们需要一点点准备工作，就是在后端提供一个文件上传接口，这是一个普通的 Spring Boot 项目，如下： SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/"); @PostMapping("/import") public RespBean importData(MultipartFile file, Htt...