写博客的那些事

开发个人博客的那些事 上

1. 文件上传

   本人选择将图片上传到阿里云的OSS对象存储中，然后使用OSS工具类生成文件的URL，将其保存到数据库中去。

   主要有以下步骤：

   • application.yml配置

     aliyun:
       oss:
         endpoint: oss-cn-hangzhou.aliyuncs.com
         accessKeyId: LTAI4G4o1ViJkcNqJNiintFv
         accessKeySecret: zOQvom8XK1ngTau76nZj8h6i3dp14D
         bucketName: fmxu-blog
     

   • 导入阿里云关于OSS的相关依赖

     <dependency>
         <groupId>com.aliyun.oss</groupId>
         <artifactId>aliyun-sdk-oss</artifactId>
         <version>3.6.0</version>
     </dependency>
     

   • 阿里云的注册设置可以百度

   • 创建阿里云OSS工具类

     package com.fmxu.util;
     
     import com.aliyun.oss.OSSClient;
     import com.aliyun.oss.model.ObjectMetadata;
     import com.aliyun.oss.model.PutObjectResult;
     import org.slf4j.Logger;
     import org.slf4j.LoggerFactory;
     import org.springframework.beans.factory.annotation.Value;
     import org.springframework.stereotype.Component;
     import org.springframework.web.multipart.MultipartFile;
     
     import java.io.IOException;
     import java.io.InputStream;
     import java.net.URL;
     import java.util.Date;
     import java.util.List;
     import java.util.UUID;
     
     /**
      * @author Dell
      * @projectName blog
      * @description: 阿里云oss工具类
      * @date 2021/3/15/9:34
      */
     @Component
     public class OssUtils {
         //---------变量----------
         protected static final Logger log = LoggerFactory.getLogger(OssUtils.class);
     
         @Value("${aliyun.oss.endpoint}")
         private String endpoint;
         @Value("${aliyun.oss.accessKeyId}")
         private String accessKeyId;
         @Value("${aliyun.oss.accessKeySecret}")
         private String accessKeySecret;
         @Value("${aliyun.oss.bucketName}")
         private String bucketName;
     
         //文件存储目录
         private String filedir = "my_file/";
     
         /**
          * 1、单个文件上传
          * @param file
          * @return 返回完整URL地址
          */
         public String uploadFile(MultipartFile file) {
             String fileUrl = uploadImg2Oss(file);
             String str = getFileUrl(fileUrl);
             return str.trim();
         }
     
         /**
          * 1、单个文件上传(指定文件名（带后缀）)
          * @param file
          * @return 返回完整URL地址
          */
         public String uploadFile(MultipartFile file,String fileName) {
             try {
                 InputStream inputStream = file.getInputStream();
                 this.uploadFile2OSS(inputStream, fileName);
                 return fileName;
             }
             catch (Exception e) {
                 return "上传失败";
             }
         }
     
         /**
          * 2、多文件上传
          * @param fileList
          * @return 返回完整URL，逗号分隔
          */
         public String uploadFile(List<MultipartFile> fileList) {
             String fileUrl = "";
             String str = "";
             String photoUrl = "";
             for(int i = 0;i< fileList.size();i++){
                 fileUrl = uploadImg2Oss(fileList.get(i));
                 str = getFileUrl(fileUrl);
                 if(i == 0){
                     photoUrl = str;
                 }else {
                     photoUrl += "," + str;
                 }
             }
             return photoUrl.trim();
         }
     
         /**
          * 3、通过文件名获取文完整件路径
          * @param fileUrl
          * @return 完整URL路径
          */
         public String getFileUrl(String fileUrl) {
             if (fileUrl !=null && fileUrl.length()>0) {
                 String[] split = fileUrl.split("/");
                 String url = this.getUrl(this.filedir + split[split.length - 1]);
                 return url;
             }
             return null;
         }
     
         //获取去掉参数的完整路径
         private String getShortUrl(String url) {
             String[] imgUrls = url.split("\\?");
             return imgUrls[0].trim();
         }
     
         // 获得url链接
         private String getUrl(String key) {
             // 设置URL过期时间为20年 3600l* 1000*24*365*20
             Date expiration = new Date(new Date().getTime() + 3600l * 1000 * 24 * 365 * 20);
             // 生成URL
             OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
             URL url = ossClient.generatePresignedUrl(bucketName, key, expiration);
             if (url != null) {
                 return getShortUrl(url.toString());
             }
             return null;
         }
     
         // 上传文件
         private String uploadImg2Oss(MultipartFile file) {
             //1、限制最大文件为20M
             if (file.getSize() > 1024 * 1024 *20) {
                 return "图片太大";
             }
     
             String fileName = file.getOriginalFilename();
             String suffix = fileName.substring(fileName.lastIndexOf(".")).toLowerCase(); //文件后缀
             String uuid = UUID.randomUUID().toString();
             String name = uuid + suffix;
     
             try {
                 InputStream inputStream = file.getInputStream();
                 this.uploadFile2OSS(inputStream, name);
                 return name;
             }
             catch (Exception e) {
                 return "上传失败";
             }
         }
     
     
         // 上传文件（指定文件名）
         private String uploadFile2OSS(InputStream instream, String fileName) {
             String ret = "";
             try {
                 //创建上传Object的Metadata
                 ObjectMetadata objectMetadata = new ObjectMetadata();
                 objectMetadata.setContentLength(instream.available());
                 objectMetadata.setCacheControl("no-cache");
                 objectMetadata.setHeader("Pragma", "no-cache");
                 objectMetadata.setContentType(getcontentType(fileName.substring(fileName.lastIndexOf("."))));
                 objectMetadata.setContentDisposition("inline;filename=" + fileName);
                 //上传文件
     
                 OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
                 PutObjectResult putResult = ossClient.putObject(bucketName, filedir + fileName, instream, objectMetadata);
                 ret = putResult.getETag();
             } catch (IOException e) {
                 log.error(e.getMessage(), e);
             } finally {
                 try {
                     if (instream != null) {
                         instream.close();
                     }
                 } catch (IOException e) {
                     e.printStackTrace();
                 }
             }
             return ret;
         }
     
         private static String getcontentType(String FilenameExtension) {
             if (FilenameExtension.equalsIgnoreCase(".bmp")) {
                 return "image/bmp";
             }
             if (FilenameExtension.equalsIgnoreCase(".gif")) {
                 return "image/gif";
             }
             if (FilenameExtension.equalsIgnoreCase(".jpeg") ||
                     FilenameExtension.equalsIgnoreCase(".jpg") ||
                     FilenameExtension.equalsIgnoreCase(".png")) {
                 return "image/jpeg";
             }
             if (FilenameExtension.equalsIgnoreCase(".html")) {
                 return "text/html";
             }
             if (FilenameExtension.equalsIgnoreCase(".txt")) {
                 return "text/plain";
             }
             if (FilenameExtension.equalsIgnoreCase(".vsd")) {
                 return "application/vnd.visio";
             }
             if (FilenameExtension.equalsIgnoreCase(".pptx") ||
                     FilenameExtension.equalsIgnoreCase(".ppt")) {
                 return "application/vnd.ms-powerpoint";
             }
             if (FilenameExtension.equalsIgnoreCase(".docx") ||
                     FilenameExtension.equalsIgnoreCase(".doc")) {
                 return "application/msword";
             }
             if (FilenameExtension.equalsIgnoreCase(".xml")) {
                 return "text/xml";
             }
             //PDF
             if (FilenameExtension.equalsIgnoreCase(".pdf")) {
                 return "application/pdf";
             }
             return "image/jpeg";
         }
     }
     

   • Controller类

     //这个Controller不仅完成了博客的新增，也完成博客的修改功能 
     @PostMapping("/blog/insert")
         public String insert(@RequestParam(value = "file")MultipartFile file, Blog blog, RedirectAttributes attributes, HttpSession session){
         //注意此部分的格式    @RequestParam(value = "file")MultipartFile file
             //此处做一个判断 由于数据回显，前端得到的picture属性值是一个URL，如果不修改图片直接提交，则传入的不是图片，由于图片没有改动，所以我们可以判断传入的内容，如果是"image/jpeg",则证明重新上传了图片，当然如果是新增博客，也是上传了照片，则调用OSS工具类
             if(file.getContentType().equals("image/jpeg")){
                 //调用工具类
                 String url=ossUtils.uploadFile(file);
                 //将得到的URL赋值给名为picture的字段
                 blog.setPicture(url);
             }else {
                 //如果没有修改图片，则获取此博客的之前的picture属性值，重新赋值
                 blog.setPicture(blogService.getBlog(blog.getId()).getPicture());
             }
         }
     

   • HTML

     <!--注意  由于我们实体类定义的picture字段类型为String,所以此处我们不能将name值设为我们的字段名-->
     <div class="box">
         <input type="file" name="file" id="picture" class="inputfile inputfile-2" />
         <label for="picture"><i class="ui cloud upload icon"></i><span th:text="*{picture}=='' ? '博客首图' : *{picture}">博客首图</span></label>
     </div>
     

2. 弹出框用于新增修改标签信息

   大概意思就是，设置一个弹框，点击事件触发显示，当点击新增标签时，跳出弹框，然后填写信息，点击提交，当我点击编辑标签，也能跳出这个弹框，但是同时也能回显标签原始信息。

   ​ 下面是弹框的代码:

   <div class="ui container">
       <div class="sy-alert sy-alert-model animated" id="light">
           <div class="ui center sy-title"  id="title">添加标签</div>
               <form class="ui form" id="form" method="post" action="#" th:action="@{/admin/tags/update}">
                   <div class="ui segment">
                       <input type="hidden" name="id" id="id">
                       <div class="required field">
                           <div class="ui left icon input">
                               <i class="tags icon"></i>
                               <input type="text" name="name" id="name" placeholder="请输入标签名称....">
                           </div>
                       </div>
                   </div>
                   <div class="ui center aligned container">
                       <button id="clear" type="button" class="ui tiny orange button">取消</button>
                       <button  class="ui tiny teal button">确定</button>
                   </div>
   
               </form>
           </div>
       </div>
   </div>
   

   ​ 下面是Controller代码：

   根据前端传递过来的id值，判断是做修改，还是新增。首先先判断标签名是否重复，然后id值如果为-，则为新增标签，否则则是修改标签

   //修改(增加)标签
   @PostMapping("/tags/update")
   public String update(@Validated Tag tag, BindingResult  result,HttpServletRequest request, RedirectAttributes attributes){
       Long id=Long.parseLong(request.getParameter("id"));
       Tag tag01 = tagService.getTagByName(tag.getName());
       if(tag01!=null){
           attributes.addFlashAttribute("message01","不能重复添加标签！");
           return "redirect:/admin/tags";
       }
       if(id!=-1){
           tagService.updateTag(id,tag);
           attributes.addFlashAttribute("message","标签修改成功！");
           return "redirect:/admin/tags";
       }else {
           tagService.saveTag(tag);
           attributes.addFlashAttribute("message","标签添加成功！");
           return "redirect:/admin/tags";
       }
   }
   

   • 首先是新增功能

     • 新增按钮

       <div class="right aligned column">
           <button class="ui right floated blue basic button" onclick="insert()">新增</button>
       </div>
       

     • 点击触发函数

       //新增标签
       function insert() {
           clearContent();
           document.getElementById('title').innerText='新增标签';
           document.getElementById('light').style.display = 'block';
       };
       //清空回显信息
       //由于弹框复用，所以使用前先清除之前回显的信息
       function clearContent(){
           $("#id").val(-1);
           $("#name").val('');
       };
       

   • 修改功能

     • 修改按钮

       <a href="#" class="ui mini teal button" th:onclick="update([[${tag.id}]])">编辑</a>
       

     • 触发函数 此处用到Ajax

       function update(id) {
           document.getElementById('light').style.display = 'block';
           document.getElementById('title').innerText='修改标签';
           str =JSON.stringify(id);
           $.ajax({
               type: 'post',
               dataType: 'json',
               cache: 'false',
               url: 'tags/get',
               data: {"id": str},
               success: function (data) {
                   //将数据回显到弹窗
                   $("#id").val(data.id);
                   $("#name").val(data.name);
               },
           })
       }