工具体验
网址: http://tools.lixiang.red/tools/sync/textPage
制作思路
这个是从teamview中想到的.用TeamView远程的时候来定位两台电脑,所以我这里也用了id-value的形式.
文字使用HashMap来存储,内容在获取之后就会删掉,没有持久化
文件使用HashMap来存储,然后文件在获取之后就会被删掉,没有做持久化.
工具源码
前端
技术点:
thymeleaf
ajax
前端html的代码:
<html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>同步工具title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">script> <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js">script> <link href="/css/bootstrap.min.css" th:href="@{https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css}" rel="stylesheet">head><body class="container">id: <input th:id="currentId" th:value=" ${id}" />value: <input th:id="currentPassword" th:value=" ${password}" /><div class="row"> <div class="col-7"> <input onclick="syncText(0)" type="button" th:value="获取"> <input onclick="syncText(1)" type="button" th:value="上传"> <div> <textarea th:id="currentContent" th:rows="30" style="width: 100%">textarea> div> div> <div class="col-3"> 同步文件: 只能10M以下 <input th:id="file_input" type="file"> <input type="button" onclick="syncFile(1)" value="上传"> <input type="button" onclick="syncFile(0)" value="下载"> div>div><div> <div>微信扫一扫,更多技术好文:div> <img src="/img/java_subscribe.jpg">div><script type="text/javascript"> function syncText(opt) { var id = $("#currentId").val(); var password = $("#currentPassword").val(); var content = $("#currentContent").val(); var request={content:content,id:id,password:password} if(opt ===1){ $.ajax({ url:'/tools/sync/text', type:'post', contentType:'application/json', data:JSON.stringify(request), success:function (data) { } }) } if(opt===0){ $.ajax({ url:'/tools/sync/text', type:'post', contentType:'application/json', data:JSON.stringify({id:id,password:password}), success:function (data) { $('#currentContent').val(data); } }) } } function syncFile(opt) { var id = $("#currentId").val(); var password = $("#currentPassword").val(); var formD = new FormData(); formD.append("file",$("#file_input")[0].files[0]); if(opt === 1){ $.ajax({ url:'/tools/sync/file?id='+id+'&password='+password, type:'post', contentType:false, processData: false, data:formD, success:function (data) { alert(data) } }) } if(opt ===0){ window.location.href = "/tools/sync/getFile?id="+id+"&password="+password; } }script>body>html>
后端
技术点:
webflux的使用
Path,Files的使用
后端java代码:
@Controllerpublic class SyncContentController { // 存放文字的 private Map<String, String> cache = new HashMap<>(); // 存放文件的 private Map<String, String> fileCache = new HashMap<>(); @RequestMapping("tools/sync/text") @ResponseBody public String syncText(@RequestBody SyncContentRequest request) { String key = request.getId() + "-" + request.getPassword(); String result = ""; if (StringUtils.isBlank(request.getContent())) { result = cache.get(key); cache.remove(key); } else { cache.put(key, request.getContent()); } return result; } @RequestMapping("tools/sync/textPage") public String syncTextPage(Model model) { // 返回页面的时候,同时生成默认的id 和 value String currentId = RandomTools.getComCharStr(6); String password = RandomTools.getComCharStr(6); model.addAttribute("id", currentId); model.addAttribute("password", password); return "test"; } @RequestMapping("tools/sync/file") @ResponseBody public String syncFile(@RequestPart(value = "file") FilePart file, @RequestParam("id") String id,@RequestParam("password") String password) { try { // 上传文件,因为使用的是webflux , 所以不太一样 String key = id + password; String filePath = key + "/" + file.filename(); Files.createDirectories(Paths.get(key)); Path tempFile = Files.createFile(Paths.get(filePath)); file.transferTo(tempFile.toFile()); fileCache.put(key, filePath); return "OK"; } catch (Exception e) { e.printStackTrace(); } return "fail"; } @RequestMapping("tools/sync/getFile") public ResponseEntity getFile(String id, String password) throws IOException { // 获取文件的, 使用的是webflux String key = id + password; String filePath = fileCache.get(key); String suffix = FileTools.getSuffixName(filePath); byte[] bytes = Files.readAllBytes(Paths.get(filePath)); // 读取完就删除文件 Files.deleteIfExists(Paths.get(filePath)); Files.deleteIfExists(Paths.get(key)); ByteArrayInputStream inputStream = new ByteArrayInputStream(bytes); String s = URLEncoder.encode("公众号-白天想懂夜的黑", "UtF-8"); return ResponseEntity.ok() .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename="+s+"." + suffix) .body(new InputStreamResource(inputStream)); }