卜若的代码笔记系列-Web系列-功能专栏-通过前端更新服务器图片并显示-3101

最新推荐文章于 2024-05-01 00:32:04 发布

卜若

最新推荐文章于 2024-05-01 00:32:04 发布

阅读量237

点赞数

分类专栏：功能专栏 web 文章标签： web 后端

本文链接：https://blog.csdn.net/qq_37080133/article/details/82807175

版权

web 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

功能专栏

2 篇文章 0 订阅

订阅专栏

1.现在，我又有了新的需求。

具体要求是这样的。

需求一：
首先，我需要开发一整个界面，所有的图片都存放在自己的网络服务器，我们只要用<img src = ""/>标签来访问我的图片就行
然后，我想尽可能能的简化这个过程。

简单的来说，比如我拥有一个域名

xxx.com

然后，我就想通过
http://localhost:8080/test/getPic?key=login.jpg
这种方式获取图片。
然后我就直接堆页面就行。
是吧，我这需求没问题吧，这只是这个网络资源管理器里面请求资源的部分

需求二：我现在想要改变这张图片，我只想在前端通过url请求去改login的图片
比如，我想将-学习.jpg改成-打游戏.jpg,我只要在前端进行操作就行了，下次请求login的时候
就不是学习.jpg，而是打游戏.jpg
是吧。这样就完成了一个简单的ui开发的网络资源管理器。

这就是end：

两个需求提出来之后，就是我们如何解决的问题？

首先，来分析第一个需求，如果你都认真看过我之前写过的文章相信问题不大，但第二个问题里面，就存在一些的问题。

嘛，我们来一一解决好了。
首先当然是要创建一个资源管理的.jsp
ResourcesManager.jsp

祖传开头：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.util.*" %>


<html>
<head>
<title>资源管理器</title>
<meta name="viewport" content="width=device-width; initial-scale=1.4; minimum-scale=1.0; maximum-scale=2.0"/>

</head>
<body>


</body>


</html>

我们需要定义一个表单用来提交我们的Login.jpg
...
我的页面太丑了，等我学下css目前的时间是2018年9月21日下午两点29分
。。。css学习中......
总算也是踩了很多坑哈。
嘛，现在我就来慢慢说一下这个实现原理吧。
首先，我们布局一下

<style type="text/css">

div {
    width: 220px;
    height:300px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
    float:left;
}
form{border-width:5px;}
input {color:red;margin-top:20px;width:200px}
label {font-family:"Times New Roman", Times, serif;color:blue;border-style:solid;
    border-width:5px;margin-left:50px;
    
    
    }
img{ width: 220px;
    height:300px;}
</style>

使用内置css的方式，嘛，这里顺便解释一下，为了特别菜鸡的像我这种
的解释一下，css在jsp里面的使用是有三种情况
（1）外联：即使用外部.css文件，这种嘛，模块化，用于解耦
哦，顺便解释下什么叫解耦
简单的说：就是模块化。
好了，另外一种方式就是
（2）内置style
比如
<img style = "width = 500">
这种，最后就是我这种
（3）内联了。
这种方式嘛，我从我学了一下午css（现在是2018年9月21日20:23）
然后果断就喜欢了这种内置的。布局完后，这是效果图。接着，我需要去实现下前端，前端做什么呢？就一点，发文件！

<div>
    <form action="Login.jpg" method="post" enctype="multipart/form-data">　        
      <input type="file" name="file"/><br/>   
     <button type="submit" >提交</button>
    </form>

</div>

至于这里的<div>就是画的格子，表示好看点，上面还用css给他点缀了下哈哈。
至于这里，我再解释下，之前有两章关于@RequestMapping的关于文件提交的一章，具体是哪一张我忘了，那一张讲的有些朦胧
用一种下定义的讲法，并没有侧面剖析，嘛，你可以理解为你看我的文章之后的彩蛋啦（嘛，菜鸡终于要进步了哈哈）

action = "Login.jpg"
没啥，就是典型的动作映射，通过servlet映射给controller。

enctype="multipart/form-data"固定形式，用于给文件编码，
 method="post"指定你的传输方法。
<input type="file" name="file"/><br/>   用于提交文件，type不允许更改，这是文件类型的传输，name可以改。

至于submit就是提交按钮啦!

文件提交之后，我们需要更新我们的服务器呗

@RequestMapping("/Login.jpg")
    public String returnLoginPic(
            HttpServletRequest request,    
            @RequestParam(value="file",required=false) MultipartFile file            
            )throws Exception
    {
        
        if(!file.isEmpty()){
    
            file.transferTo(new File("C:\\Users\\Skady_cat\\Desktop\\Iamge库\\"+"Login.jpg"));
        
        }
        
        return "ResourcesManager";

    }

直接就刷新一下。

然后，我们右边的这个图片再请求一下获得图片

<div>
<img src="http://localhost:8080/test/returnPic?key=Login.jpg">
</div>

这里，请求获得图片通过returnPic映射给控制器，?后的key为传递参数，这个控制器下的图片返回策略（函数）的实现原理其实
非常简单，就是将参数读出来，然后去文件夹里面找，找到一Login.jpg然后response
是吧。非常简单，我这里贴一下这个函数

@RequestMapping(value = "/returnPic")
    public void returnPic(
            HttpServletResponse response,
            HttpServletRequest request, 
            @RequestParam("key") String key
            )throws Exception {  
       try{
             System.out.println(key);
           
           FileInputStream fis = new FileInputStream("C:\\Users\\Skady_cat\\Desktop\\Iamge库\\"+key); // 以byte流的方式打开文件 d:\1.gif   
        int i=fis.available(); //得到文件大小   
        byte data[]=new byte[i];   
        fis.read(data);  //读数据   
        response.setContentType("image/*"); //设置返回的文件类型  
        request.setAttribute ("mainCode", "99999999999");
       
        
        OutputStream toClient=response.getOutputStream(); //得到向客户端输出二进制数据的对象   
        toClient.write(data);  //输出数据   
        toClient.flush();  
        toClient.close();   
        fis.close();
             
        
       }catch(Exception e){
       e.printStackTrace();
       System.out.println("图片不存在");
       }
       System.out.println("请求lll");
    }

然后是完整的前端代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.util.*" %>


<html>
<head>
<title>资源管理器</title>
<meta name="viewport" content="width=device-width; initial-scale=1.4; minimum-scale=1.0; maximum-scale=2.0"/>
<style type="text/css">

div {
    width: 220px;
    height:300px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
    float:left;
}
form{border-width:5px;}
input {color:red;margin-top:20px;width:200px}
label {font-family:"Times New Roman", Times, serif;color:blue;border-style:solid;
    border-width:5px;margin-left:50px;
    
    
    }
img{ width: 220px;
    height:300px;}
</style>
</head>
<body>
<div>
	<form action="Login.jpg" method="post" enctype="multipart/form-data">　   	 
	  <input type="file" name="file"/><br/>   
     <button type="submit" >提交</button>
    </form>

</div>

<div>
<img src="http://localhost:8080/test/returnPic?key=Login.jpg">
</div>



</body>


</html>