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

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

@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" 
<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

<!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>

访问：
插入Excalibur

插入天生牙

插入两个来看看效果,这样我就可以通过数据库的改变决定前端页面的显示
发布到服务器上，也可以让任何人通过接口添加条目，就像给它演变的可能，让它"活了"。
数据便是它流动的血液、它的肉体。不然的话它只是一个静态的只能观看的玩偶而已。
下一篇将用css对页面装饰一下，给我打造的"生物"一件新衣。

显示界面