SSM+Redis+Bootstrap-fileinput开发图片上传程序

一、背景

由于最近作业要写一个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链接地址

这里有个小小请求，能否给个赞?呢？那是对我最大的鼓励了。嘿嘿嘿~

https://github.com/SuttonFd/SSM-FileUpload-Demo