【Java实战项目】【超详细过程】—— 大饼的图片服务器

news2024/11/18 22:58:01

目录

  • 一.下载前端模板
  • 二. 展示图片(index.htmll)
    • 1. 标题
    • 2. 页面跳转链接
    • 3. 图片展示
      • 引入js和vue依赖:写在html文件的head中
      • js代码:写在html文件中的body中
      • html代码:写在html文件的body中
  • 二. 删除图片
      • 在上面的vue对象app中直接加入一个删除方法
      • 将OPEN按钮改成删除按钮
  • 四. 上传图片
    • 1. 上传图片的前端代码(upload.html)
    • 2.更改后端代码
  • 五. 前端页面成果展示
    • 1.打开页面:
    • 2.上传图片展示:
    • 3.删除图片展示:

本文主要介绍了大饼的图片服务器前端页面的搭建过程


一.下载前端模板

我们可以在模板之家直接下载前端页面的模板
在这里插入图片描述

我下载的是这个模板:http://www.cssmoban.com/cssthemes/9035.shtml

由于我们下载的模板并不一定会和自己的项目所需要的功能完全贴合,所以此时我们需要更改前端代码来让我们的页面更加符合我们该项目的功能
首先分析一下我们这个图片服务器的功能:上传图片功能,展示图片功能,所以我们可以用两个页面来完成这些功能,一个展示页面的功能用index.html文件来写,而上传文件功能用upload.html文件来写


二. 展示图片(index.htmll)

打开模板我们可以看到该模板大概分为三个区域:标题,页面跳转去,图片展示区
在这里插入图片描述
我们可以将网页标题处改成自己的项目名称:大饼的博客系统
将页面跳转区域的内天荣改成我们所需要的上传文件的页面跳转
在图片区放置我们该项目所展示的图片,使用原来模板中自带的样式
在页面中按下F12或者右键选择检查,打开开发者工具,鼠标放置在自己所需要更改的元素上就能看到该元素的前端代码,例如:
在这里插入图片描述

1. 标题

首先我们来在页面上加入自己项目的名字
找到标题后,发现该模板的页面标题为图片格式,我们直接将图片换成文本
在这里插入图片描述
在这里插入图片描述
尽量不改变元素的类名和id等,这样就可以使用原来模板中自带的css样式了

2. 页面跳转链接

找到网页上的跳转链接的地方,然后更改他的链接和名称
在这里插入图片描述
在这里插入图片描述
<a href="./upload.html" >上传文件</a>
./upload.html:是上传文件的前端代码文件upload.html的文件地址

3. 图片展示

找到模板中放置图片的代码,然后将其中的图片链接换成我们前面设计好的查看图片的URL
在这里插入图片描述
将图片位置这部分换成:imageShow?imageId=10(根据前面咱们设计的)
在这里插入图片描述
在这里插入图片描述
由于我们需要查看到数据库中的所有的图片单靠这样写死的方法让其展现在页面上是不行的,这是我们就需要用到vue框架,利用代码循环读取数据库中的图片属性信息,然后用得到的图片id利用imageShow?imageId=得到的id来循环读取数据库中存储的图片的内容并且展示在页面上

引入js和vue依赖:写在html文件的head中

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

js代码:写在html文件中的body中

<script>
        var app = new Vue({
            el:'#image',
            data:{
                images: [
                ]
            },
            methods:{
                //GET/image
                getImages(){
                    $.ajax({
                        url:"image",
                        type:"get",
                        context:this,
                        success:function(data,status){
                        //发送请求成功的情况下执行,将获取到的返回值传给images
                            this.images = data;
                            $('#app').resize();
                        }
                    })
                }
            }
        })

    </script>

var app = new Vue({})

构造了一个vue实例,实例名为app

el:'#image'

将app这个实例与html文件中id为image的标签绑定

data:{ }

构造一个空的JSON对象,这个键值对的值为{ }中的内容

images: [ ]

创建一个空的images列表,这个图像列表作为的他这个键值对的值

methods:{ }

创建一个名为 methods的键,可以在该键中其中定义一组或几组方法,在需要的时候调用
这种数据结构通常用来表示应用程序或系统中的方法集合,例如获取数据、提交表单等。

getImages(){ }

定义一个方法,该方法没有参数也没有返回值

$.ajax({ } )

jQuery 中用于发送 AJAX 请求的函数,它接受一个包含各种参数的对象作为输入,并返回一个 Promise 对象

Promise 对象是 JavaScript 中用于处理异步操作的一种对象。它代表了一个尚未完成但预期在未来会完成的操作,通常用于处理异步请求、定时器等场景。
Promise 对象有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。当一个 Promise 对象被创建时,它的状态为 pending。当异步操作完成并返回结果时,Promise 对象的状态会变为 fulfilled 或 rejected。
Promise 对象提供了一些方法来处理异步操作的结果,例如 then()、catch() 和 finally()。then() 方法用于指定在异步操作成功时执行的回调函数,catch() 方法用于指定在异步操作失败时执行的回调函数,finally() 方法用于指定无论异步操作成功还是失败都要执行的回调函数。
通过使用 Promise 对象,可以更方便地管理和处理异步操作,避免回调地狱的问题,提高代码的可读性和可维护性。

url:"image", type:"get", context:this,
url参数指定了请求的 URL为image,type 参数指定了请求的方法为:get方法

success:function(data,status){ }

success 参数是一个回调函数,用于处理请求成功的情况,error 参数也是一个回调函数,用于处理请求失败的情况。
data:服务器返回的数据,通常是一个 JSON 对象或字符串。
status :HTTP 状态码,表示请求的状态,例如 200 表示请求成功,404 表示请求的资源未找到等。

this.images = data;

将服务器反悔的数据存储在列表images变量中,data:服务器返回的数据,

$('#app').resize();

用 jQuery 中的 resize () 方法,用于重新调整页面的大小

html代码:写在html文件的body中

可以根据f12在页面上找到一个自己喜欢的图片展示样式来更改,这样就可以直接使用模板自带的css样式,尽量不改动原来的类名和id等,以免.css中使用了这些选择器更改后选择器无法正确找到对应的代码

    <div id ="image" >
        <div v-for="image in images" >
            <div  class="brick tint size11 cat-2">
                <img v-bind:src = "'imageShow?imageId='+image.imageId" alt="" />
                <div class="overlay">
                    <h3 cla ss="project-title">欢迎使用大饼的图片服务器</h3>
                    <p class="project-description">欢迎查看图片{{image.imageName}}</p>
                </div>

            </div>

        </div>
    </div>

<div id ="image" > </div>

设置该标签的id为image,和vue的实例对象app绑定

<div v-for="image in images" > </div>

用v-for循环读取images中存储的值给image,每次循环都会生成一个新的div标签

<img v-bind:src = "'imageShow?imageId= '+image.imageId " alt="" />

利用v-bind将"'imageShow?imageId= '+image.imageId "绑定到图片的scr属性上,当 image.imageId 的值发生变化时,图片的 src 属性也会相应地更新

{{image.imageName}}

获取image中的imageName变量的内容,即输出了图片的的名字


二. 删除图片

查看模板我们可以发现在模板中鼠标悬停于图片上时会出现一个OPEN按钮,我们可以直接将这个按钮改成删除图片的的按钮
在这里插入图片描述
模板中对应的OPEN按钮的代码:
在这里插入图片描述

在上面的vue对象app中直接加入一个删除方法

<script>
        var app = new Vue({
            el:'#image',
            data:{
                images: [
                ]
            },
            methods:{
                remove(imageId){
                    $.ajax({
                        url:"image?imageId="+imageId,
                        type:"delete",
                        context:this,
                        success:function(data,status){
                            this.getImages();
                            alert("删除成功,请刷新");
                        }
                    })
                },
            }
        })
        app.getImages();

remove(imageId){ }

定义一个删除图片方法,该方法的传入参数为imageId

url:"image?imageId="+imageId, type:"delete", context:this,

url参数指定了请求的 URL为image,type 参数指定了请求的方法为:delete方法

this.getImages();

在请求执行成功的情况下调用上面的this.getImages()方法,获取到图片数据

alert("删除成功,请刷新");

在请求执行成功时弹出弹框,告诉用户图片删除操作已经成功,可以刷新页面

将OPEN按钮改成删除按钮

<a  class="open-project" v-on:click="remove(image.imageId)"><span class="pictogram">&#9842;</span> 删除</a>

v-on:click="remove(image.imageId)"

v-on时vue中的一个方法,用于监听动作,
v-on:click 代表v-on监听的动作是click,也就是说当点击元素时会触发后面的方法
remove(image.imageId) :调用方法remove(imageId),传入参数是imageId,也就是当前图片的imageId

&#9842;

Unicode 字符,代表一个回收的符号

查询Unicode字符表:https://www.rapidtables.org/zh-CN/code/text/unicode-characters.html
在这里插入图片描述


四. 上传图片

1. 上传图片的前端代码(upload.html)

因为我们一直使用的文件上传方式都是假设为from表单,所以我们的上传代码就直接用from表单即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传文件</title>
</head>
<body>
<form id="upload-form" action="image" method="post" enctype="multipart/form-data" >
    <input type="file" id="upload" name="upload" />
    <br />
    <!--上传文件按钮-->
    <input type="submit" value="Upload" />
</form>
</body>
</html>

然后根据自己的需求设置对应的样式即可

2.更改后端代码

在现在我们的后端代码中上传图片执行成功后反回的是:在这里插入图片描述
导致我们在上传文件完成后还需要手动返回主页面,非常麻烦用户体验感不好,我们可以在接更改这部分代码,让上传图片执行成功后跳转到主页面去

//3.给客户端返回一个结果
resp.sendRedirect("index.html");

五. 前端页面成果展示

1.打开页面:

在这里插入图片描述

2.上传图片展示:

上传图片前:
在这里插入图片描述
上传图片后:
在这里插入图片描述

3.删除图片展示:

删除前:

删除后:
在这里插入图片描述

在这里插入图片描述


感谢您对大饼的支持
今天的你也很辛苦,晚安,明天见!

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1019816.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【OWASP如何导出测试报告】

为什么我的OWASP无法导出报告&#xff1f;明明已经扫描完成了

【Linux从入门到精通】多线程 | 线程介绍线程控制

本篇文章主要对线程的概念和线程的控制进行了讲解。其中我们再次对进程概念理解。同时对比了进程和线程的区别。希望本篇文章会对你有所帮助。 文章目录 一、线程概念 1、1 什么是线程 1、2 再次理解进程概念 1、3 轻量级进程 二、进程控制 2、1 创建线程 pthread_create 2、2…

Postgresql与执行计划相关的配置项

1. ENABLE_*参数 在PostgreSQL中有一些以“ENABLE_”开头的参数&#xff0c;这些参数提供了影响查询优化器选择不同执行计划的方法。有时&#xff0c;如果优化器为特定查询选择的执行计划并不是最优的&#xff0c;可以设置这些参数强制优化器选择一个更好的执行计划来临时解决这…

java开发之个微朋友圈机器人的开发

简要描述&#xff1a; 取消点赞 请求URL&#xff1a; http://域名地址/snsCancelPraise 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选类型说明…

分子对接简介-2023

分子对接简介-2023 分子对接&#xff08;Molecular Docking&#xff09;是分子模拟的重要方法之一&#xff0c;其本质是两个或多个分子之间的识别过程&#xff0c;其过程涉及分子之间的空间匹配和能量匹配。这项技术在药物研发、生物医学研究和药物设计中具有广泛的应用&#…

简明 SQL 组合查询指南:掌握 UNION 实现数据筛选

在SQL中&#xff0c;组合查询是一种将多个SELECT查询结果合并的操作&#xff0c;通常使用UNION和UNION ALL两种方式。 UNION 用于合并多个查询结果集&#xff0c;同时去除重复的行&#xff0c;即只保留一份相同的数据。UNION ALL 也用于合并多个查询结果集&#xff0c;但不去除…

MapRdeuce工作原理

hadoop - (三)通俗易懂地理解MapReduce的工作原理 - 个人文章 - SegmentFault 思否 MapReduce架构 MapReduce执行过程 Map和Reduce工作流程 (input) ->map-> ->combine-> ->reduce-> (output) Map&#xff1a; Reduce

腾讯mini项目-【指标监控服务重构】2023-07-27

今日已办 SigNoz Log Management SigNoz原生支持 OpenTelemetry 来收集日志&#xff0c;SigNoz 在收集器端进行了优化&#xff0c;为SigNoz中的日志添加了不同的功能。 OpenTelemetry 提供了各种接收器和处理器&#xff0c;用于直接通过 OpenTelemetry Collector 或通过 Flue…

Everything+cpolar内网穿透轻松实现公网远程访问本地硬盘文件

公网远程访问本地硬盘文件【内网穿透】 文章目录 公网远程访问本地硬盘文件【内网穿透】前言1. 下载cpolar和Everything软件3. 设定http服务器端口4. 进入cpolar的设置5. 生成公网连到本地内网穿透数据隧道 总结 前言 随着云概念的流行&#xff0c;不少企业采用云存储技术来保…

建筑模板的抗震性能如何评估和测试?

评估和测试建筑模板的抗震性能通常涉及以下几个方面&#xff1a; 1. 材料测试&#xff1a;首先&#xff0c;需要对建筑模板所使用的材料进行力学性能测试。这包括测量材料的抗弯强度、抗压强度、剪切强度等参数。这些测试可以通过标准化的实验方法进行&#xff0c;例如使用万能…

Gavin Wood 演讲全文:建设更具韧性以应变化的 Polkadot

我们非常激动能邀请到 Gavin Wood 博士来现场分享关于 Polkadot 的近况以及最新的进展&#xff0c;带来他对于《加密项目应该怎样应对当今世界的变化》的演讲分享。 &#x1f6a9;点击视频链接观看演讲实录&#xff1a;https://www.youtube.com/watch?vYw3mQNJ5UJQ&t1048s…

数据驱动的仿真

数据驱动的仿真 数据驱动的仿真&#xff08;1&#xff09;动态状态估算。&#xff08;2&#xff09;在线模型调整。&#xff08;3&#xff09;动态事件重构。 数据驱动的仿真 数字孪生体之所以与传统仿真不同&#xff0c;是因为它产生之初就是数据驱动的。早在1979年&#xff…

10英寸及以上占比超7成!车载大屏保持高增速,哪些供应商在领跑?

中控大屏「上车」继续保持高增速态势。 高工智能汽车研究院监测数据显示&#xff0c;今年1-7月中国市场&#xff08;不含进出口&#xff09;乘用车前装标配搭载10英寸及以上大屏&#xff08;含多联屏&#xff09;交付775.16万辆&#xff0c;同比去年同期增长38.19%。 同时&am…

生信分析Python实战练习 7 | 视频24

开源生信 Python教程 生信专用简明 Python 文字和视频教程 源码在&#xff1a;https://github.com/Tong-Chen/Bioinfo_course_python 目录 背景介绍 编程开篇为什么学习Python如何安装Python如何运行Python命令和脚本使用什么编辑器写Python脚本Python程序事例Python基本语法 数…

Docker部署Canal监听MySQL binlog

文章目录 概念简述binlogCanal MySQL配置Canal配置创建挂载目录设置权限创建MySQl的Canal账户拉取镜像运行容器简单运行配置文件复制到宿主机修改配置文件删除之前运行的canal容器正式运行Canal容器 查看运行状态排查问题 概念简述 binlog MySQL的二进制日志binlog可以说是My…

支持向量机(SVM)案例分析

支持向量机&#xff08;support vector machines, SVM&#xff09;是一种二分类模型&#xff0c;所谓二分类模型是指比如有很多特征&#xff08;自变量X&#xff09;对另外一个标签项&#xff08;因变量Y&#xff09;的分类作用关系&#xff0c;比如当前有很多特征&#xff0c;…

MySQL 解决数据重复添加

1. sql语句: insert ignore into insert ignore into 表名 (xx1,xx2,xx3) VALUES (#{xx1},#{xx2},#{xx3}) 2. 复合索引

Vue基础入门---详细简介

一&#xff0c;对Vue的概念 1.1 什么是Vue &#xff1f; 一种流行的JavaScript前端框架&#xff0c;用于构建交互式的Web应用程序。它以简洁、灵活和高效的特性而受到广泛欢迎。Vue采用了一种响应式的数据绑定机制&#xff0c;使得数据的变化能够自动更新相关的DOM元素&#x…

无涯教程-JavaScript - COMBIN函数

描述 COMBIN函数返回给定数量的项目的组合数量。使用COMBIN确定给定数量的项目的组总数。 语法 COMBIN (number, number_chosen)争论 Argument描述Required/OptionalNumberThe number of items.RequiredNumber_chosenThe number of items in each combination.Required No…

人脸识别三部曲

人脸识别三部曲 首先看目录结构图像信息采集 采集图片.py模型训练 训练模型.py人脸识别 人脸识别.py效果 首先看目录结构 引用文121本 opencv │ 采集图片.py │ 训练模型.py │ 人脸识别.py │ └───trainer │ │ trainer.yml │ └───data │ └──…