优化标签防止标签中出现空格

Author: eeg1412

admin/src/utils/utils.js

@@ -372,4 +372,9 @@ export const dataURLtoBlob = (dataurl) => {
         u8arr[n] = bstr.charCodeAt(n);
     }
     return new Blob([u8arr], { type: mime });
+}
+
+// 文字中的空格和全角空格替换为下划线
+export const replaceSpacesWithUnderscores = (str) => {
+    return str.replace(/[\s\u3000]/g, '-');
 }

admin/src/views/index/post/PostEditor.vue

@@ -408,7 +408,7 @@ import RichEditor5 from '@/components/RichEditor5'
 import draggable from 'vuedraggable'
 import EmojiTextarea from '@/components/EmojiTextarea.vue'
 import { onBeforeRouteLeave } from 'vue-router'
-import { loadAndOpenImg } from '@/utils/utils'
+import { loadAndOpenImg, replaceSpacesWithUnderscores } from '@/utils/utils'
 import store from '@/store'
 
 export default {
@@ -633,13 +633,14 @@ export default {
           const list = res.data.list
           if (tagKeyword) {
             // 如果tagkeyword没有在list里面，就把tagkeyword push到list里面
+            const formatTagKeyword = replaceSpacesWithUnderscores(tagKeyword)
             const hasTagKeyword = list.some(
-              (item) => item.tagname === tagKeyword
+              (item) => item.tagname === formatTagKeyword
             )
             if (!hasTagKeyword) {
               list.push({
-                _id: tagKeyword,
-                tagname: tagKeyword,
+                _id: formatTagKeyword,
+                tagname: formatTagKeyword,
                 isNew: true,
               })
             }

admin/src/views/index/post/PostList.vue

@@ -205,13 +205,15 @@
 
         <el-table-column prop="tags" label="标签" width="200">
           <template #default="{ row }">
-            <el-tag
+            <div
+              class="postlist-content-item"
               v-for="tag in row.tags"
               :key="tag._id"
               size="small"
               style="margin-right: 5px"
-              >{{ tag.tagname }}</el-tag
             >
+              #{{ tag.tagname }}
+            </div>
           </template>
         </el-table-column>
         <!-- 关联内容 -->

admin/src/views/index/tag/TagEditor.vue

@@ -15,6 +15,7 @@
           <el-input
             v-model="form.tagname"
             placeholder="请输入标签名称"
+            @blur="form.tagname = replaceSpacesWithUnderscores(form.tagname)"
           ></el-input>
         </el-form-item>
         <el-form-item>
@@ -28,6 +29,7 @@
 import { useRouter, useRoute } from 'vue-router'
 import { onMounted, reactive, ref } from 'vue'
 import { authApi } from '@/api'
+import { replaceSpacesWithUnderscores } from '@/utils/utils'
 export default {
   setup() {
     const router = useRouter()
@@ -94,6 +96,7 @@ export default {
       }
     })
     return {
+      replaceSpacesWithUnderscores,
       id,
       form,
       rules,

server/api/admin/post/updatePost.js

@@ -213,14 +213,15 @@ module.exports = async function (req, res, next) {
   let tagsIdArr = []
   for await (const tagId of tags_) {
     if (!validator.isMongoId(tagId)) {
+      const tagname = utils.replaceSpacesWithUnderscores(tagId)
       // 不是id，创建tag
       // 校验tagname是否存在
-      let tag = await tagUtils.findOne({ tagname: tagId }).catch((err) => {
+      let tag = await tagUtils.findOne({ tagname: tagname }).catch((err) => {
         return null
       })
       if (!tag) {
         tag = await tagUtils.save({
-          tagname: tagId
+          tagname: tagname
         }).catch((err) => {
           return false
         })

server/api/admin/tag/createTag.js

@@ -8,7 +8,7 @@ module.exports = async function (req, res, next) {
   const { tagname } = req.body
   // 校验格式
   const params = {
-    tagname: tagname,
+    tagname: utils.replaceSpacesWithUnderscores(tagname),
   }
   const rule = [
     {

server/api/admin/tag/updateTag.js

@@ -25,7 +25,7 @@ module.exports = async function (req, res, next) {
   }
   // 校验格式
   const params = {
-    tagname: tagname,
+    tagname: utils.replaceSpacesWithUnderscores(tagname),
   }
   const rule = [
     {

server/utils/utils.js

@@ -789,6 +789,11 @@ exports.getCommentLikeLogsSize = async () => {
   }
 }
 
+// 文字中的空格和全角空格替换为下划线
+exports.replaceSpacesWithUnderscores = (str) => {
+  return str.replace(/[\s\u3000]/g, '-');
+}
+
 // let reflushBlogCacheTimer = null
 // exports.reflushBlogCache = async () => {
 //   if (reflushBlogCacheTimer) {