一、背景
由于最近作业要写一个JSP+Servlet的图片上传程序。再加上最近在学Spring,在写这个作业的时候想到很多的骚操作。想也没想就搞上了。废话不多说,接下来开始介绍这个程序。本程序已经上传到Github,文章链接附加在文章末尾。
二、技术栈
后端:SpringMVC+Spring+Mybatis+Redis(鉴权)
前端:Jquery+Bootstrap+fileinput
fileinput插件来自:https://github.com/kartik-v/bootstrap-fileinput
三、后端结构
代码:。。。。类文件太多了,少给点。具体见Github。
3.1
这是一个文件上传的控制器。这里使用PageHelper插件的时候,有点可以改进的地方。因为可以直接将List传递给前端,给前端操作。但是由于自己前端能力不行,所以有大神的话,可以给我讲一下怎么搞。这里小弟先行谢过。
/**
* @author codingZhengsz
* @since 2018-10-23 20:23
**/
@CrossOrigin(origins = "*", maxAge = 3600) // 跨域问题,允许任何域名请求
@RestController
@RequestMapping("/file")
public class FileController {
@Autowired
FileService fileService;
@GetMapping("/detail/{id}")
public ResponseEntity<ServerResponse<FileDetail>> getFileDetail(@PathVariable int id) {
return fileService.getFileDetail(id);
}
@Authorization
@PostMapping("/uploadFile")
public ServerResponse uploadFile(@RequestParam("fileInput") MultipartFile file, HttpServletRequest request,@CurrentUser User user) throws Exception{
StringBuffer sb = new StringBuffer();
sb.append(UUID.randomUUID().toString().replace("-",""));
String filename = file.getOriginalFilename();
sb.append(filename.substring(filename.indexOf(".")));
String url = request.getSession().getServletContext().getRealPath("/upload");
System.out.println(url);
String fileUrl = url + "/" + sb.toString();
file.transferTo(new File(fileUrl));
FileDetail detail = FileDetail.builder().fileName(filename).fileUrl("http://localhost:8888/upload/"+sb.toString()).fileUploader(user.getNickname()).build();
fileService.insertFileDetail(detail);
return ServerResponse.createByErrorMessage("上传成功");
}
@GetMapping("/allPic")
public Map<String,Object> fileDetailPageResult(int pageNum, int pageSize) {
PageHelper.startPage(pageNum,pageSize);
Map<String,Object> modelMap = new HashMap<String,Object>();
List<FileDetail> fileDetails = fileService.getAllFileDetails();
int rowCount = fileDetails.size();
if(rowCount%pageSize != 0) {
rowCount = rowCount / pageSize + 1;
} else {
rowCount = rowCount / pageSize;
}
List<FileDetail> fileDetails1 = new ArrayList<>();
int start = (pageNum-1)*pageSize;
int end = pageNum*pageSize;
if(end > fileDetails.size()){
end = fileDetails.size();
}
for(int i=start;i<end;i++){
fileDetails1.add(fileDetails.get(i));
}
System.out.println(rowCount);
modelMap.put("pageCount",rowCount);
modelMap.put("currentPage",pageNum);
modelMap.put("list",fileDetails1);
return modelMap;
}
}
3.2 用户控制类
/**
* @author codingZhengsz
* @since 2018-10-23 21:22
**/
@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
UserService userService;
@Autowired
private TokenManager tokenManager;
@RequestMapping(value = "/register",method = RequestMethod.POST)
public ResponseEntity<ServerResponse> register(@RequestBody User user) {
return userService.register(user);
}
@RequestMapping(value = "/login",method = RequestMethod.POST)
public ResponseEntity<ServerResponse> login(@RequestBody User user) {
user.setPassword(MD5Util.encrypt(user.getPassword()));
User userLogin = userService.getUser(user.getUsername());
if(userLogin == null) {
return new ResponseEntity<>(ServerResponse.createByErrorMessage("该账户尚未注册,请注册"), HttpStatus.NOT_FOUND);
} else {
if(tokenManager.checkUser(TokenModel.builder().userId(userLogin.getId()).build())) {
return new ResponseEntity<>(ServerResponse.createByErrorMessage("该用户已经登录,请不要重新登录"), HttpStatus.FORBIDDEN);
}
if(user.getPassword().equals(userLogin.getPassword())){
TokenModel model = tokenManager.createToken(userLogin.getId());
return new ResponseEntity<>(ServerResponse.createBySuccess("登录成功",userLogin.getId()+"_"+model.getToken()), HttpStatus.OK);
} else {
return new ResponseEntity<>(ServerResponse.createByErrorMessage("账号或者密码错误"), HttpStatus.BAD_REQUEST);
}
}
}
@Authorization
@RequestMapping(value = "/logout",method = RequestMethod.GET)
public ResponseEntity<ServerResponse> logout(@CurrentUser User user) {
tokenManager.deleteToken(user.getId());
return new ResponseEntity<>(ServerResponse.createBySuccessMessage("退出成功"), HttpStatus.OK);
}
}
四、前端结构
4.1 登录界面
4.2 注册界面
4.3 展示界面
4.4 上传界面:支持拖拽上传
五、Github链接地址
这里有个小小请求,能否给个赞?呢?那是对我最大的鼓励了。嘿嘿嘿~