限制评论与留言的次数,优化兼容百度统计与图片防盗链

biaochenxuying · Jul 30, 2019 · 18bdd78 · 18bdd78
1 parent 0c8b667
commit 18bdd78
Show file tree

Hide file tree

Showing 11 changed files with 196 additions and 60 deletions.
diff --git a/public/index.html b/public/index.html
@@ -2,33 +2,32 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta
-      id="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
-      name="viewport"
-    />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-    <meta name="referrer" content="never"> 
-    <meta name="theme-color" content="#fff" />
-    <!-- <link
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta
+			id="viewport"
+			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+			name="viewport"
+		/>
+		<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+		<meta id="referrer" name="referrer" content="always" />
+		<meta name="theme-color" content="#fff" />
+		<!-- <link
       href="https://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css"
       rel="stylesheet"
     /> -->
-    <link rel="stylesheet" href="./css/monokai_sublime.css">
-    <title id="title">BiaoChenXuYing 的个人博客网站</title>
-    <!-- <meta name="referrer" content="never">   -->
-    <meta name="baidu-site-verification" content="7XGPmF2RtW" />
-    <meta
-      id="keywords"
-      name="keywords"
-      content="BiaoChenXuYing 的博客网站，前端开发，后端开发，全栈开发"
-    />
-    <meta
-      id="description"
-      name="description"
-      content="BiaoChenXuYing 的博客网站。BiaoChenXuYing，目前是一名前端开发工程师，BiaoChenXuYing 公众号作者，致力于前端和后端开发、全栈程序员的成长之路。"
-    />
+		<link rel="stylesheet" href="./css/monokai_sublime.css" />
+		<title id="title">夜尽天明 的个人博客网站</title>
+		<meta name="baidu-site-verification" content="7XGPmF2RtW" />
+		<meta
+			id="keywords"
+			name="keywords"
+			content="夜尽天明 的博客网站，大前端开发"
+		/>
+		<meta
+			id="description"
+			name="description"
+			content="夜尽天明 的博客网站。夜尽天明，目前是一名前端开发工程师，全栈修炼 公众号作者，致力于大前端开发、全栈程序员的成长之路。"
+		/>
   </head>
   <body>
     <noscript>

diff --git a/src/App.vue b/src/App.vue
@@ -45,10 +45,13 @@ export default class App extends Vue {
   }
   @Watch("$route")
   routeChange(val: Route, oldVal: Route) {
+    const referrer: any = document.getElementById("referrer");
     if (val.path === "/") {
       this.isShowNav = false;
+      referrer.setAttribute("content", "always");
     } else {
       this.isShowNav = true;
+      referrer.setAttribute("content", "never");
     }
     if (
       val.path === "/articles" ||

diff --git a/src/assets/BiaoChenXuYing.png b/src/assets/BiaoChenXuYing.png
diff --git a/src/assets/BiaoChenXuYing2.png b/src/assets/BiaoChenXuYing2.png
diff --git a/src/assets/YingHeZaHuoPu.png b/src/assets/YingHeZaHuoPu.png
diff --git a/src/components/comment.vue b/src/components/comment.vue
@@ -40,13 +40,19 @@ export default class Comment extends Vue {
   @Prop({ default: "" }) comment_id!: string;
   @Prop({ default: "" }) article_id!: string;
   @Prop({ default: {} }) to_user!: any;
+  // @Prop({ default: 0 }) cacheTime!: number;
+  // @Prop({ default: 0 }) times!: number;
 
   // initial data
   btnLoading: boolean = false;
   content: any = "";
+  cacheTime: number = 0; // 缓存时间
+  times: number = 0; // 留言次数
 
-  // lifecycle hook
-  mounted() {}
+  // // lifecycle hook
+  // mounted() {
+  //   console.log('mounted !')
+  // }
 
   // computed
   get dialogVisible() {
@@ -66,13 +72,33 @@ export default class Comment extends Vue {
       });
       return;
     }
+
+    if (this.times > 2) {
+      this.$message({
+        message: "您今天评论的次数已经用完，明天再来评论吧！",
+        type: "warning"
+      });
+      return;
+    }
+
+    let now = new Date();
+    let nowTime = now.getTime();
+    if (nowTime - this.cacheTime < 4000) {
+      this.$message({
+        message: "您评论太过频繁，1 分钟后再来评论吧！",
+        type: "warning"
+      });
+      return;
+    }
+
     if (!this.content) {
       this.$message({
         message: "评论内容不能为空",
         type: "error"
       });
       return;
     }
+    
     let user_id = "";
     if (window.sessionStorage.userInfo) {
       let userInfo = JSON.parse(window.sessionStorage.userInfo);
@@ -94,7 +120,9 @@ export default class Comment extends Vue {
     });
     this.btnLoading = false;
     if (res.status === 200) {
+      this.times++;
       if (res.data.code === 0) {
+        this.cacheTime = nowTime;
         this.content = "";
         this.$message({
           message: res.data.message,
@@ -107,6 +135,7 @@ export default class Comment extends Vue {
         });
       }
     } else {
+      this.times++;
       this.$message({
         message: "网络错误!",
         type: "error"

diff --git a/src/components/commentList.vue b/src/components/commentList.vue
@@ -79,6 +79,8 @@
              :article_id="article_id"
              @handleOk="handleOk"
              @cancel="handleCancel" />
+             <!-- :cacheTime="cacheTime"
+             :times="times" -->
   </div>
 </template>
 <script lang="ts">
@@ -99,6 +101,13 @@ export default class CommentList extends Vue {
   content: any = "";
   comment_id: any = "";
   to_user: any = {};
+  // cacheTime: number = 0; // 缓存时间
+  // times: number = 0; // 留言次数
+
+  // // lifecycle hook
+  // mounted() {
+  //   console.log('mounted !')
+  // }
 
   formatTime(value: any) {
     return timestampToTime(value, true);

diff --git a/src/components/slider.vue b/src/components/slider.vue
@@ -3,7 +3,7 @@
     <img class="right-logo"
          src="../assets/userLogo.jpeg"
          alt="">
-    <div class="title">BiaoChenXuYing</div>
+    <div class="title">夜尽天明</div>
     <div class="right-content">
       <!-- <div class="item">
         <div class="num">123</div>粉丝
@@ -28,13 +28,19 @@
       </router-link>
     </div>
     <div class="introduce">
-      <div class="title">本站公众号</div>
+      <div class="title">技术以内的 BB</div>
       <div class="content">
-        <!-- 分享 WEB 全栈开发等相关的技术文章，热点资源<br />
-        全栈程序员的成长之路 -->
-        <img style="width:100%;margin-top:20px"
+        <img style="width:100%;"
              src="../assets/BiaoChenXuYing.png"
-             alt="公众号" />
+             alt="全栈修炼" />
+      </div>
+    </div>
+    <div class="introduce">
+      <div class="title">技术以外的 BB</div>
+      <div class="content">
+        <img style="width:100%;"
+             src="../assets/YingHeZaHuoPu.png"
+             alt="硬核杂货铺" />
       </div>
     </div>
   </div>

diff --git a/src/views/articleDetail.vue b/src/views/articleDetail.vue
@@ -139,6 +139,9 @@ export default class ArticleDetail extends Vue {
     title: "",
     update_time: ""
   };
+  cacheTime: number = 0; // 缓存时间
+  times: number = 0; // 评论次数
+  likeTimes: number = 0; // 点赞次数
 
   mounted() {
     this.params.id = this.$route.query.article_id;
@@ -161,6 +164,25 @@ export default class ArticleDetail extends Vue {
       });
       return;
     }
+
+    if (this.times > 2) {
+      this.$message({
+        message: "您今天评论的次数已经用完，明天再来评论吧！",
+        type: "warning"
+      });
+      return;
+    }
+
+    let now = new Date();
+    let nowTime = now.getTime();
+    if (nowTime - this.cacheTime < 4000) {
+      this.$message({
+        message: "您评论太过频繁，1 分钟后再来留言吧！",
+        type: "warning"
+      });
+      return;
+    }
+
     if (!this.content) {
       this.$message({
         message: "请输入内容!",
@@ -188,7 +210,9 @@ export default class ArticleDetail extends Vue {
     });
     this.btnLoading = false;
     if (res.status === 200) {
+      this.times++;
       if (res.data.code === 0) {
+        this.cacheTime = nowTime;
         this.content = "";
         this.$message({
           message: res.data.message,
@@ -202,6 +226,7 @@ export default class ArticleDetail extends Vue {
         });
       }
     } else {
+      this.times++;
       this.$message({
         message: "网络错误!",
         type: "error"
@@ -210,15 +235,15 @@ export default class ArticleDetail extends Vue {
   }
 
   beforeDestroy() {
-    document.title = "BiaoChenXuYing 的博客网站";
+    document.title = "夜尽天明的博客网站";
     document
       .getElementById("keywords")
-      .setAttribute("content", "BiaoChenXuYing 的博客网站");
+      .setAttribute("content", "夜尽天明 的博客网站");
     document
       .getElementById("description")
       .setAttribute(
         "content",
-        "分享 WEB 全栈开发等相关的技术文章，热点资源，全栈程序员的成长之路。"
+        "分享大前端开发等相关的技术文章，热点资源，全栈程序员的成长之路。"
       );
   }
 
@@ -273,6 +298,15 @@ export default class ArticleDetail extends Vue {
       });
       return;
     }
+
+    if (this.likeTimes > 0) {
+      this.$message({
+        message: "您已经点过赞了！悠着点吧！",
+        type: "warning"
+      });
+      return;
+    }
+
     let user_id: any = "";
     if (window.sessionStorage.userInfo) {
       let userInfo = JSON.parse(window.sessionStorage.userInfo);
@@ -291,6 +325,7 @@ export default class ArticleDetail extends Vue {
     const res: any = await this.$https.post(this.$urls.likeArticle, params);
     this.isLoading = false;
     if (res.status === 200) {
+      this.likeTimes++
       if (res.data.code === 0) {
         ++this.articleDetail.meta.likes;
         this.$message({

diff --git a/src/views/articles.vue b/src/views/articles.vue
@@ -9,24 +9,27 @@
             v-for="(article) in articlesList"
             :key="article._id"
             class="item">
-          <img class="wrap-img img-blur-done"
-               :data-src="article.img_url"
-               data-has-lazy-src="false"
-               src="../assets/bg.jpg"
-               alt="文章封面" />
-          <div class="content">
-            <h4 class="title">{{article.title}}</h4>
-            <p class="abstract">{{article.desc}}</p>
-            <div class="meta">
-              <span>查看 {{article.meta.views}}</span>
-              <span>评论 {{article.meta.comments}}</span>
-              <span>赞 {{article.meta.likes}}</span>
-              <span v-if="article.create_time"
-                    class="time">
-                {{formatTime(article.create_time)}}
-              </span>
+          <a :href="href + article._id"
+             target="_blank">
+            <img class="wrap-img img-blur-done"
+                 :data-src="article.img_url"
+                 data-has-lazy-src="false"
+                 src="../assets/bg.jpg"
+                 alt="文章封面" />
+            <div class="content">
+              <h4 class="title">{{article.title}}</h4>
+              <p class="abstract">{{article.desc}}</p>
+              <div class="meta">
+                <span>查看 {{article.meta.views}}</span>
+                <span>评论 {{article.meta.comments}}</span>
+                <span>赞 {{article.meta.likes}}</span>
+                <span v-if="article.create_time"
+                      class="time">
+                  {{formatTime(article.create_time)}}
+                </span>
+              </div>
             </div>
-          </div>
+          </a>
         </li>
       </transition-group>
     </ul>
@@ -97,6 +100,10 @@ export default class Articles extends Vue {
     pageNum: 1,
     pageSize: 10
   };
+  href: string =
+    process.env.NODE_ENV === "development"
+      ? "http://localhost:3001/articleDetail?article_id="
+      : "https://biaochenxuying.cn/articleDetail?article_id=";
 
   // lifecycle hook
   mounted() {
@@ -125,13 +132,13 @@ export default class Articles extends Vue {
   // method
   articleDetail(id: string) {
     // console.log("`id`", `/articleDetail?article_id=${id}`);
-    let url: string = "";
-    if (process.env.NODE_ENV === "development") {
-      url = "http://localhost:3001/articleDetail?";
-    } else {
-      url = "https://biaochenxuying.cn/articleDetail?";
-    }
-    window.open(url + `article_id=${id}`);
+    // let url: string = "";
+    // if (process.env.NODE_ENV === "development") {
+    //   url = "http://localhost:3001/articleDetail?";
+    // } else {
+    //   url = "https://biaochenxuying.cn/articleDetail?";
+    // }
+    // window.open(url + `article_id=${id}`);
   }
   formatTime(value: any) {
     return timestampToTime(value, true);