【个人实习日志】Springboot新闻管理系统（五）

最新推荐文章于 2024-01-18 20:31:22 发布
最新推荐文章于 2024-01-18 20:31:22 发布
阅读量1.3k 收藏 3
点赞数 1
分类专栏： 实习 文章标签： spring boot jpa
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wPrimer/article/details/107738965
版权

基于Springboot实现新闻搜索、新闻评论、主页最新新闻、关于我页面的显示


基于Springboot实现新闻的删除、前台页面的展示
源码已上传至Github: 项目源码

一、新闻搜索的实现

在IndexController中处理从前端页面传来的搜索数据，然后跳转到搜索新闻展示页面

@RequestMapping("/search")
    public String search(@PageableDefault(size=3,sort = {"updateTime"},direction = Sort.Direction.DESC)Pageable pageable,
                         String query,Model model){
        Page<News> page=newsServcie.findNewsByQuery(query,pageable);
        model.addAttribute("page",page);
        model.addAttribute("query",query);
        return "search";
    }

NewsServiceImpl

@Override
    public Page<News> findNewsByQuery(String query, Pageable pageable) {
        return newsDao.findByquery("%"+query+"%",pageable);
    }

NewsDao

@Query("select n from News n where n.title like ?1 or n.content like ?1")
    Page<News> findByquery(String s, Pageable pageable);

在这里插入图片描述

二、新闻评论的实现

发布的新闻勾选评论之后用户才能评论
在这里插入图片描述
在这里插入图片描述
在dao中新建comment实体类，在controller下新建CommentController控制类，从页面得到用户登录信息以及用户的评论然后重定向到新闻详情页面

@PostMapping("/comments")
    public String save(Comment comment, HttpSession session){
        User user=(User)session.getAttribute("user");
        if(user==null){
            comment.setAdminComment(false);
        }else {
            comment.setAdminComment(true);
        }
        commentService.save(comment);
        Long newsId=comment.getNews().getId();
        return "redirect:/comments/"+newsId;
    }

新闻详情页面根据新闻id显示新闻的评论

 @RequestMapping("/comments/{newsId}")
    public String comments(@PathVariable Long newsId, Model model){
        List<Comment> comments=commentService.findCommentByNewsId(newsId);
        model.addAttribute("comments",comments);
        return "news :: commentList";
    }

在service包中新建CommentService接口和CommentServiceImpl实现类，在save方法中判断评论是否有父评论（默认空值为-1），在findCommentByNewsId方法中根据评论时间排序

@Override
    public void save(Comment comment) {
        if(comment.getParentComment().getId()==-1){
            comment.setParentComment(null);
        }
        commentDao.save(comment);
    }

    @Override
    public List<Comment> findCommentByNewsId(Long newsId) {
        Sort sort=Sort.by("createTime");
        List<Comment> comments=commentDao.findByNewsIdAndParentCommentNull(newsId,sort);
        return comments;
    }

在这里插入图片描述

三、主页最新新闻的显示

在IndexController中将最新新闻添加到主页上

@RequestMapping("/footer/lastestNews")
    public String lastestNews(Model model){
       List<News> lastestNewslist=newsServcie.findTop(3);
       model.addAttribute("lastestNewslist",lastestNewslist);
       return "_fragments :: lastestNewslist1";
    }

newService中添加findtop方法

@Override
    public List<News> findTop(int i) {
        Sort sort=Sort.by(Sort.Direction.DESC,"updateTime");
        Pageable pageable= PageRequest.of(0,i,sort);
        return newsDao.findTop(pageable);
    }

newsdao中创建查询

@Query("select  n from News n where  n.recommend=true ")
    List<News> findTop(Pageable pageable);

在这里插入图片描述

四、关于我页面的显示

在IndexController中处理来自前端页面的信息，跳转到关于我页面

@RequestMapping("/about")
    public String about(){
        return "about";
    }

在这里插入图片描述

五、相关代码

po包中
Comment.java

package com.wzx.po;

import javax.persistence.*;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;


@Entity
@Table(name = "t_comment")
public class Comment {

    @Id
    @GeneratedValue
    private Long id;
    private String nickname;
    private String email;
    private String content;
    private String avatar;
    @Temporal(TemporalType.TIMESTAMP)
    private Date createTime;

    @ManyToOne
    private News news;

    @OneToMany(mappedBy = "parentComment")
    private List<Comment> replyComments = new ArrayList<>();

    @ManyToOne
    private Comment parentComment;

    private boolean adminComment;

    public Comment() {
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getNickname() {
        return nickname;
    }

    public void setNickname(String nickname) {
        this.nickname = nickname;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public String getAvatar() {
        return avatar;
    }

    public void setAvatar(String avatar) {
        this.avatar = avatar;
    }

    public Date getCreateTime() {
        return createTime;
    }

    public void setCreateTime(Date createTime) {
        this.createTime = createTime;
    }



    public List<Comment> getReplyComments() {
        return replyComments;
    }

    public void setReplyComments(List<Comment> replyComments) {
        this.replyComments = replyComments;
    }

    public Comment getParentComment() {
        return parentComment;
    }

    public void setParentComment(Comment parentComment) {
        this.parentComment = parentComment;
    }

    public boolean isAdminComment() {
        return adminComment;
    }

    public void setAdminComment(boolean adminComment) {
        this.adminComment = adminComment;
    }

    public News getNews() {
        return news;
    }

    public void setNews(News news) {
        this.news = news;
    }

    @Override
    public String toString() {
        return "Comment{" +
                "id=" + id +
                ", nickname='" + nickname + '\'' +
                ", email='" + email + '\'' +
                ", content='" + content + '\'' +
                ", avatar='" + avatar + '\'' +
                ", createTime=" + createTime +
                ", news=" + news +
                ", replyComments=" + replyComments +
                ", parentComment=" + parentComment +
                ", adminComment=" + adminComment +
                '}';
    }
}

Controller层
IndexController.java

package com.wzx.controller;

import com.wzx.po.News;
import com.wzx.po.Tag;
import com.wzx.po.Type;
import com.wzx.service.NewsService;
import com.wzx.service.TagService;
import com.wzx.service.TypeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.data.web.PageableDefault;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

@Controller
@RequestMapping
public class IndexController {
    @Autowired
    private NewsService newsServcie;

    @Autowired
    private TypeService typeService;

    @Autowired
    private TagService tagService;

    @RequestMapping
    public String index(@PageableDefault(size = 5, sort = {"updateTime"}, direction = Sort.Direction.DESC) Pageable pageable,
                        Model model){
        Page<News> page = newsServcie.findByPageable(pageable);
        List<Type> types=typeService.findTop(5);
        List<Tag> tags=tagService.findTop(5);
        model.addAttribute("page", page);
        model.addAttribute("types",types);
        model.addAttribute("tags",tags);
        return "index";
    }

    @RequestMapping("/news/{id}")
    public String news(@PathVariable Long id,Model model){
        News news=newsServcie.findNewsById(id);
        model.addAttribute("news",news);
        return "news";
    }

    @RequestMapping("/about")
    public String about(){
        return "about";
    }

    @RequestMapping("/search")
    public String search(@PageableDefault(size=3,sort = {"updateTime"},direction = Sort.Direction.DESC)Pageable pageable,
                         String query,Model model){
        Page<News> page=newsServcie.findNewsByQuery(query,pageable);
        model.addAttribute("page",page);
        model.addAttribute("query",query);
        return "search";
    }

    @RequestMapping("/footer/lastestNews")
    public String lastestNews(Model model){
       List<News> lastestNewslist=newsServcie.findTop(3);
       model.addAttribute("lastestNewslist",lastestNewslist);
       return "_fragments :: lastestNewslist1";
    }
}

CommentController.java

package com.wzx.controller;

import com.wzx.po.Comment;
import com.wzx.po.User;
import com.wzx.service.CommentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpSession;
import java.util.List;


@Controller
public class CommentController {

    @Autowired
    private CommentService commentService;

    @PostMapping("/comments")
    public String save(Comment comment, HttpSession session){
        User user=(User)session.getAttribute("user");
        if(user==null){
            comment.setAdminComment(false);
        }else {
            comment.setAdminComment(true);
        }
        commentService.save(comment);
        Long newsId=comment.getNews().getId();
        return "redirect:/comments/"+newsId;
    }

    @RequestMapping("/comments/{newsId}")
    public String comments(@PathVariable Long newsId, Model model){
        List<Comment> comments=commentService.findCommentByNewsId(newsId);
        model.addAttribute("comments",comments);
        return "news :: commentList";
    }
}

service层
CommentService.java

package com.wzx.service;

import com.wzx.po.Comment;

import java.util.List;

public interface CommentService {
    void save(Comment comment);

    List<Comment> findCommentByNewsId(Long newsId);
}

CommentServiceImpl.java

package com.wzx.service.impl;

import com.wzx.dao.CommentDao;
import com.wzx.po.Comment;
import com.wzx.service.CommentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class CommentServiceImpl implements CommentService {

    @Autowired
    private CommentDao commentDao;
    @Override
    public void save(Comment comment) {
        if(comment.getParentComment().getId()==-1){
            comment.setParentComment(null);
        }
        commentDao.save(comment);
    }

    @Override
    public List<Comment> findCommentByNewsId(Long newsId) {
        Sort sort=Sort.by("createTime");
        List<Comment> comments=commentDao.findByNewsIdAndParentCommentNull(newsId,sort);
        return comments;
    }
}

dao层
CommentDao.java

package com.wzx.dao;

import com.wzx.po.Comment;
import org.springframework.data.domain.Sort;
import org.springframework.data.jpa.repository.JpaRepository;

import java.util.List;

public interface CommentDao extends JpaRepository<Comment,Long> {
    List<Comment> findByNewsIdAndParentCommentNull(Long newsId, Sort sort);
}

前端页面
news.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>新闻详情</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../static/css/typo.css">
  <link rel="stylesheet" href="../static/css/animate.css">
  <link rel="stylesheet" href="../static/lib/prism/prism.css">
  <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css">
  <link rel="stylesheet" href="../static/css/me.css">
</head>
<body>

  <!--导航-->
  <nav th:replace="_fragments :: menu(1)"  class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
    <div class="ui container">
      <div class="ui inverted secondary stackable menu">
        <h2 class="ui teal header item">news</h2>
        <a href="#" class="active m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i>归档</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i>关于我</a>
        <div class="right m-item item m-mobile-hide">
          <div class="ui icon inverted transparent input m-margin-tb-tiny">
            <input type="text" placeholder="Search....">
            <i class="search link icon"></i>
          </div>
        </div>
      </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
      <i class="sidebar icon"></i>
    </a>
  </nav>

  <!--中间内容-->
  <div id="waypoint" class="m-container-small m-padded-tb-big animated fadeIn">
    <div class="ui container">
      <div class="ui top attached segment">
        <div class="ui horizontal link list">
          <div class="item">
            <img src="../static/images/wechat.jpg" th:src="@{${news.user.avatar}}"  alt="" class="ui avatar image">
            <div class="content"><a href="#" class="header" th:text="${news.user.nickname}">hualili</a></div>
          </div>
          <div class="item">
            <i class="calendar icon"></i> <span th:text="${#dates.format(news.updateTime,'yyyy-MM-dd')}">2017-10-01</span>
          </div>
          <div class="item">
            <i class="eye icon"></i> <span th:text="${news.views}">2342</span>
          </div>
        </div>
      </div>
      <div class="ui attached segment">
        <!--图片区域-->
        <img src="../static/images/wechat.jpg" th:src="@{${news.firstPicture}}" alt="" class="ui fluid rounded image">
      </div>
      <div class="ui  attached padded segment">
        <!--内容-->
        <div class="ui right aligned basic segment">
          <div class="ui orange basic label" th:text="${news.flag}">原创</div>
        </div>

        <h2 class="ui center aligned header" th:text="${news.title}">关于刻意练习的清单</h2>
        <br>
        <!--中间主要内容部分-->
        <div id="content" class="typo  typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-large" th:utext="${news.content}">

          <h2 id="section1">一、关于 <i class="serif">Typo.css</i></h2>

          <pre><code class="language-css">p { color: red }</code></pre>

          <pre><code class="language-css">p { color: red }</code></pre>

          <p><i class="serif">Typo.css</i> 的目的是，在一致化浏览器排版效果的同时，构建最适合中文阅读的网页排版。</p>
          <h4 >现状和如何去做：</h4>

          <p class="typo-first">排版是一个麻烦的问题 <sup><a href="#appendix1"># 附录一</a></sup>，需要精心设计，而这个设计却是常被视觉设计师所忽略的。前端工程师更常看到这样的问题，但不便变更。因为在多个 OS 中的不同浏览器渲染不同，改动需要多的时间做回归测试，所以改变变得更困难。而像我们一般使用的
            Yahoo、Eric Meyer 和 Alice base.css 中采用的 Reset 都没有很好地考虑中文排版。<i class="serif">Typo.css</i> 要做的就是解决中文排版的问题。</p>

          <p><strong><i class="serif">Typo.css</i> 测试于如下平台：</strong></p>
          <table class="ui table" summary="Typo.css 的测试平台列表">
            <thead>
            <tr>
              <th>OS/浏览器</th>
              <th>Firefox</th>
              <th>Chrome</th>
              <th>Safari</th>
              <th>Opera</th>
              <th>IE9</th>
              <th>IE8</th>
              <th>IE7</th>
              <th>IE6</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>OS X</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
            <tr>
              <td>Win 7</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>-</td>
            </tr>
            <tr>
              <td>Win XP</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
              <td>-</td>
              <td>✔</td>
              <td>✔</td>
              <td>✔</td>
            </tr>
            <tr>
              <td>Ubuntu</td>
              <td>✔</td>
              <td>✔</td>
              <td>-</td>
              <td>✔</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
              <td>-</td>
            </tr>
            </tbody>
          </table>

          <h4>中文排版的重点和难点</h4>

          <p>在中文排版中，HTML4 的很多标准在语义在都有照顾到。但从视觉效果上，却很难利用单独的 CSS 来实现，像<abbr title="在文字下多加一个点">着重号</abbr>（例：这里<em class="typo-em">强调一下</em>）。在 HTML4 中，专名号标签（<code>&lt;u&gt;</code>）已经被放弃，而
            HTML5 被<a href="http://html5doctor.com/u-element/">重新提起</a>。<i class="serif">Typo.css</i> 也根据实际情况提供相应的方案。我们重要要注意的两点是：</p>
          <ol>
            <li>语义：语义对应的用法和样式是否与中文排版一致</li>
            <li>表现：在各浏览器中的字体、大小和缩放是否如排版预期</li>
          </ol>
          <p>对于这些，<i class="serif">Typo.css</i> 排版项目的中文偏重注意点，都添加在附录中，详见：</p>
          <blockquote>
            <b>附录一</b>：<a href="#appendix1"><i class="serif">Typo.css</i> 排版偏重点</a>
          </blockquote>

          <p>目前已有像百姓网等全面使用 <i class="serif">Typo.css</i> 的项目，测试平台的覆盖，特别是在<abbr title="手机、平板电脑等移动平台">移动端</abbr>上还没有覆盖完主流平台，希望有能力的同学能加入测试行列，或者加入到 <i class="serif">Typo.css</i>
            的开发。加入方法：<a href="https://github.com/sofish/Typo.css">参与 <i class="serif">Typo.css</i> 开发</a>。如有批评、建议和意见，也随时欢迎给在 Github 直接提 <a
                    href="https://github.com/sofish/Typo.css/issues">issues</a>，或给<abbr title="Sofish Lin, author of Typo.css"
                                                                                        role="author">我</abbr>发<a
                    href="mailto:sofish@icloud.com">邮件</a>。</p>


          <h2 id="section2">二、排版实例：</h2>

          <p>提供2个排版实例，第一个中文实例来自于来自于<cite class="typo-unique">张燕婴</cite>的《论语》，由于古文排版涉及到的元素比较多，所以采用《论语》中《学而》的第一篇作为排版实例介绍；第2个来自到经典的
            Lorem Ipsum，并加入了一些代码和列表等比较具有代表性的排版元素。</p>

          <h3 id="section2-1">例1：论语学而篇第一</h3>

          <p>
            <small><b>作者：</b><abbr title="名丘，字仲尼">孔子</abbr>（
              <time>前551年9月28日－前479年4月11日</time>
              ）
            </small>
          </p>

          <h4>本篇引语</h4>

          <p>
            《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以第一章的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容涉及诸多方面。其中重点是「吾日三省吾身」；「节用而爱人，使民以时」；「礼之用，和为贵」以及仁、孝、信等道德范畴。 </p>

          <h4>原文</h4>

          <p>子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」 </p>

          <h4>译文</h4>

          <p>孔子说：「学了又时常温习和练习，不是很愉快吗？有志同道合的人从远方来，不是很令人高兴的吗？人家不了解我，我也不怨恨、恼怒，不也是一个有德的君子吗？」 </p>

          <h4>评析</h4>

          <p>宋代著名学者<u class="typo-u">朱熹</u>对此章评价极高，说它是「入道之门，积德之基」。本章这三句话是人们非常熟悉的。历来的解释都是：学了以后，又时常温习和练习，不也高兴吗等等。三句话，一句一个意思，前后句子也没有什么连贯性。但也有人认为这样解释不符合原义，指出这里的「学」不是指学习，而是指学说或主张；「时」不能解为时常，而是时代或社会的意思，「习」不是温习，而是使用，引申为采用。而且，这三句话不是孤立的，而是前后相互连贯的。这三句的意思是：自己的学说，要是被社会采用了，那就太高兴了；退一步说，要是没有被社会所采用，可是很多朋友赞同<abbr
                  title="张燕婴">我</abbr>的学说，纷纷到我这里来讨论问题，我也感到快乐；再退一步说，即使社会不采用，人们也不理解我，我也不怨恨，这样做，不也就是君子吗？（见《齐鲁学刊》1986年第6期文）这种解释可以自圆其说，而且也有一定的道理，供读者在理解本章内容时参考。
          </p>

          <p>此外，在对「人不知，而不愠」一句的解释中，也有人认为，「人不知」的后面没有宾语，人家不知道什么呢？当时因为孔子有说话的特定环境，他不需要说出知道什么，别人就可以理解了，却给后人留下一个谜。有人说，这一句是接上一句说的，从远方来的朋友向我求教，我告诉他，他还不懂，我却不怨恨。这样，「人不知」就是「人家不知道我所讲述的」了。这样的解释似乎有些牵强。</p>

          <p>总之，本章提出以学习为乐事，做到人不知而不愠，反映出孔子学而不厌、诲人不倦、注重修养、严格要求自己的主张。这些思想主张在《论语》书中多处可见，有助于对第一章内容的深入了解。</p>

          <h3 id="section2-2">例2：英文排版</h3>

          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
            standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
            type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
            essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
            passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
            Ipsum.</p>
          <blockquote>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </blockquote>

          <h4>The standard Lorem Ipsum passage, used since the 1500s</h4>

          <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
            occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

          <h4>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h4>

          <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
            voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
            velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim
            ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
            consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
            vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>

          <h4>List style in action</h4>
          <ul>
            <li>If you wish to succeed, you should use persistence as your good friend, experience as your reference, prudence as
              your brother and hope as your sentry.
              <p>如果你希望成功，当以恒心为良友，以经验为参谋，以谨慎为兄弟，以希望为哨兵。</p>
            </li>
            <li>Sometimes one pays most for the things one gets for nothing.
              <p>有时候一个人为不花钱得到的东西付出的代价最高。</p>
            </li>
            <li>Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things
              easily.
              <p>只有有耐心圆满完成简单工作的人，才能够轻而易举的完成困难的事。</p>
            </li>
          </ul>

          <h4>You may want to create a perfect <code>&lt;hr /&gt;</code> line, despite the fact that there will never have one
          </h4>
          <hr/>
          <p><abbr title="法国作家罗切福考尔德">La Racheforcauld</abbr> said:
            <mark>"Few things are impossible in themselves; and it is often for want of will, rather than of means, that man fails
              to succeed".
            </mark>
            You just need to follow the browser's behavior, and set a right <code>margin</code> to it。it will works nice as the
            demo you're watching now. The following code is the best way to render typo in Chinese:
          </p>
          <pre ><code class="language-css">
/* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */
h1,h2,h3,h4,h5,h6 {
    line-height:1;font-family:Arial,sans-serif;margin:1.4em 0 0.8em;
}
h1{font-size:1.8em;}
h2{font-size:1.6em;}
h3{font-size:1.4em;}
h4{font-size:1.2em;}
h5,h6{font-size:1em;}

/* 现代排版：保证块/段落之间的空白隔行 */
.typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr {
    margin:1em 0 0.6em;
}
</code></pre>

          <h3 id="section3">三、附录</h3>

          <h5 id="appendix1">1、<i class="serif">Typo.css</i> 排版偏重点</h5>
          <table class="ui table" summary="Typo.css 排版偏重点">
            <thead>
            <tr>
              <th>类型</th>
              <th>语义</th>
              <th>标签</th>
              <th>注意点</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <th rowspan="15">基础标签</th>
              <td>标题</td>
              <td><code>h1</code> ～ <code>h6</code></td>
              <td>全局不强制大小，<code>.typo</code> 中标题与其对应的内容应紧贴，并且有相应的大小设置</td>
            </tr>
            <tr>
              <td>上、下标</td>
              <td><code>sup</code>/<code>sub</code></td>
              <td>保持与 MicroSoft Office Word 等程序的日常排版一致</td>
            </tr>
            <tr>
              <td>引用</td>
              <td><code>blockquote</code></td>
              <td>显示/嵌套样式</td>
            </tr>
            <tr>
              <td>缩写</td>
              <td><code>abbr</code></td>
              <td>是否都有下划线，鼠标 <code>hover</code> 是否为帮助手势</td>
            </tr>
            <tr>
              <td>分割线</td>
              <td><code>hr</code></td>
              <td>显示的 <code>padding</code> 和 <code>margin</code>正确</td>
            </tr>
            <tr>
              <td>列表</td>
              <td><code>ul</code>/<code>ol</code>/<code>dl</code></td>
              <td>在全局没有 <code>list-style</code>，在 .<code>typo</code> 中对齐正确</td>
            </tr>
            <tr>
              <td>定义列表</td>
              <td><code>dl</code></td>
              <td>全局 <code>padding</code> 和 <code>margin</code>为0， .<code>typo</code> 中对齐正确</td>
            </tr>
            <tr>
              <td>选项</td>
              <td><code>input[type=radio[, checkbox]]</code></td>
              <td>与其他 <code>form</code> 元素排版时是否居中</td>
            </tr>
            <tr>
              <td>斜体</td>
              <td><code>i</code></td>
              <td>只设置一种斜体，让 <code>em</code> 和 <code>cite</code> 显示为正体</td>
            </tr>
            <tr>
              <td>强调</td>
              <td><code>em</code></td>
              <td>在全局显示正体，在 <code>.typo</code> 中显示与 <code>b</code> 和 <code>strong</code> 的样式一致，为粗体</td>
            </tr>
            <tr>
              <td>加强</td>
              <td><code>strong/b</code></td>
              <td>显示为粗体</td>
            </tr>
            <tr>
              <td>标记</td>
              <td><code>mark</code></td>
              <td>类似荧光笔</td>
            </tr>
            <tr>
              <td>印刷</td>
              <td><code>small</code></td>
              <td>保持为正确字体的 80% 大小，颜色设置为浅灰色</td>
            </tr>
            <tr>
              <td>表格</td>
              <td><code>table</code></td>
              <td>全局不显示线条，在 <code>table</code> 中显示表格外框，并且表头有浅灰背景</td>
            </tr>
            <tr>
              <td>代码</td>
              <td><code>pre</code>/<code>code</code></td>
              <td>字体使用 <code>courier</code> 系字体，保持与 <code>serif</code> 有比较一致的显示效果</td>
            </tr>
            <tr>
              <th rowspan="5">特殊符号</th>
              <td>着重号</td>
              <td><em class="typo-em">在文字下加点</em></td>
              <td>在支持 <code>:after</code> 和 <code>:before</code> 的浏览器可以做渐进增强实现</td>
            </tr>
            <tr>
              <td>专名号</td>
              <td><u>林建锋</u></td>
              <td>专名号，有下划线，使用 <code>u</code> 或都 <code>.typo-u</code> 类</td>
            </tr>
            <tr>
              <td>破折号</td>
              <td>——</td>
              <td>保持一划，而非两划</td>
            </tr>
            <tr>
              <td>人民币</td>
              <td>&yen;</td>
              <td>使用两平等线的符号，或者 HTML 实体符号 <code>&amp;yen;</code></td>
            </tr>
            <tr>
              <td>删除符</td>
              <td>
                <del>已删除（deleted）</del>
              </td>
              <td>一致化各浏览器显示，中英混排正确</td>
            </tr>
            <tr>
              <th rowspan="3">加强类</th>
              <td>专名号</td>
              <td><code>.typo-u</code></td>
              <td>由于 <code>u</code> 被 HTML4 放弃，在向后兼容上推荐使用 <code>.typo-u</code></td>
            </tr>
            <tr>
              <td>着重符</td>
              <td><code>.typo-em</code></td>
              <td>利用 <code>:after</code> 和 <code>:before</code> 实现着重符</td>
            </tr>
            <tr>
              <td>清除浮动</td>
              <td><code>.clearfix</code></td>
              <td>与一般 CSS Reset 保持一对致 API</td>
            </tr>
            <tr>
              <th rowspan="5">注意点</th>
              <td colspan="3">（1）中英文混排行高/行距</td>
            </tr>
            <tr>
              <td colspan="3">（2）上下标在 IE 中显示效果</td>
            </tr>
            <tr>
              <td colspan="3">（3）块/段落分割空白是否符合设计原则</td>
            </tr>
            <tr>
              <td colspan="3">（4）input 多余空间问题</td>
            </tr>
            <tr>
              <td colspan="3">（5）默认字体色彩，目前采用 <code>#333</code> 在各种浏览显示比较好</td>
            </tr>
            </tbody>
          </table>

          <h5 id="appendix2">2、开源许可</h5>

        </div>

        <!--标签-->
        <div class="m-padded-lr-responsive">
          <div class="ui basic teal left pointing label" th:each="tag : ${news.tags}" th:text="${tag.name}">方法论</div>
        </div>

        <!--赞赏-->
        <div th:if="${news.appreciation}">
          <div class="ui center aligned basic segment">
            <button id="payButton" class="ui orange basic circular button">赞赏</button>
          </div>
          <div class="ui payQR flowing popup transition hidden">
            <div class="ui orange basic label">
              <div class="ui images" style="font-size: inherit !important;">
                <div class="image">
                  <img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" alt="" class="ui rounded bordered image" style="width: 120px">
                  <div>支付宝</div>
                </div>
                <div class="image">
                  <img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" alt="" class="ui rounded bordered image" style="width: 120px">
                  <div>微信</div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="ui attached positive message" th:if="${news.shareStatement}">
        <!--新闻信息-->
        <div class="ui middle aligned grid">
          <div class="eleven wide column">
            <ui class="list">
              <li>作者：<span th:text="${news.user.nickname}">hualili</span><a href="#" th:href="@{/about}" target="_blank">（联系作者）</a></li>
              <li>发表时间：<span th:text="${#dates.format(news.updateTime,'yyyy-MM-dd HH:mm')}">2017-10-02 09:08</span></li>
              <li>版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
              <li>公众号转载：请在文末添加作者公众号二维码</li>
            </ui>
          </div>
          <div class="five wide column">
            <img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" alt="" class="ui right floated rounded bordered image" style="width: 110px">
          </div>
        </div>
      </div>
      <div  class="ui bottom attached segment" th:if="${news.commentabled}">
        <!--留言区域列表-->
        <div id="comment-container"  class="ui teal segment">
          <div th:fragment="commentList">
            <div class="ui threaded comments" style="max-width: 100%;">
              <h3 class="ui dividing header">评论</h3>
              <div class="comment" th:each="comment : ${comments}">
                <a class="avatar">
                  <img src="../static/images/wechat.jpg" th:src="@{${comment.avatar}}">
                </a>
                <div class="content">
                  <a class="author" >
                    <span th:text="${comment.nickname}">Matt</span>
                    <div class="ui mini basic teal left pointing label m-padded-mini" th:if="${comment.adminComment}">博主</div>
                  </a>
                  <div class="metadata">
                    <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                  </div>
                  <div class="text" th:text="${comment.content}">
                    How artistic!
                  </div>
                  <div class="actions">
                    <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}" onclick="reply(this)">回复</a>
                  </div>
                </div>
                <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">
                  <div class="comment" th:each="reply : ${comment.replyComments}">
                    <a class="avatar">
                      <img src="../static/images/wechat.jpg" th:src="@{${reply.avatar}}">
                    </a>
                    <div class="content">
                      <a class="author" >
                        <span th:text="${reply.nickname}">小红</span>
                        <div class="ui mini basic teal left pointing label m-padded-mini" th:if="${reply.adminComment}">博主</div>
                        &nbsp;<span th:text="|@ ${reply.parentComment.nickname}|" class="m-teal">@ 小白</span>
                      </a>
                      <div class="metadata">
                        <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                      </div>
                      <div class="text" th:text="${reply.content}">
                        How artistic!
                      </div>
                      <div class="actions">
                        <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!--/*-->
              <div class="comment">
                <a class="avatar">
                  <img src="../static/images/wechat.jpg">
                </a>
                <div class="content">
                  <a class="author">Elliot Fu</a>
                  <div class="metadata">
                    <span class="date">Yesterday at 12:30AM</span>
                  </div>
                  <div class="text">
                    <p>This has been very useful for my research. Thanks as well!</p>
                  </div>
                  <div class="actions">
                    <a class="reply">回复</a>
                  </div>
                </div>
                <div class="comments">
                  <div class="comment">
                    <a class="avatar">
                      <img src="../static/images/wechat.jpg">
                    </a>
                    <div class="content">
                      <a class="author">Jenny Hess</a>
                      <div class="metadata">
                        <span class="date">Just now</span>
                      </div>
                      <div class="text">
                        Elliot you are always so right :)
                      </div>
                      <div class="actions">
                        <a class="reply">回复</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="comment">
                <a class="avatar">
                  <img src="../static/images/wechat.jpg">
                </a>
                <div class="content">
                  <a class="author">Joe Henderson</a>
                  <div class="metadata">
                    <span class="date">5 days ago</span>
                  </div>
                  <div class="text">
                    Dude, this is awesome. Thanks so much
                  </div>
                  <div class="actions">
                    <a class="reply">回复</a>
                  </div>
                </div>
              </div>
              <!--*/-->

            </div>
          </div>
        </div>
        <div id="comment-form" class="ui form">
          <input type="hidden" name="news.id" th:value="${news.id}">
          <input type="hidden" name="parentComment.id" value="-1">
          <div class="field">
            <textarea name="content" placeholder="请输入评论信息..."></textarea>
          </div>
          <div class="fields">
            <div class="field m-mobile-wide m-margin-bottom-small">
              <div class="ui left icon input">
                <i class="user icon"></i>
                <input type="text" name="nickname" placeholder="姓名" th:value="${session.user}!=null ? ${session.user.nickname}">
              </div>
            </div>
            <div class="field m-mobile-wide m-margin-bottom-small">
              <div class="ui left icon input">
                <i class="mail icon"></i>
                <input type="text" name="email" placeholder="邮箱" th:value="${session.user}!=null ? ${session.user.email}">
              </div>
            </div>
            <div class="field  m-margin-bottom-small m-mobile-wide">
              <button id="commentpost-btn" type="button" class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>

  <div id="toolbar" class="m-padded m-fixed m-right-bottom" style="display: none">
    <div class="ui vertical icon buttons ">
      <button type="button" class="ui toc teal button" >目录</button>
      <a href="#comment-container" class="ui teal button" >留言</a>
      <button class="ui wechat icon button"><i class="weixin icon"></i></button>
      <div id="toTop-button" class="ui icon button" ><i class="chevron up icon"></i></div>
    </div>
  </div>

  <div class="ui toc-container flowing popup transition hidden" style="width: 250px!important;">
    <ol class="js-toc">

    </ol>
  </div>

  <div id="qrcode" class="ui wechat-qr flowing popup transition hidden "style="width: 130px !important;">
    <!--<img src="./static/images/wechat.jpg" alt="" class="ui rounded image" style="width: 120px !important;">-->
  </div>



  <br>
  <br>
  <!--底部footer-->
  <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
      <div class="ui inverted divided stackable grid">
        <div class="three wide column">
          <div class="ui inverted link list">
            <div class="item">
              <img src="../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
            </div>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced " >最新新闻</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">Email：hualili@163.com</a>
            <a href="#" class="item m-text-thin">QQ：hualili</a>
          </div>
        </div>
        <div class="seven wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">news</h4>
          <p class="m-text-thin m-text-spaced m-opacity-mini">消息即狭义的新闻，它是对新近发生的有社会意义并引起公众兴趣的事实的简短报道。因此，真实性、时效性及文字少、篇幅小成为消息的基本特征...</p>
        </div>
      </div>
      <div class="ui inverted section divider"></div>
      <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - 2017 hualili Designed by hualili</p>
    </div>

  </footer>

  <!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
  
<script src="../static/lib/prism/prism.js"></script>
<script src="../static/lib/tocbot/tocbot.min.js"></script>
<script src="../static/lib/qrcode/qrcode.min.js"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js"></script>
  <!--/*/</th:block>/*/-->


  <script th:inline="javascript">

    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

    $('#payButton').popup({
      popup : $('.payQR.popup'),
      on : 'click',
      position: 'bottom center'
    });

    tocbot.init({
      // Where to render the table of contents.
      tocSelector: '.js-toc',
      // Where to grab the headings to build the table of contents.
      contentSelector: '.js-toc-content',
      // Which headings to grab inside of the contentSelector element.
      headingSelector: 'h1, h2, h3',
    });

    $('.toc.button').popup({
      popup : $('.toc-container.popup'),
      on : 'click',
      position: 'left center'
    });

    $('.wechat').popup({
      popup : $('.wechat-qr'),
      position: 'left center'
    });

    var serurl = /*[[#{news.serurl}]]*/"127.0.0.1:8080";
    var url = /*[[@{/news/{id}(id=${news.id})}]]*/"";
    var qrcode = new QRCode("qrcode", {
      text: serurl+url,
      width: 110,
      height: 110,
      colorDark : "#000000",
      colorLight : "#ffffff",
      correctLevel : QRCode.CorrectLevel.H
    });
    
    $('#toTop-button').click(function () {
      $(window).scrollTo(0,500);
    });


    var waypoint = new Waypoint({
      element: document.getElementById('waypoint'),
      handler: function(direction) {
        if (direction == 'down') {
          $('#toolbar').show(100);
        } else {
          $('#toolbar').hide(500);
        }
        console.log('Scrolled to waypoint!  ' + direction);
      }
    })


    //评论表单验证
    $('.ui.form').form({
      fields: {
        title: {
          identifier: 'content',
          rules: [{
            type: 'empty',
            prompt: '请输入评论内容'
          }
          ]
        },
        content: {
          identifier: 'nickname',
          rules: [{
            type: 'empty',
            prompt: '请输入你的大名'
          }]
        },
        type: {
          identifier: 'email',
          rules: [{
            type: 'email',
            prompt: '请填写正确的邮箱地址'
          }]
        }
      }
    });

    $(function () {
      $("#comment-container").load(/*[[@{/comments/{id}(id=${news.id})}]]*/"comments/6");
    });



    $('#commentpost-btn').click(function () {
      var boo = $('.ui.form').form('validate form');
      if (boo) {
        console.log('校验成功');
        postData();
      } else {
        console.log('校验失败');
      }

    });
    
    function postData() {
      $("#comment-container").load(/*[[@{/comments}]]*/"",{
        "parentComment.id" : $("[name='parentComment.id']").val(),
        "news.id" : $("[name='news.id']").val(),
        "nickname": $("[name='nickname']").val(),
        "email"   : $("[name='email']").val(),
        "content" : $("[name='content']").val()
      },function (responseTxt, statusTxt, xhr) {
//        $(window).scrollTo($('#comment-container'),500);
        clearContent();
      });
    }

    function clearContent() {
      $("[name='content']").val('');
      $("[name='parentComment.id']").val(-1);
      $("[name='content']").attr("placeholder", "请输入评论信息...");
    }


    function reply(obj) {
      var commentId = $(obj).data('commentid');
      var commentNickname = $(obj).data('commentnickname');
      $("[name='content']").attr("placeholder", "@"+commentNickname).focus();
      $("[name='parentComment.id']").val(commentId);
      $(window).scrollTo($('#comment-form'),500);
    }

    
  </script>
</body>
</html>

search.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>搜索结果</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../static/css/me.css">
</head>
<body>

  <!--导航-->
  <nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
    <div class="ui container">
      <div class="ui inverted secondary stackable menu">
        <h2 class="ui teal header item">news</h2>
        <a href="#" class=" m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
        <a href="#" class="active m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i>归档</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i>关于我</a>
        <div class="right m-item item m-mobile-hide">
          <div class="ui icon inverted transparent input m-margin-tb-tiny">
            <input type="text" placeholder="Search....">
            <i class="search link icon"></i>
          </div>
        </div>
      </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
      <i class="sidebar icon"></i>
    </a>
  </nav>

  <!--中间内容-->
  <div  class="m-container-small m-padded-tb-big">
    <div class="ui container">
      <!--header-->
      <div class="ui top attached segment">
        <div class="ui middle aligned two column grid">
          <div class="column">
            <h3 class="ui teal header">搜索结果</h3>
          </div>
          <div class="right aligned column">
            共 <h2 class="ui orange header m-inline-block m-text-thin" th:text="${page.totalElements}"> 14 </h2> 个
          </div>
        </div>
      </div>



      <div class="ui top attached teal segment">
        <div class="ui padded vertical segment m-padded-tb-large" th:each="news : ${page.content}">
          <div class="ui middle aligned mobile reversed stackable grid" >
            <div class="eleven wide column">
              <h3 class="ui header" ><a href="#" th:href="@{/news/{id}(id=${news.id})}" target="_blank" class="m-black" th:text="${news.title}">你真的理解什么是财富自由吗?</a></h3>
              <p class="m-text" th:text="|${news.description}......|">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
              <div class="ui grid">
                <div class="eleven wide column">
                  <div class="ui mini horizontal link list">
                    <div class="item">
                      <img src="../static/images/wechat.jpg" th:src="@{${news.user.avatar}}"  alt="" class="ui avatar image">
                      <div class="content"><a href="#" class="header" th:text="${news.user.nickname}" >hualili</a></div>
                    </div>
                    <div class="item">
                      <i class="calendar icon"></i><span th:text="${#dates.format(news.updateTime,'yyyy-MM-dd')}">2017-10-01</span>
                    </div>
                    <div class="item">
                      <i class="eye icon"></i> <span th:text="${news.views}">2342</span>
                    </div>
                  </div>
                </div>
                <div class="right aligned five wide column">
                  <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin" th:text="${news.type.name}">认知升级</a>
                </div>
              </div>
            </div>

            <div class="five wide column">
              <a href="#" th:href="@{/news/{id}(id=${news.id})}" target="_blank">
                <img src="../static/images/wechat.jpg" th:src="@{${news.firstPicture}}"  alt="" class="ui rounded image">
              </a>
            </div>

          </div>
        </div>
      </div>

      <!--footer-->
      <div class="ui bottom attached segment" th:if="${page.totalPages}>1">
        <div class="ui middle aligned two column grid">
          <div class="column">
            <a href="#" th:href="@{/search/(page=${page.number}-1,query=${query})}"  th:unless="${page.first}" class="ui mini teal basic button">上一页</a>
          </div>
          <div class="right aligned column">
            <a href="#" th:href="@{/search/(page=${page.number}+1,query=${query})}"  th:unless="${page.last}" class="ui mini teal basic button">下一页</a>
          </div>
        </div>
      </div>

    </div>
  </div>

  <br>
  <br>
  <!--底部footer-->
  <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
      <div class="ui inverted divided stackable grid">
        <div class="three wide column">
          <div class="ui inverted link list">
            <div class="item">
              <img src="../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
            </div>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced " >最新新闻</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">Email：hualili@163.com</a>
            <a href="#" class="item m-text-thin">QQ：hualili</a>
          </div>
        </div>
        <div class="seven wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">news</h4>
          <p class="m-text-thin m-text-spaced m-opacity-mini">消息即狭义的新闻，它是对新近发生的有社会意义并引起公众兴趣的事实的简短报道。因此，真实性、时效性及文字少、篇幅小成为消息的基本特征...</p>
        </div>
      </div>
      <div class="ui inverted section divider"></div>
      <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - 2017 hualili Designed by hualili</p>
    </div>

  </footer>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>

  <script>
    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

  </script>
</body>
</html>

about.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head  th:replace="_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>关于我</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../static/css/me.css">
</head>
<body>

  <!--导航-->
  <nav th:replace="_fragments :: menu(5)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
    <div class="ui container">
      <div class="ui inverted secondary stackable menu">
        <h2 class="ui teal header item">news</h2>
        <a href="#" class=" m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
        <a href="#" class=" m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i>归档</a>
        <a href="#" class="active m-item item m-mobile-hide"><i class="mini info icon"></i>关于我</a>
        <div class="right m-item item m-mobile-hide">
          <div class="ui icon inverted transparent input m-margin-tb-tiny">
            <input type="text" placeholder="Search....">
            <i class="search link icon"></i>
          </div>
        </div>
      </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
      <i class="sidebar icon"></i>
    </a>
  </nav>

  <!--中间内容-->
  <div  class="m-container m-padded-tb-big animated fadeIn">
    <div class="ui container">

      <div class="ui stackable grid">
        <div class="eleven wide column">
          <div class="ui segment">
            <img src="../static/images/wechat.jpg" alt="" class="ui rounded image">
          </div>
        </div>
        <div class="five wide column">
          <div class="ui top attached segment">
            <div class="ui header">关于我</div>
          </div>
          <div class="ui attached segment">
            <p class="m-text">xxx，一个终身学习者，誓将学习无限循环. 希望结识可以共同成长的小伙伴.</p>
            <p class="m-text">热爱编程，喜欢折腾，正在探索高效学习编程技术的方法...</p>
          </div>
          <div class="ui attached segment">
            <div class="ui orange basic left pointing label">编程</div>
            <div class="ui orange basic left pointing label">写作</div>
            <div class="ui orange basic left pointing label">思考</div>
            <div class="ui orange basic left pointing label">运动</div>
          </div>
          <div class="ui attached segment">
            <div class="ui teal basic left pointing label m-margin-tb-tiny">Java</div>
            <div class="ui teal basic left pointing label m-margin-tb-tiny">JavaScript</div>
            <div class="ui teal basic left pointing label m-margin-tb-tiny">Node</div>
            <div class="ui teal basic left pointing label m-margin-tb-tiny">React</div>
            <div class="ui teal basic left pointing label m-margin-tb-tiny">RN</div>
            <div class="ui teal basic left pointing label m-margin-tb-tiny">MYSQL</div>
            <div class="ui teal basic left pointing label m-margin-tb-tiny">...</div>
          </div>
          <div class="ui bottom attached segment">
            <a href="#" class="ui circular icon button"><i class="github icon"></i></a>
            <a href="#" class="ui wechat circular icon button"><i class="weixin icon"></i></a>
            <a href="#" class="ui qq circular icon button" data-content="hualili" data-position="bottom center"><i class="qq icon"></i></a>
          </div>

          <div class="ui wechat-qr flowing popup transition hidden">
            <img src="../static/images/wechat.jpg" alt="" class="ui rounded image" style="width: 110px">
          </div>
          </div>
      </div>

    </div>
  </div>

  <br>
  <br>
  <!--底部footer-->
  <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
      <div class="ui inverted divided stackable grid">
        <div class="three wide column">
          <div class="ui inverted link list">
            <div class="item">
              <img src="../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
            </div>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced " >最新新闻</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">Email：hualili@163.com</a>
            <a href="#" class="item m-text-thin">QQ：xxx</a>
          </div>
        </div>
        <div class="seven wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">news</h4>
          <p class="m-text-thin m-text-spaced m-opacity-mini">消息即狭义的新闻，它是对新近发生的有社会意义并引起公众兴趣的事实的简短报道。因此，真实性、时效性及文字少、篇幅小成为消息的基本特征...</p>
        </div>
      </div>
      <div class="ui inverted section divider"></div>
      <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - 2017 hualili Designed by hualili</p>
    </div>

  </footer>
  <!--/*/<th:block th:replace="_fragments :: script">/*/-->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
  <!--/*/</th:block>/*/-->

  <script>
    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.wechat').popup({
      popup : $('.wechat-qr'),
      position: 'bottom center'
    });
    $('.qq').popup();

  </script>
</body>
</html>
路人wu
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于SpringBoot校园新闻管理系统的设计与实现
2301_76575540的博客
03-01 949
本校园新闻管理系统分为管理员还有用户两个权限，管理员可以管理用户的基本信息内容，可以管理公告信息以及新闻信息信息，能够与用户进行相互交流等操作，用户可以查看新闻信息信息，可以查看公告以及查看管理员回复信息等操作。
Springmvc，BS架构下新闻发布系统
03-23
完整的的BS架构新闻发布系统，画风清新，样式统一，提供完整前后台代码
基于SpringBoot的新闻管理系统
计算机学姐的博客
09-11 525
基于SpringBoot的新闻管理系统【附源码文档】、前后端分离
java基于Springboot+vue的新闻投稿发布管理系统
QQ860234001的专栏
07-01 558
新闻管理系统的开发背景主要涉及以下几个方面：新闻信息爆炸性增长：随着互联网的快速普及和社交媒体的兴起，大量的新闻信息在网络上产生和传播。传统的新闻管理方式已经无法应对大规模、高速度的新闻信息的管理和处理需求。因此，需要开发新闻管理系统来有效地组织、存储和检索海量的新闻信息。提高新闻工作效率：传统的新闻管理通常是基于纸质或电子邮件等方式进行的，涉及到大量的纸张、文件和人工处理，效率较低，并且易于出现信息遗漏或错误。
基于springboot的新闻资讯系统的设计与实现
qq_1250652849的博客
01-18 1125
基于springboot的新闻资讯系统的设计与实现 基于springboot的新闻资讯系统的设计与实现 基于springboot的新闻资讯系统的设计与实现 基于springboot的新闻资讯系统的设计与实现 基于springboot的新闻资讯系统的设计与实现 基于springboot的新闻资讯系统的设计与实现 基于springboot的新闻资讯系统的设计与实现 基于springboot的新闻资讯系统的设计与实现
隐藏手机号码的中间部分，只显示前后两位数字
小虎哥－把不可能的变成可能
07-11 824
  /** * 隐藏手机 * @access mobile_hide * @param $mobile * @author * @return string * */ function mobile_hide($mobile){ $myMobile_len = strlen($mobile); ...
SpringBoot+Vue 宿舍管理系统 （含PPT）
07-02
【SpringBoot+Vue 宿舍管理系统】是一种基于Java后端框架SpringBoot和前端框架Vue.js构建的高效、轻量级的管理系统。这个项目是专为毕业设计或类似应用场景设计的，旨在解决校园宿舍管理中的各种问题，如入住、退宿...
基于springboot的实习管理系统源码.zip
10-04
《基于SpringBoot的实习管理系统详解》 在当前的IT行业中，实习管理系统的开发已经成为高校、企业和教育机构不可或缺的一部分。SpringBoot作为Java领域的热门框架，以其快速开发、简化配置的特性，成为了构建此类...
基于springboot的实习管理系统源码数据库.zip
03-11
数据库通常存储实习管理系统的各类实体信息，如学生、导师、实习岗位、实习日志等。开发者可能使用MySQL或者Oracle等关系型数据库，通过MyBatis的XML映射文件或注解来定义SQL语句，实现数据的增删改查。数据库设计是...
springboot207基于springboot的实习管理系统.zip
最新发布
05-26
《SpringBoot207：基于SpringBoot的实习管理系统详解》 SpringBoot作为一款快速开发框架，已经在Java领域占据了举足轻重的地位。本系统“基于SpringBoot的实习管理系统”充分利用了SpringBoot的便利性，旨在简化...
基于Springboot+mybatis+html的简易版新闻管理系统
Timi2019的博客
01-11 633
基本功能要求：1、可以实现用户登陆2、可以实现用户注册3、可以实现新闻列表输出4、可以实现新闻的发布。
基于SpringBoot的新闻管理发布系统，新闻后台管理系统。.zip
08-05
IT毕业设计
Springboot新闻管理系统1
datawangn的博客
08-05 1062
一、自动生成数据库表 Springboot 之 Hibernate自动建表（Mysql） 先引入Maven依赖包 org.springframework.boot spring-boot-starter-data-jpa mysql mysql-connector-java 创建配置文件application.yml server: port: 8082 spring: datasource: url: jdbc:mysql://localhost:3306/tnews?characterEncod
SpringBoot新闻管理系统——新闻编辑、修改、发布
kiss_the_rian的博客
07-30 3014
要达到的效果： 在新闻管理界面显示所有已发布的新闻集合 可以在列表中对所需要的新闻根据分类和标签进行筛选搜索 可以对已有新闻删除 首先要显示所有新闻，就要从数据库中查找： 1 在dao层接口 @Query("select n from News n where n.recommend=true") List<News> findTop(Pageable pageable); 2 Service层条件查找 在Service层中，对新闻根据标签进行筛选： 这里从前端页面获取查询，用fi
SpringBoot--个人博客--2.页面设计与开发--首页
weixin_41988224的博客
02-05 439
2.1设计 设计原型工具：axure 2.2页面开发–首页
springboot个人博客的构建（6） 分类管理(标签管理)
qq_40979622的博客
11-02 2611
标签管理和分类管理一样。 分类管理页面： 首先：建立HTML文件types.html 这个是分类列表的页面。  这个页面是由blog.html页面由来的，进行修改得到。 看源代码:这里用的模板引用，在admin/下面建立新的模板引擎。 先看模板引擎： &lt;!DOCTYPE html&gt; &lt;html lang="en" xmlns:th="http://www...
基于Springboot 十分钟搭建后台管理系统
越努力越幸运的博客
12-06 5666
基于Springboot 十分钟搭建后台管理系统第1章 Guns系统预热1-1课程体系介绍1-2 Guns框架介绍1.3 guns框架包结构介绍1.4 导入数据文件 第1章 Guns系统预热 1-1课程体系介绍 1-2 Guns框架介绍 Guns3.1 1.3 guns框架包结构介绍 1.4 导入数据文件 ...
Semantic UI学习
shelleyyyy的博客
11-15 738
Semantic UI 是一套开源的 CSS 与 JavaScript 框架，提供了一些设计好的界面组件，你可以在项目里直接使用这些组件。只需要引入相应的CSS和JavaScript即可使用啦。 <link rel="stylesheet" href="https://ninghao.net/semantic/dist/semantic.min.css"> <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.mi
springboot+logback日志输出企业实践（上）
masson32的专栏
11-28 937
在java应用开发过程中，日志输出与记录是重要一环，logback是当前的首选日志框架，本文将对springboot+logback的使用及在企业的实践进行详细描述。
基于springboot实习管理系统-答辩PPT.ppt
09-05
"基于SpringBoot的实习管理系统是一个利用现代计算机技术改进传统实习管理模式的应用，旨在提升实习管理的效率和准确性。系统设计包含了文字、图像处理，并涵盖了实习管理的多个核心功能，如用户信息管理、实习单位...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值