18.将文件上传至云服务器 + 优化网站的性能

目录

1.将文件上传至云服务器

1.1 处理上传头像逻辑

1.1.1 客户端上传

1.1.2 服务器直传

2.优化网站的性能

2.1 本地缓存优化查询方法

2.2 压力测试

---

1.将文件上传至云服务器

• 客户端上传：客户端将数据提交给云服务器，并等待其响应；用户上传头像时，将表单数据提交给服务器
• 服务器直传：应用服务器将数据直接提交给云服务器，并等待其响应；分享时，服务端将自动生成的图片，直接提交给云服务器

使用七牛云服务器

导入依赖：

<!-- https://mvnrepository.com/artifact/com.qiniu/qiniu-java-sdk -->
<dependency><groupId>com.qiniu</groupId><artifactId>qiniu-java-sdk</artifactId><version>7.12.1</version>
</dependency>

在 application.properties 中配置：

# qiniu
qiniu.key.access=NHzlA2MRle10vB0wNeO54aGS-tMjEpO5BiIrflz9
qiniu.key.secret=qicgWpPOslm5_dFu_j_94r5gUcKm_UekhT2MMLPf
qiniu.bucket.header.name=communityheader123321
quniu.bucket.header.url=http://s6sc3za8f.hb-bkt.clouddn.com
qiniu.bucket.share.name=communityshare123321
qiniu.bucket.share.url=http://s6scgzhqs.hb-bkt.clouddn.com

1.1 处理上传头像逻辑

1.1.1 客户端上传

打开 UserController 类：

• 注入上述的两个 key
• 注入有关头像的空间内容
• 废弃原来上传头像方法：上传头像因为有表单，所以在客户端上传，表单直接提交给七牛云，废弃此方法
• 上传文件同样废弃
• 在打开用户设置的页面时需要生成凭证（设置上传文件名称，响应信息），将凭证写到表单中，当打开表单时，表单中应该有凭证
• 最后传给模板
• 还需要添加一个方法：在表单中将数据提交给七牛云，七牛云返回一个消息，然后将 User 表中的 headurl 做一个更新，更新为七牛云的路径

@Value("${qiniu.key.access}")private String accessKey;@Value("${qiniu.key.secret}")private String secretKey;@Value("${qiniu.bucket.header.name}")private String headerBucketName;@Value("${quniu.bucket.header.url}")private String headerBucketUrl;@LoginRequired@RequestMapping(path = "/setting", method = RequestMethod.GET)//添加方法使得浏览器通过方法访问到设置的页面public String getSettingPage(Model model) {// 上传文件名称String fileName = CommunityUtil.generateUUID();// 设置响应信息StringMap policy = new StringMap();policy.put("returnBody", CommunityUtil.getJSONString(0));// 生成上传凭证Auth auth = Auth.create(accessKey, secretKey);String uploadToken = auth.uploadToken(headerBucketName, fileName, 3600, policy);model.addAttribute("uploadToken", uploadToken);model.addAttribute("fileName", fileName);return "/site/setting";}// 更新头像路径@RequestMapping(path = "/header/url", method = RequestMethod.POST)@ResponseBodypublic String updateHeaderUrl(String fileName) {if (StringUtils.isBlank(fileName)) {return CommunityUtil.getJSONString(1, "文件名不能为空!");}String url = headerBucketUrl + "/" + fileName;userService.updateHeader(hostHolder.getUser().getId(), url);return CommunityUtil.getJSONString(0);}

再处理表单 setting.html：

                <!-- 上传头像 --><h6 class="text-left text-info border-bottom pb-2">上传头像</h6><!--上传到本地--><!--<form class="mt-5" method="post" enctype="multipart/form-data" th:action="@{/user/upload}"><div class="form-group row mt-4"><label for="head-image" class="col-sm-2 col-form-label text-right">选择头像:</label><div class="col-sm-10"><div class="custom-file"><input type="file" th:class="|custom-file-input ${error!=null?'is-invalid':''}|"id="head-image" name="headerImage" lang="es" required=""><label class="custom-file-label" for="head-image" data-browse="文件">选择一张图片</label><div class="invalid-feedback" th:text="${error}">该账号不存在!</div></div></div></div><div class="form-group row mt-4"><div class="col-sm-2"></div><div class="col-sm-10 text-center"><button type="submit" class="btn btn-info text-white form-control">立即上传</button></div></div></form>--><!--上传到七牛云--><form class="mt-5" id="uploadForm"><div class="form-group row mt-4"><label for="head-image" class="col-sm-2 col-form-label text-right">选择头像:</label><div class="col-sm-10"><div class="custom-file"><input type="hidden" name="token" th:value="${uploadToken}"><input type="hidden" name="key" th:value="${fileName}"><input type="file" class="custom-file-input" id="head-image" name="file" lang="es" required=""><label class="custom-file-label" for="head-image" data-browse="文件">选择一张图片</label><div class="invalid-feedback">该账号不存在!</div></div></div></div><div class="form-group row mt-4"><div class="col-sm-2"></div><div class="col-sm-10 text-center"><button type="submit" class="btn btn-info text-white form-control">立即上传</button></div></div></form>

在 static 包下 js 包新建 setting.js： 

$(function(){$("#uploadForm").submit(upload);
});function upload() {$.ajax({url: "http://upload-z1.qiniup.com",method: "post",processData: false,contentType: false,data: new FormData($("#uploadForm")[0]),success: function(data) {if(data && data.code == 0) {// 更新头像访问路径$.post(CONTEXT_PATH + "/user/header/url",{"fileName":$("input[name='key']").val()},function(data) {data = $.parseJSON(data);if(data.code == 0) {window.location.reload();} else {alert(data.msg);}});} else {alert("上传失败!");}}});return false;
}

1.1.2 服务器直传

需要重构分享相关的功能，打开 ShareController ：

• 注入分享空间的 url
• 修改返回浏览器的路径：七牛云空间路径 = 空间 url + / + 图片名字
• 废弃从本地获取图片传给客户端的方法：传给七牛云之后，通过七牛云获取图片

    @Value("${qiniu.bucket.share.url}")private String shareBucketUrl;@RequestMapping(path = "/share", method = RequestMethod.GET)@ResponseBodypublic String share(String htmlUrl) {// 文件名String fileName = CommunityUtil.generateUUID();// 异步生成长图Event event = new Event().setTopic(TOPIC_SHARE).setData("htmlUrl", htmlUrl).setData("fileName", fileName).setData("suffix", ".png");//触发事件eventProducer.fireEvent(event);// 返回访问路径Map<String, Object> map = new HashMap<>();// map.put("shareUrl", domain + contextPath + "/share/image/" + fileName);map.put("shareUrl", shareBucketUrl + "/" + fileName);return CommunityUtil.getJSONString(0, null, map);}// 废弃// 获取长图@RequestMapping(path = "/share/image/{fileName}", method = RequestMethod.GET)public void getShareImage(@PathVariable("fileName") String fileName, HttpServletResponse response) {if (StringUtils.isBlank(fileName)) {throw new IllegalArgumentException("文件名不能为空!");}response.setContentType("image/png");File file = new File(wkImageStorage + "/" + fileName + ".png");try {OutputStream os = response.getOutputStream();FileInputStream fis = new FileInputStream(file);byte[] buffer = new byte[1024];int b = 0;while ((b = fis.read(buffer)) != -1) {os.write(buffer, 0, b);}} catch (IOException e) {logger.error("获取长图失败: " + e.getMessage());}}

修改 EventConsumer，逻辑是在消费者中体现

• 在消费者中消费事件，传入两个 key 和上传空间的 name
• 注入 ThreadPoolTaskScheduler
• 在消费分享事件中，在执行生成图片时，启用定时器，监视该图片，一旦生成，则上传至七牛云.

    // 消费分享事件@KafkaListener(topics = TOPIC_SHARE)public void handleShareMessage(ConsumerRecord record) {if (record == null || record.value() == null) {logger.error("消息的内容为空!");return;}Event event = JSONObject.parseObject(record.value().toString(), Event.class);if (event == null) {logger.error("消息格式错误!");return;}//获取 html、文件名、后缀String htmlUrl = (String) event.getData().get("htmlUrl");String fileName = (String) event.getData().get("fileName");String suffix = (String) event.getData().get("suffix");//拼接参数String cmd = wkImageCommand + " --quality 75 "+ htmlUrl + " " + wkImageStorage + "/" + fileName + suffix;//执行命令try {Runtime.getRuntime().exec(cmd);logger.info("生成长图成功: " + cmd);} catch (IOException e) {logger.error("生成长图失败: " + e.getMessage());}// 启用定时器,监视该图片,一旦生成了,则上传至七牛云.UploadTask task = new UploadTask(fileName, suffix);//触发定时器执行Future future = taskScheduler.scheduleAtFixedRate(task, 500);//完成任务后定时器关闭task.setFuture(future);}//相当于线程体class UploadTask implements Runnable {// 文件名称private String fileName;// 文件后缀private String suffix;// 启动任务的返回值private Future future;// 开始时间private long startTime;// 上传次数private int uploadTimes;public UploadTask(String fileName, String suffix) {this.fileName = fileName;this.suffix = suffix;this.startTime = System.currentTimeMillis();}public void setFuture(Future future) {this.future = future;}@Overridepublic void run() {// 生成失败if (System.currentTimeMillis() - startTime > 30000) {logger.error("执行时间过长,终止任务:" + fileName);future.cancel(true);return;}// 上传失败if (uploadTimes >= 3) {logger.error("上传次数过多,终止任务:" + fileName);future.cancel(true);return;}//没有上述情况继续执行相关逻辑//从本地中寻找文件String path = wkImageStorage + "/" + fileName + suffix;//本地路径File file = new File(path);if (file.exists()) {logger.info(String.format("开始第%d次上传[%s].", ++uploadTimes, fileName));// 设置响应信息StringMap policy = new StringMap();// 成功返回0policy.put("returnBody", CommunityUtil.getJSONString(0));// 生成上传凭证Auth auth = Auth.create(accessKey, secretKey);String uploadToken = auth.uploadToken(shareBucketName, fileName, 3600, policy);// 指定上传机房UploadManager manager = new UploadManager(new Configuration(Zone.zone1()));try {// 开始上传图片Response response = manager.put(path, fileName, uploadToken, null, "image/" + suffix, false);// 处理响应结果JSONObject json = JSONObject.parseObject(response.bodyString());if (json == null || json.get("code") == null || !json.get("code").toString().equals("0")) {logger.info(String.format("第%d次上传失败[%s].", uploadTimes, fileName));} else {logger.info(String.format("第%d次上传成功[%s].", uploadTimes, fileName));future.cancel(true);}} catch (QiniuException e) {logger.info(String.format("第%d次上传失败[%s].", uploadTimes, fileName));}} else {logger.info("等待图片生成[" + fileName + "].");}}}

2.优化网站的性能

本地缓存：将数据缓存在应用服务器上，性能最好；常用的缓存工具：Ehcache、Guava、Caffeine等

分布式缓存：将数据缓存在 NoSQL 数据库上，跨服务器；常用缓存工具：MemCache、Redis等

多级缓存：一级缓存 > 二级缓存 > DB；避免缓存雪崩（缓存失效，大量请求直达DB），提高系统的可用性

2.1 本地缓存优化查询方法

本地缓存主要使用 Caffeine 工具，导入依赖：

        <dependency><groupId>com.github.ben-manes.caffeine</groupId><artifactId>caffeine</artifactId><version>2.7.0</version></dependency>

设置自定义参数：

# caffeine
caffeine.posts.max-size=15
caffeine.posts.expire-seconds=180

优化查询方法（discussPostService）：

• 初始化 Logger，记录日志
• 注入上述申明参数
• Caffeine核心接口: Cache, LoadingCache（同步缓存：多个线程同时访问缓存中的数据，但是缓存中没有数据，让多个线程排队等待，然后缓存去数据库中取）, AsyncLoadingCache（异步缓存：支持并发同时取数据）
• 声明帖子列表缓存，使用 LoadingCache<String, List<DiscussPost>>（使用 key 缓存 value）
• 声明帖子总数缓存，使用 LoadingCache<Integer, Integer>
• 在服务启动或者首次调用 DiscussPostService，初始化一次上述两个缓存即可
• 给当前类新增初始化方法，添加注解 @PostConstruct，初始化帖子列表缓存和帖子总数缓存
• 在查询某一页的方法中需要启动缓存的条件：缓存热门帖子（orderMode == 1）并且缓存首页（访问首页的时候，userId 是不传为0），缓存的是一页的数据（key 为 offset 和 limit 组合）；否则访问数据库，在访问之前记录一下日志（load post list from DB.）
• 在查询总数的方法中：用户查看自己帖子的时候不需要缓存，但是当 userId == 0 为首页查询，需要缓存帖子总数

    private static final Logger logger = LoggerFactory.getLogger(DiscussPostService.class);@Value("${caffeine.posts.max-size}")private int maxSize;@Value("${caffeine.posts.expire-seconds}")private int expireSeconds;// Caffeine核心接口: Cache, LoadingCache, AsyncLoadingCache// 帖子列表缓存private LoadingCache<String, List<DiscussPost>> postListCache;// 帖子总数缓存private LoadingCache<Integer, Integer> postRowsCache;@PostConstructpublic void init() {// 初始化帖子列表缓存postListCache = Caffeine.newBuilder().maximumSize(maxSize)//缓存最大数据量.expireAfterWrite(expireSeconds, TimeUnit.SECONDS)//把缓存写入缓存空间多长时间自动过期.build(new CacheLoader<String, List<DiscussPost>>() {//当尝试从缓存中取数据，caffeine会看缓存是否有数据：//没有，需要提供一个查询的方法，load就是实现这个查询方法@Nullable@Overridepublic List<DiscussPost> load(@NonNull String key) throws Exception {//实现访问数据库查数据if (key == null || key.length() == 0) {throw new IllegalArgumentException("参数错误!");}//不为空，解析 key（offset + ":" + limit），：进行切割String[] params = key.split(":");if (params == null || params.length != 2) {throw new IllegalArgumentException("参数错误!");}int offset = Integer.valueOf(params[0]);int limit = Integer.valueOf(params[1]);// 二级缓存: Redis -> mysqllogger.debug("load post list from DB.");//调用discussPostMapper查询数据（userId = 0   orderMode = 1）return discussPostMapper.selectDiscussPosts(0, offset, limit, 1);}});// 初始化帖子总数缓存postRowsCache = Caffeine.newBuilder().maximumSize(maxSize).expireAfterWrite(expireSeconds, TimeUnit.SECONDS).build(new CacheLoader<Integer, Integer>() {@Nullable@Overridepublic Integer load(@NonNull Integer key) throws Exception {logger.debug("load post rows from DB.");return discussPostMapper.selectDiscussPostRows(key);}});}//声明一个业务方法：查询某一页的方法，返回类型是集合public List<DiscussPost> findDiscussPosts(int userId, int offset, int limit, int orderMode) {//缓存热门帖子（orderMode == 1）并且缓存首页（访问首页的时候，userId 是不传为0）// 缓存的是一页的数据（key 为 offset 和 limit 组合）if (userId == 0 && orderMode == 1) {return postListCache.get(offset + ":" + limit);}//否则访问数据库，在访问之前记录一下日志logger.debug("load post list from DB.");return discussPostMapper.selectDiscussPosts(userId, offset, limit, orderMode);}//查询行数的方法public int findDiscussPostRows(int userId) {if (userId == 0) {return postRowsCache.get(userId);}logger.debug("load post rows from DB.");return discussPostMapper.selectDiscussPostRows(userId);}

测试类：

package com.example.demo;import com.example.demo.entity.DiscussPost;
import com.example.demo.service.DiscussPostService;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringRunner;import java.util.Date;@RunWith(SpringRunner.class)
@SpringBootTest
@ContextConfiguration(classes = DemoApplication.class)
public class CaffeineTests {@Autowiredprivate DiscussPostService postService;@Testpublic void initDataForTest() {for (int i = 0; i < 300000; i++) {DiscussPost post = new DiscussPost();post.setUserId(111);post.setTitle("互联网求职暖春计划");post.setContent("今年的就业形势，确实不容乐观");post.setCreateTime(new Date());post.setScore(Math.random() * 2000);postService.addDiscussPost(post);}}@Testpublic void testCache() {System.out.println(postService.findDiscussPosts(0, 0, 10, 1));System.out.println(postService.findDiscussPosts(0, 0, 10, 1));System.out.println(postService.findDiscussPosts(0, 0, 10, 1));System.out.println(postService.findDiscussPosts(0, 0, 10, 0));}}

2.2 压力测试

使用 jmeter 工具测试：

未添加缓存：

添加缓存：