{"id":925,"date":"2024-04-18T22:15:45","date_gmt":"2024-04-18T14:15:45","guid":{"rendered":"https:\/\/blog.yiming1234.cn\/?p=925"},"modified":"2024-04-18T22:15:46","modified_gmt":"2024-04-18T14:15:46","slug":"%e5%89%8d%e5%90%8e%e7%ab%af%e7%b3%bb%e7%bb%9f%e5%bc%80%e5%8f%91%e4%b9%8b-%e6%96%87%e7%ab%a0%e7%ae%a1%e7%90%86","status":"publish","type":"post","link":"https:\/\/blog.yiming1234.cn\/index.php\/2024\/%e5%89%8d%e5%90%8e%e7%ab%af%e7%b3%bb%e7%bb%9f%e5%bc%80%e5%8f%91%e4%b9%8b-%e6%96%87%e7%ab%a0%e7%ae%a1%e7%90%86\/","title":{"rendered":"\u524d\u540e\u7aef\u7cfb\u7edf\u5f00\u53d1\u4e4b\u2014\u2014\u6587\u7ae0\u7ba1\u7406"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u524d\u8a00<\/h2>\n\n\n\n<p>\u4e3b\u8981\u4f7f\u7528\u7684\u6280\u672f\uff1a\u524d\u7aef\u4f7f\u7528\u7684\u662fVue.js\uff0c\u540e\u7aef\u4f7f\u7528\u7684\u662fSpringBoot\u3002\u5982\u4e0d\u96f7\u540c\u53ef\u4ee5\u76f4\u63a5\u8df3\u8fc7\u4e86\u3002<\/p>\n\n\n\n<p>\u6587\u7ae0\u7ba1\u7406\u662f\u8fd9\u4e2a\u7cfb\u7edf\u6700\u4e3b\u8981\u7684\u4e00\u4e2a\u529f\u80fd\u4e5f\u662f\u6700\u5e38\u89c4\u7684\u4e00\u4e2a\u529f\u80fd\u3002\u4e4b\u524d\u7684\u6587\u7ae0\u63d0\u5230\u7684\u662f\u6587\u7ae0<strong>\u5206\u7c7b<\/strong>\u7684\u7ba1\u7406\uff0c\u7c7b\u4f3c\u4e8e\u6211\u4eec\u6240\u719f\u77e5\u7684<strong>\u6807\u7b7e<\/strong>\u64cd\u4f5c\u3002\u800c\u6587\u7ae0\u7ba1\u7406\u76f8\u8f83\u4e8e\u6587\u7ae0\u5206\u7c7b\u7684\u7ba1\u7406\u9664\u4e86\u57fa\u7840\u7684\u589e\u5220\u6539\u67e5\u4e4b\u5916\uff0c\u8fd8\u589e\u52a0\u4e86\u6587\u7ae0\u56fe\u7247\u7684\u6258\u7ba1\uff0cMarkdown\u7f16\u8f91\u5668\uff0c\u81ea\u5b9a\u4e49\u6821\u9a8c\u7b49\u7a0d\u5fae\u590d\u6742\u4e00\u70b9\u7684\u64cd\u4f5c\u3002\u6574\u4f53\u4e0a\u76f8\u5dee\u4e0d\u5927\u3002<\/p>\n\n\n\n<p>\u6240\u4ee5\u5c06\u5206\u4e3a\u4e24\u7bc7\u6765\u8fdb\u884c\u9610\u8ff0\u3002\u6700\u540e\u8fd8\u5dee\u4e00\u5757\u7528\u6237\u6a21\u5757\u7684\u529f\u80fd\uff0c\u7136\u540e\u6587\u7ae0\u7ba1\u7406\u7cfb\u7edf\u7684\u5f00\u53d1\u5c31\u544a\u4e00\u6bb5\u843d\u4e86\u3002<\/p>\n\n\n\n<p>\u63a5\u4e0b\u6765\u5173\u4e8eWeb\u5168\u6808\u5f00\u53d1\u7684\u5b66\u4e60\u5c06\u8fdb\u5165\u5230\u65b0\u7684\u5883\u754c\uff0c\u6d89\u53ca\u5230\u66f4\u5b9e\u7528\u7684\u6280\u5de7\u4ee5\u53ca\u66f4\u590d\u6742\u7684\u64cd\u4f5c\u3002\u6bd4\u5982\u9a8c\u8bc1\u7801\u6821\u9a8c\uff0c\u652f\u4ed8\u7b49\u4e4b\u7c7b\u7684\u64cd\u4f5c\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u6b63\u6587<\/h2>\n\n\n\n<p>\u9875\u9762\u5c55\u793a\uff08\u633a\u5355\u4e00\u7684\uff09<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https:\/\/blog.yiming1234.cn\/wp-content\/uploads\/2024\/04\/image-10-1024x693.png'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"693\" data-original=\"https:\/\/blog.yiming1234.cn\/wp-content\/uploads\/2024\/04\/image-10-1024x693.png\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"\" class=\"wp-image-927\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/div><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https:\/\/blog.yiming1234.cn\/wp-content\/uploads\/2024\/04\/image-11-1024x581.png'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"581\" data-original=\"https:\/\/blog.yiming1234.cn\/wp-content\/uploads\/2024\/04\/image-11-1024x581.png\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"\" class=\"wp-image-928\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/div><\/figure>\n\n\n\n<p>\u524d\u7aef\u7684\u4ee3\u7801\u7531\u4e8e\u53ea\u5305\u62ec\u5c55\u793a\u9875\u9762\u548c\u5b9e\u73b0\u51fd\u6570\u5df2\u7ecf\u57fa\u672c\u5c55\u793a\u5b8c\u6bd5\uff0c\u540e\u7aef\u4ecd\u5b58\u5728\u4e00\u4e9b\u7ec6\u8282\u4e0a\u7684\u64cd\u4f5c\uff0c\u6bd4\u5982\u56fe\u7247\u963f\u91cc\u4e91\u7684\u6258\u7ba1\uff08\u6709\u70b9\u7c7b\u4f3c\u4e8e\u56fe\u5e8a\uff09\uff0c\u81ea\u5b9a\u4e49\u6821\u9a8c\u7b49\uff0c\u4ee5\u53ca\u4e00\u4e9b\u8865\u5145\u7684\u7b14\u8bb0\u5c31\u653e\u5230\u4e0b\u4e00\u7bc7\u6587\u7ae0\u4e2d\u6765\u8bb2\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u524d\u7aef\u6d89\u53ca\u5230\u7684\u51fd\u6570<\/h3>\n\n\n\n<p>\u5177\u4f53\u7684\u4ee3\u7801\u601d\u8def\u548c\u6587\u7ae0\u5206\u7c7b\u7ba1\u7406\u7684\u5927\u5dee\u4e0d\u5dee\uff0c\u6240\u4ee5\u5c31\u7f57\u5217\u5728\u8fc7\u7a0b\u4e2d\u8981\u7528\u5230\u7684\u4e00\u4e9b\u4e3b\u8981\u7684\u51fd\u6570\u4ee5\u53ca\u53d8\u91cf\uff08\u4e5f\u5c31\u662fscript\u90e8\u5206\u6d89\u53ca\u5230\u7684\uff0c\u5177\u4f53\u4ee3\u7801\u4e2d\u6709\u5907\u6ce8\u4f46\u662f\u6709\u70b9\u4e71\uff09<\/p>\n\n\n\n<p>\u7528\u4e8e\u5728template\u90e8\u5206\u7ed1\u5b9a\u6309\u94ae\u62bd\u5c49\u7b49\u4ee5\u6b64\u6765\u5b9e\u73b0\u4e8b\u4ef6\u3002<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>category<\/td><td>\u6587\u7ae0\u5206\u7c7b\u6a21\u578b\uff0c\u5305\u62ecid,categoryName,categoryAlias,createTime,updateTime<\/td><\/tr><tr><td>articles<\/td><td>\u6587\u7ae0\u5217\u8868\u6a21\u578b\uff0c\u5305\u62ecid,title,content,coverImg,state,categoryId,createTime,updateTime<\/td><\/tr><tr><td><\/td><td>\u5206\u9875\u6761\u6a21\u578b\uff0c\u5305\u62ecpageNum,total,pageSize<\/td><\/tr><tr><td>formaDate<\/td><td>\u7528\u4e8e\u683c\u5f0f\u5316\u65e5\u671f\uff08\u66f4\u6539\u65f6\u95f4\uff09<\/td><\/tr><tr><td>onSizeChange<\/td><td>\/\/\u5f53\u6bcf\u9875\u6761\u6570\u53d1\u751f\u4e86\u53d8\u5316\uff0c\u8c03\u7528\u6b64\u51fd\u6570<\/td><\/tr><tr><td>onCurrentChange<\/td><td>\u5f53\u524d\u9875\u7801\u53d1\u751f\u53d8\u5316\uff0c\u8c03\u7528\u6b64\u51fd\u6570<\/td><\/tr><tr><td>showDrawer<\/td><td>\u663e\u793a\u65b0\u5efa\u7f16\u8f91\u6587\u7ae0\u7684\u62bd\u5c49<\/td><\/tr><tr><td>articleList,articleCategoryList<\/td><td>\u83b7\u53d6\u6587\u7ae0\u6709\u5173\u7684\u6570\u636e\u6570\u636e<\/td><\/tr><tr><td>addArticle<\/td><td>\u6dfb\u52a0\u65b0\u7684\u6587\u7ae0<\/td><\/tr><tr><td>updateArticle<\/td><td>\u66f4\u65b0\u6587\u7ae0\u6570\u636e<\/td><\/tr><tr><td>deleteArticle<\/td><td>\u5220\u9664\u6587\u7ae0<\/td><\/tr><tr><td>clearData<\/td><td>\u6e05\u7a7a\u65b0\u5efa\u6587\u7ae0\u65f6\u62bd\u5c49\u4e2d\u7684\u6570\u636e<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u540e\u7aef\u6d89\u53ca\u5230\u7684\u51fd\u6570<\/h3>\n\n\n\n<p>\u5177\u4f53\u7684\u4ee3\u7801\u601d\u8def\u548c\u6587\u7ae0\u5206\u7c7b\u7ba1\u7406\u7684\u5927\u5dee\u4e0d\u5dee\uff0c\u4e3b\u8981\u6d89\u53ca\u5230\u4e0b\u9762\u4e94\u4e2a\u529f\u80fd\u3002\u5728\u6570\u636e\u8bbf\u95ee\u5c42\uff0c\u8bf7\u6c42\u5c42\uff0c\u6570\u636e\u7ba1\u7406\u5c42\u90fd\u6709\u9488\u5bf9\u5206\u522b\u5b9e\u73b0\u8fd9\u4e94\u4e2a\u529f\u80fd\u7684\u51fd\u6570\u3002<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>add<\/td><td>\u65b0\u589e\u6587\u7ae0<\/td><\/tr><tr><td>list<\/td><td>\u83b7\u53d6\u6587\u7ae0\u5217\u8868<\/td><\/tr><tr><td>findById<\/td><td>\u83b7\u53d6\u6587\u7ae0\u8be6\u60c5<\/td><\/tr><tr><td>update<\/td><td>\u66f4\u65b0\u6587\u7ae0\u5185\u5bb9<\/td><\/tr><tr><td>deleteById<\/td><td>\u5220\u9664\u6587\u7ae0<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u4ee3\u7801\u5c55\u793a<\/h3>\n\n\n\n<p>\u8ba1\u7b97\u673a\u4e2d\u5f88\u591a\u9879\u76ee\u548c\u5e94\u7528\u90fd\u4f1a\u56e0\u4e3a\u4f5c\u8005\u516c\u5e03\u5c55\u793a\u7684\u4ee3\u7801\u4e0d\u5168\u800c\u5bfc\u81f4\u4e0d\u80fd\u8dd1\u8d77\u6765\u65e0\u6cd5\u6b63\u5e38\u8fd0\u884c\u3002\u4e0d\u662f\u7f3a\u5c11\u5fc5\u8981\u7684\u914d\u7f6e\u9879\uff0c\u5c31\u662f\u7f3a\u5c11\u5fc5\u8981\u7684\u6587\u4ef6<\/p>\n\n\n\n<p>\u4e3a\u4e86\u7701\u65f6\u7701\u529b\uff0c\u8fd9\u4e5f\u5c31\u662f\u9700\u8981\u4f5c\u8005\u516c\u5e03\u6e90\u7801\u7684\u539f\u56e0\u3002<\/p>\n\n\n\n<p><strong>\u7531\u4e8e\u662f\u5728\u4e4b\u524d\u7684\u57fa\u7840\u4e0a\u8fdb\u884c\u7684\u529f\u80fd\u7684\u62d3\u5c55<\/strong>\uff0c\u6240\u4ee5\u4e00\u4e9b\u5fc5\u8981\u7684\u6587\u4ef6\u5728\u4e13\u680f\u4e4b\u524d\u7684\u6587\u7ae0\u91cc\u5df2\u7ecf\u5c55\u793a\u8fc7\u4e86\uff0c\u4e5f\u5c31\u4e0d\u518d\u8fdb\u884c\u91cd\u590d\u5c55\u793a\uff0c\u4e3b\u8981\u5c55\u793a\u5fc5\u8981\u7684\u6587\u4ef6\u3002<\/p>\n\n\n\n<p>\u4f46\u662f\u53ef\u80fd\u6709\u4e9b\u914d\u7f6e\u6587\u4ef6\u8fdb\u884c\u8fc7\u5c0f\u7684\u6dfb\u52a0\u548c\u6539\u52a8\uff0c\u5c31\u9700\u8981\u81ea\u5df1\u6839\u636e\u62a5\u9519\u4e00\u70b9\u70b9\u4fee\u6539\u4e86\uff0c\u6216\u8005\u7b49\u5f85\u6211\u5b8c\u6574\u7684\u9879\u76ee\u4e0a\u4f20\u5427\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u524d\u7aef<\/h4>\n\n\n\n<p>\u4e3b\u8981\u6587\u4ef6ArticleManage.vue\uff0carticle.js<\/p>\n\n\n\n<p>ArticleManage.vue\u662f\u7528\u4e8e\u586b\u8865\u5c55\u793a\u6587\u4ef6Layout.vue\u4e2d\u7a7a\u767d\u7684\u90e8\u5206\u7528\u4ee5\u5b9e\u73b0\u529f\u80fd\u3002<\/p>\n\n\n\n<p>article.js\u4e3b\u8981\u7528\u4e8e\u670d\u52a1\u63a5\u53e3\u7684\u8c03\u7528\uff0c\u5373\u524d\u540e\u7aef\u7684\u94fe\u63a5\uff0c\u7528\u4e8e\u89e3\u51b3\u8de8\u57df\u7684\u95ee\u9898\u3002<\/p>\n\n\n\n<p>ArticleManage.vue<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script setup>\nimport {\n  Edit,\n  Delete\n} from '@element-plus\/icons-vue'\n\nimport { ref } from 'vue'\nimport {ElMessage } from 'element-plus'\n\/\/\u6587\u7ae0\u5206\u7c7b\u6570\u636e\u6a21\u578b\nconst categorys = ref(&#91;\n  {\n    \"id\": 1,\n    \"categoryName\": \"\u5b66\u6821\u4e8b\u4ef6\",\n    \"categoryAlias\": \"xuexiaoshijian\",\n    \"createTime\": \"2024-03-25 00:16:04\",\n    \"updateTime\": \"2024-04-01 20:47:37\"\n  },\n])\nimport {articleCategoryListService,articleListService,addArticleService,articleUpdateService} from '@\/api\/article.js'\n\/\/\u7528\u6237\u641c\u7d22\u65f6\u9009\u4e2d\u7684\u5206\u7c7bid\nconst categoryId=ref('')\n\n\/\/\u7528\u6237\u641c\u7d22\u65f6\u9009\u4e2d\u7684\u53d1\u5e03\u72b6\u6001\nconst state=ref('')\n\n\/\/\u6587\u7ae0\u5217\u8868\u6570\u636e\u6a21\u578b\nconst articles = ref(&#91;\n  {\n    \"id\": 1,\n    \"title\": \"\u6d4b\u8bd5\u6587\u7ae0\",\n    \"content\": \"12345678\",\n    \"coverImg\": \"https:\/\/yiming1234.oss-cn-beijing.aliyuncs.com\/afc398f5-0c03-425b-a649-880ced2fb568.jpg\",\n    \"state\": \"\u5df2\u53d1\u5e03\",\n    \"categoryId\": 1,\n    \"createTime\": \"2024-04-17 20:20:41\",\n    \"updateTime\": \"2024-04-17 20:20:41\"\n  }\n])\n\n\/\/\u91cd\u7f6e\u641c\u7d22\nconst resetSearch = () => {\n  categoryId.value = '';\n  state.value = '';\n  articleList();\n}\n\/\/\u5206\u9875\u6761\u6570\u636e\u6a21\u578b\nconst pageNum = ref(1)\/\/\u5f53\u524d\u9875\nconst total = ref(20)\/\/\u603b\u6761\u6570\nconst pageSize = ref(3)\/\/\u6bcf\u9875\u6761\u6570\n\n\/\/\u5f53\u6bcf\u9875\u6761\u6570\u53d1\u751f\u4e86\u53d8\u5316\uff0c\u8c03\u7528\u6b64\u51fd\u6570\nconst onSizeChange = (size) => {\n  pageSize.value = size\n  articleList()\n}\n\/\/\u5f53\u524d\u9875\u7801\u53d1\u751f\u53d8\u5316\uff0c\u8c03\u7528\u6b64\u51fd\u6570\nconst onCurrentChange = (num) => {\n  pageNum.value = num\n  articleList()\n}\n\/\/\u683c\u5f0f\u5316\u65e5\u671f\nconst formatDate = (dateString) => {\n  const date = new Date(dateString);\n  return date.toLocaleString();\n}\n\nconst title = ref('')\n\n\/\/\u663e\u793a\u62bd\u5c49\nconst showDrawer = (row) => {\n  visibleDrawer.value = true;\n  title.value = '\u7f16\u8f91\u6587\u7ae0';\n  articleModel.value.title = row.title; \/\/ \u786e\u4fddrow\u5bf9\u8c61\u6709\u4e00\u4e2atitle\u5c5e\u6027\n  articleModel.value.categoryId = row.categoryId; \/\/ \u786e\u4fddrow\u5bf9\u8c61\u6709\u4e00\u4e2acategoryId\u5c5e\u6027\n  articleModel.value.coverImg = row.coverImg; \/\/ \u786e\u4fddrow\u5bf9\u8c61\u6709\u4e00\u4e2acoverImg\u5c5e\u6027\n  articleModel.value.content = row.content; \/\/ \u786e\u4fddrow\u5bf9\u8c61\u6709\u4e00\u4e2acontent\u5c5e\u6027\n  articleModel.value.state = row.state; \/\/ \u786e\u4fddrow\u5bf9\u8c61\u6709\u4e00\u4e2astate\u5c5e\u6027\n  articleModel.value.id = row.id \/\/ \u786e\u4fddrow\u5bf9\u8c61\u6709\u4e00\u4e2aid\u5c5e\u6027\n}\n\/\/\u56de\u663e\u6587\u7ae0\u5206\u7c7b\n\nconst articleCategoryList = async () => {\n  let result = await articleCategoryListService();\n  categorys.value = result.data;\n\n}\n\n\/\/\u83b7\u53d6\u6587\u7ae0\u5217\u8868\u6570\u636e\nconst articleList = async () => {\n  let params = {\n    pageNum: pageNum.value,\n    pageSize: pageSize.value,\n    categoryId: categoryId.value ? categoryId.value : null,\n    state: state.value ? state.value : null\n  }\n  let result = await articleListService(params);\n  \/\/\u6e32\u67d3\u89c6\u56fe\n  total.value = result.data.total;\n  articles.value = result.data.items;\n  \/\/\u5904\u7406\u6570\u636e,\u7ed9\u6570\u636e\u6a21\u578b\u6269\u5c55\u4e00\u4e2a\u5c5e\u6027categoryName\n  for (let i = 0; i &lt; articles.value.length; i++) {\n    let article = articles.value&#91;i];\n    for (let j = 0; j &lt; categorys.value.length; j++) {\n      if (article.categoryId == categorys.value&#91;j].id) {\n        article.categoryName = categorys.value&#91;j].categoryName;\n      }\n    }\n  }\n}\n\narticleCategoryList();\narticleList();\n\nimport { QuillEditor } from '@vueup\/vue-quill'\nimport '@vueup\/vue-quill\/dist\/vue-quill.snow.css'\nimport {Plus} from '@element-plus\/icons-vue'\n\/\/\u63a7\u5236\u62bd\u5c49\u662f\u5426\u663e\u793a\nconst visibleDrawer = ref(false)\n\/\/\u6dfb\u52a0\u8868\u5355\u6570\u636e\u6a21\u578b\nconst articleModel = ref({\n  title: '',\n  categoryId: '',\n  coverImg: '',\n  content:'',\n  state:''\n})\n\nimport {useTokenStore} from \"@\/stores\/token.js\";\nconst tokenStore = useTokenStore();\n\nconst uploadSuccess = (result) => {\n  articleModel.value.coverImg = result.data;\n  console.log(result.data);\n}\n\n\/\/\u6dfb\u52a0\u6587\u7ae0\nconst addArticle = async (clickState) => {\n  articleModel.value.state = clickState;\n  let result = await addArticleService(articleModel.value);\n  ElMessage.success(result.msg?result.msg:'\u6dfb\u52a0\u6210\u529f');\n  visibleDrawer.value = false;\n  articleList();\n}\n\/\/\u7f16\u8f91\u6587\u7ae0\nconst updateArticle = async (clickState) => {\n  articleModel.value.state = clickState;\n  let result = await articleUpdateService(articleModel.value);\n  ElMessage.success(result.msg ? result.msg : '\u7f16\u8f91\u6210\u529f')\n\n  \/\/\u8c03\u7528\u83b7\u53d6\u6240\u6709\u6587\u7ae0\u5206\u7c7b\u7684\u51fd\u6570\n  articleList();\n  visibleDrawer.value = false;\n}\n\/\/\u5220\u9664\u6587\u7ae0\nimport { ElMessageBox } from 'element-plus'\nconst deleteArticle = (row) => {\n  ElMessageBox.confirm(\n      '\u786e\u8ba4\u5220\u9664\u5f53\u524d\u6587\u7ae0?',\n      'Warning',\n      {\n        confirmButtonText: 'OK',\n        cancelButtonText: 'Cancel',\n        type: 'warning',\n      }\n\n  )\n      .then(async () => {\n        \/\/\u8c03\u7528\u63a5\u53e3\n        let result = await articleDeleteService(row.id);\n        ElMessage({\n          type: 'success',\n          message: 'Delete completed',\n        })\n        articleList();\n      })\n      .catch(() => {\n        ElMessage({\n          type: 'info',\n          message: 'Delete canceled',\n        })\n      })\n}\nconst clearData = () => {\n  articleModel.value.title = '';\n  articleModel.value.categoryId = '';\n  articleModel.value.coverImg = '';\n  articleModel.value.content = '';\n  articleModel.value.state = '';\n}\n&lt;\/script>\n&lt;template>\n  &lt;el-card class=\"page-container\">\n    &lt;template #header>\n      &lt;div class=\"header\">\n        &lt;span>\u6587\u7ae0\u7ba1\u7406&lt;\/span>\n        &lt;div class=\"extra\">\n          &lt;el-button type=\"primary\" @click=\"visibleDrawer=true; title = '\u65b0\u5efa\u6587\u7ae0'; clearData()\">\u6dfb\u52a0\u6587\u7ae0&lt;\/el-button>\n        &lt;\/div>\n      &lt;\/div>\n    &lt;\/template>\n    &lt;!-- \u641c\u7d22\u8868\u5355 -->\n    &lt;el-form inline>\n      &lt;el-form-item label=\"\u6587\u7ae0\u5206\u7c7b\uff1a\">\n        &lt;el-select placeholder=\"\u8bf7\u9009\u62e9\" v-model=\"categoryId\" style=\"width: 200px\">\n          &lt;el-option v-for=\"c in categorys\" :key=\"c.id\" :label=\"c.categoryName\" :value=\"c.id\">\n          &lt;\/el-option>\n        &lt;\/el-select>\n      &lt;\/el-form-item>\n\n      &lt;el-form-item label=\"\u53d1\u5e03\u72b6\u6001\uff1a\">\n        &lt;el-select placeholder=\"\u8bf7\u9009\u62e9\" v-model=\"state\" style=\"width: 200px\">\n          &lt;el-option label=\"\u5df2\u53d1\u5e03\" value=\"\u5df2\u53d1\u5e03\">&lt;\/el-option>\n          &lt;el-option label=\"\u8349\u7a3f\" value=\"\u8349\u7a3f\">&lt;\/el-option>\n        &lt;\/el-select>\n      &lt;\/el-form-item>\n      &lt;el-form-item>\n        &lt;el-button type=\"primary\" @click=\"articleList\">\u641c\u7d22&lt;\/el-button>\n        &lt;el-button @click=\"resetSearch\">\u91cd\u7f6e&lt;\/el-button>\n      &lt;\/el-form-item>\n    &lt;\/el-form>\n    &lt;!-- \u6587\u7ae0\u5217\u8868 -->\n    &lt;el-table :data=\"articles\" style=\"width: 100%\">\n      &lt;el-table-column label=\"\u6587\u7ae0\u6807\u9898\" width=\"400\" prop=\"title\">&lt;\/el-table-column>\n      &lt;el-table-column label=\"\u5206\u7c7b\" prop=\"categoryName\">&lt;\/el-table-column>\n      &lt;el-table-column label=\"\u53d1\u8868\u65f6\u95f4\">\n        &lt;template #default=\"{ row }\">\n          {{ formatDate(row.createTime) }}\n        &lt;\/template>\n      &lt;\/el-table-column>\n      &lt;el-table-column label=\"\u72b6\u6001\" prop=\"state\">&lt;\/el-table-column>\n      &lt;el-table-column label=\"\u64cd\u4f5c\" width=\"100\">\n        &lt;template #default=\"{ row }\">\n          &lt;el-button :icon=\"Edit\" circle plain type=\"primary\" @click=\"showDrawer(row)\">&lt;\/el-button>\n          &lt;el-button :icon=\"Delete\" circle plain type=\"danger\" @click=\"deleteArticle(row)\">&lt;\/el-button>\n        &lt;\/template>\n      &lt;\/el-table-column>\n      &lt;template #empty>\n        &lt;el-empty description=\"\u6ca1\u6709\u6570\u636e\" \/>\n      &lt;\/template>\n    &lt;\/el-table>\n    &lt;!-- \u5206\u9875\u6761 -->\n    &lt;el-pagination v-model:current-page=\"pageNum\" v-model:page-size=\"pageSize\" :page-sizes=\"&#91;3, 5 ,10, 15]\"\n                   layout=\"jumper, total, sizes, prev, pager, next\" background :total=\"total\" @size-change=\"onSizeChange\"\n                   @current-change=\"onCurrentChange\" style=\"margin-top: 20px; justify-content: flex-end\" \/>\n  &lt;\/el-card>\n  &lt;el-drawer v-model=\"visibleDrawer\" :title=\"title\" direction=\"rtl\" size=\"50%\">\n    &lt;!-- \u6dfb\u52a0\u6587\u7ae0\u8868\u5355 -->\n    &lt;el-form :model=\"articleModel\" label-width=\"100px\" >\n      &lt;el-form-item label=\"\u6587\u7ae0\u6807\u9898\" >\n        &lt;el-input v-model=\"articleModel.title\" placeholder=\"\u8bf7\u8f93\u5165\u6807\u9898\">&lt;\/el-input>\n      &lt;\/el-form-item>\n      &lt;el-form-item label=\"\u6587\u7ae0\u5206\u7c7b\">\n        &lt;el-select placeholder=\"\u8bf7\u9009\u62e9\" v-model=\"articleModel.categoryId\">\n          &lt;el-option v-for=\"c in categorys\" :key=\"c.id\" :label=\"c.categoryName\" :value=\"c.id\">\n          &lt;\/el-option>\n        &lt;\/el-select>\n      &lt;\/el-form-item>\n      &lt;el-form-item label=\"\u6587\u7ae0\u5c01\u9762\">\n\n        &lt;el-upload class=\"avatar-uploader\" :auto-upload=\"true\" :show-file-list=\"false\"\n        action=\"\/api\/upload\"\n        name=\"file\"\n        :headers=\"{'Authorization': tokenStore.token}\"\n                   :on-success=\"uploadSuccess\"\n        >\n          &lt;img v-if=\"articleModel.coverImg\" :src=\"articleModel.coverImg\" class=\"avatar\" \/>\n          &lt;el-icon v-else class=\"avatar-uploader-icon\">\n            &lt;Plus \/>\n          &lt;\/el-icon>\n        &lt;\/el-upload>\n      &lt;\/el-form-item>\n      &lt;el-form-item label=\"\u6587\u7ae0\u5185\u5bb9\">\n        &lt;div class=\"editor\">\n          &lt;quill-editor\n              theme=\"snow\"\n              v-model:content=\"articleModel.content\"\n              contentType=\"html\"\n          >\n          &lt;\/quill-editor>\n        &lt;\/div>\n      &lt;\/el-form-item>\n      &lt;el-form-item>\n        &lt;el-button type=\"primary\" @click=\"title == '\u65b0\u5efa\u6587\u7ae0' ? addArticle('\u5df2\u53d1\u5e03') : updateArticle('\u5df2\u53d1\u5e03')\">\u53d1\u5e03&lt;\/el-button>\n        &lt;el-button type=\"info\" @click=\"title == '\u65b0\u5efa\u6587\u7ae0' ?addArticle('\u8349\u7a3f'): updateArticle('\u8349\u7a3f')\">\u8349\u7a3f&lt;\/el-button>\n      &lt;\/el-form-item>\n    &lt;\/el-form>\n  &lt;\/el-drawer>\n&lt;\/template>\n&lt;style lang=\"scss\" scoped>\n.page-container {\n  min-height: 100%;\n  box-sizing: border-box;\n\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n}\n\n.avatar-uploader {\n  :deep() {\n    .avatar {\n      width: 178px;\n      height: 178px;\n      display: block;\n    }\n\n    .el-upload {\n      border: 1px dashed var(--el-border-color);\n      border-radius: 6px;\n      cursor: pointer;\n      position: relative;\n      overflow: hidden;\n      transition: var(--el-transition-duration-fast);\n    }\n\n    .el-upload:hover {\n      border-color: var(--el-color-primary);\n    }\n\n    .el-icon.avatar-uploader-icon {\n      font-size: 28px;\n      color: #8c939d;\n      width: 178px;\n      height: 178px;\n      text-align: center;\n    }\n  }\n}\n.editor {\n  width: 100%;\n  :deep(.ql-editor) {\n    min-height: 200px;\n  }\n}\n&lt;\/style><\/code><\/pre>\n\n\n\n<p>article.js\u7684\u5185\u5bb9<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import request from '@\/utils\/request.js'\n\nexport const articleCategoryListService = ()=>{\n    return request.get('\/category')\n}\n\/\/\u6587\u7ae0\u5206\u7c7b\u6dfb\u52a0\nexport const articleCategoryAddService = (categoryData)=>{\n    return request.post('\/category',categoryData)\n}\n\n\/\/\u6587\u7ae0\u5206\u7c7b\u4fee\u6539\nexport const articleCategoryUpdateService = (categoryData)=>{\n    return request.put('\/category',categoryData)\n}\n\n\/\/\u6587\u7ae0\u5206\u7c7b\u5220\u9664\nexport const articleCategoryDeleteService = (id)=>{\n    return request.delete('\/category?id='+id)\n}\n\n\/\/\u6587\u7ae0\u5217\u8868\u67e5\u8be2\nexport const articleListService = (params)=>{\n    return request.get('\/article',{params:params})\n}\n\n\/\/\u6587\u7ae0\u6dfb\u52a0\nexport const addArticleService = (articleData)=>{\n    return request.post('\/article',articleData)\n}\n\n\/\/\u6587\u7ae0\u4fee\u6539\nexport const articleUpdateService = (articleData)=>{\n    return request.put('\/article',articleData)\n}\n\n\/\/\u6587\u7ae0\u5220\u9664\nexport const articleDeleteService = (id)=>{\n    return request.delete('\/article?id='+id)\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u540e\u7aef<\/h4>\n\n\n\n<p>\u4e3b\u8981\u6587\u4ef6\u6709\u5b9e\u4f53\u7c7b\uff08Article.java\u4ee5\u53caPageBean.java\uff09<br>\u8bf7\u6c42\u5c42\uff08ArticleController.java\uff09<br>\u670d\u52a1\u5c42\uff08ArticleService.java\u4ee5\u53caArticleServiceImpl.java\uff09<br>\u6570\u636e\u8bbf\u95ee\u5c42\uff08ArticleMapper.java\uff09<\/p>\n\n\n\n<p>AliOssUtil.java\u7528\u4e8e\u56fe\u7247\u7684\u6258\u7ba1\uff0c\u6765\u81ea\u5b98\u7f51\u63d0\u4f9b\u7684\u793a\u4f8b\u6587\u4ef6\u8fdb\u884c\u4e86\u4fee\u6539<\/p>\n\n\n\n<p>org.example.anno.State.java\u548corg.example.validation.StateValidation.java\u7528\u4e8eArticle.java\u5b9e\u4f53\u7c7b\u4e2dstate\u7c7b\u7684\u6821\u9a8c<\/p>\n\n\n\n<p>Article.java\u7684\u5185\u5bb9<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>package org.example.pojo;\n\n\nimport jakarta.validation.constraints.NotEmpty;\nimport jakarta.validation.constraints.NotNull;\nimport jakarta.validation.constraints.Pattern;\nimport lombok.Data;\nimport org.example.anno.State;\nimport org.hibernate.validator.constraints.URL;\n\nimport java.time.LocalDateTime;\n\n@Data\npublic class Article {\n    private Integer id;\/\/\u4e3b\u952eID\n    @NotEmpty\n    @Pattern(regexp = \"^\\\\S{1,10}$\")\n    private String title;\/\/\u6587\u7ae0\u6807\u9898\n    @NotEmpty\n    private String content;\/\/\u6587\u7ae0\u5185\u5bb9\n    @NotEmpty\n    @URL\n    private String coverImg;\/\/\u5c01\u9762\u56fe\u50cf\n    @State\n    private String state;\/\/\u53d1\u5e03\u72b6\u6001 \u5df2\u53d1\u5e03|\u8349\u7a3f\n    @NotNull\n    private Integer categoryId;\/\/\u6587\u7ae0\u5206\u7c7bid\n    private Integer createUser;\/\/\u521b\u5efa\u4ebaID\n    private LocalDateTime createTime;\/\/\u521b\u5efa\u65f6\u95f4\n    private LocalDateTime updateTime;\/\/\u66f4\u65b0\u65f6\u95f4\n}<\/code><\/pre>\n\n\n\n<p>PageBean.java\u7684\u5185\u5bb9<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>package org.example.pojo;\n\nimport lombok.AllArgsConstructor;\nimport lombok.Data;\nimport lombok.NoArgsConstructor;\nimport java.util.List;\n\n\/\/\u5206\u9875\u8fd4\u56de\u7ed3\u679c\u5bf9\u8c61\n@Data\n@NoArgsConstructor\n@AllArgsConstructor\npublic class PageBean &lt;T>{\n    private Long total;\/\/\u603b\u6761\u6570\n    private List&lt;T> items;\/\/\u5f53\u524d\u9875\u6570\u636e\u96c6\u5408\n}<\/code><\/pre>\n\n\n\n<p>ArticleController.java\u7684\u5185\u5bb9<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>package org.example.controller;\n\nimport jakarta.servlet.http.HttpServletResponse;\nimport org.example.pojo.Article;\nimport org.example.pojo.PageBean;\nimport org.example.pojo.Result;\nimport org.example.service.ArticleService;\nimport org.example.utils.JwtUtil;\nimport org.springframework.beans.factory.annotation.Autowired;\nimport org.springframework.validation.annotation.Validated;\nimport org.springframework.web.bind.annotation.*;\n\nimport java.util.Map;\n\n@RestController\n@RequestMapping(\"\/article\")\npublic class ArticleController {\n        @Autowired\n        private ArticleService articleService;\n        \/\/\u65b0\u589e\u6587\u7ae0\n        @PostMapping\n        public Result add(@RequestBody @Validated Article article) {\n            articleService.add(article);\n            return Result.success();\n        }\n        \/\/\u83b7\u53d6\u6587\u7ae0\u5217\u8868\n        @GetMapping\n        public Result&lt;PageBean&lt;Article>> list(Integer pageNum, Integer pageSize, @RequestParam(required = false) String categoryId, @RequestParam(required = false) String state) {\n            PageBean&lt;Article> pageBean = articleService.list(pageNum, pageSize, categoryId, state);\n            return Result.success(pageBean);\n        }\n        \/\/\u83b7\u53d6\u6587\u7ae0\u8be6\u60c5\n        @GetMapping(\"\/detail\")\n        public Result&lt;Article> detail(@RequestParam Integer id) {\n            Article article = articleService.findById(id);\n            return Result.success(article);\n        }\n        \/\/\u66f4\u65b0\u6587\u7ae0\n        @PutMapping\n        public Result update(@RequestBody Article article) {\n            articleService.update(article);\n            return Result.success();\n        }\n        \/\/\u5220\u9664\u6587\u7ae0\n        @PostMapping(\"\/delete\")\n        public Result delete(@RequestParam Integer id) {\n            articleService.deleteById(id);\n            return Result.success();\n        }\n}<\/code><\/pre>\n\n\n\n<p>ArticleService.java\u7684\u5185\u5bb9<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>package org.example.service;\nimport org.example.pojo.Article;\nimport org.example.pojo.PageBean;\npublic interface ArticleService {\n    \/\/ \u6dfb\u52a0\u6587\u7ae0\n    void add(Article article);\n    \/\/\u6761\u4ef6\u5206\u9875\u5217\u8868\u67e5\u8be2\n    PageBean&lt;Article> list(Integer pageNum, Integer pageSize, String categoryId, String state);\n    Article findById(Integer id);\n    void update(Article article);\n    void deleteById(Integer id);\n}<\/code><\/pre>\n\n\n\n<p>ArticleServiceImpl.java\u7684\u5185\u5bb9<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>package org.example.service.impl;\n\nimport com.github.pagehelper.Page;\nimport com.github.pagehelper.PageHelper;\nimport org.example.mapper.ArticleMapper;\nimport org.example.pojo.Article;\nimport org.example.pojo.PageBean;\nimport org.example.service.ArticleService;\nimport org.example.utils.ThreadLocalUtil;\nimport org.springframework.beans.factory.annotation.Autowired;\nimport org.springframework.stereotype.Service;\nimport java.time.LocalDateTime;\nimport java.util.List;\nimport java.util.Map;\n\n@Service\npublic class ArticleServiceImpl implements ArticleService {\n    @Autowired\n    private ArticleMapper articleMapper;\n    @Override\n    public void add(Article article) {\n        \/\/\u8865\u5145\u5c5e\u6027\u503c\n        article.setCreateTime(LocalDateTime.now());\n        article.setUpdateTime(LocalDateTime.now());\n\n        Map&lt;String,Object> map = ThreadLocalUtil.get();\n        article.setCreateUser((Integer) map.get(\"id\"));\n        articleMapper.add(article);\n    }\n\n    @Override\n    public PageBean&lt;Article> list(Integer pageNum, Integer pageSize, String categoryId, String state) {\n        \/\/\u521b\u5efapagebean\u5bf9\u8c61\n        PageBean&lt;Article> pb = new PageBean&lt;>();\n        \/\/\u5f00\u542f\u5206\u9875\u67e5\u8be2\n        PageHelper.startPage(pageNum,pageSize);\n        \/\/\u8c03\u7528Mapper\n        Map&lt;String,Object> map = ThreadLocalUtil.get();\n        Integer userId = (Integer) map.get(\"id\");\n        List&lt;Article> as = articleMapper.list(userId,categoryId,state);\n        \/\/Page\u4e2d\u63d0\u4f9b\u4e86\u65b9\u6cd5,\u53ef\u4ee5\u83b7\u53d6PageHelper\u5206\u9875\u67e5\u8be2\u540e \u5f97\u5230\u7684\u603b\u8bb0\u5f55\u6761\u6570\u548c\u5f53\u524d\u9875\u6570\u636e\n        Page&lt;Article> p = (Page&lt;Article>) as;\n\n        \/\/\u628a\u6570\u636e\u586b\u5145\u5230PageBean\u5bf9\u8c61\u4e2d\n        pb.setTotal(p.getTotal());\n        pb.setItems(p.getResult());\n        return pb;\n    }\n\n    @Override\n    public Article findById(Integer id) {\n        Article article = articleMapper.findById(id);\n        return article;\n    }\n\n    @Override\n    public void update(Article article) {\n        article.setUpdateTime(LocalDateTime.now());\n        articleMapper.update(article);\n    }\n\n    @Override\n    public void deleteById(Integer id) {\n        articleMapper.deleteById(id);\n    }\n}<\/code><\/pre>\n\n\n\n<p>ArticleMapper.java\u7684\u5185\u5bb9<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>package org.example.mapper;\n\nimport org.apache.ibatis.annotations.*;\nimport org.example.pojo.Article;\nimport org.example.pojo.Category;\nimport java.util.List;\n\n@Mapper\npublic interface ArticleMapper {\n    \/\/ \u6dfb\u52a0\u6587\u7ae0\n    @Insert(\"insert into article(title,content,cover_img,state,category_id,create_user,create_time,update_time) values(#{title},#{content},#{coverImg},#{state},#{categoryId},#{createUser},#{createTime},#{updateTime})\")\n    void add(Article article);\n\n    List&lt;Article> list(Integer userId, String categoryId, String state);\n\n    @Select(\"select * from article where create_user = #{userId}\")\n    Article findById(Integer userId);\n\n    @Update(\"update article set title=#{title},content=#{content},cover_img=#{coverImg},state=#{state},category_id=#{categoryId},update_time=now() where id=#{id}\")\n    void update(Article article);\n\n    @Delete(\"delete from article where id=#{id}\")\n    void deleteById(Integer id);\n}<\/code><\/pre>\n\n\n\n<p>AliOss.java\u7684\u5185\u5bb9<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>package org.example.utils;\n\nimport com.aliyun.oss.ClientException;\nimport com.aliyun.oss.OSS;\nimport com.aliyun.oss.OSSClientBuilder;\nimport com.aliyun.oss.OSSException;\nimport com.aliyun.oss.model.PutObjectRequest;\nimport com.aliyun.oss.model.PutObjectResult;\n\nimport java.io.FileInputStream;\nimport java.io.InputStream;\n\npublic class AliOssUtil {\n\n    \/\/ Endpoint\u4ee5\u534e\u4e1c1\uff08\u676d\u5dde\uff09\u4e3a\u4f8b\uff0c\u5176\u5b83Region\u8bf7\u6309\u5b9e\u9645\u60c5\u51b5\u586b\u5199\u3002\n    private static final String ENDPOINT = \"https:\/\/oss-cn-beijing.aliyuncs.com\";\n    \/\/ \u4ece\u73af\u5883\u53d8\u91cf\u4e2d\u83b7\u53d6\u8bbf\u95ee\u51ed\u8bc1\u3002\u8fd0\u884c\u672c\u4ee3\u7801\u793a\u4f8b\u4e4b\u524d\uff0c\u8bf7\u786e\u4fdd\u5df2\u8bbe\u7f6e\u73af\u5883\u53d8\u91cfOSS_ACCESS_KEY_ID\u548cOSS_ACCESS_KEY_SECRET\u3002\n    \/\/EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();\n    \/\/ \u586b\u5199Bucket\u540d\u79f0\uff0c\u4f8b\u5982examplebucket\u3002\n    private static final String ACCESS_KEY_ID = \"LTAI5tS2iFbkK1VLdeYdr4p2\";\n    private static final String ACCESS_KEY_SECRET = \"Mob9G1cqSRCxZKOllAkbqoJ7jT6mH9\";\n    private static final String BUCKET_NAME = \"yiming1234\";\n    \/\/ \u586b\u5199Object\u5b8c\u6574\u8def\u5f84\uff0c\u5b8c\u6574\u8def\u5f84\u4e2d\u4e0d\u80fd\u5305\u542bBucket\u540d\u79f0\uff0c\u4f8b\u5982exampledir\/exampleobject.txt\u3002\n\n    public static String uploadFile(String objectName, InputStream in) throws Exception {\n\n        \/\/ \u521b\u5efaOSSClient\u5b9e\u4f8b\u3002\n        OSS ossClient = new OSSClientBuilder().build(ENDPOINT, ACCESS_KEY_ID, ACCESS_KEY_SECRET);\n        String url = \"\";\n        try {\n            \/\/ \u586b\u5199\u5b57\u7b26\u4e32\u3002\n            String content = \"Hello OSS\uff0c\u4f60\u597d\u4e16\u754c\";\n\n            \/\/ \u521b\u5efaPutObjectRequest\u5bf9\u8c61\u3002\n            PutObjectRequest putObjectRequest = new PutObjectRequest(BUCKET_NAME, objectName, in);\n\n            \/\/ \u5982\u679c\u9700\u8981\u4e0a\u4f20\u65f6\u8bbe\u7f6e\u5b58\u50a8\u7c7b\u578b\u548c\u8bbf\u95ee\u6743\u9650\uff0c\u8bf7\u53c2\u8003\u4ee5\u4e0b\u793a\u4f8b\u4ee3\u7801\u3002\n            \/\/ ObjectMetadata metadata = new ObjectMetadata();\n            \/\/ metadata.setHeader(OSSHeaders.OSS_STORAGE_CLASS, StorageClass.Standard.toString());\n            \/\/ metadata.setObjectAcl(CannedAccessControlList.Private);\n            \/\/ putObjectRequest.setMetadata(metadata);\n\n            \/\/ \u4e0a\u4f20\u5b57\u7b26\u4e32\u3002\n            PutObjectResult result = ossClient.putObject(putObjectRequest);\n\n            url = \"https:\/\/\" + BUCKET_NAME + \".\" + ENDPOINT.substring(ENDPOINT.lastIndexOf(\"\/\")+1) + \"\/\" + objectName;\n        } catch (OSSException oe) {\n            System.out.println(\"Caught an OSSException, which means your request made it to OSS, \"\n                    + \"but was rejected with an error response for some reason.\");\n            System.out.println(\"Error Message:\" + oe.getErrorMessage());\n            System.out.println(\"Error Code:\" + oe.getErrorCode());\n            System.out.println(\"Request ID:\" + oe.getRequestId());\n            System.out.println(\"Host ID:\" + oe.getHostId());\n        } catch (ClientException ce) {\n            System.out.println(\"Caught an ClientException, which means the client encountered \"\n                    + \"a serious internal problem while trying to communicate with OSS, \"\n                    + \"such as not being able to access the network.\");\n            System.out.println(\"Error Message:\" + ce.getMessage());\n        } finally {\n            if (ossClient != null) {\n                ossClient.shutdown();\n            }\n        }\n        return url;\n    }\n}<\/code><\/pre>\n\n\n\n<p>org.example.anno.State.java\u7684\u5185\u5bb9<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>package org.example.anno;\n\nimport jakarta.validation.Constraint;\nimport jakarta.validation.Payload;\nimport jakarta.validation.constraints.NotEmpty;\nimport org.example.validation.StateValidation;\n\nimport java.lang.annotation.*;\n\nimport static java.lang.annotation.ElementType.FIELD;\nimport static java.lang.annotation.RetentionPolicy.RUNTIME;\n\n@Documented\/\/\u5143\u6ce8\u89e3\n@Target({FIELD})\n@Retention(RUNTIME)\n@Constraint(\n        validatedBy = {StateValidation.class}\n)\/\/\u6307\u5b9a\u63d0\u4f9b\u6821\u9a8c\u89c4\u5219\u7684\u7c7b\npublic @interface State {\n    \/\/\u6821\u9a8c\u5931\u8d25\u7684\u63d0\u793a\u4fe1\u606f\n    String message() default \"state\u53c2\u6570\u7684\u503c\u53ea\u80fd\u662f\u5df2\u53d1\u5e03\u7684\u6587\u7ae0\u6216\u8005\u8349\u7a3f\";\n    \/\/\u6307\u5b9a\u5206\u7ec4\n    Class&lt;?>&#91;] groups() default {};\n    \/\/\u8d1f\u8f7d\n    Class&lt;? extends Payload>&#91;] payload() default {};\n}\n<\/code><\/pre>\n\n\n\n<p>org.example.validation.StateValidation.java\u7684\u5185\u5bb9<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>package org.example.anno;\n\nimport jakarta.validation.Constraint;\nimport jakarta.validation.Payload;\nimport jakarta.validation.constraints.NotEmpty;\nimport org.example.validation.StateValidation;\nimport java.lang.annotation.*;\nimport static java.lang.annotation.ElementType.FIELD;\nimport static java.lang.annotation.RetentionPolicy.RUNTIME;\n\n@Documented\/\/\u5143\u6ce8\u89e3\n@Target({FIELD})\n@Retention(RUNTIME)\n@Constraint(\n        validatedBy = {StateValidation.class}\n)\/\/\u6307\u5b9a\u63d0\u4f9b\u6821\u9a8c\u89c4\u5219\u7684\u7c7b\npublic @interface State {\n    \/\/\u6821\u9a8c\u5931\u8d25\u7684\u63d0\u793a\u4fe1\u606f\n    String message() default \"state\u53c2\u6570\u7684\u503c\u53ea\u80fd\u662f\u5df2\u53d1\u5e03\u7684\u6587\u7ae0\u6216\u8005\u8349\u7a3f\";\n    \/\/\u6307\u5b9a\u5206\u7ec4\n    Class&lt;?>&#91;] groups() default {};\n    \/\/\u8d1f\u8f7d\n    Class&lt;? extends Payload>&#91;] payload() default {};\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u7f3a\u9677\u4ee5\u53ca\u4ecd\u9700\u8981\u8fdb\u4e00\u6b65\u6539\u8fdb\u7684\u5730\u65b9<\/h3>\n\n\n\n<p>\u9996\u5148\u4f5c\u4e3a\u6587\u7ae0\u7ba1\u7406\u7cfb\u7edf\uff0c\u5e94\u8be5\u662f\u4f5c\u4e3a\u5177\u4f53\u7f51\u7ad9\u7684\u540e\u53f0\u6765\u4f7f\u7528\u7684\uff0c\u6bd4\u5982\u5728\u8c03\u7528addArticle\u53d1\u5e03\u6587\u7ae0\u7684\u65f6\u5019\u8fd8\u5e94\u8be5\u5411\u7528\u4e8e\u5c55\u793a\u7684\u7f51\u9875\u53d1\u9001\u6570\u636e\uff0c\u4ee5\u6b64\u6765\u8fdb\u4e00\u6b65\u5b9e\u73b0\u53d1\u5e03\u6587\u7ae0\u8fd9\u4e2a\u529f\u80fd\u3002<\/p>\n\n\n\n<p>\u5176\u6b21\u56fe\u7247\u7684\u6dfb\u52a0\u91c7\u7528\u4e86\u963f\u91cc\u4e91OSS\u6258\u7ba1\u7684\u8fd9\u4e2a\u529f\u80fd\u3002\u4f46\u662f\u6bcf\u4e00\u6b21\u5728\u70b9\u51fb\u6dfb\u52a0\u6216\u8005\u66f4\u6539\u56fe\u7247\u7684\u65f6\u5019\u90fd\u4f1a\u4e0a\u4f20\u4e00\u5f20\u65b0\u7684\u56fe\u7247\uff0c\u5e76\u4e0d\u4f1a\u5220\u9664\u6216\u8986\u76d6\uff0c\u8fd9\u4e00\u70b9\u4e5f\u9700\u8981\u6539\u8fdb\u3002<\/p>\n\n\n\n<p>\u4f46\u662f\u4f5c\u4e3a\u7ec3\u624b\u7684\u9879\u76ee\u5e76\u6ca1\u6709\u5b9e\u9645\u7684\u7528\u9014\uff0c\u4e5f\u5c31\u4e0d\u8fc7\u5206\u8ffd\u6c42\u5b8c\u7f8e\u4e86\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u5c3e\u58f0<\/h2>\n\n\n\n<p>\u4f5c\u4e3a\u81ea\u4e3b\u5f00\u53d1\u7b14\u8bb0\uff0c\u5f88\u591a\u5c0f\u7684\u7ec6\u8282\u4ee5\u53ca\u62a5\u9519\u540e\u9519\u8bef\u7684\u67e5\u627e\u4e0d\u80fd\u5f88\u597d\u7684\u8fdb\u884c\u4f53\u73b0\uff0c\u8fd9\u4e5f\u662f\u6ca1\u529e\u6cd5\u7684\u4e8b\u3002<\/p>\n\n\n\n<p>\u5728\u5168\u90e8\u5b8c\u5de5\u540e\uff0c\u4f1a\u4e0a\u4f20\u5b8c\u6574\u7684\u538b\u7f29\u5305\u4ee5\u53cajar\u5305\uff0c\u4f9b\u5b66\u4e60\u53c2\u8003\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u524d\u8a00 \u4e3b\u8981\u4f7f\u7528\u7684\u6280\u672f\uff1a\u524d\u7aef\u4f7f\u7528\u7684\u662fVue.js\uff0c\u540e\u7aef\u4f7f\u7528\u7684\u662fSpringBoot\u3002\u5982\u4e0d\u96f7\u540c\u53ef\u4ee5\u76f4\u63a5\u8df3\u8fc7\u4e86\u3002 \u6587 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[11,10],"tags":[],"class_list":["post-925","post","type-post","status-publish","format-standard","hentry","category-web-backend","category-web-frontend"],"_links":{"self":[{"href":"https:\/\/blog.yiming1234.cn\/index.php\/wp-json\/wp\/v2\/posts\/925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.yiming1234.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.yiming1234.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.yiming1234.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.yiming1234.cn\/index.php\/wp-json\/wp\/v2\/comments?post=925"}],"version-history":[{"count":2,"href":"https:\/\/blog.yiming1234.cn\/index.php\/wp-json\/wp\/v2\/posts\/925\/revisions"}],"predecessor-version":[{"id":929,"href":"https:\/\/blog.yiming1234.cn\/index.php\/wp-json\/wp\/v2\/posts\/925\/revisions\/929"}],"wp:attachment":[{"href":"https:\/\/blog.yiming1234.cn\/index.php\/wp-json\/wp\/v2\/media?parent=925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.yiming1234.cn\/index.php\/wp-json\/wp\/v2\/categories?post=925"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.yiming1234.cn\/index.php\/wp-json\/wp\/v2\/tags?post=925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}