層級
三個實體類
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層昔馋，添加數(shù)據(jù)
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小時前", "更加開放的社交網(wǎng)絡熬甚，「長毛象」讓你自由地分享想法","長毛象是一個開源的分散式社交網(wǎng)絡龟劲，你可以在上面更加自由地分享你的看法，認識更多志同道合的新朋友喳张。","0.png",17,9),
new Card("a1.jpg","化學心情下2","2天前", "對產(chǎn)品和設計的熱愛，讓他打造出了這款 iOS 上的精美倒數(shù)日工具：專訪 Time | 幕后","為了找到一款符合自己使用習慣的倒數(shù)日工具，Jony 開發(fā)了 Time 時間卡這款設計精美的 iOS 倒數(shù)日工具棠笑。本期幕后少數(shù)派就和開發(fā)者 Jony 聊了聊 Time 的設計思路，以及他對產(chǎn)品和設計的思考禽绪。","1.png",63,38),
new Card("a2.jpg","Tp","2天前", "別讓「每天 XX 分鐘」嚇到你蓖救，習慣養(yǎng)成其實可以很簡單：Continuo | App+1","如果你在養(yǎng)成習慣的過程中也感受到了無形的壓力洪规，那么不妨試試這款無需設定目標的 Continuo，幫助你在改變的同時減輕焦慮循捺。","2.png",10,17),
new Card("a3.jpg","洛世","09月05日", "工作日讓家中電腦不再閑置斩例，其實你可以遙控它做很多事","如果打個小算盤你就會發(fā)現(xiàn)家中電腦的利用率低到令人發(fā)指的地步，那么怎么才能在工作日的時候讓家中的電腦也能被充分利用起來呢从橘？\n","3.png",65,76),
new Card("a4.jpg","waychane","09月05日", "告別死板與沉悶念赶，試試這款像素風匯率查詢工具：像素匯率 | App+1","支持現(xiàn)實貨幣與虛擬貨幣的像素風匯率換算應用，還可以查看匯率走勢恰力。","4.png",36,39),
new Card("a0.jpg","Tp","18小時前", "更加開放的社交網(wǎng)絡叉谜，「長毛象」讓你自由地分享想法","長毛象是一個開源的分散式社交網(wǎng)絡，你可以在上面更加自由地分享你的看法踩萎，認識更多志同道合的新朋友停局。","0.png",17,9),
new Card("a1.jpg","化學心情下2","2天前", "對產(chǎn)品和設計的熱愛，讓他打造出了這款 iOS 上的精美倒數(shù)日工具：專訪 Time | 幕后","為了找到一款符合自己使用習慣的倒數(shù)日工具香府，Jony 開發(fā)了 Time 時間卡這款設計精美的 iOS 倒數(shù)日工具董栽。本期幕后少數(shù)派就和開發(fā)者 Jony 聊了聊 Time 的設計思路，以及他對產(chǎn)品和設計的思考企孩。","1.png",63,38),
new Card("a2.jpg","Tp","2天前", "別讓「每天 XX 分鐘」嚇到你裆泳，習慣養(yǎng)成其實可以很簡單：Continuo | App+1","如果你在養(yǎng)成習慣的過程中也感受到了無形的壓力，那么不妨試試這款無需設定目標的 Continuo柠硕，幫助你在改變的同時減輕焦慮工禾。","2.png",10,17),
new Card("a3.jpg","洛世","09月05日", "工作日讓家中電腦不再閑置，其實你可以遙控它做很多事","如果打個小算盤你就會發(fā)現(xiàn)家中電腦的利用率低到令人發(fā)指的地步蝗柔，那么怎么才能在工作日的時候讓家中的電腦也能被充分利用起來呢闻葵？\n","3.png",65,76),
new Card("a4.jpg","waychane","09月05日", "告別死板與沉悶，試試這款像素風匯率查詢工具：像素匯率 | App+1","支持現(xiàn)實貨幣與虛擬貨幣的像素風匯率換算應用癣丧，還可以查看匯率走勢槽畔。","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","給現(xiàn)代人的護眼小技巧"),
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","提升效率之路","一個優(yōu)秀的工具胁编，能讓你在提升效率之路事半功倍厢钧。你是如何通過這些工具，技...","1547人關注"),
new Column("23.png","裝了啥","你的手機裝了哪些常見或小眾的 App嬉橙？它們如何幫你提高效率早直，給生活帶來更多...","1238人關注"),
new Column("24.png","我想推薦這個APP","你用過了哪些 App，愛上了哪些 App市框，無論平臺霞扬，不妨現(xiàn)在就分享出來。","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();
//將數(shù)據(jù)模型加入視圖
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>應用推薦-少數(shù)派</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>
最終展示效果
