SSM+Redis+Bootstrap-fileinput開發圖片上傳程式
阿新 • • 發佈:2018-12-19
一、背景
由於最近作業要寫一個JSP+Servlet的圖片上傳程式。再加上最近在學Spring,在寫這個作業的時候想到很多的騷操作。想也沒想就搞上了。廢話不多說,接下來開始介紹這個程式。本程式已經上傳到Github,文章連結附加在文章末尾。
二、技術棧
後端:SpringMVC+Spring+Mybatis+Redis(鑑權)
前端:Jquery+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連結地址
這裡有個小小請求,能否給個贊?呢?那是對我最大的鼓勵了。嘿嘿嘿~