Spring Data JPA练习
2018-10-20 本文已影响0人
不知所措的STRANGER
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>
