智能图像处理平台：图片管理
接着我们讲图片管理，先实现图片基础的增删改查，再去考虑图像处理。
主要是，我们需要完成查询时，查询的图片的上传者的角色等级小于等于我们当前登陆账号。
后端controller：
package com.llpp.controller;
import cn.hutool.json.JSONUtil;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.llpp.entity.Image;
import com.llpp.entity.User;
import com.llpp.service.impl.ImageServiceImpl;
import com.llpp.service.impl.RedisService;
import com.llpp.tool.PrimaryKey;
import com.llpp.tool.Result;
import com.llpp.vo.ImageVO;
import lombok.RequiredArgsConstructor;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import java.time.LocalDateTime;
import java.util.Objects;
import java.util.Optional;
/**
* @Author 21326
* @Date 2025 2025/2/25 22:23
*/
@RestController
@RequiredArgsConstructor
@RequestMapping("/api/image")
public class ImageController {
private final RedisService redisService;
private final ImageServiceImpl imageService;
@GetMapping("/getPage")
public Result getPage(Page<ImageVO> page, ImageVO image, HttpServletRequest request) {
String token = request.getHeader("authorization");
token = token.substring(token.indexOf(" ") + 1);
String user = redisService.getValueOrDefault(token, "").toString();
image.setRoleId(JSONUtil.toBean(user, User.class).getRoleId());
return Result.data(imageService.getPage(page, image));
}
@PostMapping("/rowSave")
public Result rowSave(@RequestBody Image image, HttpServletRequest request) {
return Optional.ofNullable(image)
.filter(i -> !StringUtils.isEmpty(i.getUrl()))
.filter(i -> !StringUtils.isEmpty(i.getName()))
.map(i -> {
String token = request.getHeader("authorization");
token = token.substring(token.indexOf(" ") + 1);
String user = redisService.getValueOrDefault(token, "").toString();
User info = JSONUtil.toBean(user, User.class);
i.setStatus(0);
i.setUserId(info.getId());
i.setId(new PrimaryKey().nextId());
i.setCreateTime(LocalDateTime.now());
return Result.status(imageService.save(i));
})
.orElse(Result.fail("参数异常"));
}
@PostMapping("/rowEdit")
public Result rowEdit(@RequestBody Image image) {
return Optional.ofNullable(image)
.filter(i -> Objects.nonNull(i.getId()))
.map(i -> Result.status(imageService.updateById(i)))
.orElse(Result.fail("参数异常"));
}
@PostMapping("/rowDel")
public Result rowDel(@RequestBody Image image) {
return Optional.ofNullable(image)
.filter(i -> Objects.nonNull(i.getId()))
.map(i -> Result.status(imageService.removeById(i.getId())))
.orElse(Result.fail("参数异常"));
}
}
service:
@Service
public class ImageServiceImpl extends ServiceImpl<ImageMapper, Image> implements IImageService {
@Override
public IPage<ImageVO> getPage(IPage<ImageVO> page, ImageVO image) {
return baseMapper.getPage(page, image);
}
}mapper:
package com.llpp.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.llpp.entity.Image;
import com.llpp.vo.ImageVO;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
/**
* @Author 21326
* @Date 2025 2025/1/31 20:44
*/
@Mapper
public interface ImageMapper extends BaseMapper<Image> {
IPage<ImageVO> getPage(IPage<ImageVO> page, @Param("image") ImageVO imageVO);
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.llpp.mapper.ImageMapper">
<select id="getPage" resultType="com.llpp.vo.ImageVO">
SELECT i.id,i.deleted,i.status,i.remark,i.name,i.url,i.result,i.create_time,u.username,r.name AS role_name
FROM image i
LEFT JOIN user u ON i.user_id = u.id
LEFT JOIN role r ON u.role_id = r.id
WHERE i.deleted=0
AND u.deleted=0
AND r.deleted=0
AND u.role_id >= #{image.roleId}
AND r.id >= #{image.roleId}
<if test="image.id != null">
AND i.id = #{image.id}
</if>
<if test="image.status != null">
AND i.status = #{image.status}
</if>
<if test="image.startTime != null">
AND i.create_time >= #{image.startTime}
</if>
<if test="image.endTime != null">
AND i.create_time <= #{image.endTime}
</if>
<if test="image.name != null and image.name !=''">
AND i.name LIKE CONCAT('%',#{image.name},'%')
</if>
<if test="image.remark != null and image.remark !=''">
AND i.remark LIKE CONCAT('%',#{image.remark},'%')
</if>
<if test="image.username != null and image.username !=''">
AND u.username LIKE CONCAT('%',#{image.username},'%')
</if>
<if test="image.roleName != null and image.roleName !=''">
AND r.name LIKE CONCAT('%',#{image.roleName},'%')
</if>
</select>
</mapper>image.js：
import request from '@/router/axios';
import {baseUrl} from '@/config/env';
export const getPage = (current, size, params) => {
return request({
url: baseUrl + '/image/getPage',
method: 'get',
params: {
current,
size,
...params
}
})
}
export const rowSave = (form) => {
return request({
url: baseUrl + '/image/rowSave',
method: 'post',
data: form
})
}
export const rowEdit = (row) => {
return request({
url: baseUrl + '/image/rowEdit',
method: 'post',
data: row
})
}
export const rowDel = (row) => {
return request({
url: baseUrl + '/image/rowDel',
method: 'post',
data: row
})
}image.vue:
<template>
<basic-container>
<avue-crud :option="option"
:search="search"
:page="page"
v-model="form"
:table-loading="loading"
:data="tableData"
ref="crud"
@row-update="rowUpdate"
@row-save="rowSave"
@row-del="rowDel"
@search-change="searchChange"
@search-reset="searchReset"
@current-change="currentChange"
@size-change="sizeChange"
@refresh-change="refreshChange"
@on-load="onLoad">
</avue-crud>
</basic-container>
</template>
<script>
import {getPage, rowDel, rowEdit, rowSave} from "@/api/image/image";
export default {
name: "image",
data() {
return {
option: {
height: 'auto',
stripe: true,
tip: false,
searchShow: true,
searchMenuSpan: 6,
border: true,
index: false,
viewBtn: true,
addBtn: true,
delBtn: true,
editBtn: true,
column: [
{
label: '图片编号',
prop: 'id',
search: true,
width: 120,
span: 24,
addDisplay: false,
editDisplay: false,
viewDisplay: true,
},
{
label: '图片名称',
prop: 'name',
search: true,
span: 24,
rules: [{required: true, message: '请输入图片名称', trigger: 'blur'}]
},
{
label: '上传用户',
prop: 'username',
search: true,
span: 24,
addDisplay: false,
editDisplay: false,
viewDisplay: true,
},
{
label: '上传时间',
prop: 'createTime',
type: 'datetime',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
search: true,
searchRange: true,
span: 24,
addDisplay: false,
editDisplay: false,
viewDisplay: true,
startPlaceholder: '时间日期开始范围自定义',
endPlaceholder: '时间日期结束范围自定义',
},
{
label: '用户角色',
prop: 'roleName',
search: true,
width: 70,
span: 24,
addDisplay: false,
editDisplay: false,
viewDisplay: true,
}, {
label: '状态',
prop: 'status',
type: 'select',
search: true,
width: 70,
span: 24,
addDisplay: false,
editDisplay: false,
viewDisplay: true,
props: {
label: 'label',
value: 'value'
},
dicData: [
{label: '已处理', value: 1},
{label: '未处理', value: 0}
],
},
{
label: '备注',
prop: 'remark',
search: true,
span: 24,
},
{
label: '图片详情',
prop: 'url',
type: 'upload',
width: 100,
span: 24,
listType: 'picture-img',
fileSize: 3584,
dataType: 'string',
action: '/api/file/upload',
propsHttp: {
res: 'data',
url: 'url',
},
},
{
label: '处理结果',
prop: 'result',
type: 'upload',
width: 100,
span: 24,
addDisplay: false,
editDisplay: false,
viewDisplay: true,
listType: 'picture-img',
fileSize: 3584,
dataType: 'string',
action: '/api/file/upload',
propsHttp: {
res: 'data',
url: 'url',
},
},
]
},
form: {},
search: {},
page: {
total: 0,
currentPage: 1,
pageSize: 10,
pageSizes: [5, 10, 15, 20, 50, 100, 150, 200]
},
query: {},
loading: false,
tableData: []
}
},
created() {
this.onLoad();
},
methods: {
onLoad(page, params = {}) {
this.loading = true;
if (this.query.createTime != undefined && this.query.createTime != null && this.query.createTime.length > 0) {
this.query.startTime = this.query.createTime[0];
this.query.endTime = this.query.createTime[1]
this.query.createTime = null;
}
getPage(this.page.currentPage, this.page.pageSize, Object.assign(params, this.query)).then(res => {
const data = res.data.data;
this.page.total = data.total;
this.tableData = data.records;
this.loading = false;
})
},
rowSave(form, done, loading) {
rowSave(form).then(res => {
if (res.data.code == 200) {
this.$message.success(res.data.msg);
done();
} else {
this.$message.error(res.data.msg);
loading();
}
}).then(() => {
this.onLoad();
}).catch(err => {
loading();
})
},
rowUpdate(row, index, done, loading) {
rowEdit(row).then(res => {
if (res.data.code == 200) {
this.$message.success(res.data.msg);
done();
} else {
this.$message.error(res.data.msg);
loading();
}
}).then(() => {
this.onLoad();
}).catch(err => {
loading();
})
},
rowDel(row, done, loading) {
rowDel(row).then(res => {
if (res.data.code == 200) {
this.$message.success(res.data.msg);
done();
} else {
this.$message.error(res.data.msg);
loading();
}
}).then(() => {
this.onLoad();
}).catch(err => {
loading();
})
},
searchReset() {
this.query = {}
this.onLoad(this.page)
},
searchChange(params, done) {
this.query = params
this.onLoad(this.page, params)
done()
},
currentChange(currentPage) {
this.page.currentPage = currentPage
},
sizeChange(pageSize) {
this.page.pageSize = pageSize
},
refreshChange(refresh) {
if (refresh) {
this.onLoad(this.page, this.query)
}
},
}
}
</script>
<style scoped>
</style>效果展示：
