一、前言
其实去年我已经用过AndServer框架去写了一个文件上传、下载的App(文章地址),但是比较简陋。今年我用了最新版本的AndServer 2.1.10框架,又写了一个文件上传、下载的应用,目的其实是想练习一下css。新版Demo我加了不少的HTML页面,应用的部分截图如下:
从截图中就可以看出来,该应用具有注册、登录、重置密码、修改密码、文件上传、文件下载以及日记等功能。
该程序集客户端、服务端于一体,其中AndServer框架提供了服务端的支持,原生的Activity里面嵌入了一个WebView用于显示网页。当然,网页的内容也是需要自己去写的,这部分就充当客户端。那么,其他设备要怎么访问Cowcat服务器(装了该应用的手机)上的资源呢?其实非常简单,其他设备只需要和Cowcat服务器连接至同一个网络,然后在浏览器地址栏里面输入标题栏上的地址即可(上图中的192.168.0.101:8080就是服务器的地址,当然在你的手机上显示的可能会有差异,根据实际情况去输入即可)。之所以在原生的Activity里面嵌入一个Webview,主要是为了方便查看效果,在浏览器里面直接输入服务器的地址也是可以看到效果的。
二、开发工具
- Android Studio Bumblebee (小蜜蜂版本,还是比较新的)
- Visual Studio Code (用于编辑H5代码,因为在AS里面编辑H5代码不方便,所以用这个)
三、使用的关键框架
3.1 HTML 页面框架
- Bootstrap 4
- Vue 3
- JQuery 3.2.1
- jquery.form 4.3.0 (用于异步文件上传,支持显示上传进度)
3.2 Android原生框架
- AndServer 2.1.10(官方文档地址、项目的github地址)
- LitePal 3.2.3 (SQLite 数据库框架,项目的github地址)
四、关键代码
3.1 文件上传
实现文件上传的后端代码其实很简单,因为AndServer框架已经帮我们做了很好的封装,不过目前我发现2.1.10版本的上传速度比较慢,如果您有优化建议,欢迎提出来。
3.1.1 后端
/**
* 上传文件
* @param request
* @param response
* @param file
* @return
*/
@Deprecated
@PostMapping(path = "/uploadFile")
String uploadFile(HttpRequest request, HttpResponse response, @RequestParam(name = "fileName") MultipartFile file,@RequestParam(name = "userName") String userName) {
try {
File uploadFile = FileUtils.createUploadFile(file);
LyyLogUtil.logD("用户上传的文件的保存路径:"+uploadFile.getAbsolutePath());
file.transferTo(uploadFile);
} catch (Exception e) {
e.printStackTrace();
LyyLogUtil.logE("服务器接收文件出现异常!"+e.getMessage());
}
return "文件上传成功!";
}
3.1.2 HTML前端
HTML页面的代码我就不贴了,因为比较长。其实无非就是使用file类型的Input,再加上jquery.form,就能轻松完成前端的工作。
3.2 文件下载
文件下载的后端代码略微复杂一点点,既然是下载文件,首先得把文件列表给列出来,然后再根据文件名去下载对应的文件。
同样的,这里就不贴上文件下载的前端HTML代码了,在HTML代码里,实现文件下载更加简单,只要访问对应的URL地址就可以了。
3.2.1 获取文件列表
/**
* 获取文件列表
* @param request
* @param response
* @return
*/
@GetMapping(path = "/getFileList", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
ReturnData getFileList(HttpRequest request, HttpResponse response){
ReturnData returnData=new ReturnData();
List<LyyFile> list=new ArrayList<>();
File file=new File(FileUtils.filePath);
File[] files = file.listFiles();
if (files!=null&&files.length>0){
Arrays.sort(files, new Comparator<File>() {//按文件的修改日期递减排序
@Override
public int compare(File f1, File f2) {
long diff = f1.lastModified() - f2.lastModified();
if (diff > 0)
return -1;
else if (diff == 0)
return 0;
else
return 1;
}
@Override
public boolean equals(@Nullable Object obj) {
return true;
}
});
for (File f : files) {
LyyFile lyyFile = new LyyFile();
lyyFile.setFileName(f.getName());
lyyFile.setFileSize(""+f.length());
lyyFile.setDir(f.isDirectory());
lyyFile.setModifiedDate(""+f.lastModified());
lyyFile.setFilePath(f.getAbsolutePath());
list.add(lyyFile);
}
returnData.setSuccess(true);
}else {
returnData.setSuccess(false);
returnData.setErrorCode(512);
returnData.setErrorMsg(ErrCodeUtil.map.get(512));
}
returnData.setData(list);
return returnData;
}
3.2.2 下载文件
/**
* 下载文件
* @param response
* @param fileName
* @return
*/
@GetMapping(path = "/downloadFile")
public ResponseBody downloadFile(HttpResponse response, @RequestParam(name = "fileName") String fileName){
File file=new File(FileUtils.filePath+File.separator+fileName);
FileBody body=new FileBody(file);
response.setHeader("Content-Disposition", "attachment;filename="+fileName);
return body;
}
四、软件成品及源码
项目仍在维护,随时会有更新,有更新后我会及时提交到码云上。
4.1 安装包
链接:https://pan.baidu.com/s/1KBwbmOxp604w0qs_8Kl1ag?pwd=jv13
提取码:jv13
4.2 项目地址
为了大家可以轻松访问,我放到码云上了,而不是放github。
点我跳到码云