Spring Data JPA练习

作者: 不知所措的STRANGER | 来源:发表于2018-10-20 17:33 被阅读0次

Spring Data JPA练习

1、整体效果图

1.png

2.png

2、entity

@Data
@Entity
public class Program {

    @Id
    @GeneratedValue
    private Integer id;

    private String listImg1;
    private String programName;
    private String likeCount;
    private String programIcon;
    private String provider;
    private String userCount;
    private String listImg2;
    private String info;
    private String version;
    private String updateTime;
    private String size;
    private String language;
    private String developer;
}

3、dao

public interface ProgramRepository extends JpaRepository<Program,Integer> {
}

4、service

public interface ProgramService {

    List<Program> getAll();

    Program get(int id);
}

5、Impl

@Service
public class ProgramServiceImpl implements ProgramService {

    @Resource
    private ProgramRepository programRepository;

    @Override
    public List<Program> getAll() {
        return programRepository.findAll();
    }

    @Override
    public Program get(int id) {
        return programRepository.findById(id).get();
    }
}

6、controller

@Controller
@RequestMapping(value = "/programs")
public class ProgramController {
    @Resource
    private ProgramService programService;


    @GetMapping()
    public String getAll(ModelMap map){
        map.addAttribute("programList",programService.getAll());
        return "chromeStore";
    }


    @GetMapping(value = "/{id}")
    public String getOne(@PathVariable Integer id, ModelMap model){
        model.addAttribute("program",programService.get(id));
        return "plugDetail";
    }
}

7、chromeStore.html

<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chrome 应用商店</title>
    <link rel="stylesheet" href="webjars/bootstrap/3.3.7-1/css/bootstrap.css">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="webjars/bootstrap/3.3.7-1/js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/chromeStore.css"/>
</head>
<body>
<nav class="navbar navbar-static-top">
    <div class="container">
        <div class="pull-left chrome-icon">
            <img src="img/chrome.png">
            <span>chrome应用商店</span>
        </div>
        <div class="pull-right text-center chrome-user">
            <span>moxie175@gmail.com</span>
            <span class="glyphicon glyphicon-chevron-down"></span>
        </div>
    </div>
</nav>
<div class="container main">
    <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="https://lh3.googleusercontent.com/DYU9M6qBUfpxniSzcJgKU6ngcM2nuk32Z6kpCK7OF9Qv8VCro2Uno6uN17ZmFn0Qpk3ydLAHGYA=w700-h280-e365" alt="First slide">
            </div>
            <div class="item">
                <img src="https://lh3.googleusercontent.com/FlcSDyE7WMg4-AlKQ5mevrcgwv-w2OJisxps9o5D9C9kXdDzZI4Xgj7wI0aLerA4hGpHatQ9Ukc=w700-h280-e365" alt="Second slide">
            </div>
            <div class="item">
                <img src="https://lh3.googleusercontent.com/YeQlQTjneD035zVS3eIxB0j1m7Ls8ZsYM5u3znP9St3aqxoy_POAdkHVthyEx1iWmzmMj4WW=w700-h280-e365" alt="Third slide">
            </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <div class="recent-updates">
        <div class="row recent-title">
            <div class="col-lg-6 text-center">
                <span>最近更新</span>
            </div>
            <div class="col-lg-6 text-center">
                <button class="btn btn-default">查看全部</button>
            </div>
        </div>
        <div class="row recent-list">
            <div class="col-lg-3" th:each="program : ${programList}">
                <div class="store-content">
                    <div class="thumbnail">
                        <a th:href="@{/programs/{id}(id=${program.id})}" ><img th:src="@{${program.listImg1}}"></a>
                        <div class="caption">
                            <h4 th:text="${program.programName}"></h4>
                            <p th:text="${program.likeCount}"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

8、plugDetail.html

<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chrome</title>
    <link rel="stylesheet" th:href="@{https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css}">
    <script th:src="@{https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js}"></script>
    <script type="text/javascript" th:href="@{https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
    <link rel="stylesheet" href="css/plugDetail.css"/>
    <style>
        .navbar {
            background-color: #ffffff;
            height: 64px;
        }

        .navbar .container {
            height: 64px;
        }

        .chrome-icon {
            height: 64px;
            line-height: 64px;
        }

        .chrome-icon span {
            margin-left: 15px;
            font-size: 20px;
            color: #717579;
        }

        .nav-title {
            margin-left: 15px;
        }

        .chrome-user {
            height: 64px;
            line-height: 64px;
        }

        .chrome-user > span:nth-child(1) {
            font-size: 14px;
            color: #717579;
            font-weight: 400;
        }

        .plug-title {
            padding: 40px 0;
            display: flex;
            justify-content: flex-start;
        }

        .icon > img {
            width: 60px;
            height: 60px;
        }

        .simple-introduction {
            margin-left: 15px;
        }

        .simple-introduction h1 {
            margin-bottom: 10px;
        }

        .simple-introduction span {
            font-size: 14px;
            font-weight: 400;
            color: #5f6368;
            margin: 0 10px 20px 0;
        }

        .simple-introduction > span:nth-child(4) {
            border-left: #5f6368 1px solid;
            border-right: #5f6368 1px solid;
        }

        h1 {
            margin: 0 0;
            padding: 0 0;
        }

        .add-plug {
            margin-left: 460px;
        }
        .plug-icon{
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            background-color: #fafafa;
        }

        .intro-title{
            font-size: 22px;
            font-weight: 400;
            margin-bottom: 20px;
        }

        .intro-isuse{
            color: #5f6368;
        }

        .intro-content{
            margin-top: 20px;
        }

        .margin{
            margin-bottom: 20px;
        }
        .col-lg-8{
            border-right: 1px solid #5f6368;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-static-top">
    <div class="container">
        <div class="pull-left chrome-icon">
            <img src="https://ws1.sinaimg.cn/large/006BRPT2ly1fvg4t8631pj300w00w3y9.jpg">
            <span>chrome应用商店</span>
        </div>
        <div class="pull-right text-center chrome-user">
            <span>moxie175@gmail.com</span>
            <span class="glyphicon glyphicon-chevron-down"></span>
        </div>
    </div>
</nav>

<div class="container main">
    <div class="row plug-title">
        <div class="icon">
            <img th:src="@{${program.programIcon}}">
        </div>
        <div class="simple-introduction">
            <h1 th:text="${program.programName}">Google Keep Chrome 扩展程序</h1>
            <span>提供方：</span><span th:text="${program.provider}">google.com</span><br/><br/>
            <span>6243</span><span>生产工具</span><span class="glyphicon glyphicon-user"></span><span>6,627,832</span><br>
            <span class="glyphicon glyphicon-plus-sign"></span>由Google提供<span></span><span class="glyphicon glyphicon-ok-circle"></span><span>离线运行</span>
        </div>
        <div class="add-plug">
                <button class="btn btn-primary">添加至Chrome</button>
        </div>
    </div>
    <div class="row plug-icon">
        <div>
            <img th:src="@{${program.listImg2}}">
        </div>
    </div>
    <div class="row plug-introduction">
        <div class="col-lg-8">
            <div class="intro-title">概述</div>
            <div class="intro-isuse">
                <span class="glyphicon glyphicon-blackboard"></span><span>  与您的设备不兼容</span>
            </div>
            <div class="intro-content">
                <pre th:text="${program.info}">
                    想把特定的网页、图片或引用文字保存起来，方便日后使用吗？有了 Google Keep Chrome 扩展程序，您可以轻松将所需内容保存到 Keep，并可在您使用的所有平台同步，包括网页、Android 设备、iOS 设备和 Wear 设备。您还可以通过记事功能记录详细信息，并利用标签快速将记事分门别类，方便日后查找相关记事。

功能：
 • 保存网页链接、文本和图片
 • 针对已保存的内容创建记事
 • 为记事添加标签
 • 自动保存到 Google Keep

如要使用网页版 Google Keep，请访问 http://keep.google.com；如要在 Android 设备上使用 Keep，请访问 http://g.co/keep；如要在 iOS 设备上使用 Keep，请访问 https://itunes.apple.com/zh-CN/app/google-keep-your-thoughts/id1029207872.
                </pre>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="intro-title">其他信息</div>
            <div>版本</div>
            <div class="margin" th:text="${program.version}">3.1.18372.1323</div>
            <div>上次更新日期</div>
            <div class="margin" th:text="${program.updateTime}">2018</div>
            <div>大小</div>
            <div class="margin" th:text="${program.size}">4.91MB</div>
            <div>语言</div>
            <div th:text="${program.language}">52种语言</div>
        </div>
    </div>
</div>
</body>
</html>

Spring Data JPA练习

Spring Data JPA练习

1、整体效果图

2、entity

3、dao

4、service

5、Impl

6、controller

7、chromeStore.html

8、plugDetail.html

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Spring Boot