Question

对于已经上传的图片，可以创建一个文件库来管理，这样不但可以重复利用图片，还可以编辑，如果不再需要了，可以执行删除操作。

7.5.1 本地文件库建模

在 Neo4j 数据库中增加一个用来保存图片信息的图片节点，代码清单 7-14 是图片节点 Picture 的实体建模，其中 fileName 用来保存从 FastFDS 返回的文件路径，pathInfo 用来保存完整的文件链接前半部分路径，即代码清单 7-11 中的 pathHead 参数的值。

代码清单 7-14 图片节点实体建模

@NodeEntity
public class Picture {
    @GraphId
    private Long id;
    private String pathInfo;
    private String fileName;
    private int width;
    private int height;
    private String flag;
    @DateLong
    private Date create;
private Long shopid;……





}

7.5.2 文件保存方法

代码清单 7-15 是一个保存文件的后台线程，使用后台线程来执行保存文件的方法，将会在不影响界面上操作的情况下，从后台中稍稍地执行 savePic 方法。

代码清单 7-15 保存文件的线程

AsyncThreadPool.getInstance().execute(new Runnable() {
                @Override
                public void run() {
                    try {
                        savePic(upfile, filename ,shopid);
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
            });

savePic 方法的定义如代码清单 7-16 所示，它调用数据库服务类 PictureService，将文件信息保存到数据库中。其中使用 ImageIO 来读取文件的高度和宽度。

代码清单 7-16 保存文件的方法

@Autowired
    private PictureService pictureService;
            private void savePic(MultipartFile multipartFile, String filename,
Longshopid) throws Exception{
        BufferedImage image = ImageIO.read(multipartFile.getInputStream());
        Picture picture = new Picture();
        picture.setFileName(filename);
        picture.setHeight(image.getHeight());
        picture.setWidth(image.getWidth());
        picture.setPathInfo(pathHead);
        picture.setCreate(new Date());
        picture.setShopid(shopid);
        pictureService.create(picture);
    }

数据库服务类 PictureService 的定义如代码清单 7-17 所示，它调用资源库接口 pictureRepository 和分页查询服务类 pagesService，提供增删查改及其分页查询功能。

代码清单 7-17 数据库服务类 PictureService

@Service
public class PictureService {
    @Autowired
    private PictureRepository pictureRepository;
    @Autowired
    private PagesService<Picture> pagesService;
    public Picture findById(Long id) {
        return pictureRepository.findOne(id);
    }
    public Picture create(Picture picture) {
        return pictureRepository.save(picture);
    }
    public Picture update(Picture picture) {
        return pictureRepository.save(picture);
    }
    public void delete(Long id) {
        Picture picture = pictureRepository.findOne(id);
        pictureRepository.delete(picture);
    }
    public Picture findByName(String name){
        return pictureRepository.findByFileName(name);
    }
    public void delete(Picture picture){
        pictureRepository.delete(picture);
    }
    public Iterable<Picture> findAll(){
        return pictureRepository.findAll();
    }
    public Page<Picture> findPage(PictureQo pictureQo){
        Pageable pageable = new PageRequest(pictureQo.getPage(), pictureQo.getSize(), new Sort(Sort.Direction.ASC, "id"));
        Filters filters = new Filters();
        if (!StringUtils.isEmpty(pictureQo.getFileName())) {
            Filter filter = new Filter("name", pictureQo.getFileName());
            filters.add(filter);
        }
        if (!StringUtils.isEmpty(pictureQo.getShopid())) {
            Filter filter = new Filter("shopid", pictureQo.getShopid());
            filter.setComparisonOperator(ComparisonOperator.EQUALS);
            filter.setBooleanOperator(BooleanOperator.AND);
            filters.add(filter);
        }
        return pagesService.findAll(Picture.class, pageable, filters);
    }
}

7.5.3 文件库管理

保存图片信息之后，可以取出已经上传的图片列表，按需选择可用的图片，不需要的图片，也可以删除。需要注意的是，删除图片时，不但要删除文件库 Picture 的图片信息，而且要删除 FastFDS 服务器上的文件。

代码清单 7-18 是取图片列表的控制器设计，它将返回一个 Page 对象，其中包含 Picture 列表，列表将由视图处理并按页显示出来以供用户选择使用。

代码清单 7-18 取图片列表控制器设计

        @RequestMapping(value = "/listPic", method = RequestMethod.POST)
    @ResponseBody
    public Page<Picture> listPic(PictureQo pictureQo) throws IOException{
        Long shopid = 1L;
        pictureQo.setShopid(shopid);
        return pictureService.findPage(pictureQo);
    }

代码清单 7-19 是取图片列表的视图设计部分的 js 编码，它从上面定义的控制器中取得列表后，按每行 4 张图片、每页 2 行的格式来显示列表。

代码清单 7-19 取图片列表视图设计部分的 js 编码

// 分页数据





function getDataHtml(pageNo,pagesize) {
    $.ajax({
        url: "/pic/listPic",
        dataType: "json",
        type: "POST",
        cache: false,
        data: {page: pageNo-1,size: pagesize || 8},
        success: function (data) {
            var $list = $('#upload-list').empty();
            $.each(data.content, function (i, v) {
                var html = "";
                html += '<div class="upload-item">'+
                    '<div class="img"><img src="'+ v.pathInfo + v.fileName + '"
/></div>'+
                    '<p>'+v.width+'x'+ v.height+'</p>'+
                    '<div class="selected"></div>'+
                    '</div>';
                $list.append($(html));
            })
            page.photos.setPosition();
            document.getElementById('pagebar').innerHTML = PageBarNumList.get
PageBar(data.number+1, data.totalPages, 3, 'getDataHtml',pagesize || 8,true);
        },
        error: function (e) {}
    });
}

最后完成的效果如图 7-4 所示。这样，当在图片中单击选择一张图片后，再单击确定按钮即可使用这张图片，单击删除按钮将删除这张图片。

图 7-4 本地文件库管理效果图