应用thymeleaf、webjars，配合热部署

效果图

效果图.png

bean

顶部导航

package com.niit.quickStart.bean;

import lombok.Data;

/**
 * Created by lenovo on 2018/9/10.
 */
@Data
public class Top {
    private String logo;
    private String name;
    private String pencil;
    private String middle;
    private String search;
    private String message;
    private String avatar;
}

主要内容

package com.niit.quickStart.bean;

import lombok.Data;

/**
 * Created by lenovo on 2018/9/10.
 */
@Data
public class Content {
    private String avatar;
    private String nickname;
    private String updatetime;
    private String title;
    private String article;
    private String picture;
    private String good;
    private String number;

    public Content() {

    }

    public Content(String avatar, String nickname, String updatetime, String title, String article, String picture, String good, String number) {
        this.avatar = avatar;
        this.nickname = nickname;
        this.updatetime = updatetime;
        this.title = title;
        this.article = article;
        this.picture = picture;
        this.good = good;
        this.number = number;
    }

}

右侧广告

package com.niit.quickStart.bean;

import lombok.Data;

/**
 * Created by lenovo on 2018/9/10.
 */
@Data
public class Page {
    private String front;

    public Page(String front) {
        this.front = front;
    }

    public Page(){

    }
}

DAO数据层

package com.niit.quickStart.dao;


import com.niit.quickStart.bean.Content;
import com.niit.quickStart.bean.Page;
import com.niit.quickStart.bean.Top;
import lombok.Data;
import org.springframework.context.annotation.Configuration;

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

/**
 * Created by lenovo on 2018/9/10.
 */
@Data
@Configuration
public class TopDAO {
    public Top getTop(){
        Top top = new Top();
        top.setName("少数派");
        top.setLogo("logo.ico");
        top.setMiddle("推荐应用");
        top.setPencil("pencil.png");
        top.setSearch("search.png");
        top.setMessage("message.png");
        top.setAvatar("avatar.PNG");
        return top ;
    }

    public List<Content> getContents(){
        Content[] contents={
        new Content("a1.jpg","少数派编辑部","2天前","一派|苹果秋季发布会你最期待什么新产品？","这一期的一派，少数派编辑们对下周的苹果秋季发布会谈了谈自己最期待的产品以及购置计划。同时我们也想听听大家的想法。","p1.jpg","20","30"),
        new Content("a2.jpg","少数派编辑部","2天前","工作日让家中电脑不再闲置，其实你可以遥控他做很多事","如果打个小算盘你就会发现家中电脑的利用率低到令人发指的地步，那么怎么才能在工作日的时候让家中的电脑也能被充分利用起来呢？","p2.jpg","20","30"),
        new Content("a3.jpg","少数派编辑部","2天前","5种方法，在电脑和手机里告别百度搜索里的广告","百度上各种广告对用户搜索体验造成的不良影响已不是什么新鲜事。在这篇文章中，我将向大家介绍一些在电脑和手机上减少百度推广广告出现的方法，还你干净快捷的搜索体验。","p3.jpg","20","30"),
        new Content("a4.jpg","少数派编辑部","2天前","Chorme在十周年发布了新版本，除了好看还更安全","Google 在 Chrome 十周年之际向全平台推送了 Chrome 69 正式版的更新，为我们带来了采用全新设计的 Google material theme 主题，同时还新增了许多新功能，特别在安全性方面做出了很大的提升。","p4.jpg","20","30"),
        new Content("a5.jpg","少数派编辑部","2天前","Mac上最好用的系统清理工具大更新，现在你还可以用它更新应用：CleanMyMac X","CleanMyMac X 率先在 Setapp 平台上推出，大版本更新不但带来了全新设计的应用界面，还新增了许多实用的工具，满足了 Mac 使用者清理系统的日常需求。","p5.jpg","20","30"),
        };
        List<Content> contentList = Arrays.asList(contents);
        return contentList;
    }

    public List<Page> getPages(){
        Page[] pages={
                new Page("s1.png"),
                new Page("s2.png"),
                new Page("s3.png"),
                new Page("s4.png"),
        };
        List<Page> pageList = Arrays.asList(pages);
        return pageList;
    }
}

Controller数据传输控制层

package com.niit.quickStart.controller;

import com.niit.quickStart.bean.Content;
import com.niit.quickStart.bean.Page;
import com.niit.quickStart.bean.Top;
//import com.niit.quickStart.dao.NavigationDAO;
import com.niit.quickStart.dao.TopDAO;
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 lenovo on 2018/9/10.
 */
@Controller
public class TopController {
    @Resource
    private TopDAO topDAO;

    @GetMapping("ssp")
    public String getAll(ModelMap map){
        Top top  = topDAO.getTop();
        List<Content> contentList=topDAO.getContents();
        List<Page> pageList = topDAO.getPages();
        map.addAttribute("pageList",pageList);
        map.addAttribute("contentList",contentList);
        map.addAttribute("top",top);
        return "ssp";
        }
}

网页HTML

<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" />
    <title>少数派</title>
    <style>
        .avatar1{
            width: 50px;
            height: 50px;
            margin-top: 5px;
        }
        .bar{
            background-color: black;
            text-align: center;
        }
        .name{
            font-size: 18px;
            font-style: normal;
            color: white;
        }
        .center{
            font-size:30px;
            color:white;
            margin-top: 10px;
        }
        .font{
            margin-left: 20px;
        }
        .li {
            width: 130px;
            text-align: center;
            color: black;
        }
        .down{
            margin-top: 20px;
            margin-left:20px;
        }
        .avatar{
            width:45px;
            height:45px;
            float: left;
        }
        .font2{
            color: lightgray;
        }
        .font-total{
            margin-left: 70px;
        }
        .total{
            margin-left: 20px;
            margin-top: 20px;
        }
        .font-big{
            margin-top: 10px;
            font-size: 25px;
            font-weight: 700;
        }
        .pic{
            width: 200px;
            height: 100px;
        }
        .tuijian{
            font-weight: 600;
        }
        .chakan{
            color: gray;
            float: right;
        }
        .front{
            width: 360px;
            height: 200px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-default bar">
        <div class="container">
            <div class="row">
                <div class="col-md-2">
                    <img th:src="@{'img/'+${top.logo}}" class="img-circle logo">
                    <span class="name" th:text="${top.name}"></span>
                </div>
                <div class="col-md-8">
                    <span class="center" >#热门文章</span>
                </div>
                <div class="col-md-2 avatar1" >
                    <img th:src="@{'img/'+${top.avatar}}"  class="img-circle avatar1">
                </div>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="font">
            <ul class="nav nav-tabs">
                <li role="presentation" class="li"><a href="#">正版软件</a></li>
                <li role="presentation" class="li" ><a href="#">付费栏目</a></li>
                <li role="presentation" class="li"><a href="#">Matrix</a></li>
                <li role="presentation" class="li"><a href="#">专题广场</a></li>
                <li role="presentation" class="li"><a href="#">热门文章</a></li>
                <li role="presentation" class="li"><a href="#">应用推荐</a></li>
                <li role="presentation" class="li"><a href="#">生活方式</a></li>
                <li role="presentation" class="li"><a href="#">新玩意</a></li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div class="down">
            <div class="row">
                <div class="col-md-8">
                    <div th:each="content:${contentList}">
                    <div class="thumbnail">
                        <div class="total">

                            <div class="font-total">
                                <div class="row">
                                    <div class="col-md-1"style="float:left" >
                                        <img th:src="@{'img/' + ${content.avatar}}" class="img-circle avatar1">
                                    </div>
                                    <div class="col-md-3" >
                                        <span class="font1" th:text="${content.nickname}"></span><br>
                                        <span class="font2" th:text="${content.updatetime}"></span>
                                    </div>
                                    <div class="col-md-8"></div>
                                </div>
                            </div >

                            <div class="row">
                                <div class="col-md-8">
                                    <p class="font-big" th:text="${content.title}"></p>
                                    <p th:text="${content.article}"></p>
                                </div>
                                <div class="col-md-4 ">
                                    <img th:src="@{'img/' + ${content.picture}}" class="pic">
                                </div>
                                <div style="margin-left: 590px">
                                    <img th:src="@{img/love.png}">
                                    <span class="font2" th:text="${content.good}"></span>
                                    <img th:src="@{img/number.png}">
                                    <span class="font2" th:text="${content.number}"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
                <div class="col-md-4" >
                    <span class="tuijian">推荐专题</span>
                    <span class="chakan">查看全部</span>
                    <div th:each="page:${pageList}" style="position: relative">
                        <img th:src="@{'img/'+ ${page.front}}" class="front" >
                    </div>

                </div>
            </div>
        </div>
    </div>
</body>
</html>

成果图

成果图.png

总结

此次实践，就是数据与页面进行分离，然后进行数据绑定，同时应用了热部署，这样是提高了效率。同时，也发现了自己在HTML方面的不足，还有待提高。