采用之前學(xué)過的綜合技能，結(jié)合熱部署技術(shù)，盡量仿真的寫出少數(shù)派頁面。（何為熱部署，見我之前的文章http://www.itdecent.cn/p/c1cba51e63f9）
- 左側(cè)的專題列表（Card）
@Data
public class Card {
private String avatar;
private String name;
private String lastuploadtime;
private String title;
private String intro;
private String pic;
private int like;
private int good;
public Card(String avatar, String name, String lastuploadtime, String title, String intro, String pic, int like, int good) {
this.avatar = avatar;
this.name = name;
this.lastuploadtime = lastuploadtime;
this.title = title;
this.intro = intro;
this.pic = pic;
this.like = like;
this.good = good;
}
}
- 右側(cè)的推薦專題（Recommand）
@Data
public class Recommand {
private String pic;
private String name;
public Recommand(String pic, String name) {
this.pic = pic;
this.name = name;
}
}
- CardDAO類
@Configuration
@Data
public class CardDAO {
public List<Card> getCards() {
Card[] cards = {
new Card("1.jpg","張一","3天前","如何學(xué)習(xí)Spring Boot","如果你在養(yǎng)成習(xí)慣的過程中也感受到了無形的壓力，那么不妨試試這款無需設(shè)定目標(biāo)的 Continuo，幫助你在改變的同時減輕焦慮","2.jpg",66666,88),
new Card("2.jpg","張二","4天前","工作日讓家中電腦不再閑置，其實你可以遙控它做很多事","如果打個小算盤你就會發(fā)現(xiàn)家中電腦的利用率低到令人發(fā)指的地步，那么怎么才能在工作日的時候讓家中的電腦也能被充分利用起來呢？","3.png",666,88),
new Card("5.jpg","張三","5天前","Chrome 在 10 周年之際發(fā)布了新版，除了好看還更安全","Google 在 Chrome 十周年之際向全平臺推送了 Chrome 69 正式版的更新，為我們帶來了采用全新設(shè)計的 Google material theme 主題，同時還新增了許多新功能，特別在安全性方面做出了很大的提升。","6.jpg",0,0),
new Card("7.jpg","張四","1天前","Mac 上最好用的系統(tǒng)清理工具大更新，現(xiàn)在你還可以用它更新應(yīng)用：CleanMyMac X","CleanMyMac X 率先在 Setapp 平臺上推出，大版本更新不但帶來了全新設(shè)計的應(yīng)用界面，還新增了許多實用的工具，滿足了 Mac 使用者清理系統(tǒng)的日常需求。","8.jpg",77,33),
new Card("9.jpg","張五","三小時前","一頓飯錢能買到哪些好用的包月服務(wù)？","自從蘋果在 2016 年調(diào)整了訂閱模式下的開發(fā)者分成比例，越來越多的開發(fā)者嘗試將自己的產(chǎn)品更改成了付費訂閱制。不過今天，讓我們拋開訂閱制本身的孰是孰非，來看一下有哪些訂閱服務(wù)是「物美價廉」的。","10.jpg",66,222),
new Card("11.jpg","張六","6小時前","除了撥打 110，這些保障人身安全的方法希望你也能了解一下","除了大家熟知的 110 報警電話，各地公安機(jī)關(guān)也推出了短信報警、微信報警等多種報警方案，在危險發(fā)生的時保持冷靜并采取措施并非易事，不過我們還是希望能盡量為大家提供更多選擇","12.jpg",44,2),
new Card("13.jpg","張七","剛剛","把網(wǎng)頁文章變成電子書裝進(jìn) Kindle：Doocer","Doocer 是一款將網(wǎng)頁文章批量抓取并推送到 Kindle 的實用工具，它允許用戶提交網(wǎng)址、RSS 訂閱源和 Pocket 稍后讀的文章，批量制作成 ePub、MOBI 電子書。","14.jpg",44,22),
};
List<Card> cardList = Arrays.asList(cards);
return cardList;
}
}
- RecommandDAO
@Configuration
@Data
public class RecommandDAO {
public List<Recommand> getRecommands() {
Recommand[] recommands ={
new Recommand("1.jpg","跑步好搭檔"),
new Recommand("2.jpg","給現(xiàn)代人的護(hù)眼小技巧"),
new Recommand("6.jpg","青年居家生活指南"),
new Recommand("7.jpg","PPT技巧"),
new Recommand("10.jpg","健康生活"),
new Recommand("5.jpg","青年大學(xué)習(xí)"),
new Recommand("11.jpg","你好騷啊")
};
List<Recommand> recommandList = Arrays.asList(recommands);
return recommandList;
}
}
- CardController
@Controller
public class CardController {
@Resource
private CardDAO cardDAO;
@Resource
private RecommandDAO recommandDAO;
@GetMapping("card")
public String getAll(ModelMap map) {
List<Card> cardList = cardDAO.getCards();
List<Recommand> recommandList = recommandDAO.getRecommands();
map.addAttribute("cardList",cardList);
map.addAttribute("recommandList",recommandList);
return "tuijian";
}
}
頁面代碼
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>應(yīng)用推薦</title>
<link rel="stylesheet" href="webjars/bootstrap/3.3.7-1/css/bootstrap.min.css">
<style>
.main{
float: left;
margin-left: 150px;
width: 900px;
}
.menu{
float: right;
margin-right: 80px;
}
.ce div {
margin-bottom: 40px;
width: 300px;
position: relative;
}
.menu div div img{
height: 200px;
width: 200px;
}
.avatar {
width: 50px;;
height: 50px;
}
.picture{
height: 200px;
width: 200px;
margin-bottom: -5px;
}
.main div {
margin: 20px;
}
h5{
line-height: 1.5em;
}
.message{
margin-left: 60px;
margin-top: -40px;
}
.date {
margin-left: 60px;
margin-top: -10px;
}
.first {
margin: 20px;
border-color: burlywood;
border-width: 1px;
}
.head {
margin-top: 20px;
font-size: 22px;
font-weight: bold;
}
.header img{
margin-left: 30px;
}
.mingzi{
text-align: center;
color: white;
font-weight: bold;
margin-top: -40px;
}
.tou{
color: white;
margin-left: 200px;
}
.rpic {
width: 300px;
opacity:0.6;
}
.header2 {
margin-top: -20px;
}
.header3 h5{
font-weight: bold;
margin-right: 35px;
}
.word {
position: absolute;
z-index: 2;
margin-left: -180px;
margin-top: 100px;
font-size: 18px;
color: white;
}
.btn1{
float: right;
margin-top: -40px;
margin-right: 200px;
background-color: black;
border-radius: 10px;
font-size: 20px;
color: white;
}
.like {
margin-bottom: -100px;
margin-left: 50px;
}
.like1 {
margin-left: 90px;
}
.good {
margin-bottom: -100px;
margin-left: 50px;
}
.good1 {
margin-left: 90px;
}
</style>
</head>
<body>
<div class="contain">
<div class="navbar navbar-inverse header">
<h3 class="col-md-offset-1 tou">不做多數(shù)派</h3>
<h3 class="mingzi">#應(yīng)用推薦</h3>
<button class="btn1" value="登錄">登錄</button>
</div>
<div class="navbar navbar-default header2">
<div class="container header3">
<h5 class="col-md-1">正版軟件</h5>
<h5 class="col-md-1">付費欄目</h5>
<h5 class="col-md-1">Matrix</h5>
<h5 class="col-md-1">專題廣場</h5>
<h5 class="col-md-1">熱門文章</h5>
<h5 class="col-md-1">應(yīng)用推薦</h5>
<h5 class="col-md-1">生活方式</h5>
<h5 class="col-md-1">新玩意</h5>
</div>
</div>
<div class="container main">
<div class="row first thumbnail" th:each="card:${cardList}">
<div class="col-md-6 col-md-offset-1" >
<img th:src="${card.avatar}" class="img-circle avatar">
<p class="message" th:text="${card.name}"></p>
<p class="date" th:text="${card.lastuploadtime}"></p>
<h3 th:text="${card.title}"></h3>
<h5 th:text="${card.intro}"></h5>
</div>
<div class="col-md-2 col-md-offset-3">
<img th:src="${card.pic}" class="picture">
</div>
<div class="col-md-1 col-md-offset-1 fuzhu">
<img th:src="@{喜歡.png}" class="like">
<p th:text="${card.like}" class="like1"></p>
</div>
<div class="col-md-1 col-md-offset-1 fuzhu2">
<img th:src="@{點贊.png}" class="good">
<p th:text="${card.good}" class="good1"></p>
</div>
</div>
</div>
<div class="menu">
<p class="head">推薦專題</p>
<div class="row ce" th:each="recommand:${recommandList}">
<div class="col-md-2 cebian">
<img th:src="${recommand.pic}" class="rpic">
<span class="word" th:text="${recommand.name}"></span>
</div>
</div>
</div>
</div>
</body>
</html>
最終展示
少數(shù)派.png
