个人项目-图片服务器

最新推荐文章于 2024-03-05 21:50:40 发布

云雀在月

最新推荐文章于 2024-03-05 21:50:40 发布

阅读量388

点赞数

文章标签：服务器 servlet java

本文链接：https://blog.csdn.net/weixin_44252126/article/details/126342354

版权

一、项目背景

图床, 解决 github / 博客中插入图片的问题。

二、整体架构

核心就是一个 HTTP 服务器, 提供对图片的增删改查能力.
同时搭配简单的页面辅助完成图片上传/展示。需要实现的功能/接口：

显示图片列表；
显示图片内容；
上传图片；
删除图片；

三、技术分析

因为存在删除、上传的操作，所以前端页面需要是动态网页。实现动态网页的技术有三种：（1）servlet返回字符串拼接的html内容；（2）模板技术（3）ajax动态响应动态生成html内容。本次项目使用第三种方式。
图片的信息，包括：名称，Http路径，图片重复标识（为了避免上传的图片重复而存在的唯一标识，类似于hashcode字段）。信息需要存储在数据库中，返回在图片列表里，数据类型是List< T >。
图片的数据：在页面初始化的时候就由浏览器自动发ajax请求，展示出来。

四、业务设计

数据库设计：考虑包括的字段
接口设计：考虑请求方法，请求数据格式；响应数据
开发环境：前端（ajax,vue,jquery）;后端：servlet,JDBC,commons-codec（apache提供做加密的依赖包）,jackson,lombok。

五、详细设计

1.数据库设计

-- 准备表
create table image_info(
    image_id int primary key auto_increment comment'主键id',
    image_name varchar(50) comment'图片名称',
    size bigint comment'图片大小',
    upload_time datetime comment'图片上传日期',
    md5 varchar(128) comment 'md5值，用于校验图片唯一',
    content_type varchar(50) comment '数据类型，上传图片时包含在报文中的 ',
    path varchar(1024) comment'图片路径：相对路径'

);

2.实体类设计

在数据库建立好后，需要根据字段实现实体类，因为JDBC操作及返回http响应都需要使用实体类；

//lombok注解，加上以后，自动在编译的class文件中生成这些方法
@Getter
@Setter
@ToString
public class ImageInfo {
   
    private Integer imageId;
    private String imageName ;
    private long size;
    private java.util.Date uplaodeTime;
    private String md5;
    private String contentType;
    private String path;
}

3.前端设计

UI框架需要自己在网上找来使用，这里只做涉及到前后端交互的接口。

采用了VUE框架（可以让数据和DOM元素双向绑定），同时使用了jQuery中封装好的ajax函数来渲染页面和发送请求数据。VUE版本：2.6.12
前端的执行流程：

访问index.html，页面初始化就发送Ajax请求获取图片列表信息。对于返回的响应（这里要求返回imageID和imageName两个字段）通过vue的绑定渲染到相应的位置。从而显示图片列表。
有了图片列表，浏览器自动根据<img src=" "来发送请求获取图片内容。
上传图片功能的实现：利用vue绑定提交事件函数，提交form表单。事件函数：
删除图片：利用vue绑定删除事件函数即可。事件函数：

<!-- content srart -->
    <div class="am-g am-g-fixed blog-fixed blog-content">
        <figure data-am-widget="figure" class="am am-figure am-figure-default "   data-am-figure="{  pureview: 'true' }">
            <div id="container">
                <div v-for="image in images">
                <--这里使用了v-bind:src来拼接images数组里的内容--》
                    <img v-bind:src="'imageShow?imageId=' + image.imageId" style="height:200px; width:200px">
                    <h3 style="margin-left: auto; margin-right: auto;">{
   {
   image.imageName}}</h3>
                    <button style="width:100%" class="am-btn am-btn-success" v-on:click.stop="remove(image.imageId)">删除</button>
                </div>
            </div>
        </figure>
    </div>
</div>
<script>
    var app = new Vue({
   
        el:'#app',
        data: {
   
            images: [
            ],
            uploadImage: ''
        },
        methods: {
   
            getImages() {
   
                $.ajax({
   
                    url: "image",
                    type: "get",
                    context: this,
                    //响应码200时执行，将服务端响应的data赋值给images对象，随后便通过vue的绑定修改相应的dom，以后便可以渲染到页面上，
                    success: function(data, status) {
   
                        this.images = data;
                        $("#app")