守望博客是支持创建专栏的功能，即可以将一系列相关的文章归档到专栏中，方便用户管理和查阅文章。这里主要讲解专栏的创建、修改和删除功能，至于专栏还涉及其它的功能，例如关注专栏等后续会穿插着介绍。
1、创建专栏接收和处理专栏相关功能的操作的方法会放在GroupController类中，首先创建专栏的页面为：
这里有两个地方需要特别说明：
第一这个分类数据，此处分类数据正是本博客网站的分类数据，这个分类数据是系统初始化时加入的，这个初始化的功能后续会加入，目前此处就是提前将数据先写入到数据库中，例如本博客作为技术类博客，则分类有：前端、架构、区块链、云计算等。
然后这个分类信息数据一般初始化后，就不会有修改，则这个数据是放入缓存中，即，CategoryCache：
/** * 缓存分类信息 * 分类信息放到系统永久缓存中，存放形式为："_CATEGORY" + categoryId为key，value为分类信息对象 * * @author lzj * @since 1.0 * @date [2019-07-22] */ @Slf4j @DependsOn("categoryService") @Component("categoryCache") public class CategoryCache implements ICache<List<Category>> { /** * 注入基于Spring提供的Cache接口实例，默认由Ehcache实现 * TODO 以后也可以是Redis、Memcached提供实现 */ @Autowired private CacheManager cacheManager; @Autowired private ICategoryService categoryService; /** * 缓存实例 */ private Cache cache; /** * key的前缀 */ private String keyPrefix = "_CATEGORY"; /** * 分类信息根节点ID */ public static final String ROOT_CATEGORY_ID = "0"; @PostConstruct public void init() { // 获取系统永久缓存实例 cache = cacheManager.getCache(Const.CACHE_SYSTEM_ETERNAL); log.info("获取系统永久缓存实例"); log.debug("开始加载父分类信息"); List<Category> categorys = categoryService.getByParentId(ROOT_CATEGORY_ID); if (categorys != null && !categorys.isEmpty()) { put(keyPrefix + ROOT_CATEGORY_ID, categorys); } log.debug("加载完毕父分类信息"); } @Override public List<Category> get(Object key) { Cache.ValueWrapper valueWrapper = cache.get(keyPrefix + key); if (valueWrapper == null) { // 从数据库重新加载一次 List<Category> categorys = categoryService.getByParentId((String) key); if (categorys == null) { return null; } // 再次放到缓存中 put(key, categorys); return categorys; } return (List<Category>) valueWrapper.get(); } @Override public void put(Object key, List<Category> value) { cache.put(keyPrefix + key, value); } @Override public void remove(Object key) { cache.evict(keyPrefix + key); } }第二需要说明的是，此处的上传控制是用的webuploader，利用webuploader处理的上传文件的话，需要按如下方式初始化：
$(function() { var _list = $('#fileList'); var ratio = window.devicePixelRatio || 1; var thumbnailWidth = 100 * ratio; var thumbnailHeight = 100 * ratio; // 初始化Web Uploader var uploader = WebUploader.create({ // 选完文件后，是否自动上传。 auto: true, // swf文件路径 swf: '${rc.contextPath}/static/plugins/webuploader/Uploader.swf', // 文件接收服务端。 server: '${rc.contextPath}/upload', // 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick: '#filePicker', fileVal: "_uploadFile", formData: { _distId:'_distId', _distType:'_groupLogo', }, // 只允许选择图片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,png', mimeTypes: 'image/*' }, fileNumLimit: 1, fileSizeLimit: 2 * 1024 * 1024, // 2 M fileSingleSizeLimit: 2 * 1024 * 1024 // 2 M }); // 当有文件添加进来的时候 uploader.on( 'fileQueued', function( file ) { var li = $( '<div>' + '<img>' + // '<div>' + file.name + '</div>' + '</div>' ), img = li.find('img'); // _list为容器jQuery实例 _list.append( li ); // 创建缩略图 // 如果为非图片文件，可以不用调用此方法。 // thumbnailWidth x thumbnailHeight 为 100 x 100 uploader.makeThumb( file, function( error, src ) { if ( error ) { img.replaceWith('<span>不能预览</span>'); return; } img.attr( 'src', src ); }, thumbnailWidth, thumbnailHeight ); }); // 文件上传过程中创建进度条实时显示。 uploader.on( 'uploadProgress', function( file, percentage ) { }); // 文件上传成功，给item添加成功class, 用样式标记上传成功。 uploader.on( 'uploadSuccess', function(file, response) { $( '#'+file.id ).addClass('upload-state-done'); $( '#'+file.id ).append('<a href="javascript:void(0);">删除</a>' ) $("#logo").val(response.url); }); // 文件上传失败，显示上传出错。 uploader.on( 'uploadError', function( file ) { var li = $( '#'+file.id ), error = li.find('div.error'); // 避免重复创建 if ( !error.length ) { error = $('<div></div>').appendTo( li ); } error.text('上传失败'); }); // 完成上传完了，成功或者失败，先删除进度条。 uploader.on( 'uploadComplete', function( file ) { }); // 执行删除方法 _list.on('click', '.del', function () { var Id = $(this).parent().attr('id'); //删除该图片 uploader.removeFile(uploader.getFile(Id, true)); $(this).parent().remove(); $("#logo").val(""); }); });