层级
三个实体类
package com.example.quickstart.entity;
import lombok.Data;
/**
* Created by 史冬阳 on 2018/9/17.
*/
@Data
public class Card {
private String avatar;
private String name;
private String time;
private String title;
private String content;
private String picture;
private Integer like;
private Integer comment;
public Card(String avatar, String name, String time, String title, String content, String picture, Integer like, Integer comment) {
this.avatar = avatar;
this.name = name;
this.time = time;
this.title = title;
this.content = content;
this.picture = picture;
this.like = like;
this.comment = comment;
}
}
package com.example.quickstart.entity;
import lombok.Data;
/**
* Created by 史冬阳 on 2018/9/17.
*/
@Data
public class Subject {
private String pic;
private String stitle;
public Subject(String pic, String stitle) {
this.pic = pic;
this.stitle = stitle;
}
}
package com.example.quickstart.entity;
import lombok.Data;
/**
* Created by 史冬阳 on 2018/9/17.
*/
@Data
public class Column {
private String cpic;
private String ctitle;
private String ccontent;
private String focus;
public Column(String cpic, String ctitle, String ccontent, String focus) {
this.cpic = cpic;
this.ctitle = ctitle;
this.ccontent = ccontent;
this.focus = focus;
}
}
三个DAO层，添加数据
package com.example.quickstart.dao;
import com.example.quickstart.entity.Card;
import lombok.Data;
import org.springframework.context.annotation.Configuration;
import java.util.Arrays;
import java.util.List;
/**
* Created by 史冬阳 on 2018/9/17.
*/
@Configuration
@Data
public class CardDao {
public List<Card> getCards(){
Card[] cards = {
new Card("a0.jpg","Tp","18小时前", "更加开放的社交网络，「长毛象」让你自由地分享想法","长毛象是一个开源的分散式社交网络，你可以在上面更加自由地分享你的看法，认识更多志同道合的新朋友。","0.png",17,9),
new Card("a1.jpg","化学心情下2","2天前", "对产品和设计的热爱，让他打造出了这款 iOS 上的精美倒数日工具：专访 Time | 幕后","为了找到一款符合自己使用习惯的倒数日工具，Jony 开发了 Time 时间卡这款设计精美的 iOS 倒数日工具。本期幕后少数派就和开发者 Jony 聊了聊 Time 的设计思路，以及他对产品和设计的思考。","1.png",63,38),
new Card("a2.jpg","Tp","2天前", "别让「每天 XX 分钟」吓到你，习惯养成其实可以很简单：Continuo | App+1","如果你在养成习惯的过程中也感受到了无形的压力，那么不妨试试这款无需设定目标的 Continuo，帮助你在改变的同时减轻焦虑。","2.png",10,17),
new Card("a3.jpg","洛世","09月05日", "工作日让家中电脑不再闲置，其实你可以遥控它做很多事","如果打个小算盘你就会发现家中电脑的利用率低到令人发指的地步，那么怎么才能在工作日的时候让家中的电脑也能被充分利用起来呢？\n","3.png",65,76),
new Card("a4.jpg","waychane","09月05日", "告别死板与沉闷，试试这款像素风汇率查询工具：像素汇率 | App+1","支持现实货币与虚拟货币的像素风汇率换算应用，还可以查看汇率走势。","4.png",36,39),
new Card("a0.jpg","Tp","18小时前", "更加开放的社交网络，「长毛象」让你自由地分享想法","长毛象是一个开源的分散式社交网络，你可以在上面更加自由地分享你的看法，认识更多志同道合的新朋友。","0.png",17,9),
new Card("a1.jpg","化学心情下2","2天前", "对产品和设计的热爱，让他打造出了这款 iOS 上的精美倒数日工具：专访 Time | 幕后","为了找到一款符合自己使用习惯的倒数日工具，Jony 开发了 Time 时间卡这款设计精美的 iOS 倒数日工具。本期幕后少数派就和开发者 Jony 聊了聊 Time 的设计思路，以及他对产品和设计的思考。","1.png",63,38),
new Card("a2.jpg","Tp","2天前", "别让「每天 XX 分钟」吓到你，习惯养成其实可以很简单：Continuo | App+1","如果你在养成习惯的过程中也感受到了无形的压力，那么不妨试试这款无需设定目标的 Continuo，帮助你在改变的同时减轻焦虑。","2.png",10,17),
new Card("a3.jpg","洛世","09月05日", "工作日让家中电脑不再闲置，其实你可以遥控它做很多事","如果打个小算盘你就会发现家中电脑的利用率低到令人发指的地步，那么怎么才能在工作日的时候让家中的电脑也能被充分利用起来呢？\n","3.png",65,76),
new Card("a4.jpg","waychane","09月05日", "告别死板与沉闷，试试这款像素风汇率查询工具：像素汇率 | App+1","支持现实货币与虚拟货币的像素风汇率换算应用，还可以查看汇率走势。","4.png",36,39),
};
List<Card> cardList = Arrays.asList(cards);
return cardList;
}
}
package com.example.quickstart.dao;
import com.example.quickstart.entity.Subject;
import lombok.Data;
import org.springframework.context.annotation.Configuration;
import java.util.Arrays;
import java.util.List;
/**
* Created by 史冬阳 on 2018/9/17.
*/
@Configuration
@Data
public class SubjectDao {
public List<Subject> getSubjects(){
Subject[] subjects = {
new Subject("11.jpg","跑步好搭档"),
new Subject("12.jpg","给现代人的护眼小技巧"),
new Subject("13.png","青年居家生活指南"),
new Subject("14.png","你知道的PPT技巧"),
};
List<Subject> subjectList = Arrays.asList(subjects);
return subjectList;
}
}
package com.example.quickstart.dao;
import com.example.quickstart.entity.Column;
import lombok.Data;
import org.springframework.context.annotation.Configuration;
import java.util.Arrays;
import java.util.List;
/**
* Created by 史冬阳 on 2018/9/17.
*/
@Configuration
@Data
public class ColumnDao {
public List<Column> getColumns(){
Column[] columns = {
new Column("21.png","玩转Workflow","Workflow 是 iOS 上一款被称为「效率神器」的 App，它以直观的卡片形式大大...","2018人关注"),
new Column("22.png","提升效率之路","一个优秀的工具，能让你在提升效率之路事半功倍。你是如何通过这些工具，技...","1547人关注"),
new Column("23.png","装了啥","你的手机装了哪些常见或小众的 App？它们如何帮你提高效率，给生活带来更多...","1238人关注"),
new Column("24.png","我想推荐这个APP","你用过了哪些 App，爱上了哪些 App，无论平台，不妨现在就分享出来。","1053人关注"),
};
List<Column> columnList = Arrays.asList(columns);
return columnList;
}
}
一个controller层
package com.example.quickstart.controller;
import com.example.quickstart.dao.CardDao;
import com.example.quickstart.dao.ColumnDao;
import com.example.quickstart.dao.SubjectDao;
import com.example.quickstart.entity.Card;
import com.example.quickstart.entity.Column;
import com.example.quickstart.entity.Subject;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import javax.annotation.Resource;
import java.util.List;
/**
* Created by 史冬阳 on 2018/9/17.
*/
@Controller
public class CardController {
@Resource
private CardDao cardDao;
@Resource
private SubjectDao subjectDao;
@Resource
private ColumnDao columnDao;
@GetMapping("card")
public String getAll(ModelMap map){
List<Card> cardList = cardDao.getCards();
List<Subject> subjectList = subjectDao.getSubjects();
List<Column> columnList = columnDao.getColumns();
//将数据模型加入视图
map.addAttribute("cardList",cardList);
map.addAttribute("subjectList",subjectList);
map.addAttribute("columnList",columnList);
return "card";
}
}
一个HTML页面
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>应用推荐-少数派</title>
<link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" />
<style>
.main{
background-color: rgb(250,251,252);
}
.navc{
background-color: rgb(41,37,37);
height: 75px;
}
.logo{
margin-left: 195px;
}
.login{
margin-left: 1150px;
margin-top: -50px;
}
.one{
font-size: 25px;
position: absolute;
margin-top: -75px;
color: white;
margin-left: 700px;
}
.two{
font-size: 25px;
position: absolute;
margin-top: -75px;
color: white;
margin-left: 725px;
}
.btns{
margin-top: -20px;
padding-left: 186px;
padding-right: 186px;
border-bottom: 1px solid lightgray;
}
.three{
margin-top: 15px;
}
.avatar{
border-radius: 100%;
width: 40px;
}
.name{
margin-left: 50px;
margin-top: -35px;
}
.time{
margin-left: 45px;
margin-top: -10px;
color: rgb(155,155,168);
}
.title{
font-size: 25px;
font-weight: bold;
margin-left: 10px;
}
.content{
font-size: 16px;
margin-left: 10px;
}
.like{
margin-top: 20px;
margin-left: 42px;
}
.like1{
margin-left: 70px;
margin-top: -20px;
font-size: 16px;
color: rgb(155,155,168);
}
.comment{
margin-top: -23px;
margin-left: 95px;
}
.comment1{
margin-left: 130px;
margin-top: -22px;
font-size: 16px;
color: rgb(155,155,168);
}
.four{
padding-bottom: 16px;
}
.five{
font-weight: bolder;
border-bottom: 1px solid darkgrey;
}
.stitle{
margin-top: -110px;
margin-left: 110px;
font-size: 18px;
color: white;
}
.six{
display: inline-block;
cursor: pointer;
background-color: transparent;
border-radius: 100%;
text-align: center;
text-decoration: none;
border: 1px solid #fff;
padding: 7px 24px;
color: #fff;
margin-left: 110px;
}
.seven{
font-weight: bolder;
border-bottom: 1px solid darkgrey;
}
.eight{
margin-left: 220px;
}
.ctitle{
font-size: 22px;
}
.ccontent{
color:rgb(155,155,168);
}
.cfocus{
font-size: 12px;
color:rgb(155,155,168);
}
.nine{
margin-left: 250px;
margin-top: -30px;
}
</style>
</head>
<div class="main">
<div>
<nav class="navbar navbar-default navc" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="img/logo.png" class="logo">
<img src="img/login.png" class="login">
</a>
</div>
</div>
</nav>
<div>
<a class="one">#</a>
<a class="two">应用推荐</a>
</div>
</div>
<div class="btn-group btn-group-justified btns" role="group" >
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">正版软件</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">付费栏目</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Matrix</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">专题广场</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">热门文章</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">应用推荐</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">生活方式</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">新玩意</button>
</div>
</div>
</div>
<div class="container three">
<div class="col-md-8" col-lg-12>
<div class="thumbnail" th:each="card:${cardList}">
<div>
<img th:src="@{'img/'+${card.avatar }}" class="avatar">
<p th:text="${card.name}" class="name"></p>
<p th:text="${card.time}" class="time" ></p>
</div>
<div class="row center">
<div class="col-xs-12 col-md-9">
<p th:text="${card.title}" class="title"></p>
<p th:text="${card.content}" class="content"></p>
</div>
<div class="col-xs-6 col-md-3">
<img th:src="@{'img/'+${card.picture}}" style="width: 155px;height: 100px">
<img src="img/like.png" class="like">
<div th:text="${card.like}" class="like1"></div>
<div><img src="img/comment.png" class="comment"></div>
<div th:text="${card.comment}" class="comment1" ></div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-4">
</div>
<div class="col-xs-6 col-md-4 like-line" >
</div>
<div class="col-xs-6 col-md-4 four">
</div>
</div>
</div>
</div>
<div class="col-md-4 recommend">
<div>
<span class="five">推荐专题</span>
<span style="margin-left: 220px">查看全部</span>
</div>
<div class="row">
<div class="col-sm-6 col-md-12">
<div class="thumbnail" th:each="subject:${subjectList}">
<img th:src="@{'img/'+${subject.pic}}" >
<div>
<div>
<p th:text="${subject.stitle}" class="stitle"></p>
</div>
</div></br>
<div class="six">查看专题</div>
</div>
<div>
<span class="seven">推荐专栏</span>
<span class="eight">查看全部</span>
</div>
<div class="thumbnail" th:each="column:${columnList}">
<img th:src="@{'img/'+${column.cpic}}" >
<p th:text="${column.ctitle}" class="ctitle"></p>
<p th:text="${column.ccontent}" class="ccontent"></p>
<p th:text="${column.focus}" class="cfocus"></p>
<button type="button" class="btn btn-default inspect-btn nine" >查看专栏</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
最终展示效果
