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

层级

三个实体类

  • 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 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 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 getSubjects(){
        Subject[] subjects = {
                new Subject("11.jpg","跑步好搭档"),
                new Subject("12.jpg","给现代人的护眼小技巧"),
                new Subject("13.png","青年居家生活指南"),
                new Subject("14.png","你知道的PPT技巧"),
        };
        List 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 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 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 cardList = cardDao.getCards();
        List subjectList = subjectDao.getSubjects();
        List columnList = columnDao.getColumns();

        //将数据模型加入视图
        map.addAttribute("cardList",cardList);
        map.addAttribute("subjectList",subjectList);
        map.addAttribute("columnList",columnList);

        return "card";
    }
}

一个HTML页面

  • card.html



    
    应用推荐-少数派
    
    

推荐专题 查看全部


查看专题
推荐专栏 查看全部

最终展示效果

你可能感兴趣的:(少数派应用推荐界面的编写)