博客一直更新地很慢，多谢各位老铁的支持与耐心等候。一开始的时候真的没有想到做教程是这么蛋疼的一件事，这个项目我也就利用业余时间搞了一两周，没想到十篇文章竟然写了四个月。当然，更新慢的主要原因，还是我这该死的懒惰。

这四个月里有 80 天左右的时间处在强制加班状态。忙完休了十几天假，回了躺老家，各种探亲访友，体验了一下咸鱼的生活，算是回了一波血。

这篇文章主要讲讲图片的上传。近来留言提建议的老铁越来越多了，十分感谢大家的支持，但是毕竟做教程面面俱到很难，我的主要目的是在大家毫无头绪的时候抛个砖，相信大家对框架有了一定认识之后，只要是想做的功能都可以实现。解决问题的过程可能会有坎坷，但事后想来一定会有满足感。

之前我们的封面图片保存在网上的图床中，显然有些瓜皮，现在我们来完善一下。

上传文件的逻辑很简单：前端向后端发送 post 请求，后端对接收到的数据进行处理（压缩、格式转换、重命名等），并保存到服务器中指定的位置，再把该位置对应的 URL 返回给前端即可。

利用 element 提供的组件 <el-upload> 可以轻松搞定前端。该组件的详细文档地址如下：

后端主要解决如下两个问题：

• 如何接收前端传来的图片数据并保存
• 如何避免重名（图片资源的名字很可能重复，如不修改可能出现问题）

首先，在后端的 LibraryController 中添加生成指定长度随机字符串的代码：

public String getRandomString(int length) {
    String base = "abcdefghijklmnopqrstuvwxyz0123456789";
    Random random = new Random();
    StringBuffer sb = new StringBuffer();
    for (int i = 0; i < length; i++) {
        int number = random.nextInt(base.length());
        sb.append(base.charAt(number));
    }
    return sb.toString();
}

然后添加 PostMapping：

@CrossOrigin
@PostMapping("api/covers")
public String coversUpload(MultipartFile file) throws Exception {
    String folder = "D:/workspace/img";
    File imageFolder = new File(folder);
    File f = new File(imageFolder, getRandomString(6) + file.getOriginalFilename()
            .substring(file.getOriginalFilename().length() - 4));
    if (!f.getParentFile().exists())
        f.getParentFile().mkdirs();
    try {
        file.transferTo(f);
        String imgURL = "http://localhost:8443/api/file/" + f.getName();
        return imgURL;
    } catch (IOException e) {
        e.printStackTrace();
        return "";
    }
}

这里涉及到对文件的操作，对接收到的文件重命名，但保留原始的格式。可以进一步做一下压缩，或者校验前端传来的数据是否为指定格式，这里不再赘述。

测试一下，成了！URL 变成了我们自己的了。

当然，现在这样还不行，这个 URL 的前缀是我们自己构建的，还需要把它跟我们设置的图片资源文件夹，即 D:/workspace/img 对应起来。

在 configMyWebConfigurer 中添加如下代码：

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/api/file/**").addResourceLocations("file:" + "d:/workspace/img/");
    }

测试一下，改一改第一本书的封面

STEP 1

STEP 2

STEP 3

一本好好的书，瞬间变得又 low 又丑！

查看资源文件夹，图片也成功保存了下来。

有的老铁可能想到了， 6 位的随机数也可能随出完全一样的名字，这个问题嘛，也交给你们想办法解决喽。

这部分其实是附赠内容，一开始觉得不用说，但考虑到整个教程的完整性（主要是本篇字数不太够），我决定简单唠一唠。

我们在开发时采用了前后端分离的模式，在部署的时候有两种选择：

选择一： 把前端项目部署在 web 服务器中，把后端项目部署在应用服务器中

选择二： 把前端项目打包，作为后端项目的静态文件，再把后端项目部署在应用服务器中

一般来讲，既然我们前后端分离了，那选择一是自然而然的，前面也说过，使用 web 服务器的好处有如下几点：

• 可以实现反向代理，提高网站的安全性
• 方便维护，一些小的修改不必同时协调前后端开发人员
• 对静态资源的加载速度更快

但考虑到成本、开发团队技术能力等问题，选择二也有其存在的意义。

下面具体讲一下两种选择的操作方法。

首先下载 nginx，官方网址如下：

前端打包的方式是相同的，不同的是需要把前端项目 dist 文件夹中的两个文件 static 和 index.html 拷贝到后端项目的 srcmainresourcesstatic 目录下。

之后，把后端项目打成 war 包。打包之前，我们需要把内置的 tomcat 排除出去，避免冗余。

排除的方法有两种，第一种是在 spring-boot-starter-web 的依赖里添加一个 <exclusion>，代码如下：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
    <exclusions>
        <exclusion>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
        </exclusion>
    </exclusions>
</dependency>

第二种是在 dependencies 中添加 tomcat 相关依赖如下：

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-tomcat</artifactId>
	<scope>provided</scope>
</dependency>

这个 provided 的意思是 tomcat 由外部提供，不用打包。（如果过去复制了我提供的 pom.xml，这条依赖是本来就存在的）

接下来记得把 <packaging> 处的 jar 改为 war 执行打包命令 mvn install，然后 war 包就出现啦。

至于如何部署 war 包我就不多说了，记得把 tomcat 的默认端口修改为 8443（根据前端的转发端口设置）即可。

作为详细教程的部分我想基本上是结束了，但这个项目本身是不够完善的，主要是目前的功能难以发挥实际作用。

我的设想是，把这个项目作为我个人的 知识库。作用有下面几处：

• 把我搜集到的有用的资料、自己的心得体会之类都有效地管理起来，并能够方便的加以利用。这个库可以不断地更新，不断地扩展，这样再过几十年，一定是一份了不得的财富。
• 对知识库的内容以及操作记录等进行自动分析，监测自身学习行为规律，甚至可以利用一些模型分析某种知识带来的经济效益。利用这些分析结果，可以及时优化学习规划与学习策略。
• 用这个知识库系统的历代版本作为未来开发技术发展的一个见证，也作为保持我个人技术能力的一条伏线。由于种种原因，我的工作逐渐偏离了开发岗位，但我对技术的热情不会变，希望成为真正理解技术的人的愿望不会变。

接下来我会继续完善项目本身，并使用更规范的方式开发，争取尽快把它做成一个可以上线的成熟产品。前一段趁活动在腾讯云买了 3 年的服务器，刚好可以玩一玩。

这个系列的后续，我会尝试转变 “贴代码 + 讲解基础概念” 这种模式。这前十篇可以看作面向 “程序员” 的文章，是对框架的一个基本认识，接下来的文章我想面向 “开发者”，从产品、项目管理等角度分享开发的经验。

• 优化搜索功能，这个我想了一下，一是目前对模糊查询的支持程度不够，需要优化 sql 语句，二是全站查询时不仅仅针对图书这一种资源，需要更强大的功能，可以尝试使用开源的站内搜索引擎。这部分内容我会尽快补充到本篇文章里。
• 重建项目基础框架，分析并剥离前后台功能。
• 着手开发项目第二部分——用户角色权限管理模块。

希望 Vue3.0 早日问世。

项目的进程，还请关注 github 仓库：