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

最新推荐文章于 2019-04-25 11:12:29 发布

张风捷特烈

最新推荐文章于 2019-04-25 11:12:29 发布

阅读量220

点赞数

分类专栏： SpringBoot SpringBoot 文章标签： SpringBoot

本文链接：https://blog.csdn.net/qq_30447263/article/details/81085215

版权

SpringBoot 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

SpringBoot

12 篇文章 0 订阅

订阅专栏

这篇将结合引擎模板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>

访问：http://localhost:8080/add_form

插入天生牙

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

显示界面

张风捷特烈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
09--SpringBoot之初阶整合篇（上）

这篇将结合引擎模板thymeleaf，mysql数据库jap,简单的jQuery和vue。来构建一个图片上传和展示的小案例其中maven配置，及配置文件配置这里就不废话了，详见： 04–SpringBoot之模板引擎–thymeleaf 07–SpringBoot之数据库JPA（CRUD）本篇以实现功能为主，样式由下篇讲述。1.图片访问接口文件夹：toly1...
复制链接

扫一扫