、
CSDN最新产品【云IDE】来啦!【云IDE】将为各位技术er一键秒级构建云开发环境,提升开发效率!为持续提升产品体验,现CSDN特开展产品评测有奖话题征文活动,诚邀各位技术er免费试用【云IDE】,撰写使用体验,参与即可获得【话题达人】勋章+CSDN电子书月卡(站内千本电子书免费看),更有机会获得CSDN官方会员卡+周边大奖!
- 一打开云IDE的界面整体给人一种沉稳大气的感觉,尤其是默认的黑色背景,相信对于经常写代码的小伙伴来讲都是比较舒适和护眼的。所以给我的第一印象是非常不错的
- 我使用的Spring Boot的一个测试应用 熟悉Java Web应用开发的都知道Spring Boot的出现本来就是为了Spring开发中繁琐的配置流程,但其实创建Spring Boot应用的过程也稍微有一些麻烦,有了云IDE这下自动创建,而且基本的配置如Thymeleaf、web都已经配置好了 十分省心。我最喜欢的功能是自动安装依赖和快速链接开源项目,这样可以快速的进行开发工作,而不必在配置文件上花费太多时间。
- 我觉得核心功能就是可以随时随地的进行开发,尤其是在陌生的电脑上,可能没有下载IDE和配置好环境,这个时候就可以上CSDN的云IDE进行开发,我觉得这个功能是很棒的。我觉得有待改进的地方是可以把切换开发环境如Spring Boot的环境切换成python或者C++环境的按钮设置明显一点,刚开始用的人很有可能找不到。
- 我觉得可以新上线一个自由切换开发环境的功能,比如我可以进行java python c++ c# javascript等等 这样可以利于开发
- 人机交互方面我觉得还可以加强,初学者很容易找不到北,造成使用难度变大和用户体验变差,我觉得可以设置多一些明确的提示和指示
部分云IDE界面图形如下
接下来是我在云IDE进行的测试 实现了Spring Boot文件的上传与下载
1:创建控制器
package com.ch.ch5_2.controller;
import java.io.File;
import java.io.IOException;
import java.net.URLEncoder;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.io.FileUtils;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.http.ResponseEntity.BodyBuilder;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestHeader;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
@Controller
public class TestFileUpload {
/**
* 进入文件选择页面
*/
@RequestMapping("/uploadFile")
public String uploadFile() {
return "uploadFile";
}
/**
* 上传文件自动绑定到MultipartFile对象中,
* 在这里使用处理方法的形参接收请求参数。
* @throws IOException
* @throws IllegalStateException
*/
@RequestMapping("/upload")
public String upload(
HttpServletRequest request,
@RequestParam("description") String description,
@RequestParam("myfile") MultipartFile myfile) throws IllegalStateException, IOException {
System.out.println("文件描述:" + description);
//如果选择了上传文件,将文件上传到指定的目录uploadFiles
if(!myfile.isEmpty()) {
//上传文件路径
String path = request.getServletContext().getRealPath("/uploadFiles/");
//获得上传文件原名
String fileName = myfile.getOriginalFilename();
File filePath = new File(path + File.separator + fileName);
//如果文件目录不存在,创建目录
if(!filePath.getParentFile().exists()) {
filePath.getParentFile().mkdirs();
}
//将上传文件保存到一个目标文件中
myfile.transferTo(filePath);
}
//转发到一个请求处理方法,查询将要下载的文件
return "forward:/showDownLoad";
}
/**
* 显示要下载的文件
*/
@RequestMapping("/showDownLoad")
public String showDownLoad(HttpServletRequest request, Model model) {
String path = request.getServletContext().getRealPath("/uploadFiles/");
File fileDir = new File(path);
//从指定目录获得文件列表
File filesList[] = fileDir.listFiles();
model.addAttribute("filesList", filesList);
return "showFile";
}
/**
* 实现下载功能
* @throws IOException
*/
@RequestMapping("/download")
public ResponseEntity<byte[]> download(
HttpServletRequest request,
@RequestParam("filename") String filename,
@RequestHeader("User-Agent") String userAgent) throws IOException {
//下载文件路径
String path = request.getServletContext().getRealPath("/uploadFiles/");
//构建将要下载的文件对象
File downFile = new File(path + File.separator + filename);
//ok表示HTTP中的状态是200
BodyBuilder builder = ResponseEntity.ok();
//内容长度
builder.contentLength(downFile.length());
//application/octet-stream:二进制流数据(最常见的文件下载)
builder.contentType(MediaType.APPLICATION_OCTET_STREAM);
//使用URLEncoder.encode对文件名进行编码
filename = URLEncoder.encode(filename,"UTF-8");
/**
* 设置实际的响应文件名,告诉浏览器文件要用于“下载”和“保存”。
* 不同的浏览器,处理方式不同,根据浏览器的实际情况区别对待。
*/
if(userAgent.indexOf("MSIE") > 0) {
//IE浏览器,只需要用UTF-8字符集进行URL编码
builder.header("Content-Disposition", "attachment; filename=" + filename);
}else {
/**非IE浏览器,如FireFox、Chrome等浏览器,则需要说明编码的字符集
* filename后面有个*号,在UTF-8后面有两个单引号
*/
builder.header("Content-Disposition", "attachment; filename*=UTF-8''" + filename);
}
return builder.body(FileUtils.readFileToByteArray(downFile));
}
}
2:创建文件下载视图页面
部分代码如下
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" th:href="@{css/bootstrap.min.css}" />
<!-- 默认访问 src/main/resources/static下的css文件夹-->
<link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}" />
<body>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">文件下载示例</h3>
</div>
</div>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">文件列表</h3>
</div>
<div class="panel-body">
<div class="table table-responsive">
<table class="table table-bordered table-hover">
<tbody class="text-center">
<tr th:each="file,fileStat:${filesList}">
<td>
<span th:text="${fileStat.count}"></span>
</td>
<td>
<!--file.name相当于调用getName()方法获得文件名称 -->
<a th:href="@{download(filename=${file.name})}">
<span th:text="${file.name}"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>