SpringBoot--Demo--少数派练习

作者: _果不其然_ | 来源:发表于2018-09-20 14:30 被阅读0次

实体类

Card类

package com.niit.quickStart.bean;

import lombok.Data;

/**
 * Created by xgg on 2018/9/10.
 */
@Data
public class Card {
    private String author;
    private String avatar;
    private String picture;
    private String title;
    private String introduce;
    private Integer like;
    private Integer amount;

    public Card(String author, String avatar, String picture, String title, String introduce) {
        this.author = author;
        this.avatar = avatar;
        this.picture = picture;
        this.title = title;
        this.introduce = introduce;
    }

    public Card(String author, String avatar, String picture, String title, String introduce, Integer like, Integer amount) {
        this.author = author;
        this.avatar = avatar;
        this.picture = picture;
        this.title = title;
        this.introduce = introduce;
        this.like = like;
        this.amount = amount;
    }
}

Recommend类

package com.niit.quickStart.bean;

import lombok.Data;

/**
 * Created by xgg on 2018/9/10.
 * 右侧推荐书籍的实体类
 */
@Data
public class Recommend {
    private String pic;
    private String title;
    private String introduce;
    private String amount;

    public Recommend(String pic, String title, String introduce, String amount) {
        this.pic = pic;
        this.title = title;
        this.introduce = introduce;
        this.amount = amount;
    }
}

User类

package com.niit.quickStart.bean;

import lombok.Data;

/**
 * Created by xgg on 2018/9/10.
 * 定义用户实体类
 */
@Data
public class User {
  private String name;
  private String avatar;
}

DAO层

CardDAO

package com.niit.quickStart.dao;

import com.niit.quickStart.bean.Card;
import com.niit.quickStart.bean.Recommend;
import com.niit.quickStart.bean.User;
import lombok.Data;
import org.springframework.context.annotation.Configuration;

import java.util.Arrays;
import java.util.List;

/**
 * Created by xgg on 2018/9/10.
 */
@Configuration
@Data
public class CardDAO {
    public List<Card> getCards() {
        Card[] cards = {
                new Card("水画人", "pengshao.jpg", "vivo.jpg", "发现更多美，vivoX23上手体验", "2018 年上半年，最惊艳的两款国产全面屏手机，" +
                        "非 vivo NEX 和 OPPO Find X 莫属了。NEX 的开创性的带来了全自动升降式摄像头的全面屏解决方案，赢得无数好评。",6,10),
                new Card("呆猫", "cat.jpg" , "4.jpg", "UWP版我的电脑：介系你没有玩过的船新版本", "首先吐槽一下微软：其著名的改名部将“我的电脑”先是改名为“计算机”后又更名成“此电脑”，" +
                        "说到其间的意义怕是希望通过名字的变更告诉用户自己的产品升级了，但是无论是从交互还是UI，却看不出过多升级的踪迹.",10,0),
                new Card("Sol Lo", "sol.jpg", "pro.png", "为汽车加装后置行车记录仪 —— 70迈智能行车记录仪 Pro 体验 ", "最近滴滴出行的各类事件在不断发酵，作为一个司机" +
                        "也需要从各个方面来排查安全隐患，尤其是在到处碰瓷的今天，防患于未然明显成为了一个不得不让人重视的话题了。",100,30),

                new Card("JOKER鹏少", "pengshao.jpg", "google.jpg", "谷歌浏览器的注册使用方法，以及扩展插件的不同安装方式！", "说到浏览器，肯定首先要提到谷歌了，或者叫chrome。" +
                        "大家不必去纠结它的叫法读音，相互关系，发展历史等等对你毫无卵用的东西，你只要知道它好不好用，如何使用就可以了。",24,6),
                new Card("Minja","1.jpg","book.jpg","原汁原味的纸笔体验：柔记智能手写本","尽管已经用 App 做了几年笔记，我仍然念念不忘纸笔的灵便与自由。" +
                        "试过很多智能手写设备后，我觉得柔记手写本是最能保留纸笔体验的智能工具。",30,2),
                new Card("王隐在录音","2.jpg","social.jpg","发长文字没人看？或许是社交平台的锅","本文浅析了各社交平台的长文字展示方式及成因。相比于文字，社交平台会更加鼓励人们发布图片视频，" +
                        "其次是短文字内容，如果你想发布很长的一段文字，不同的平台时间流或许在展现形式上有所不同。不过大体可以通过是否...",53,0),
                new Card("播客头条","3.jpg","blog.jpg","关于播客 你想了解的一切","聊聊播客前世今生，国内海外，以及未来,播客是一种数字媒体，指一系列的音频、视频、电子电台或文字档以列表形式经互联网发布，然后听众经由电子设备订阅该列表以下载或流当中的电子文件，从而接收内容。英语“...",7,1),
                new Card("哪里来的小熊猫","4.jpg","readPerson.png","泛读，从读书到读人，再到读己","「不论何时何地，以何种形式，我总是希望，当新信息流过我的时候，能留下点什么...",16,1)
        };
        List<Card> cardList = Arrays.asList(cards);
        return  cardList;
    }

    public List<Recommend> getRecommends(){
        Recommend[] recommends = {
                new Recommend("read.png","读书笔记","分享我们读书的笔记与心得，记录阅读中和作者产生的碰撞，以及给我们带来的改变...","1345"),
                new Recommend("promote.jpg","提升工作效率", "一个优秀的工具，能让你在提升效率之路事半功倍。你是如何通过这些工具，技巧...","1345"),
                new Recommend("day.png","一日一记","你的手机装了哪些常见或小众的 App？它们如何帮你提高效率，给生活带来更多乐...","1345"),
                new Recommend("android.jpg","Android玩法","你或许深谙刷机之道，他却能把 Xposed 玩得炉火纯青。从手机到应用，从硬件...","1345"),

        };
        List<Recommend> recommendList =Arrays.asList(recommends);
        return recommendList;
    }

    public User getUser(){
        User user = new User();
        user.setAvatar("avatar.png");
        user.setName("guoguo");
        return user;

    }
}

Controller层

CardController类

package com.niit.quickStart.controller;

import com.niit.quickStart.bean.Card;
import com.niit.quickStart.bean.Recommend;
import com.niit.quickStart.bean.User;
import com.niit.quickStart.dao.CardDAO;
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 xgg on 2018/9/10.
 */
@Controller
public class CardController {
    @Resource
    private CardDAO cardDAO;
    @GetMapping("card")
    public String getAll(ModelMap map){
        List<Card> cardList = cardDAO.getCards();
        List<Recommend> recommendList = cardDAO.getRecommends();
        User user = cardDAO.getUser();
        //将模型加入视图
        map.addAttribute("cardList",cardList);
        map.addAttribute("recommendList",recommendList);
        map.addAttribute("user",user);
        return "card";
    }
}

页面

<html xmlns:th="http://www.thymeleaf.org">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>少数派</title>
    <link rel="stylesheet" type="text/css" href="/css/index.css">
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css"/>
    <style>
        .top {
            background: #2F2525;
            height: 60px;
        }

        .logo {

        }

        .change {
            margin-top: -20px;
            border-bottom: 1px solid lightgray;
            padding-left: 172px;
            padding-right: 172px;
            font-weight: bold;
        }

        .pic {
            width: 160px;
            heigt: 210px;
            float: right;
            padding-right: 10px;
        }

        .button-set {
            font-weight: bold;
        }

        .avatar-set {
            border-radius: 100%;
            height: 42px;
            width: 42px;
            float: left;
            margin-top: 4px;
            margin-left: 4px;
            /*padding-left: 10px;*/
        }

        .author {
            padding-top: 8px;
            font-size: 12px;
            padding-left: 70px;
        }

        .time {
            padding-left: 70px;
            margin-top: -8px;
            font-size: 12px;
            color:gray;
        }

        .center {
            margin-top: 30px;
        }

        .title {
            font-size: 22px;
            font-weight: bold;

        }

        .introduce {
            font-size: 16px;
        }

        .amount {
            float:left;
            padding-top: 8px;
            margin-left: 80px;
        }
        .recommend{
           padding-left: 40px;
        }
        .main-pic{
            width: 1120px;
            height: 400px;
            margin-top:36px;
        }
        .last{
            display: flex;
            margin-top: 22px;
            font-weight: bold;
            margin-left: 190px;
            padding-bottom: 10px;
        }
        .right-introduce{
            color: gray;

        }
        .gz{
            font-size: 12px;
            color: gray;
            margin-top: 10px;
        }
        .inspect-line{
            display: flex;
        }
        .inspect-btn{
           margin-left: 120px;
            border: 1px solid black;
            border-radius: 10%;
        }
        .like{
           margin-left: -70px;
            margin-top: 8px;
            padding-bottom: 14px;

        }
        .like-amount{
            display: flex;
            color: gray;
            margin-left: 640px;
        }
        .amount-text{
           margin-left: 20px;
        }
        .like-text {
            margin-left: 14px;
            /*margin-top:18px;*/
        }
        .comment-set{
            margin-top:6px;
            margin-left: -20px;
        }
        .comment-value{
            margin-left:14px;
        }
        .point{
            color: gray;
            font-size: 26px;
        }
        .top-title{
            color: white;
            font-size: 26px;
        }
        .top-title-set{
            margin-left: 500px;
            margin-top: 10px;
        }
        .recommend-text{
          margin-left: 704px;
        }
        .nav-right{
            margin-left: 960px;
            margin-top:-26px;
        }
        .search-set{
            margin-left: 26px;
        }
        .user-avatar{
            border-radius: 100%;
            height: 30px;
            width: 30px;
            margin-left: 18px;
            margin-top: -2px;
        }


    </style>
</head>
<body>
<!--顶部导航栏-->
<nav class="navbar navbar-light top">
    <div class="container">
        <div class="navbar-left">
            <img src="img/logo.png" class="logo">
        </div>
        <div class="top-title-set">
            <text class="point" > # </text>
            <text class="top-title">  Matrix </text>
        </div>
        <div class="nav-right">
            <img src="img/pen.png">
            <img src="img/search1.png" class="search-set">
            <img src="img/ring.png" class="search-set">
            <img th:src="@{'img/'+${user.avatar}}" class="user-avatar">
        </div>
    </div>
</nav>
<!--顶部按钮组-->
<div class="change">
    <div class="btn-group btn-group-justified " role="group" aria-label="...">
        <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">
    <img src="img/center.jpg" class="main-pic">
</div>

<div class="container last">
    <p>精选专栏文章</p>
    <div class="recommend-text"><text>推荐专栏</text></div>
</div>
<!--左侧主体内容-->
<div class="container ">
    <div class="col-md-8" col-lg-12>
        <div class="thumbnail" th:each="card:${cardList}">
            <div>
                <img th:src="@{'img/'+${card.avatar }}" class="avatar-set">
                <p th:text="${card.author}" class="author"></p>
                <p 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.introduce}" class="introduce"></p>
                </div>
                <div class="col-xs-6 col-md-3">
                    <img class="pic" th:src="@{'img/'+${card.picture}}">
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12 col-md-4"></div>
                <div class="col-xs-6 col-md-4"></div>
                <div class="col-xs-6 col-md-4 like-amount ">
                    <div><img src="img/like1.png" class="like">
                         <text th:text="${card.like}" class="like-text"> ></text>
                       </div>
                    <div class="comment-set"><img src="img/comment1.png" ><text th:text="${card.amount}" class="comment-value" ></text></div>
                </div>
            </div>
        </div>
    </div>

    <!--右侧主体内容-->
    <div class="col-md-4 recommend">
        <div class="row">
            <div class="col-sm-6 col-md-12">
                <div class="thumbnail" th:each="recommend:${recommendList}">
                    <img th:src="@{'img/'+${recommend.pic}}" alt="...">
                    <div class="caption">
                        <h3 th:text="${recommend.title}"></h3>
                        <p th:text="${recommend.introduce}" class="right-introduce"></p>

                        <div class="inspect-line">
                            <p th:text="${recommend.amount}+人关注" class="gz"></p>
                            <button type="button" class="btn btn-default inspect-btn">查看专栏</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

成品效果

image.png

SpringBoot--Demo--少数派练习

实体类

Card类

Recommend类

User类

DAO层

CardDAO

Controller层

CardController类

页面

成品效果

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读