文章整合

src/main/java/com/caimei/www/controller/unlimited/ArticleController.java

@@ -2,6 +2,7 @@ package com.caimei.www.controller.unlimited;
 
 import com.caimei.www.controller.BaseController;
 import com.caimei.www.pojo.JsonModel;
+import com.caimei.www.pojo.page.Article;
 import com.caimei.www.pojo.page.BaseLink;
 import com.caimei.www.pojo.page.ImageLink;
 import com.caimei.www.service.ArticleService;
@@ -71,6 +72,8 @@ public class ArticleController extends BaseController {
 	 */
 	@GetMapping("/info/detail-{id}-1.html")
 	public String toArticleDetail(@PathVariable("id") Integer id, final Model model) {
+		List<BaseLink> typeList = articleService.getArticleTypes();
+		model.addAttribute("articleType", typeList);
 		model.addAttribute("articleId", id);
 		return ARTICLE_DETAIL_PATH;
 	}
@@ -95,6 +98,17 @@ public class ArticleController extends BaseController {
         return articleService.getArticleRecommended(typeId, pageNum, pageSize);
     }
 
+    /**
+     * 获取相关文章
+     */
+    @GetMapping("/article/related")
+    @ResponseBody
+    public JsonModel<PageInfo<Article>> getArticleRelated(Integer id, String labels,
+														  @RequestParam(value = "pageNum", defaultValue = "1") int pageNum,
+														  @RequestParam(value = "pageSize", defaultValue = "3") int pageSize) {
+        return articleService.getArticleRelated(id, labels, pageNum, pageSize);
+    }
+
     /**
      * 获取文章广告
      */

src/main/java/com/caimei/www/mapper/ArticleDao.java

@@ -1,6 +1,7 @@
 package com.caimei.www.mapper;
 
 import com.caimei.www.pojo.JsonModel;
+import com.caimei.www.pojo.page.Article;
 import com.caimei.www.pojo.page.BaseLink;
 import com.caimei.www.pojo.page.ImageLink;
 import org.apache.ibatis.annotations.Mapper;
@@ -56,4 +57,11 @@ public interface ArticleDao {
      * 点击标签
      */
     void clickArticleLabel(Integer id);
+
+    /**
+     * 获取相关文章
+     * @param id
+     * @param labelArr
+     */
+    List<Article> getArticleRelated(@Param("id") Integer id, @Param("labels") String[] labelArr);
 }

src/main/java/com/caimei/www/pojo/page/Article.java

@@ -0,0 +1,44 @@
+package com.caimei.www.pojo.page;
+
+import lombok.Data;
+
+import java.io.Serializable;
+
+/**
+ * Description
+ *
+ * @author : Charles
+ * @date : 2020/8/26
+ */
+@Data
+public class Article implements Serializable {
+    /** 文章ID */
+    private Integer id;
+    /** 文章标题 */
+    private String title;
+    /** 文章主图 */
+    private String image;
+    /** 文章作者 */
+    private String publisher;
+    /** 发布日期 */
+    private String publishDate;
+    /** 文章摘要 */
+    private String intro;
+    /** 文章内容 */
+    private String content;
+    /** 浏览量 */
+    private Integer pv;
+    /** 信息分类Id */
+    private Integer typeId;
+    /** 信息分类文本 */
+    private String type;
+    /** 标签 */
+    private String label;
+    /** 标签 id数组 */
+    private Integer[] labelIds;
+    /** 标签 文本数组 */
+    private String[] labels;
+
+    private static final long serialVersionUID = 1L;
+
+}

src/main/java/com/caimei/www/service/ArticleService.java

@@ -1,6 +1,7 @@
 package com.caimei.www.service;
 
 import com.caimei.www.pojo.JsonModel;
+import com.caimei.www.pojo.page.Article;
 import com.caimei.www.pojo.page.BaseLink;
 import com.caimei.www.pojo.page.ImageLink;
 import com.github.pagehelper.PageInfo;
@@ -29,6 +30,11 @@ public interface ArticleService {
      */
     JsonModel<PageInfo<ImageLink>> getArticleRecommended(Integer typeId, int pageNum, int pageSize);
 
+    /**
+     * 获取相关文章
+     */
+    JsonModel<PageInfo<Article>> getArticleRelated(Integer id, String labels, int pageNum, int pageSize);
+
     /**
      * 获取文章广告
      */
@@ -43,4 +49,5 @@ public interface ArticleService {
      * 点击广告
      */
     JsonModel clickArticleAd(Integer id);
+
 }

src/main/java/com/caimei/www/service/impl/ArticleServiceImpl.java

@@ -2,12 +2,15 @@ package com.caimei.www.service.impl;
 
 import com.caimei.www.mapper.ArticleDao;
 import com.caimei.www.pojo.JsonModel;
+import com.caimei.www.pojo.page.Article;
 import com.caimei.www.pojo.page.BaseLink;
 import com.caimei.www.pojo.page.ImageLink;
 import com.caimei.www.service.ArticleService;
+import com.caimei.www.utils.ImageUtil;
 import com.caimei.www.utils.PriceUtil;
 import com.github.pagehelper.PageHelper;
 import com.github.pagehelper.PageInfo;
+import org.springframework.beans.factory.annotation.Value;
 import org.springframework.stereotype.Service;
 
 import javax.annotation.Resource;
@@ -22,6 +25,8 @@ import java.util.List;
  */
 @Service
 public class ArticleServiceImpl implements ArticleService {
+    @Value("${caimei.wwwDomain}")
+    private String domain;
     @Resource
     private ArticleDao articleDao;
 
@@ -60,10 +65,33 @@ public class ArticleServiceImpl implements ArticleService {
     public JsonModel<PageInfo<ImageLink>> getArticleRecommended(Integer typeId, int pageNum, int pageSize) {
         PageHelper.startPage(pageNum, pageSize);
         List<ImageLink> recommended = articleDao.getArticleRecommended(typeId);
+        recommended.forEach(item -> {
+            item.setImage(ImageUtil.getImageURL("", item.getImage(), 0, domain));
+        });
         PageInfo<ImageLink> pageInfo = new PageInfo(recommended);
         return JsonModel.success(pageInfo);
     }
 
+    /**
+     * 获取相关文章
+     *
+     * @param id
+     * @param labels
+     * @param pageNum
+     * @param pageSize
+     */
+    @Override
+    public JsonModel<PageInfo<Article>> getArticleRelated(Integer id, String labels, int pageNum, int pageSize) {
+        String[] labelArr = labels.split(",");
+        PageHelper.startPage(pageNum, pageSize);
+        List<Article> relateds = articleDao.getArticleRelated(id, labelArr);
+        relateds.forEach(item -> {
+            item.setImage(ImageUtil.getImageURL("", item.getImage(), 0, domain));
+        });
+        PageInfo<Article> pageInfo = new PageInfo(relateds);
+        return JsonModel.success(pageInfo);
+    }
+
     /**
      * 获取文章广告
      */

src/main/resources/config/dev/application-dev.yml

@@ -52,8 +52,8 @@ logging:
 
 # 服务域名
 caimei:
-  # spiServer: http://192.168.2.75:8008/
-  spiServer: https://spi.caimei365.com
+  spiServer: http://192.168.2.75:8008/
+  # spiServer: https://spi.caimei365.com
   imageDomain: https://img-b.caimei365.com
   wwwDomain: https://www-b.caimei365.com
 

src/main/resources/mapper/ArticleMapper.xml

@@ -36,6 +36,34 @@
 		</if>
 		order by a.pubdate desc
 	</select>
+    <select id="getArticleRelated" resultType="com.caimei.www.pojo.page.Article">
+        select
+			a.id as id,
+			a.title as title,
+			a.guidanceImage as image,
+			a.publisher as publisher,
+			a.pubdate as publish_date,
+			a.recommendContent as intro,
+			a.infoContent as content,
+			(IFNULL(c.pv, 0) + IFNULL(a.basePv, 0) + IFNULL((c.num + a.basePraise), 0)) as pv,
+			a.label as label,
+			a.typeId as typeId
+        from info as a
+		left join info_praise c on a.id = c.infoId
+		<where>
+			<if test="labels != null and labels != ''">
+				<foreach collection="labels" item="label" open="(" close=")" index="index" separator="OR">
+					a.label like CONCAT(CONCAT('%', #{label}), '%')
+				</foreach>
+			</if>
+			<if test="id != null and id != ''">
+				and a.id != #{id}
+			</if>
+			and NOW() >= a.pubdate
+			and a.enabledStatus = 1
+		</where>
+		order by a.pubdate desc
+	</select>
 	<select id="getLastestInfoADs" resultType="com.caimei.www.pojo.page.ImageLink">
 		select a.id, a.serviceObject as title, a.guidanceImage as image, a.link
 		from info_ad a
@@ -44,7 +72,7 @@
 		order by a.createDate desc
 		limit 3
 	</select>
-	<update id="clickArticleAd">
+    <update id="clickArticleAd">
 		update info_ad
 		set clickRate = IFNULL(clickRate, 0) + 1,
 			updateDate = NOW()

src/main/resources/static/js/article/list.js

@@ -5,11 +5,6 @@ var articleList = new Vue({
         listLoading: true,
         requestFlag: true,
         noMore: false,
-        typeTxt: '',
-        labelTxt: '',
-        labelList: [],
-        recommend: {},
-        adList:[],
         params: {
             size: 8,
             num: 1,
@@ -55,52 +50,6 @@ var articleList = new Vue({
                 this.pageInput = 1;
             }
         },
-        getLabels: function(){
-            var _self = this;
-            $.getJSON("/article/labels", function (r) {
-                if (r.code === 0 && r.data) {
-                    _self.labelList = r.data;
-                    _self.labelList.map(function(item){
-                        if (_self.params.labelId === item.id) {
-                            _self.labelTxt = item.name;
-                        }
-                    })
-                }
-            });
-        },
-        getRecommend: function(typeId, pageNum){
-            var _self = this;
-            $.getJSON("/article/recommend",{
-                typeId: typeId,
-                pageNum: pageNum
-            }, function (r) {
-                if (r.code === 0 && r.data) {
-                    _self.recommend= r.data;
-                }
-            });
-        },
-        getAds: function(){
-            var _self = this;
-            $.getJSON("/article/ads", function (r) {
-                if (r.code === 0 && r.data) {
-                    _self.adList = r.data;
-                }
-            });
-        },
-        labelInfo: function(labelId, jumpStatus, link) {
-            $.getJSON("/article/label/click", {id: labelId}, function (r) {
-                if (jumpStatus && jumpStatus*1 === 1 && link) {
-                    window.location.href = link;
-                } else {
-                    window.location.href = '/info/label-' + labelId + '-1.html';
-                }
-            });
-        },
-        clickAD: function(id, link){
-            $.getJSON("/article/ad/click", {id: id}, function (r) {
-                window.open(link);
-            });
-        },
         getArticleList: function (url, params) {
             var _self = this;
             $.getJSON(url, params, function (r) {
@@ -143,8 +92,6 @@ var articleList = new Vue({
             this.params.num = 1;
         }
         this.params.keyword = getUrlParam("keyword")?getUrlParam("keyword"):'';
-
-        this.getLabels();
         // 判断登录状态
         if (globalUserData.token) {
             this.loginStatus = true;
@@ -153,7 +100,7 @@ var articleList = new Vue({
     mounted: function () {
         this.params.typeId = $("#typeId").val()*1;
         this.params.labelId = $("#labelId").val()*1;
-        this.typeTxt = $("#typeTxt").val();
+        if(!this.params.typeId){$(".content").addClass("sea-top")}
         var requestUrl = '';
         var requestParams = {};
         if (this.params.typeId) {
@@ -182,10 +129,6 @@ var articleList = new Vue({
         if (requestUrl) {
             this.getArticleList(requestUrl, requestParams);
         }
-        if (isPC) {
-            this.getRecommend(this.params.typeId, 1);
-            this.getAds();
-        }
         var _self = this;
         if(!isPC){
             $('footer').addClass("noneImportant");
@@ -221,5 +164,6 @@ var articleList = new Vue({
         }).on("click", "#mHotWord .tags", function(e){
             e.stopPropagation();
         })
+
     }
 });

src/main/resources/static/js/article/side.js

@@ -0,0 +1,70 @@
+var articleSide = new Vue({
+    el: '#articleSide',
+    data: {
+        typeId: 0,
+        labelId: 0,
+        labelTxt: '',
+        labelList: [],
+        recommend: {},
+        adList: [],
+    },
+    methods: {
+        getLabels: function(){
+            var _self = this;
+            $.getJSON("/article/labels", function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.labelList = r.data;
+                    _self.labelList.map(function(item){
+                        if (_self.labelId === item.id) {
+                            _self.labelTxt = item.name;
+                            $("#labelTxt").text(_self.labelTxt);
+                        }
+                    })
+                }
+            });
+        },
+        getRecommend: function(typeId, pageNum){
+            var _self = this;
+            $.getJSON("/article/recommend",{
+                typeId: typeId,
+                pageNum: pageNum
+            }, function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.recommend= r.data;
+                }
+            });
+        },
+        getAds: function(){
+            var _self = this;
+            $.getJSON("/article/ads", function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.adList = r.data;
+                }
+            });
+        },
+        labelInfo: function(labelId, jumpStatus, link) {
+            $.getJSON("/article/label/click", {id: labelId}, function (r) {
+                if (jumpStatus && jumpStatus*1 === 1 && link) {
+                    window.location.href = link;
+                } else {
+                    window.location.href = '/info/label-' + labelId + '-1.html';
+                }
+            });
+        },
+        clickAD: function(id, link){
+            $.getJSON("/article/ad/click", {id: id}, function (r) {
+                window.open(link);
+            });
+        },
+    },
+    mounted: function () {
+        this.typeId = $("#typeId").val()*1;
+        this.labelId = $("#labelId").val()*1;
+        this.getLabels();
+        if (isPC) {
+            this.getRecommend(this.typeId, 1);
+            this.getAds();
+        }
+
+    }
+});

src/main/resources/templates/article/components/header.html

@@ -20,7 +20,6 @@
     </div>
     <input type="hidden" th:value="${labelId}" id="labelId">
     <input type="hidden" th:value="${typeId}" id="typeId">
-    <input th:each="type: *{articleType}" th:if="${typeId}==${type.id}" type="hidden" th:value="${type.name}" id="typeTxt">
     <input type="hidden" th:value="${spiServer}" id="spiServer">
     <input type="hidden" th:value="${agent}" id="userAgent">
 </header>

src/main/resources/templates/article/components/sidebar.html

@@ -0,0 +1,39 @@
+<div class="other" id="articleSide">
+    <div id="mHotWord">
+        <div class="tags clearfix">
+            <p class="classify">
+                热搜词
+            </p>
+            <div class="tag">
+                <span v-for="label in labelList" @click="labelInfo(label.id,label.typeId,label.link)" :style="'opacity:'+label.sort" v-text="label.name"></span>
+            </div>
+        </div>
+        <a href="javascript:void(0);" class="close"></a>
+    </div>
+    <div v-if="isPC" class="recommend">
+        <p class="classify readerSify">
+            推荐阅读
+            <span class="nextPreBtn">
+                <span v-if="recommend.nextPage" class="next" @click="getRecommend(params.typeId, recommend.nextPage)"></span>
+                <span v-if="recommend.prePage" class="pre" @click="getRecommend(params.typeId, recommend.prePage)"></span>
+            </span>
+        </p>
+        <div class="row" v-for="item in recommend.list">
+            <div class="new-img xiao">
+                <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
+                    <img :src="item.image"/>
+                </a>
+            </div>
+            <div class="new-blurb xiao">
+                <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
+                    <p class="shuoming" v-html="item.title"></p>
+                </a>
+            </div>
+        </div>
+    </div>
+    <div v-if="isPC" class="tui">
+        <a v-for="ad in adList" href="javascript:void(0);" class="tui-img" @click="clickAD(ad.id,ad.link)">
+            <img :src="ad.image" alt="ad.title"/>
+        </a>
+    </div>
+</div>

src/main/resources/templates/article/detail.html

@@ -21,115 +21,110 @@
     <link th:href="@{/css/base/init.css(v=${version})}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/article/article.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
-<body class="home listData">
+<body class="home detailData">
 <div class="cm-modal"></div>
 <!--导航栏-->
 <template th:replace="article/components/header"></template>
-<div id="articleList">
-    <div v-if="params.typeId" class="bar">
-        <a href="/" target="_blank">首页</a>&gt; <a v-text="typeTxt" href="javascript:void(0);" class="title newTitle"></a>
-    </div>
-    <!--主体内容-->
-    <div class="sea-top content clearfix">
-        <div class="new-list article">
-            <div class="title">
-                新品|FEAMIG馥秘，全国唯一一家专业线EGFC专利成分独家授权的私密品牌。
-            </div>
-            <p class="xinxi">
-                <em class="write">
-                    小猫
-                </em>
-                <em class="date">
-                    来源：采美365网
+<!--面包屑-->
+<div v-if="params.typeId" class="bar">
+    <a href="/" target="_blank">首页</a>&gt; <a v-text="typeTxt" href="javascript:void(0);" class="title newTitle"></a>
+</div>
+<!--主体内容-->
+<div class="content clearfix">
+    <div class="new-list article">
+        <div class="title">
+            新品|FEAMIG馥秘，全国唯一一家专业线EGFC专利成分独家授权的私密品牌。
+        </div>
+        <p class="xinxi">
+            <em class="write">
+                小猫
+            </em>
+            <em class="date">
+                来源：采美365网
+            </em>
+            <em class="time">
+                2020-08-10 10:03
+            </em>
+            <span class="P_img">
+                <em class="emliu">
+                    29
                 </em>
-                <em class="time">
-                    2020-08-10 10:03
+            </span>
+        </p>
+        <div class="new-mian" id="contentDiv">
+            文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
+            文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
+            文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
+            文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
+            文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
+            文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
+            文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
+            文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
+        </div>
+        <!--已点赞给类名dianzan加color：#e15616;-->
+        <div class="dianzan">
+            <span class="like " data-id="6540" data-count="0">
+                赞0
+            </span>
+            <div class="tipbox">
+                <em>
+                    您已经给该信息点过赞!
                 </em>
-                <span class="P_img">
-                    <em class="emliu">
-                        29
-                    </em>
-                </span>
-            </p>
-            <div class="new-mian" id="contentDiv">
-                文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
-                文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
-                文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
-                文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
-                文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
-                文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
-                文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
-                文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情文章详情
+                <a href="javascript: void(0);" class="sulf">
+                    确定
+                </a>
             </div>
-            <!--已点赞给类名dianzan加color：#e15616;-->
-            <div class="dianzan" style="position: relative;">
-                <span class="like " data-id="6540" data-count="0">
-                    赞0
-                </span>
-                <div class="tipbox" style="display:none;">
-                    <em>
-                        您已经给该信息点过赞!
-                    </em>
-                    <a href="javascript: void(0);" class="sulf">
-                        确定
+        </div>
+        <p class="dea-tag">
+            <span>
+                专利成分私密品牌
+            </span>
+            <span>
+                FEAMIG馥秘
+            </span>
+            <span>
+                深圳德灏美学管理有限公司
+            </span>
+        </p>
+
+
+        <div class="new-list">
+            <p class="classify biaoqian">相关阅读</p>
+            <div class="row">
+                <div class="new-img">
+                    <a href="/info/detail-6527-1.html" target="_blank"><img src="https://img.caimei365.com/group1/M00/03/BF/Cmis218ijx-ABbMjAAlOP6nOtrY294.gif"></a>
+                </div>
+                <div class="new-blurb">
+                    <a href="/info/detail-6527-1.html" target="_blank">
+                        <p class="title">UFACE优斐斯护肤助你告别夏日大油田</p>
                     </a>
+                    <p class="xinxi"> <em class="write">小猫</em><em class="time">2020-07-30 16:54</em> </p>
+                    <p class="introduction">大油田肌肤是如何产生的？为什么有的人一到夏天就一脸油呢？</p>
+                    <p class="P_img"> 146 </p>
                 </div>
             </div>
-            <p class="dea-tag">
-                <span onclick="labelInfo(2824)">
-                    专利成分私密品牌
-                </span>
-                <span onclick="labelInfo(2823)">
-                    FEAMIG馥秘
-                </span>
-                <span onclick="labelInfo(2826)">
-                    深圳德灏美学管理有限公司
-                </span>
-            </p>
-        </div>
-        <div class="other">
-            <div id="mHotWord">
-                <div class="tags clearfix">
-                    <p class="classify">
-                        热搜词
-                    </p>
-                    <div class="tag">
-                        <span v-for="label in labelList" @click="labelInfo(label.id,label.typeId,label.link)" :style="'opacity:'+label.sort" v-text="label.name"></span>
-                    </div>
+            <div class="row">
+                <div class="new-img">
+                    <a href="/info/detail-6522-1.html" target="_blank"><img src="https://img.caimei365.com/group1/M00/03/BD/Cmis218elciAWhvjAABifmeZus4644.jpg"></a>
                 </div>
-                <a href="javascript:void(0);" class="close"></a>
-            </div>
-            <div v-if="isPC" class="recommend">
-                <p class="classify readerSify">
-                    推荐阅读
-                    <span class="nextPreBtn">
-                        <span v-if="recommend.nextPage" class="next" @click="getRecommend(params.typeId, recommend.nextPage)"></span>
-                        <span v-if="recommend.prePage" class="pre" @click="getRecommend(params.typeId, recommend.prePage)"></span>
-                    </span>
-                </p>
-                <div class="row" v-for="item in recommend.list">
-                    <div class="new-img xiao">
-                        <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
-                            <img :src="item.image"/>
-                        </a>
-                    </div>
-                    <div class="new-blurb xiao">
-                        <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
-                            <p class="shuoming" v-html="item.title"></p>
-                        </a>
-                    </div>
+                <div class="new-blurb">
+                    <a href="/info/detail-6522-1.html" target="_blank">
+                        <p class="title">怎么预防和去除闭合性粉刺呢？</p>
+                    </a>
+                    <p class="xinxi"> <em class="write">小猫</em><em class="time">2020-07-27 15:31</em> </p>
+                    <p class="introduction">闭合性粉刺的形成是因为身体内分泌失调所引发的一系列症状，清洁卸妆、保湿补水、防晒、生活作息不可忽视。</p>
+                    <p class="P_img"> 135 </p>
                 </div>
             </div>
-            <div v-if="isPC" class="tui">
-                <a v-for="ad in adList" href="javascript:void(0);" class="tui-img" @click="clickAD(ad.id,ad.link)">
-                    <img :src="ad.image" alt="ad.title"/>
-                </a>
-            </div>
         </div>
+
     </div>
+    <!--侧边栏-->
+    <template th:replace="article/components/sidebar"></template>
 </div>
 <template th:replace="article/components/footer"></template>
 <template th:replace="components/foot-link"></template>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/article/list.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/article/side.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/article/detail.js(v=${version})}"></script>
 </body>
 </html>

src/main/resources/templates/article/list.html

@@ -25,115 +25,78 @@
 <div class="cm-modal"></div>
 <!--导航栏-->
 <template th:replace="article/components/header"></template>
-<div id="articleList">
-    <div v-if="params.typeId" class="bar">
-        <a href="/" target="_blank">首页</a>&gt; <a v-text="typeTxt" href="javascript:void(0);" class="title newTitle"></a>
-    </div>
-    <!--主体内容-->
-    <div :class="(params.typeId?'':'sea-top ')+'content clearfix'">
-        <div class="new-list">
-            <div v-if="params.keyword" class="search">
-                <div class="serachBox" id="topSearch">
-                    <input class="keyword" type="text" :value="params.keyword" placeholder="请输入关键词" />
-                    <a class="searchBtn" href="javascript:void(0);">搜索</a>
-                </div>
-                <p class="result">为您找到相关结果<b v-text="listRecord">0</b>条</p>
-            </div>
-            <p v-else-if="params.labelId" class="classify biaoqian">
-                <em v-text="labelTxt"></em>相关的文章
-            </p>
-            <div v-if="listData.length>0" class="dataRousce">
-                <div class="row" v-for="item in listData">
-                    <div class="new-img">
-                        <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
-                            <img :src="item.image"/>
-                        </a>
-                    </div>
-                    <div class="new-blurb">
-                        <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
-                            <p class="title" v-html="item.title"></p>
-                        </a>
-                        <p class="xinxi">
-                            <em class="write icon mIcon" v-text="item.publisher"></em>
-                            <em class="time icon mIcon" v-text="item.publishDate"></em>
-                            <em v-if="item.labels.length>0&&item.labels[0]" class="hotspot icon mIcon">
-                                <template v-for="(id,i) in item.labelIds">{{i>0?'，':''}}<span v-if="item.labels[i]" v-text="item.labels[i]" @click="labelInfo(id)"></span></template>
-                            </em>
-                        </p>
-                        <p class="introduction" v-html="item.intro"></p>
-                        <p class="P_img"><em class="pv icon mIcon" v-text="item.pv"></em></p>
-                    </div>
-                </div>
-            </div>
-            <div v-if="listLoading" class="loading">
-                <img src="/img/base/loading.gif">
-            </div>
-            <!-- 如果没有搜索结果。显示此div -->
-            <div v-else-if="listRecord==0" class="no-result">
-                <p><img src="/img/info/kuqi.jpg"></p>
-                <p class="nofound">很抱歉，没有找到 “<span v-text="params.keyword"></span>” 相关结果！</p>
-                <p class="change">请修改或者尝试其他搜索词</p>
-            </div>
-            <!--分页-->
-            <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
-            <div v-if="isPC && pageTotal>1" class="pageWrap clear">
-                <a v-if="params.num>1" class="prev" @click="toPagination(params.num*1-1)" href="javascript:void(0);"></a>
-                <template v-for="n in showPageBtn">
-                    <a v-if="n" :class="{'on':(n==params.num)}" @click="toPagination(n)" href="javascript:void(0);" v-text="n"></a>
-                    <span v-else>···</span>
-                </template>
-                <a v-if="params.num<pageTotal" class="next" @click="toPagination(params.num*1+1)" href="javascript:void(0);"></a>
-                <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
-                <span>跳至</span>
-                <input v-model="pageInput" @blur="checkNum()"/>
-                <span>页</span>&nbsp;
-                <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
+<!--面包屑-->
+<div th:if="${typeId}>0" class="bar">
+    <a href="/" target="_blank">首页</a>&gt; <a  th:each="type: *{articleType}" th:if="${typeId}==${type.id}" th:text="${type.name}" href="javascript:void(0);" class="title newTitle"></a>
+</div>
+<!--主体内容-->
+<div class="content clearfix">
+    <div class="new-list" id="articleList">
+        <div v-if="params.keyword" class="search">
+            <div class="serachBox" id="topSearch">
+                <input class="keyword" type="text" :value="params.keyword" placeholder="请输入关键词" />
+                <a class="searchBtn" href="javascript:void(0);">搜索</a>
             </div>
-
+            <p class="result">为您找到相关结果<b v-text="listRecord">0</b>条</p>
         </div>
-        <div class="other">
-            <div id="mHotWord">
-                <div class="tags clearfix">
-                    <p class="classify">
-                        热搜词
-                    </p>
-                    <div class="tag">
-                        <span v-for="label in labelList" @click="labelInfo(label.id,label.typeId,label.link)" :style="'opacity:'+label.sort" v-text="label.name"></span>
-                    </div>
+        <p v-else-if="params.labelId" class="classify biaoqian">
+            <em id="labelTxt"></em>相关的文章
+        </p>
+        <div v-if="listData.length>0" class="dataRousce">
+            <div class="row" v-for="item in listData">
+                <div class="new-img">
+                    <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
+                        <img :src="item.image"/>
+                    </a>
                 </div>
-                <a href="javascript:void(0);" class="close"></a>
-            </div>
-            <div v-if="isPC" class="recommend">
-                <p class="classify readerSify">
-                    推荐阅读
-                    <span class="nextPreBtn">
-                        <span v-if="recommend.nextPage" class="next" @click="getRecommend(params.typeId, recommend.nextPage)"></span>
-                        <span v-if="recommend.prePage" class="pre" @click="getRecommend(params.typeId, recommend.prePage)"></span>
-                    </span>
-                </p>
-                <div class="row" v-for="item in recommend.list">
-                    <div class="new-img xiao">
-                        <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
-                            <img :src="item.image"/>
-                        </a>
-                    </div>
-                    <div class="new-blurb xiao">
-                        <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
-                            <p class="shuoming" v-html="item.title"></p>
-                        </a>
-                    </div>
+                <div class="new-blurb">
+                    <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
+                        <p class="title" v-html="item.title"></p>
+                    </a>
+                    <p class="xinxi">
+                        <em class="write icon mIcon" v-text="item.publisher"></em>
+                        <em class="time icon mIcon" v-text="item.publishDate"></em>
+                        <em v-if="item.labels.length>0&&item.labels[0]" class="hotspot icon mIcon">
+                            <template v-for="(id,i) in item.labelIds">{{i>0?'，':''}}<span v-if="item.labels[i]" v-text="item.labels[i]" @click="labelInfo(id)"></span></template>
+                        </em>
+                    </p>
+                    <p class="introduction" v-html="item.intro"></p>
+                    <p class="P_img"><em class="pv icon mIcon" v-text="item.pv"></em></p>
                 </div>
             </div>
-            <div v-if="isPC" class="tui">
-                <a v-for="ad in adList" href="javascript:void(0);" class="tui-img" @click="clickAD(ad.id,ad.link)">
-                    <img :src="ad.image" alt="ad.title"/>
-                </a>
-            </div>
         </div>
+        <div v-if="listLoading" class="loading">
+            <img src="/img/base/loading.gif">
+        </div>
+        <!-- 如果没有搜索结果。显示此div -->
+        <div v-else-if="listRecord==0" class="no-result">
+            <p><img src="/img/info/kuqi.jpg"></p>
+            <p class="nofound">很抱歉，没有找到 “<span v-text="params.keyword"></span>” 相关结果！</p>
+            <p class="change">请修改或者尝试其他搜索词</p>
+        </div>
+        <!--分页-->
+        <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
+        <div v-if="isPC && pageTotal>1" class="pageWrap clear">
+            <a v-if="params.num>1" class="prev" @click="toPagination(params.num*1-1)" href="javascript:void(0);"></a>
+            <template v-for="n in showPageBtn">
+                <a v-if="n" :class="{'on':(n==params.num)}" @click="toPagination(n)" href="javascript:void(0);" v-text="n"></a>
+                <span v-else>···</span>
+            </template>
+            <a v-if="params.num<pageTotal" class="next" @click="toPagination(params.num*1+1)" href="javascript:void(0);"></a>
+            <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
+            <span>跳至</span>
+            <input v-model="pageInput" @blur="checkNum()"/>
+            <span>页</span>&nbsp;
+            <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
+        </div>
+
     </div>
+    <!--侧边栏-->
+    <template th:replace="article/components/sidebar"></template>
 </div>
 <template th:replace="article/components/footer"></template>
 <template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/article/side.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/article/list.js(v=${version})}"></script>
 </body>
 </html>