1

package-lock.json

@@ -17,11 +17,9 @@
         "qs": "^6.10.3",
         "vue": "^2.6.11",
         "vue-baberrage": "^3.2.4",
-        "vue-ripple-directive": "^2.0.1",
         "vue-router": "^3.2.0",
         "vue-seamless-scroll": "^1.1.23",
-        "vuex": "^3.4.0",
-        "vuex-persistedstate": "^4.0.0"
+        "vuex": "^3.4.0"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~4.5.0",
@@ -3960,9 +3958,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001341",
-      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001341.tgz",
-      "integrity": "sha512-2SodVrFFtvGENGCv0ChVJIDQ0KPaS1cg7/qtfMaICgeMolDdo/Z2OD32F0Aq9yl6F4YFwGPBS5AaPqNYiW4PoA==",
+      "version": "1.0.30001572",
+      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001572.tgz",
+      "integrity": "sha512-1Pbh5FLmn5y4+QhNyJE9j3/7dK44dGB83/ZMjv/qJk86TvDbjk0LosiZo0i0WB0Vx607qMX9jYrn1VLHCkN4rw==",
       "dev": true
     },
     "node_modules/case-sensitive-paths-webpack-plugin": {
@@ -12484,12 +12482,6 @@
       "integrity": "sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==",
       "dev": true
     },
-    "node_modules/shvl": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmmirror.com/shvl/-/shvl-2.0.3.tgz",
-      "integrity": "sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw==",
-      "deprecated": "older versions vulnerable to prototype pollution"
-    },
     "node_modules/side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz",
@@ -14623,14 +14615,6 @@
         "node": ">=4.0.0"
       }
     },
-    "node_modules/vue-ripple-directive": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/vue-ripple-directive/-/vue-ripple-directive-2.0.1.tgz",
-      "integrity": "sha512-jXZEX6uZpo89wxmdcw02uFpsMBpm1pxjQ60uqghNLQ8H8ju9eon2vE0+vvSWJ1WGCOTEfxGDR4InabJJu5f1GA==",
-      "dependencies": {
-        "vue": "^2.2.1"
-      }
-    },
     "node_modules/vue-router": {
       "version": "3.5.3",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.5.3.tgz",
@@ -14710,27 +14694,6 @@
         "vue": "^2.0.0"
       }
     },
-    "node_modules/vuex-persistedstate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmmirror.com/vuex-persistedstate/-/vuex-persistedstate-4.1.0.tgz",
-      "integrity": "sha512-3SkEj4NqwM69ikJdFVw6gObeB0NHyspRYMYkR/EbhR0hbvAKyR5gksVhtAfY1UYuWUOCCA0QNGwv9pOwdj+XUQ==",
-      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
-      "dependencies": {
-        "deepmerge": "^4.2.2",
-        "shvl": "^2.0.3"
-      },
-      "peerDependencies": {
-        "vuex": "^3.0 || ^4.0.0-rc"
-      }
-    },
-    "node_modules/vuex-persistedstate/node_modules/deepmerge": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-4.2.2.tgz",
-      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-1.7.5.tgz",
@@ -19016,9 +18979,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001341",
-      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001341.tgz",
-      "integrity": "sha512-2SodVrFFtvGENGCv0ChVJIDQ0KPaS1cg7/qtfMaICgeMolDdo/Z2OD32F0Aq9yl6F4YFwGPBS5AaPqNYiW4PoA==",
+      "version": "1.0.30001572",
+      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001572.tgz",
+      "integrity": "sha512-1Pbh5FLmn5y4+QhNyJE9j3/7dK44dGB83/ZMjv/qJk86TvDbjk0LosiZo0i0WB0Vx607qMX9jYrn1VLHCkN4rw==",
       "dev": true
     },
     "case-sensitive-paths-webpack-plugin": {
@@ -26095,11 +26058,6 @@
       "integrity": "sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==",
       "dev": true
     },
-    "shvl": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmmirror.com/shvl/-/shvl-2.0.3.tgz",
-      "integrity": "sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw=="
-    },
     "side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz",
@@ -27882,14 +27840,6 @@
         }
       }
     },
-    "vue-ripple-directive": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/vue-ripple-directive/-/vue-ripple-directive-2.0.1.tgz",
-      "integrity": "sha512-jXZEX6uZpo89wxmdcw02uFpsMBpm1pxjQ60uqghNLQ8H8ju9eon2vE0+vvSWJ1WGCOTEfxGDR4InabJJu5f1GA==",
-      "requires": {
-        "vue": "^2.2.1"
-      }
-    },
     "vue-router": {
       "version": "3.5.3",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.5.3.tgz",
@@ -27963,22 +27913,6 @@
       "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
       "requires": {}
     },
-    "vuex-persistedstate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmmirror.com/vuex-persistedstate/-/vuex-persistedstate-4.1.0.tgz",
-      "integrity": "sha512-3SkEj4NqwM69ikJdFVw6gObeB0NHyspRYMYkR/EbhR0hbvAKyR5gksVhtAfY1UYuWUOCCA0QNGwv9pOwdj+XUQ==",
-      "requires": {
-        "deepmerge": "^4.2.2",
-        "shvl": "^2.0.3"
-      },
-      "dependencies": {
-        "deepmerge": {
-          "version": "4.2.2",
-          "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-4.2.2.tgz",
-          "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
-        }
-      }
-    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-1.7.5.tgz",

public/index.html

@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>Poetize</title>
-
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     <script src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
     <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>

src/components/blog.vue

@@ -0,0 +1,324 @@
+<template>
+  <div>
+    <!-- 组件的内容 -->
+    <!-- 网站信息 -->
+    <div class="card-content1 shadow-box background-opacity">
+      <el-avatar style="margin-top: 20px" class="user-avatar" :size="120" :src="webInfo.avatar"></el-avatar>
+      <div class="web-name">{{webInfo.webName}}</div>
+      <div class="web-info">
+        <div class="blog-info-box">
+          <span>博客</span>
+          <span class="blog-info-num">{{ $store.getters.articleTotal }}</span>
+        </div>
+        <div class="blog-info-box">
+          <span>分类</span>
+          <span class="blog-info-num">{{ sortInfo.length }}</span>
+        </div>
+        <div class="blog-info-box">
+          <span>访问量</span>
+          <span class="blog-info-num">{{ webInfo.historyAllCount }}</span>
+        </div>
+      </div>
+      <a class="collection-btn" @click="showTip()">
+        <i class="el-icon-star-off" style="margin-right: 2px"></i>朋友圈
+      </a>
+    </div>
+
+    <!-- 写博客按钮 -->
+    <button class="write-blog-btn" @click="showEditor = true">
+      ✍️ 写博客
+    </button>
+
+    <!-- 编辑框 -->
+    <div class="blog-editor" v-if="showEditor">
+      <textarea v-model="blogContent"></textarea>
+      <div class="editor-btns">
+        <button class="cancel-btn" @click="cancelEdit">取消</button>
+        <button class="publish-btn" @click="saveBlog">发布</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  // 组件的逻辑和配置
+  data() {
+    return {
+      pagination: {
+        current: 1,
+        size: 5,
+        recommendStatus: true
+      },
+      recommendArticles: [],
+      admires: [],
+      showAdmireDialog: false,
+      articleSearch: "",
+      showEditor: false,
+      blogContent: ""
+    }
+  },
+  computed: {
+    webInfo() {
+      return this.$store.state.webInfo;
+    },
+    sortInfo() {
+      return this.$store.state.sortInfo;
+    }
+  },
+  created() {
+    this.getRecommendArticles();
+    this.getAdmire();
+  },
+  methods: {
+    selectSort(sort) {
+      this.$emit("selectSort", sort);
+    },
+    selectArticle() {
+      this.$emit("selectArticle", this.articleSearch);
+    },
+    showAdmire() {
+      if (this.$common.isEmpty(this.$store.state.currentUser)) {
+        this.$message({
+          message: "请先登录！",
+          type: "error"
+        });
+        return;
+      }
+
+      this.showAdmireDialog = true;
+    },
+    getAdmire() {
+      this.$http.get(this.$constant.baseURL + "/webInfo/getAdmire")
+        .then((res) => {
+          if (!this.$common.isEmpty(res.data)) {
+            this.admires = res.data;
+          }
+        })
+        .catch((error) => {
+          this.$message({
+            message: error.message,
+            type: "error"
+          });
+        });
+    },
+    getRecommendArticles() {
+      this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
+        .then((res) => {
+          if (!this.$common.isEmpty(res.data)) {
+            this.recommendArticles = res.data.records;
+          }
+        })
+        .catch((error) => {
+          this.$message({
+            message: error.message,
+            type: "error"
+          });
+        });
+    },
+    showTip() {
+      this.$router.push({path: '/weiYan'});
+    },
+    cancelEdit() {
+      // 取消编辑
+      this.showEditor = false;
+      this.blogContent = "";
+    },
+    saveBlog() {
+      // 发布博客
+      // console.log(this.blogContent);
+      // this.showEditor = false;
+      // this.blogContent = "";
+      // let blog = {content:this.blogContent};
+      const articleVO = {
+        user_id:"sara",
+        article_content: this.blogContent ,// 获取博客内容
+        // 其他博客相关数据...
+        // sort_id:1,
+      };
+      console.log(articleVO)
+      this.$http.post('/article/saveArticle', articleVO) // 发送POST请求，指定保存博客的接口地址
+        .then(response => {
+          // 请求成功处理逻辑
+          console.log('博客保存成功！');
+        })
+        .catch(error => {
+          // 请求失败处理逻辑
+          console.error('博客保存失败：', error);
+        });
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 组件的样式 */
+.card-content1 {
+  background: linear-gradient(-45deg, #e8d8b9, #eccec5, #a3e9eb, #bdbdf0, #eec1ea);
+  background-size: 400% 400%;
+  animation: gradientBG 10s ease infinite;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 10px;
+  position: relative;
+  /*color: var(--white);*/
+  overflow: hidden;
+}
+
+.card-content1 :not(:first-child) {
+  z-index: 10;
+}
+
+.web-name {
+  font-size: 30px;
+  font-weight: bold;
+  margin: 20px 0;
+}
+
+.web-info {
+  width: 80%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+.blog-info-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  font-size: 24px;
+}
+
+.blog-info-num {
+  margin-top: 12px;
+}
+
+.collection-btn {
+  position: relative;
+  margin-top: 12px;
+  background: var(--lightGreen);
+  cursor: pointer;
+  width: 65%;
+  height: 35px;
+  border-radius: 1rem;
+  text-align: center;
+  line-height: 35px;
+  color: var(--white);
+  overflow: hidden;
+  z-index: 1;
+  margin-bottom: 25px;
+}
+
+.collection-btn::before {
+  background: var(--gradualRed);
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  transform: scaleX(0);
+  transform-origin: 0;
+  transition: transform 0.5s ease-out;
+  transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
+  border-radius: 1rem;
+  z-index: -1;
+}
+
+.collection-btn:hover::before {
+  transform: scaleX(1);
+}
+
+.write-blog-btn {
+  position: absolute;
+  left: 470px;
+  top: 197px;
+  width: 160px;
+  height: 63px;
+  background-color: var(--gradualRed);
+  color: #181313;
+  border-radius: 20px;
+  font-size: 24px;
+  font-weight: bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: all .2s ease-in-out;
+  border: 2px solid #1675b4; /* 添加边框 */
+}
+
+.write-blog-btn:hover {
+  transform: scale(1.1);
+  border: 2px solid #053246; /* 鼠标悬停时修改边框颜色 */
+}
+
+
+
+.write-blog-btn:hover {
+  transform: scale(1.1); /* 鼠标悬停时缩放 */
+}
+
+
+
+.blog-editor {
+  margin: 0 auto;
+  align-self: center;
+  width: 80%;
+  height: 300px;
+  background-color: #ba94dc;
+  border-radius: 20px;
+  margin-top: 20px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.blog-editor textarea {
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  resize: none;
+  border: none;
+  outline: none;
+  border-radius: 20px;
+  font-size: 16px;
+  font-family: "Microsoft YaHei";
+}
+
+.editor-btns {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+
+.cancel-btn,
+.publish-btn {
+  width: 100px;
+  height: 30px;
+  color: #fff;
+  border-radius: 3px;
+  cursor: pointer;
+  transition: all .2s linear;
+  font-size: 19px;
+  font-weight: bold;
+}
+
+.cancel-btn {
+  background-color: #ccc;
+  margin-right: 10px;
+}
+
+.publish-btn {
+  background-color: var(--gradualRed);
+  color: #1d1f21;
+}
+
+.cancel-btn:hover,
+.publish-btn:hover {
+  transform: translateY(-2px);
+}
+</style>

src/components/home.vue

@@ -45,6 +45,14 @@
               </div>
             </li>
 
+            <!-- 博客 -->
+            <li @click="$router.push({ path: '/blog' })">
+              <div class="my-menu">
+                ✍️ <span>博客</span>
+              </div>
+            </li>
+
+
             <!-- 旅拍 -->
             <li @click="$router.push({path: '/travel'})">
               <div class="my-menu">

src/components/popup.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="popup">
+    <select v-model="selectedCategory">
+      <option value="category1">Category 1</option>
+      <option value="category2">Category 2</option>
+      <option value="category3">Category 3</option>
+    </select>
+    <button @click="confirmCategory">确定</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedCategory: ''
+    };
+  },
+  methods: {
+    confirmCategory() {
+      // 在这里处理用户选择的分类
+      // 可以将选择的分类通过事件触发传递给父组件
+      this.$emit('category-selected', this.selectedCategory);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.popup {
+  /* 添加样式来控制弹窗的外观 */
+}
+</style>

src/router/index.js

@@ -32,6 +32,10 @@ const routes = [
       path: "/love",
       name: "love",
       component: () => import('../components/love')
+    }, {
+        path: "/blog",
+        name: "blog",
+        component: () => import('../components/blog')
       }, {
       path: "/favorite",
       name: "favorite",

src/store/index.js

@@ -14,6 +14,7 @@ export default new Vuex.Store({
   getters: {
     articleTotal: state => {
       if (state.sortInfo !== null && state.sortInfo.length !== 0) {
+        //sortInfo数组为空或者为null，则表示没有文章.不为空则有文章
         if (state.sortInfo.length === 1) {
           return state.sortInfo[0].countOfSort;
         } else {

src/utils/constant.js

@@ -18,7 +18,7 @@ export default {
   //前后端定义的密钥，AES使用16位
   cryptojs_key: "aoligeimeimaobin",
   qiniuUrl: "https://upload.qiniup.com",
-  qiniuDownload: "$$$$七牛云下载地址，仿照【https://file.poetize.cn/】",
+  qiniuDownload: "https://portal.qiniu.com/cdn/domain/s6pxqn1l5.hd-bkt.clouddn.com",
 
   favoriteVideo: "$$$$自己找一个视频链接作为百宝箱的封面",