✨✨个人主页:沫洺的主页

 📚📚系列专栏: 📖 JavaWeb专栏📖 JavaSE专栏 📖 Java基础专栏📖vue3专栏 

                           📖MyBatis专栏📖Spring专栏📖SpringMVC专栏📖SpringBoot专栏

💖💖如果文章对你有所帮助请留下三连✨✨

🧀图库效果图

描述:

在图库页面点击图片上传按钮,可通过Nginx服务器将图片保存到本地,并且将图片路径等信息保存到数据库,通过调用后端接口,可将数据库中存放的图片路径展示出来对应的图片

🥞环境搭建 

准备工作,上面提到我们需要Nginx代理服务器,先下载Nginx

 Nginx下载网址: nginx: download

解压到图片存储路径位置,可自定义(我的路径是D:\Develop\nginx-1.22.0\下,解压)
解压后在html下新建images文件夹(D:\Develop\nginx-1.22.0\nginx-1.22.0\html\images)

最后点击nginx.exe运行

找到C:\Windows\System32\drivers\etc文件夹
打开hosts文件(作用是定义IP地址和Host name(主机名)的映射关系)

添加一行127.0.0.1 moming.com(修改时可将此文件移到桌面,改好后覆盖源文件即可)

测试在images下放一个图片例如1.jpg

访问http://moming.com/images/1.jpg,访问成功即可

 创建数据库db5

CREATE TABLE `scm_images` (`id` int NOT NULL AUTO_INCREMENT COMMENT 'Id',`img` varchar(255) NOT NULL COMMENT '图片路径',`name` varchar(255) NOT NULL COMMENT '图片名称',`createTime` datetime NOT NULL COMMENT '上传时间',PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=14 DEFAULT CHARSET=utf8mb4;

🌭后端接口搭建 

SpringBoot+MyBatis

相关依赖

            org.springframework.bootspring-boot-starter-webcn.hutoolhutool-all5.8.5com.alibabadruid-spring-boot-starter1.2.9org.mybatis.spring.bootmybatis-spring-boot-starter2.1.4org.springframework.dataspring-data-jdbcmysqlmysql-connector-javaruntime

entity

@Data
public class ImagesEntity {private Integer id;private String img;//图片地址private String name;//图片名字private LocalDateTime createTime = LocalDateTimeUtil.now();
}

dto

@Data
public class ImagesDto {private String imgBase64;private String imgName;private String imgUrl;
}

mapper

@Mapper
public interface  ImagesMapper{@Select("select * from scm_images  order by createTime desc")List select();
}

service

@Service
public class ImagesService {@Autowiredprivate ImagesMapper imagesMapper;public Integer add(ImagesDto imagesDto){String base64 = imagesDto.getImgBase64();String[] dataArray = StrUtil.splitToArray(base64, "base64,");byte[] bytes = Base64.decode(dataArray[1]);String imgName = imagesDto.getImgName();imgName = IdUtil.fastSimpleUUID() +"_"+ imgName;FileUtil.writeBytes(bytes,"D:/Develop/nginx-1.22.0/nginx-1.22.0/html/images/"+imgName);ImagesEntity entity = new ImagesEntity();entity.setImg("http://moming.com/images/"+imgName);entity.setName(imagesDto.getImgName());int rowNum = imagesMapper.insert(entity);return rowNum;}public List select(){List entities = imagesMapper.select();List dtos = new ArrayList<>();for(ImagesEntity entity : entities){ImagesDto dto = new ImagesDto();dto.setImgUrl(entity.getImg());dtos.add(dto);}return dtos;}
}

controller

@RestController
@RequestMapping("/api/tuku")
public class ImagesController {@Autowiredprivate ImagesService imagesService;@PostMapping("/add")public Integer add(@RequestBody ImagesDto imagesDto){return imagesService.add(imagesDto);}@GetMapping("/select")public List select(){return imagesService.select();}}

🍕前端页面呈现

vue3-vite+TypeScript+Element Plus

api/tukuApi.ts

import http from "@/http/index"export default  {select:{name:"图库查询",url:"/api/tuku/select",call: async function (params:any = {}) {return await http.get(this.url,params);}},add:{name:"图库添加",url:"/api/tuku/add",call: async function (params:any) {return await http.post(this.url,params);}},
}

api/index.ts

import tukuApi from "./tukuApi";
export {tukuApi}

router/index.ts

import { createRouter, createWebHistory } from "vue-router";
const routes = [{path: '/tuku',name: 'tuku',component: () => import("@/views/tools/Tuku.vue"),meta:{ title:"图库" ,icon:"Coordinate",show:true,useFrame:true}},]
const router = createRouter({history: createWebHistory(),routes
})
export default router

views/tools/Tuku.vue