栏目添加缩略图

MylQl · Mar 12, 2019 · 58c08be · 58c08be
1 parent 97caa73
commit 58c08be
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 25 deletions.
diff --git a/src/main/java/com/mtons/mblog/base/lang/Consts.java b/src/main/java/com/mtons/mblog/base/lang/Consts.java
@@ -29,6 +29,8 @@ public interface Consts {
 	 */
 	String SEPARATOR = ",";
 
+	String SEPARATOR_X = "x";
+
 	String ROLE_ADMIN = "admin";
 
 	int PAGE_DEFAULT_SIZE = 10;
@@ -119,4 +121,9 @@ interface order {
 	String EMAIL_TEMPLATE_CODE = "email_code.ftl";
 
 	String EDITOR_MARKDOWN = "markdown";
+
+	String STORAGE_LIMIT_SIZE = "storage_limit_size";
+	String STORAGE_MAX_WIDTH = "storage_max_width";
+
+	String THUMBNAIL_POST_SIZE = "thumbnail_post_size";
 }
diff --git a/src/main/java/com/mtons/mblog/config/SiteOptions.java b/src/main/java/com/mtons/mblog/config/SiteOptions.java
@@ -13,7 +13,9 @@
 import org.springframework.boot.context.properties.ConfigurationProperties;
 import org.springframework.context.annotation.Configuration;
 
+import javax.validation.constraints.NotNull;
 import java.util.HashMap;
+import java.util.List;
 import java.util.Map;
 
 /**
@@ -78,7 +80,22 @@ public void setOptions(Map<String, String> options) {
     }
 
     public String getValue(String key) {
-        return options.get(key);
+        String value = options.get(key);
+        return null != value ? value.trim() : null;
+    }
+
+    public Integer getIntegerValue(String key) {
+        return Integer.parseInt(options.get(key));
+    }
+
+    public Integer[] getIntegerArrayValue(String key, String separator) {
+        @NotNull String value = getValue(key);
+        String[] array = value.split(separator);
+        Integer[] ret = new Integer[array.length];
+        for (int i = 0; i < array.length; i ++) {
+            ret[i] = Integer.parseInt(array[i]);
+        }
+        return ret;
     }
 
     public boolean hasValue(String key) {

diff --git a/src/main/java/com/mtons/mblog/modules/entity/Channel.java b/src/main/java/com/mtons/mblog/modules/entity/Channel.java
@@ -38,6 +38,12 @@ public class Channel implements Serializable {
 	@Column(name = "key_", unique = true, length = 32)
 	private String key;
 
+	/**
+	 * 预览图
+	 */
+	@Column(length = 128)
+	private String thumbnail;
+
 	private int status;
 
 	public int getId() {
@@ -71,4 +77,12 @@ public int getStatus() {
 	public void setStatus(int status) {
 		this.status = status;
 	}
+
+	public String getThumbnail() {
+		return thumbnail;
+	}
+
+	public void setThumbnail(String thumbnail) {
+		this.thumbnail = thumbnail;
+	}
 }
diff --git a/src/main/java/com/mtons/mblog/web/controller/site/posts/UploadController.java b/src/main/java/com/mtons/mblog/web/controller/site/posts/UploadController.java
@@ -52,8 +52,8 @@ public class UploadController extends BaseController {
     public UploadResult upload(@RequestParam(value = "file", required = false) MultipartFile file,
                                HttpServletRequest request) throws IOException {
         UploadResult result = new UploadResult();
-        int crop = ServletRequestUtils.getIntParameter(request, "crop", 0);
-        int size = ServletRequestUtils.getIntParameter(request, "size", 800);
+        String crop = request.getParameter("crop");
+        int size = ServletRequestUtils.getIntParameter(request, "size", siteOptions.getIntegerValue(Consts.STORAGE_MAX_WIDTH));
 
         // 检查空
         if (null == file || file.isEmpty()) {
@@ -68,7 +68,7 @@ public UploadResult upload(@RequestParam(value = "file", required = false) Multi
         }
 
         // 检查大小
-        String limitSize = siteOptions.getValue("storage_limit_size");
+        String limitSize = siteOptions.getValue(Consts.STORAGE_LIMIT_SIZE);
         if (StringUtils.isBlank(limitSize)) {
             limitSize = "2";
         }
@@ -79,9 +79,10 @@ public UploadResult upload(@RequestParam(value = "file", required = false) Multi
         // 保存图片
         try {
             String path;
-            if (crop == 1) {
-                int width = ServletRequestUtils.getIntParameter(request, "width", 360);
-                int height = ServletRequestUtils.getIntParameter(request, "height", 200);
+            if (StringUtils.isNotBlank(crop)) {
+                Integer[] imageSize = siteOptions.getIntegerArrayValue(crop, Consts.SEPARATOR_X);
+                int width = ServletRequestUtils.getIntParameter(request, "width", imageSize[0]);
+                int height = ServletRequestUtils.getIntParameter(request, "height", imageSize[1]);
                 path = storageFactory.get().storeScale(file, Consts.thumbnailPath, width, height);
             } else {
                 path = storageFactory.get().storeScale(file, Consts.thumbnailPath, size);

diff --git a/src/main/resources/application.yml b/src/main/resources/application.yml
@@ -80,5 +80,7 @@ site:
         site_logo: /dist/images/logo/logo.png
         site_favicon: /dist/images/logo/m.png
         storage_max_width: 800
-        storeage_limit_size: 2
+        storage_limit_size: 2
         editor: markdown
+        thumbnail_channel_size: 200x112
+        thumbnail_post_size: 360x200
diff --git a/src/main/resources/scripts/schema.sql b/src/main/resources/scripts/schema.sql
@@ -24,16 +24,17 @@ CREATE TABLE `mto_channel` (
   `key_` varchar(32) DEFAULT NULL,
   `name` varchar(32) DEFAULT NULL,
   `status` int(11) NOT NULL,
+  `thumbnail` varchar(128) DEFAULT NULL,
   PRIMARY KEY (`id`)
 ) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;
 
 -- ----------------------------
 -- Records of mto_channel
 -- ----------------------------
-INSERT INTO `mto_channel` VALUES ('1', 'banner', 'banner', '1');
-INSERT INTO `mto_channel` VALUES ('2', 'blog', '博客', '0');
-INSERT INTO `mto_channel` VALUES ('3', 'jotting', '随笔', '0');
-INSERT INTO `mto_channel` VALUES ('4', 'share', '分享', '0');
+INSERT INTO `mto_channel` VALUES ('1', 'banner', 'banner', '1', '');
+INSERT INTO `mto_channel` VALUES ('2', 'blog', '博客', '0', '');
+INSERT INTO `mto_channel` VALUES ('3', 'jotting', '随笔', '0', '');
+INSERT INTO `mto_channel` VALUES ('4', 'share', '分享', '0', '');
 
 -- ----------------------------
 -- Table structure for mto_options

diff --git a/src/main/resources/static/dist/js/modules/post.js b/src/main/resources/static/dist/js/modules/post.js
@@ -47,7 +47,7 @@ define(function(require, exports, module) {
 
         bindUpload : function () {
             $('#upload_btn').change(function(){
-                $(this).upload(_MTONS.BASE_PATH + '/post/upload?crop=1', function(data){
+                $(this).upload(_MTONS.BASE_PATH + '/post/upload?crop=thumbnail_post_size', function(data){
                     if (data.status == 200) {
                         var path = data.path;
                         $("#thumbnail_image").css("background", "url(" + path + ") no-repeat scroll center 0 rgba(0, 0, 0, 0)");

diff --git a/src/main/resources/templates/admin/channel/view.ftl b/src/main/resources/templates/admin/channel/view.ftl
@@ -12,37 +12,51 @@
     <div class="row">
         <div class="col-md-12">
             <form id="qForm" class="form-horizontal form-label-left" method="post" action="update">
+                <#if view??>
+                    <input type="hidden" name="id" value="${view.id}" />
+                </#if>
+                <input type="hidden" id="thumbnail" name="thumbnail" value="${view.thumbnail}">
                 <div class="box">
                     <div class="box-header with-border">
                         <h3 class="box-title">修改栏目</h3>
                     </div>
                     <div class="box-body">
-                        <#include "/admin/message.ftl">
-                        <#if view??>
-                            <input type="hidden" name="id" value="${view.id}" />
-                        </#if>
-
                         <div class="form-group">
-                            <label class="col-lg-3 control-label">名称：</label>
-                            <div class="col-lg-4">
+                            <label class="col-lg-2 control-label">名称</label>
+                            <div class="col-lg-3">
                                 <input type="text" name="name" class="form-control" value="${view.name}" required>
                             </div>
                         </div>
                         <div class="form-group">
-                            <label class="col-lg-3 control-label">唯一标识：</label>
-                            <div class="col-lg-4">
+                            <label class="col-lg-2 control-label">唯一标识</label>
+                            <div class="col-lg-3">
                                 <input type="text" name="key" class="form-control" value="${view.key}" required>
                             </div>
                         </div>
                         <div class="form-group">
-                            <label class="col-lg-3 control-label">导航栏状态：</label>
-                            <div class="col-lg-4">
+                            <label class="col-lg-2 control-label">导航栏状态</label>
+                            <div class="col-lg-3">
                                 <select name="status" class="form-control" data-select="${view.status}">
                                     <option value="0">显示</option>
                                     <option value="1">隐藏</option>
                                 </select>
                             </div>
                         </div>
+                        <div class="form-group">
+                            <label class="col-lg-2 control-label">缩略图</label>
+                            <div class="col-lg-3">
+                                <div class="thumbnail-box">
+                                    <div class="convent_choice" id="thumbnail_image" <#if view.thumbnail?? && view.thumbnail?length gt 0> style="background: url(${base + view.thumbnail}) no-repeat scroll top;" </#if>>
+                                        <div class="upload-btn">
+                                            <label>
+                                                <span>点击选择一张图片</span>
+                                                <input id="upload_btn" type="file" name="file" accept="image/*" title="点击添加图片">
+                                            </label>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                     <div class="box-footer">
                         <button type="submit" class="btn btn-primary">提交</button>
@@ -56,6 +70,15 @@
 var J = jQuery;
 
 $(function() {
+    $('#upload_btn').change(function(){
+        $(this).upload('${base}/post/upload?crop=thumbnail_channel_size', function(data){
+            if (data.status == 200) {
+                var path = data.path;
+                $("#thumbnail_image").css("background", "url(" + path + ") no-repeat scroll center 0 rgba(0, 0, 0, 0)");
+                $("#thumbnail").val(path);
+            }
+        });
+    });
 })
 </script>
 </@layout>
diff --git a/src/main/resources/templates/admin/post/view.ftl b/src/main/resources/templates/admin/post/view.ftl
@@ -80,7 +80,7 @@
 <script type="text/javascript">
 $(function() {
     $('#upload_btn').change(function(){
-        $(this).upload('${base}/post/upload?crop=1', function(data){
+        $(this).upload('${base}/post/upload?crop=thumbnail_post_size', function(data){
             if (data.status == 200) {
                 var path = data.path;
                 $("#thumbnail_image").css("background", "url(" + path + ") no-repeat scroll center 0 rgba(0, 0, 0, 0)");