采用之前学过的综合技能，结合热部署技术，尽量仿真的写出少数派页面。（何为热部署，见我之前的文章https://www.jianshu.com/p/c1cba51e63f9）
- 左侧的专题列表（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;
}
}
- 右侧的推荐专题（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天前","如何学习Spring Boot","如果你在养成习惯的过程中也感受到了无形的压力，那么不妨试试这款无需设定目标的 Continuo，帮助你在改变的同时减轻焦虑","2.jpg",66666,88),
new Card("2.jpg","张二","4天前","工作日让家中电脑不再闲置，其实你可以遥控它做很多事","如果打个小算盘你就会发现家中电脑的利用率低到令人发指的地步，那么怎么才能在工作日的时候让家中的电脑也能被充分利用起来呢？","3.png",666,88),
new Card("5.jpg","张三","5天前","Chrome 在 10 周年之际发布了新版，除了好看还更安全","Google 在 Chrome 十周年之际向全平台推送了 Chrome 69 正式版的更新，为我们带来了采用全新设计的 Google material theme 主题，同时还新增了许多新功能，特别在安全性方面做出了很大的提升。","6.jpg",0,0),
new Card("7.jpg","张四","1天前","Mac 上最好用的系统清理工具大更新，现在你还可以用它更新应用：CleanMyMac X","CleanMyMac X 率先在 Setapp 平台上推出，大版本更新不但带来了全新设计的应用界面，还新增了许多实用的工具，满足了 Mac 使用者清理系统的日常需求。","8.jpg",77,33),
new Card("9.jpg","张五","三小时前","一顿饭钱能买到哪些好用的包月服务？","自从苹果在 2016 年调整了订阅模式下的开发者分成比例，越来越多的开发者尝试将自己的产品更改成了付费订阅制。不过今天，让我们抛开订阅制本身的孰是孰非，来看一下有哪些订阅服务是「物美价廉」的。","10.jpg",66,222),
new Card("11.jpg","张六","6小时前","除了拨打 110，这些保障人身安全的方法希望你也能了解一下","除了大家熟知的 110 报警电话，各地公安机关也推出了短信报警、微信报警等多种报警方案，在危险发生的时保持冷静并采取措施并非易事，不过我们还是希望能尽量为大家提供更多选择","12.jpg",44,2),
new Card("13.jpg","张七","刚刚","把网页文章变成电子书装进 Kindle：Doocer","Doocer 是一款将网页文章批量抓取并推送到 Kindle 的实用工具，它允许用户提交网址、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","给现代人的护眼小技巧"),
new Recommand("6.jpg","青年居家生活指南"),
new Recommand("7.jpg","PPT技巧"),
new Recommand("10.jpg","健康生活"),
new Recommand("5.jpg","青年大学习"),
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>应用推荐</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">不做多数派</h3>
<h3 class="mingzi">#应用推荐</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">应用推荐</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>
最终展示
少数派.png
网友评论