SpringBoot-09-之初阶整合篇（上）

张风捷特烈

发布于 2018-09-26 17:38:27

4030

发布于 2018-09-26 17:38:27

这篇将结合引擎模板thymeleaf，mysql数据库jap,简单的jQuery和vue。来构建一个图片上传和展示的小案例其中maven配置，及配置文件配置这里就不废话了，详见： 04--SpringBoot之模板引擎--thymeleaf 07--SpringBoot之数据库JPA（CRUD）

本篇以实现功能为主，样式由下篇讲述。

1.图片访问接口文件夹：toly1994.com.toly01.config.WebConfig

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        //在F:/SpringBootFiles/Image/下如果有一张 Excalibar.jpg的图片，那么：
        //【1】访问：http://localhost:8080/imgs/Excalibar.jpg 可以访问到
        //【2】html 中 <img src="imgs/Excalibar.jpg">
        registry.addResourceHandler("/imgs/**").addResourceLocations("file:F:/SpringBootFiles/Image/");
    }
}

2.文件上传页：templates/submit.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>文件上传页</title>
</head>
<!DOCTYPE HTML>
<body>
<h1>添加名剑</h1>
<form th:action="@{/submit_form}" th:object="${sword}" method="post" enctype="multipart/form-data">
    <p>名剑名称: <input type="text" th:field="*{name}"/></p>
    <p>名剑简介:<br> <textarea rows="10" th:field="*{info}"></textarea></p>
    <p>名剑来源:
        <input type="text" th:field="*{origin}"/></p>
    <p>名剑图片: <input type="file" name="file"/></p>
    <p><input type="submit" value="提交"/> <input type="reset" value="重置"/></p>
</form>
</body>
</html>

3.控制器:跳转+上传+插入数据库：

@Controller //注意由于是RequestBody 所以这里将@RestController拆分出来了
public class ShowPhotoController {

    @GetMapping("/show")
    public String swordList(Model model) {
        model.addAttribute("sword", new Sword());
        return "SwordList";
    }

    @GetMapping("/add_form")
    public String greetingForm(Model model) {
        model.addAttribute("sword", new Sword());
        return "submit";
    }

    @Autowired
    private SwordRepository mSwordRepository;

    @PostMapping("/submit_form")
    public String greetingSubmit(@ModelAttribute Sword sword,
                                 @RequestParam("file") MultipartFile file) {
        if (file.isEmpty()) {
            return "false";
        }
        String fileName = file.getOriginalFilename();//获取名字
        String path = "F:/SpringBootFiles/Image";
        File dest = new File(path + "/" + fileName);
        if (!dest.getParentFile().exists()) { //判断文件父目录是否存在
            dest.getParentFile().mkdir();
        }
        try {
            file.transferTo(dest); //保存文件
            sword.setImgurl("http://localhost:8080/imgs/" + fileName);
            sword.setCreate_time(new Date());
            sword.setModify_time(new Date());
            mSwordRepository.save(sword);
            return "SwordList";
        } catch (IllegalStateException | IOException e) {
            e.printStackTrace();
            return "上传失败!";
        }
    }
}

4.显示界面:templates/SwordList.html

这里简单的使用了jquery和vue两位前端大佬。

简单介绍一下：$.getJSON('http://localhost:8080/swords/findall', function (data)

是说data是访问http://localhost:8080/swords/findall返回的数据，

这个接口详见:08--SpringBoot之统一化json输出与自定义异常捕获

imgData: data.data是说把data.data给imgData变量，还记得data.data就是所有sword对象的json化字符串

v-for="(val, key, index) in imgData" :key="index"就是遍历val就是单个对象。

val.imgurl 是图片访问的url,我把图片上传到指定文件夹，并将url放在数据库中，

即第3小点的：sword.setImgurl("http://localhost:8080/imgs/" + fileName);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloThymeleaf</title>
    <link rel="stylesheet" href="../static/css/my.css">
    <script src="../static/js/jquery-3.3.1.min.js"></script>
    <script src="../static/js/vue2.5.16.min.js"></script>
</head>
<body>
<div id="root">
    <h1>名剑表</h1>
    <ul>
        <li v-for="(val, key, index) in imgData" :key="index">
            <a href=""><val.imgurl width="300"></a>
        </li>
    </ul>
</div>
<script>
    $.getJSON('http://localhost:8080/swords/findall', function (data) {
            new Vue({
                el: "#root",//与id是box的元素绑定
                data: {//数据
                    imgData: data.data
                }
            });
        }
    );
</script>
</body>
</html>