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>