一、背景

由於最近作業要寫一個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連結地址

這裡有個小小請求，能否給個贊?呢？那是對我最大的鼓勵了。嘿嘿嘿~