vue+Element ui实现照片墙效果

本文实例为大家分享了vue+Element ui实现照片墙效果的具体代码，供大家参考，具体内容如下

上面是我要实现的效果。直接上代码，简洁明了

1.前端视图代码

2.前端script部分代码

3.api接口js

import request from '@/utils/request'

// 查询图片列表
export function listNetSecurityImg(query) {
  return request({
    url: 'netSecurityImg/getList',
    method: 'post',
    data: query
  })
}

// 删除图片
export function delNetSecurityImg(id) {
  return request({
    url: 'netSecurityImg/delete?id=' + id,
    method: 'post'
  })
}

4.表的设计

注意，后台接口上传图片文件是上传到文件服务器的，文件服务器返回的图片url进入到数据库