美文网首页
少数派应用推荐界面的编写

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

作者: 啦啦啦哈啦啦啦 | 来源:发表于2018-09-29 00:37 被阅读0次

    层级

    三个实体类

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

    最终展示效果

    相关文章

      网友评论

          本文标题:少数派应用推荐界面的编写

          本文链接:https://www.haomeiwen.com/subject/yeomoftx.html