采美信息中心404页面添加

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

@@ -24,6 +24,8 @@ import java.util.List;
 @Controller
 public class ArticleController extends BaseController {
 
+    /** 错误页面 */
+    private static final String ERROR_PATH = "article/error";
     private static final String ARTICLE_LIST_PATH = "article/list";
     private static final String ARTICLE_DETAIL_PATH = "article/detail";
     private ArticleService articleService;
@@ -95,7 +97,8 @@ public class ArticleController extends BaseController {
         List<BaseLink> typeList = articleService.getArticleTypes();
         Article article = articleService.getArticleInfo(id);
         if(article == null){
-            return super.errorPath();
+            // return super.errorPath();
+            return "redirect:/info/404.html";
         }
         List<BaseLink> data = articleService.getArticleLabels().getData();
         List<ImageLink> Ads = articleService.getLastestInfoAds().getData();
@@ -111,6 +114,17 @@ public class ArticleController extends BaseController {
         return ARTICLE_DETAIL_PATH;
     }
 
+    /**
+     *  404
+     */
+    @GetMapping("/info/404.html")
+    public String errorPage(final Model model) {
+        model.addAttribute("msg", "404页面");
+        model.addAttribute("type", "article");
+        return ERROR_PATH;
+    }
+
+
     /**
      * 获取文章热门标签
      */

src/main/resources/static/css/article/error.css

@@ -0,0 +1,42 @@
+body{background:#f6f6f6;position:relative}
+
+@media screen and (min-width:768px){
+body{min-width:1184px}
+    #errorContent{width:1200px !important;min-height:500px !important;height:auto !important;overflow:hidden;border:none;margin:auto;padding:160px 0 40px;}
+    #errorContent p{color:#666666;font-size:20px;padding:60px 0}
+    #errorContent p span{color: #E15616;}
+    #errorContent a{width:190px;height:44px;text-align:center;background:#e15616;color:#fff;display:inline-block;line-height:44px;border-radius:2px}
+    .recommend{ position: relative; width:1200px; margin: 0 auto; padding: 100px 0 66px;}
+    .recommend .title{font-size: 16px; color: #4A4F58; text-align: left; margin-bottom: 24px; font-weight: bold;}
+    .recommend .list{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
+    .recommend .list .item{ width: 486px; display: flex; align-items: center;  margin-bottom: 32px; cursor: pointer;}
+    .recommend .list .item .cover{width: 98px;height: 68px; box-sizing: border-box; border: 1px dashed #EEEFF1;}
+    .recommend .list .item .cover img{display: block; width: 96px; height: 66px; flex-shrink: 0;}
+    .recommend .list .item .name{ font-size: 16px; color: #4A4F58; margin-left: 16px; flex: 1; line-height: 32px; text-align: justify;}
+    .recommend .list .item .name:hover{ color: #E15616; }
+    .recommend .page{position: absolute; right: 0; top: 100px; font-size: 0;}
+    .recommend .page span{position:relative; display: inline-block; width: 16px; height: 16px; background-color: #E2E2E2; margin-left: 16px; cursor: pointer; font-size: 0;}
+    .recommend .page span::after{ content: ""; display: block; width: 12px; height: 12px; position: absolute; left: 2px; top: 2px; background: url("/img/article/pc-icon-prev.png") no-repeat center; background-size: 12px;}
+    .recommend .page span.next::after{background-image: url("/img/article/pc-icon-next.png")}
+    .recommend .page span:hover{background-color: #e15616; }
+}
+@media screen and (max-width:768px){
+    #errorContent{width:100% !important;overflow:hidden;border:none;padding-top:23.7vw}
+    #errorContent img{width:53.7vw;height:23.2vw}
+    #errorContent p{font-size:3.4vw;color:#666666;padding:7.8vw 7.8vw 5vw}
+    #errorContent p span{color: #E15616;}
+    #errorContent a{width:36vw;height:11.2vw;line-height:11.2vw;color:#fff;background:#e15616;border-radius:.53vw;display:inline-block}
+
+    .recommend{ position: relative; margin-top: 22vw;margin-bottom: 3.2vw;}
+    .recommend .title{font-size: 4vw; color: #4A4F58; text-align: left; margin-bottom: 4.8vw; font-weight: bold; padding: 0 4vw;}
+    .recommend .list{ padding: 0 4vw 8vw; }
+    .recommend .list .item{ display: flex; align-items: center;  margin-bottom: 3.2vw; cursor: pointer;}
+    .recommend .list .item .cover{ box-sizing: border-box; border: 0.2vw dashed #EEEFF1;}
+    .recommend .list .item .cover img{display: block; width: 25.8vw;height: 18vw; flex-shrink: 0;}
+    .recommend .list .item .name{ font-size: 3.4vw; color: #4A4F58; margin-left: 4vw; flex: 1; line-height: 6.4vw; text-align: justify;}
+    .recommend .page{position: absolute; right: 4vw; top: 0; font-size: 0;}
+    .recommend .page span{position:relative; display: inline-block; width: 4.8vw; height: 4.8vw; background-color: #E2E2E2; margin-left: 4vw; cursor: pointer; }
+    .recommend .page span::after{ content: ""; display: block; width: 3.2vw; height: 3.2vw; position: absolute; left: 0.8vw; top: 0.8vw; background: url("/img/article/h5-icon-prev.png") no-repeat center; background-size: 3.2vw;}
+    .recommend .page span.next::after{background-image: url("/img/article/h5-icon-next.png")}
+    .recommend .page span:hover{background-color: #e15616; }
+}

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

@@ -0,0 +1,56 @@
+$(function () {
+    var coreServer = $('#coreServer').val()
+    if (!coreServer && coreServer.length > 0) {
+        window.location.href = '/404.html';
+    }
+})
+
+var errorPage = new Vue({
+    el: '#errorPage',
+    data: {
+        recommend: [],
+        countdown: 2,
+        timer: null
+    },
+    mounted: function () {
+        this.onRedirect();
+        this.init()
+    },
+    methods: {
+        init() {
+            var _self = this;
+            this.typeId = $("#typeId").val() * 1;
+            this.labelId = $("#labelId").val() * 1;
+            this.getRecommend(this.typeId, 1);
+            //换一批15秒请求一次
+            setInterval(function () {
+                if (_self.recommend.hasNextPage) {
+                    _self.getRecommend(_self.typeId, _self.recommend.nextPage);
+                } else {
+                    _self.getRecommend(_self.typeId, 1);
+                }
+            }, 10000);
+        },
+        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;
+                }
+            });
+        },
+        // 重定向
+        onRedirect: function(){
+            var self = this;
+            this.timer = setInterval(function () {
+                if(--self.countdown <= 0){
+                    clearInterval(self.timer);
+                    window.location.href = '/'
+                }
+            }, 1000);
+        },
+    }
+});

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

@@ -6,6 +6,11 @@ var requestUrlConfig = {
 
 var articleList = new Vue({
     el: '#articleList',
+    filters:{
+        keywordSlice: function(keyword){
+            return keyword.length > 6 ? keyword.slice(0,6) + '…' : keyword;
+        }
+    },
     data: {
         loginStatus: false,
         listLoading: true,
@@ -137,6 +142,11 @@ var articleList = new Vue({
             this.getArticleList(requestUrlConfig['keyword'], params);
         },
 
+        // 高亮关键词
+        highlightKeyword: function(str){
+            return str.replaceAll(this.keyword, '<span style="color: #E15616">'+ this.keyword +'</span>')
+        },
+
         // 获取文章列表
         getArticleList: function (url, params) {
             var self = this;
@@ -160,8 +170,14 @@ var articleList = new Vue({
                             publishDate: item.publishDate
                         });
                     });
+                    // 处理标题和描述
+                    resultData = resultData.map(function (item){
+                        item.title = self.highlightKeyword(item.title);
+                        item.intro = self.highlightKeyword(item.intro);
+                        return item
+                    });
                     if (isPC) {
-                        self.listData = resultData;
+                        self.listData = resultData
                     } else {
                         self.listData = self.listData.concat(resultData);
                     }

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

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+  <title>采美365网</title>
+  <template th:replace="components/head-link"></template>
+  <link th:href="@{/css/article/error.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+<input type="hidden" th:value="${labelId}" id="labelId">
+<input type="hidden" th:value="${typeId}" id="typeId">
+<input type="hidden" th:value="${pageNum}" id="pageNum">
+<input type="hidden" th:value="${coreServer}" id="coreServer">
+<input type="hidden" th:value="${agent}" id="userAgent">
+
+<!-- 404页面 -->
+<div style="text-align:center;background: #fff" id="errorPage">
+  <!--    <iframe id="errorContent" src="/search_children.html"></iframe>-->
+  <div id="errorContent">
+    <img src="/img/base/404.png">
+    <p>您访问的页面不存在，<span v-text="countdown"></span>秒后将自动返回首页</p>
+    <a href="/index.html">返回首页</a>
+  </div>
+
+  <div class="recommend">
+    <div class="title">相关推荐</div>
+    <div class="page">
+      <span v-if="recommend.prePage" class="prev" @click="getRecommend(typeId, recommend.prePage)"></span>
+      <span v-if="recommend.nextPage" class="next" @click="getRecommend(typeId, recommend.nextPage)"></span>
+    </div>
+    <div class="list">
+      <template v-for="(item, index) in recommend.list">
+        <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank" class="item" :key="index">
+          <div class="cover"><img :src="item.image" alt="item.title"/></div>
+          <div class="name" v-text="item.title"></div>
+        </a>
+      </template>
+    </div>
+  </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/article/error.js(v=${version})}"></script>
+</body>
+</html>

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

@@ -39,14 +39,14 @@
                             </div>
                         </template>
                         <div class="search__more" v-if="!isPC && productRecord > 8">
-                            <span class="search__more_tip">更多优斐斯产品</span>
+                            <span class="search__more_tip">更多{{keyword | keywordSlice}}产品</span>
                             <span class="search__more_line"></span>
                             <a class="search__more_link" href="/product/list.html?keyword=测试" target="_blank">查看全部</a>
                         </div>
                     </div>
                 </div>
                 <div class="search__more" v-if="isPC && productRecord > 8">
-                    <span class="search__more_tip">更多优斐斯产品</span>
+                    <span class="search__more_tip">更多{{keyword | keywordSlice}}产品</span>
                     <span class="search__more_line"></span>
                     <a class="search__more_link" href="/product/list.html?keyword=测试" target="_blank">查看全部</a>
                 </div>