文章详情1

pom.xml

@@ -41,10 +41,24 @@
             <artifactId>mybatis-spring-boot-starter</artifactId>
             <version>2.1.1</version>
         </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-cache</artifactId>
+        </dependency>
         <!-- redis依赖包 -->
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-data-redis</artifactId>
+            <exclusions>
+                <exclusion>
+                    <groupId>io.lettuce</groupId>
+                    <artifactId>lettuce-core</artifactId>
+                </exclusion>
+            </exclusions>
+        </dependency>
+        <dependency>
+            <groupId>redis.clients</groupId>
+            <artifactId>jedis</artifactId>
         </dependency>
         <dependency>
             <groupId>org.springframework.boot</groupId>

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

@@ -10,11 +10,10 @@ import com.github.pagehelper.PageInfo;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.RequestParam;
-import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.util.MultiValueMap;
+import org.springframework.web.bind.annotation.*;
 import org.springframework.web.server.ServerWebExchange;
+import reactor.core.publisher.Mono;
 
 import java.util.List;
 

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

@@ -146,7 +146,7 @@ public class ArticleServiceImpl implements ArticleService {
         String ip = getIp(serverWebExchange);
         String key = "ip_" + ip + "_" + id;
         if(redisService.exists(key)) {
-            return JsonModel.success("您已经给该文章点过赞了");
+            return JsonModel.success(1,"您已经给该文章点过赞了","");
         } else {
             articleDao.articleLike(id);
             // 限制一个ip24小时内只能点一次赞

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

@@ -25,9 +25,9 @@ spring:
 
 
   redis:
-    host: 192.168.1.10
-    port: 6379
-    #password: 6#xsI%b4o@5c3RoE
+    host: 119.29.0.46
+    port: 6380
+    password: 6#xsI%b4o@5c3RoE
     #Redis数据库索引（默认为0）
     database: 0
     #连接池最大连接数（使用负值表示没有限制）
@@ -35,7 +35,7 @@ spring:
       pool:
         max-active: 50
         #连接池最大阻塞等待时间（使用负值表示没有限制）
-        max-wait: 3000
+        max-wait: -1
         #连接池中的最大空闲连接
         max-idle: 20
         #连接池中的最小空闲连接

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

@@ -189,18 +189,23 @@ dl,dd,dt{zoom:1}
 .article .like{
 	cursor: pointer;
 	display: inline-block;
-	height: 48px;
-	line-height: 48px;
+	height: 60px;
+	line-height: 60px;
 	margin: 30px auto;
 	border: 1px solid #eee;
     color: #777;
-    padding: 0 20px;
     border-radius: 5px;
-    background: #f7f7f7 url(../images/common/zan.jpg) no-repeat 10px;
-    padding-left: 60px;
+        padding: 0 20px;
 }
-.article .like.orange{
-	color:#e15616;
+.article .like:before{
+	width:50px;
+	height:50px;
+	background-position: -320px -60px;
+	vertical-align: middle;
+	margin-right:5px;
+}
+.like.hasDian {
+    color: #e15616;
 }
 
 

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

@@ -1,2 +1,46 @@
-// 获取相关阅读
-// "/article/related"，{id:文章Id, labels: 文章标签，用，号隔开}
+(function(){
+    //点赞
+    $("body").on("click", ".dianzan .like", function(){
+        if($(this).hasClass("hasDian")){
+            alertInfo("您已经给该信息点过赞!");
+        }else{
+            var infoId = $(this).attr("data-id");
+            $.get("/article/like", {id: infoId}, function(res){
+                if(res.code === 0){
+                    console.log("点赞成功!");
+                    $(".like").text("赞" + (parseInt($(".like").attr("data-count"))+1)).addClass("hasDian");
+                } else {
+                    alertInfo(res.msg);
+                }
+            });
+        }
+    });
+}());
+//相关阅读
+var articleRelated = new Vue({
+    el: "#articleRelated",
+    data: {
+        infoId: $("#articleId").val()?$("#articleId").val()*1:0,
+        relatedList: []
+    },
+    methods: {
+        getRelatedList: function () {
+            var _self = this;
+            if(this.infoId ===0){return;}
+            $.getJSON("/article/related",{id: this.infoId}).done(function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.relatedList = r.data;
+                }
+            });
+        },
+
+    },
+    created: function () {
+        this.infoId = $("#articleId").val() ? $("#articleId").val()*1 : 0;
+        // 获取相关阅读
+        this.getRelatedList();
+    },
+    mounted: function () {
+        var _self = this;
+    }
+});

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

@@ -42,19 +42,8 @@
                 <em class="pv icon mIcon" th:text="*{pv}"></em>
             </p>
             <div class="new-mian" id="contentDiv" th:utext="*{content}"></div>
-            <!--已点赞给类名dianzan加color：#e15616;-->
             <div class="dianzan">
-                <span class="like " data-count="0" data-th-id="*{id}" th:text="'赞'+*{likes}">
-
-                </span>
-                <div class="tipbox">
-                    <em>
-                        您已经给该信息点过赞!
-                    </em>
-                    <a href="javascript: void(0);" class="sulf">
-                        确定
-                    </a>
-                </div>
+                <span class="like icon mIcon" th:attr="data-count=*{likes}, data-id=*{id}" th:text="'赞'+*{likes}"></span>
             </div>
             <p class="dea-tag" th:each="label:*{labels}">
                 <span th:if="${not #strings.isEmpty(label)}" th:text="${label}"></span>
@@ -67,7 +56,7 @@
             </div>
         </div>
         <!--相关阅读-->
-        <div class="new-list">
+        <div class="new-list" id="articleRelated">
             <p class="classify biaoqian">相关阅读</p>
             <div class="row">
                 <div class="new-img">