少数派应用推荐界面的编写

层级

三个实体类

• Card.java

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;
    }
}

• Subject.java

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;
    }
}

• Column.java

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层，添加数据

• CardDao.java

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;
    }
}

• SubjectDao.java

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;
    }
}

• ColumnDao.java

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层

• CardController.java

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页面

• 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>

最终展示效果