Spring Data JPA练习（前后端分离数据展示）

后端

pom.xml

<!-- Web 依赖 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<!-- 模板引擎 Thymeleaf 依赖 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

<!-- mysql驱动 依赖 -->
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
</dependency>

<!-- spring-data-jpa 依赖 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

<!-- lombok 依赖 -->
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
</dependency>

application.properties

############################
###数据库配置信息
############################
##基础信息
spring.datasource.url=jdbc:mysql://localhost:3306/springboot_test?useUnicode=true&characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
##连接池中最大的活跃连接数
spring.datasource.tomcat.max-active=20  
##连接池中最大、最小的空闲连接数
spring.datasoure.max-idle=8
spring.datasoure.min-idle=8
##初始化连接数
spring.datasoure.initial=10


############################
###Spring Data JPA配置信息
############################
spring.jpa.database=mysql
# 显示SQL语句
spring.jpa.show-sql=true
##指定DDL mode (none, validate, update, create, create-drop)
spring.jpa.properties.hibernate.hbm2ddl.auto=update

spring.thymeleaf.cache=false

entity

package com.example1.springdatajpa.entity;

import lombok.Data;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;

/**
 * 创建Ssp持久化类
 * 1.使用@Entity注解实现实体类的持久化，JPA检测到之后，可以在数据库中生成对应的表
 * 2.使用@Id指定主键
 * 3.使用 @GeneratedValue指定主键策略，mysql默认自增
 * 4.使用@Data简化get/set
 */
@Entity
@Data
public class Ssp {

    @Id
    @GeneratedValue
    private Integer id;
    private String avatar;
    private String writer;
    private String time;
    private String title;
    private String content;
    private String logo;
    private Integer number1;
    private Integer number2;

}

dao

package com.example1.springdatajpa.dao;

import com.example1.springdatajpa.entity.Ssp;
import org.springframework.data.jpa.repository.JpaRepository;


public interface SspRepository extends JpaRepository<Ssp,Integer> {
}

service及实现

package com.example1.springdatajpa.Services;

import com.example1.springdatajpa.entity.Ssp;
import org.hibernate.validator.constraints.EAN;

import java.util.List;

public interface SspService {
    Ssp save(Ssp ssp);

    List<Ssp> getAll();

    Ssp get(int id);
}


package com.example1.springdatajpa.Services.impl;

import com.example1.springdatajpa.Services.SspService;
import com.example1.springdatajpa.dao.SspRepository;
import com.example1.springdatajpa.entity.Ssp;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;

@Service
public class SspServiceImpl implements SspService {

    @Resource
    private SspRepository sspRepository;

    @Override
    public Ssp save(Ssp ssp) {
        return sspRepository.save(ssp);
    }

    @Override
    public List<Ssp> getAll() {
        return sspRepository.findAll();
    }

    @Override
    public Ssp get(int id) {
        return sspRepository.findById(id).get();
    }
}

controller

package com.example1.springdatajpa.Controller;

import com.example1.springdatajpa.Services.SspService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.annotation.Resource;

@Controller
@RequestMapping(value = "/ssp")
public class SspController {

    private static final String SSP_DETAIL_PATH_NAME = "sspDeatil";
    private static final String SSP_LIST_PATH_NAME = "sspList";

    @Resource
    private SspService sspService;

    @GetMapping("/all")
    public String getSspList(ModelMap map) {
        map.addAttribute("sspList",sspService.getAll());
        return SSP_LIST_PATH_NAME;
    }

    /**
     * 获取 SSP
     * 处理 "/ssp/{id}" 的 GET 请求
     */
    @GetMapping(value = "/{id}")
    public String getSsp(@PathVariable Integer id, ModelMap map) {
        map.addAttribute("sspDeatil",sspService.get(id));
        return SSP_DETAIL_PATH_NAME;
    }

}

前端

sspList.html页面写法

<html xmlns:th="http://www.thymeleaf.org">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>少数派热门文章</title>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" />
    <style>
        .title{
            font-size: 20px;
            /*padding-left: 5px;*/
            color: white;;
        }
        .center{
            font-size:30px;
            color:white;
        }
        body{
            background-color: whitesmoke;
        }
        .avatar{
            width: 50px;
            height:50px;
            margin-left: 20px;
            margin-top: 5px;
        }
        .avatar1{
            width: 50px;
            height:50px;
            /*margin-top: 5px;*/
            float: left;
        }
        .bar{
            background-color: #292525;
            height:60px;
            line-height:60px;
            width:100%;
            /*position:absolute;*/
            /*z-index:5;*/

            top:0;
            text-align:center;
        }

        .btn{
            margin-top: 12px;
            width:80px;
            border-radius: 15px;
            color: white;
            background-color:transparent;
            border: 1px solid white;
        }
        .btn:hover {
            background-color:white; /* Green */
            color: black;
        }
        .font{
            margin-left: 20px;
        }
        .li{
            width:130px;
            text-align: center;
            color: #292525;
            font-size: 16px;
        }
        .down{
            margin-top: 20px;
            margin-left:20px;
        }
        .avatar{
            width:45px;
            height:45px;
            float: left;
        }
        .font1{
            /*margin-left: 20px;*/
        }
        .font2{
            /*margin-left: 20px;*/
            color: lightgray;
            /*padding-top: 10px;*/
        }
        .font-total{
            margin-left: 70px;
        }
        .total{
            margin-left: 20px;
            margin-top: 20px;
        }
        .font-big{
            margin-top: 10px;
            font-size: 25px;
            font-weight: 700;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default bar">
    <div class="container">
        <div class="row">
            <div class="col-md-2">
                <img th:src="@{img/biao.jpg}" class="img-circle avatar">
                <span class="title">少数派</span>
            </div>
            <div class="col-md-7">
                <span class="center">#热门文章</span>
            </div>
            <div class="col-md-3">
                <img th:src="@{img/write.png}">
                <h style="color: #292525;">s</h>
                <img th:src="@{img/search.png}" >
                <img th:src="@{img/32.jpg}" class="img-circle avatar">
            </div>
        </div>
    </div>
</nav>

<div class="container">
    <div class="font">
        <ul class="nav nav-tabs">
            <li role="presentation" class="li"><a href="#"style="color: #292525;font-size: larger">正版软件</a></li>
            <li role="presentation" class="li"><a href="#"style="color: #292525;font-size: larger">付费栏目</a></li>
            <li role="presentation" class="li"><a href="#"style="color: #292525;font-size: larger">Matrix</a></li>
            <li role="presentation" class="li" ><a href="#"style="color: #292525;font-size: larger">专题广场</a></li>
            <li role="presentation" class="li"><a href="#"style="color: #292525;font-size: larger">热门文章</a></li>
            <li role="presentation" class="li"><a href="#"style="color: #292525;font-size: larger">应用推荐</a></li>
            <li role="presentation" class="li"><a href="#"style="color: #292525;font-size: larger">生活方式</a></li>
            <li role="presentation" class="li"><a href="#"style="color: #292525;font-size: larger">新玩意</a></li>
        </ul>
    </div>
</div>

<div class="container">
    <div class="down">
        <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-8">
                <div   th:each="ssp:${sspList}" >
                    <div class="thumbnail" style="height: 300px; ">
                        <div class="total">
                            <img th:src="@{${ssp.avatar}}" class="img-circle avatar1">
                            <div class="font-total">
                                <p class="font1" th:text="${ssp.writer}"></p>
                                <p class="font2" th:text="${ssp.time}"></p>
                            </div>
                            <div class="row">
                                <div class="col-md-8">
                                    <p class="font-big" th:text="${ssp.title}"></p>
                                    <th scope="row" th:text="${ssp.id}"></th>
                                    <td><a th:href="@{/ssp/{sspId}(sspId=${ssp.id})}" th:text="${ssp.title}"></a></td>
                                    <p th:text="${ssp.content}"></p>
                                </div>
                                <div class="col-md-4">
                                    <img th:src="@{${ssp.logo}}" style="width: 210px;height: 160px;">
                                </div>
                                <div style="margin-left: 590px">
                                    <img th:src="@{img/love.png}">
                                    <span class="font2" th:text="${ssp.number1}"></span>
                                    <img th:src="@{img/number.png}">
                                    <span class="font2" th:text="${ssp.number2}"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-2"></div>
        </div>
    </div>
</div>
</div>
</body>
</html>

bookDetail.html页面

<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <script type="text/javascript" th:src="@{https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js}"></script>
    <link th:href="@{https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet"/>
    <meta charset="UTF-8"/>
    <title>文章详情</title>
    <style>
        .logo{
            width: 600px;
            height: 260px;
            margin-left: 300px;

        }
        .title{
            font-size: 36px;
            text-align: center;
            width: 736px;
            margin-left: 200px;
        }
        .author-line{
            display: flex;margin-top: 30px;
        }
        .writer{
            margin-top: 30px;
            font-size: 24px;
            margin-left: 10px;
        }
        .content{
            font-size: 26px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h3>Spring Data JPA练习</h3>
        <img th:src="@{${sspDeatil.logo}}" class="logo">

        <p th:text="${sspDeatil.title}" class="title"></p>
        <span th:text="${sspDeatil.time}"class="time"></span>

       <div class="author-line">
           <img th:src="@{${sspDeatil.avatar}}" class="avatar">
           <p th:text="${sspDeatil.writer}" class="writer"></p>
       </div>

        <span th:text="${sspDeatil.content}" class="content"></span>
        <!--<div class="col-md-2">-->
        <!--</div>-->
        <!--<div class="col-md-8">-->
            <!--<img th:src="@{${sspDeatil.logo}}" class="logo">-->

            <!--<div class="col-md-2">-->
                <!--<p th:text="${sspDeatil.title}"></p>-->
                <!--<span th:text="${sspDeatil.time}"class="time"></span>-->
             <!--</div>-->


        <!--<div class="col-md-10">-->
            <!---->
        <!--</div>-->


        <!--<div class="col-md-4">-->
            <!--<img th:src="@{${sspDeatil.avatar}}" class="avatar">-->
            <!--<p> th:text="${sspDeatil.writer}" class="writer"></p>-->
            <!--<div class="col-md-8"></div>-->
            <!--<span th:text="${sspDeatil.content}" class="content"></span>-->
            <!--<div class="col-md-2"></div>-->
        <!--</div>-->
    <!--</div>-->
    </div>
</body>
</html>

效果图

13520722F13613F4825CBB6E8EB6C704.png
C8D26B6301F5F2E338C5262063AD2A4D.png
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 219,753评论 6赞 508
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,668评论 3赞 396
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 166,090评论 0赞 356
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 59,010评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,054评论 6赞 395
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,806评论 1赞 308
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,484评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,380评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,873评论 1赞 319
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,021评论 3赞 338
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,158评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,838评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,499评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,044评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,159评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,449评论 3赞 374
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,136评论 2赞 356

推荐阅读更多精彩内容

  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,673评论 18赞 139
  • Spring boot参考指南
    Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 46,830评论 6赞 342
  • Spring Data JPA综合练习
    （ps:将数据库内容返回到web页面) 1.pom.xml <!-- Web 依赖 --> org.springf...
    逍遥_6b76阅读 646评论 0赞 6
  • 2017-10-16
    2017.10.16 星期一 多云转阴 亲子日记（171） 今天是儿子生日，虽然想在今天不对他严厉，但是想想如果让...
    于泽妈妈阅读 149评论 3赞 0
  • 无标题文章
    谋生…… 25岁……
    lyc优酱的地盘阅读 136评论 0赞 0