https:\/\/element-plus.org\/zh-CN\/component\/overview.html<\/a><\/p>\n\n\n\n\u6839\u636e\u81ea\u5df1\u7684\u9700\u8981\u81ea\u884c\u62fc\u63a5<\/p>\n\n\n\n
api\u6587\u4ef6\u5939\u4e0b\u7684article.js\uff08\u63a5\u53e3\uff0c\u5220\u9664\u64cd\u4f5c\u76f8\u5bf9\u4e8e\u65b0\u589e\u9700\u8981\u989d\u5916\u643a\u5e26id\u5b57\u6bb5\u4f5c\u4e3a\u533a\u522b\uff09<\/p>\n\n\n\n
import request from '@\/utils\/request.js'\r\nexport const articleCategoryListService = ()=>{\r\n return request.get('\/category')\r\n}\r\n\/\/\u6587\u7ae0\u5206\u7c7b\u6dfb\u52a0\r\nexport const articleCategoryAddService = (categoryData)=>{\r\n return request.post('\/category',categoryData)\r\n}\r\n\/\/\u6587\u7ae0\u5206\u7c7b\u4fee\u6539\r\nexport const articleCategoryUpdateService = (categoryData)=>{\r\n return request.put('\/category',categoryData)\r\n}\r\n\/\/\u6587\u7ae0\u5206\u7c7b\u5220\u9664\r\nexport const articleCategoryDeleteService = (id)=>{\r\n return request.delete('\/category?id='+id)\r\n}<\/code><\/pre>\n\n\n\n\u58f0\u660e\u8981\u7528\u5230\u7684\u5f02\u6b65\u51fd\u6570\uff08\u653e\u5728script\u90e8\u5206\uff09<\/p>\n\n\n\n
\/\u58f0\u660e\u4e00\u4e2a\u5f02\u6b65\u7684\u51fd\u6570\r\nimport { articleCategoryListService, articleCategoryAddService, articleCategoryUpdateService, articleCategoryDeleteService } from '@\/api\/article.js'\r\nconst articleCategoryList = async () => {\r\n let result = await articleCategoryListService();\r\n categorys.value = result.data;\r\n\r\n}\r\narticleCategoryList();<\/code><\/pre>\n\n\n\n\u663e\u793a\u6587\u7ae0\u5206\u7c7b\u7684\u51fd\u6570\uff08\u653e\u5728script\u90e8\u5206\uff09<\/p>\n\n\n\n
\/\/\u5b9a\u4e49\u53d8\u91cf,\u63a7\u5236\u6807\u9898\u7684\u5c55\u793a\nconst title = ref('')\n\nconst showDialog = (row) => {\n dialogVisible.value = true; title.value = '\u7f16\u8f91\u5206\u7c7b'\n \/\/\u6570\u636e\u62f7\u8d1d\n categoryModel.value.categoryName = row.categoryName;\n categoryModel.value.categoryAlias = row.categoryAlias;\n \/\/\u6269\u5c55id\u5c5e\u6027,\u5c06\u6765\u9700\u8981\u4f20\u9012\u7ed9\u540e\u53f0,\u5b8c\u6210\u5206\u7c7b\u7684\u4fee\u6539\n categoryModel.value.id = row.id\n}<\/code><\/pre>\n\n\n\n\u7f16\u8f91\u6587\u7ae0\u5206\u7c7b\u7684\u51fd\u6570\uff08\u653e\u5728script\u90e8\u5206\uff09<\/p>\n\n\n\n
\/\/\u7f16\u8f91\u5206\u7c7b\nconst updateCategory = async () => {\n \/\/\u8c03\u7528\u63a5\u53e3\n let result = await articleCategoryUpdateService(categoryModel.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 articleCategoryList();\n dialogVisible.value = false;\n}\n<\/code><\/pre>\n\n\n\n\u5220\u9664\u6587\u7ae0\u5206\u7c7b\u7684\u5f39\u7a97\u548c\u51fd\u6570\uff08\u653e\u5728script\u90e8\u5206\uff09<\/p>\n\n\n\n
import { ElMessageBox } from 'element-plus'\r\nconst deleteCategory = (row) => {\r\n ElMessageBox.confirm(\r\n '\u786e\u8ba4\u5220\u9664\u5f53\u524d\u6587\u7ae0\u5206\u7c7b?',\r\n 'Warning',\r\n {\r\n confirmButtonText: 'OK',\r\n cancelButtonText: 'Cancel',\r\n type: 'warning',\r\n }\r\n\r\n )\r\n .then(async () => {\r\n \/\/\u8c03\u7528\u63a5\u53e3\r\n let result = await articleCategoryDeleteService(row.id);\r\n ElMessage({\r\n type: 'success',\r\n message: 'Delete completed',\r\n })\r\n articleCategoryList();\r\n })\r\n .catch(() => {\r\n ElMessage({\r\n type: 'info',\r\n message: 'Delete canceled',\r\n })\r\n })\r\n}<\/code><\/pre>\n\n\n\n\u9875\u9762\u663e\u793a\u90e8\u5206\uff08\u5373template\u90e8\u5206\uff0c\u5305\u62ec\u4e86\u5f39\u7a97\u548c\u8868\u683c\uff09<\/p>\n\n\n\n
<template>\r\n <el-page-header :icon=\"null\">\r\n <template #content>\r\n <div class=\"flex items-center\">\r\n <el-avatar :size=\"32\" class=\"mr-3\"\r\n src=\"https:\/\/cube.elemecdn.com\/0\/88\/03b0d39583f48206768a7534e55bcpng.png\" \/>\r\n <span class=\"text-large font-600 mr-3\"> \u6587\u7ae0\u5206\u7c7b\u5217\u8868<\/span>\r\n <\/div>\r\n <\/template>\r\n <template #extra>\r\n <el-button type=\"primary\" @click=\"dialogVisible = true; title = '\u65b0\u5efa\u6587\u7ae0\u5206\u7c7b'; clearData()\">\u65b0\u5efa\u6587\u7ae0\u5206\u7c7b<\/el-button>\r\n <el-dialog v-model=\"dialogVisible\" :title=\"title\" width=\"30%\">\r\n <el-form :model=\"categoryModel\" :rules=\"rules\" label-width=\"100px\" style=\"padding-right: 30px\">\r\n <el-form-item label=\"\u6587\u7ae0\u5206\u7c7b\u540d\" prop=\"categoryName\">\r\n <el-input v-model=\"categoryModel.categoryName\" minlength=\"1\" maxlength=\"10\"><\/el-input>\r\n <\/el-form-item>\r\n <el-form-item label=\"\u5907\u6ce8\u548c\u8bf4\u660e\" prop=\"categoryAlias\">\r\n <el-input v-model=\"categoryModel.categoryAlias\" minlength=\"1\" maxlength=\"15\"><\/el-input>\r\n <\/el-form-item>\r\n <\/el-form>\r\n <template #footer>\r\n <span class=\"dialog-footer\">\r\n <el-button @click=\"dialogVisible = false\">\u53d6\u6d88<\/el-button>\r\n <el-button type=\"primary\" @click=\"title == '\u65b0\u5efa\u6587\u7ae0\u5206\u7c7b' ? addCategory() : updateCategory()\"> \u786e\u8ba4 <\/el-button>\r\n <\/span>\r\n <\/template>\r\n <\/el-dialog>\r\n <\/template>\r\n <\/el-page-header>\r\n <el-divider><\/el-divider>\r\n <el-table :data=\"categorys\" style=\"width: 100%\">\r\n <el-table-column label=\"id\" prop=\"id\" \/>\r\n <el-table-column label=\"\u5206\u7c7b\u540d\u79f0\" prop=\"categoryName\"><\/el-table-column>\r\n <el-table-column label=\"\u5206\u7c7b\u522b\u540d\" prop=\"categoryAlias\"><\/el-table-column>\r\n <el-table-column label=\"\u64cd\u4f5c\" width=\"100\">\r\n <template #default=\"{ row }\">\r\n <el-button :icon=\"Edit\" circle plain type=\"primary\" @click=\"showDialog(row)\"><\/el-button>\r\n <el-button :icon=\"Delete\" circle plain type=\"danger\" @click=\"deleteCategory(row)\"><\/el-button>\r\n <\/template>\r\n <\/el-table-column>\r\n <template #empty>\r\n <el-empty description=\"\u6ca1\u6709\u6570\u636e\" \/>\r\n <\/template>\r\n <\/el-table>\r\n<\/template><\/code><\/pre>\n\n\n\n\u540e\u7aefSpringBoot<\/h4>\n\n\n\n
\u589e\u5220\u6539\u67e5\u7684\u64cd\u4f5c\u4e0a\u5927\u4f53\u76f8\u540c\uff0c\u6240\u4ee5\u5c31\u5408\u5e76\u8fdb\u884c\u5c55\u793a\u4e86\u3002<\/p>\n\n\n\n
\u5b9e\u4f53\u7c7b\uff08Category.java\uff09<\/p>\n\n\n\n
package org.example.pojo;\r\n\r\nimport com.fasterxml.jackson.annotation.JsonFormat;\r\nimport jakarta.validation.constraints.NotEmpty;\r\nimport jakarta.validation.constraints.NotNull;\r\nimport jakarta.validation.groups.Default;\r\nimport lombok.Data;\r\nimport org.apache.ibatis.annotations.Update;\r\nimport java.time.LocalDateTime;\r\n\r\n@Data\r\npublic class Category {\r\n @NotNull(groups = Update.class)\r\n private Integer id;\/\/\u4e3b\u952eID\r\n @NotEmpty\/*(groups = {Add.class, Update.class})*\/\r\n private String categoryName;\/\/\u5206\u7c7b\u540d\u79f0\r\n @NotEmpty\/*(groups = {Add.class, Update.class})*\/\r\n private String categoryAlias;\/\/\u5206\u7c7b\u522b\u540d\r\n private Integer createUser;\/\/\u521b\u5efa\u4ebaID\r\n @JsonFormat(pattern = \"yyyy-MM-dd HH:mm:ss\")\r\n private LocalDateTime createTime;\/\/\u521b\u5efa\u65f6\u95f4\r\n @JsonFormat(pattern = \"yyyy-MM-dd HH:mm:ss\")\r\n private LocalDateTime updateTime;\/\/\u66f4\u65b0\u65f6\u95f4\r\n\r\n public interface Add extends Default {\r\n\r\n }\r\n public interface Update extends Default{\r\n\r\n }\r\n}\r<\/code><\/pre>\n\n\n\n\u8bf7\u6c42\u5c42\uff08CategoryController.java\uff09<\/p>\n\n\n\n
package org.example.controller;\r\n\r\nimport org.apache.ibatis.annotations.Mapper;\r\nimport org.example.pojo.Result;\r\nimport org.example.pojo.Category;\r\nimport org.example.service.CategoryService;\r\nimport org.springframework.beans.factory.annotation.Autowired;\r\nimport org.springframework.validation.annotation.Validated;\r\nimport org.springframework.web.bind.annotation.*;\r\n\r\nimport java.util.List;\r\n\r\n@RestController\r\n@RequestMapping(\"\/category\")\r\npublic class CategoryController {\r\n @Autowired\r\n private CategoryService categoryService;\r\n @PostMapping\r\n public Result add(@RequestBody @Validated(Category.Add.class) Category category){\r\n categoryService.add(category);\r\n return Result.success();\r\n }\r\n\r\n @GetMapping\r\n public Result<List<Category>> list(){\r\n List<Category> cs = categoryService.list();\r\n return Result.success(cs);\r\n }\r\n\r\n @GetMapping(\"\/detail\")\r\n public Result<Category> detail(Integer id){\r\n Category c = categoryService.findById(id);\r\n return Result.success(c);\r\n }\r\n\r\n @PutMapping\r\n public Result update(@RequestBody @Validated(Category.Update.class) Category category){\r\n categoryService.update(category);\r\n return Result.success();\r\n }\r\n\r\n @DeleteMapping\r\n public Result delete(Integer id){\r\n categoryService.deleteById(id);\r\n return Result.success();\r\n }\r\n}\r<\/code><\/pre>\n\n\n\n\u670d\u52a1\u5c42\uff08CategoryServiceImpl.java\uff0cCategoryService.java\u53ea\u9700\u8fdb\u884c\u58f0\u660e\u51fd\u6570\u7565\uff09<\/p>\n\n\n\n
package org.example.service.impl;\r\n\r\nimport org.example.mapper.CategoryMapper;\r\nimport org.example.pojo.Category;\r\nimport org.example.service.CategoryService;\r\nimport org.example.utils.ThreadLocalUtil;\r\nimport org.springframework.beans.factory.annotation.Autowired;\r\nimport org.springframework.stereotype.Service;\r\nimport java.time.LocalDateTime;\r\nimport java.util.List;\r\nimport java.util.Map;\r\n\r\n@Service\r\npublic class CategoryServiceImpl implements CategoryService {\r\n @Autowired\r\n private CategoryMapper categoryMapper;\r\n @Override\r\n public void add(Category category){\r\n category.setCreateTime(LocalDateTime.now());\r\n category.setUpdateTime(LocalDateTime.now());\r\n Map<String,Object> map = ThreadLocalUtil.get();\r\n Integer userId = (Integer) map.get(\"id\");\r\n category.setCreateUser(userId);\r\n categoryMapper.add(category);\r\n }\r\n @Override\r\n public List<Category> list(){\r\n Map<String,Object> map = ThreadLocalUtil.get();\r\n Integer userId = (Integer) map.get(\"id\");\r\n return categoryMapper.list(userId);\r\n }\r\n @Override\r\n public Category findById(Integer id) {\r\n Category c = categoryMapper.findById(id);\r\n return c;\r\n }\r\n @Override\r\n public void update(Category category){\r\n category.setUpdateTime(LocalDateTime.now());\r\n categoryMapper.update(category);\r\n }\r\n @Override\r\n public void deleteById(Integer id){\r\n categoryMapper.deleteById(id);\r\n }\r\n}\r<\/code><\/pre>\n\n\n\n\u6570\u636e\u8bbf\u95ee\u5c42\uff08CategoryMapper.java\uff09<\/p>\n\n\n\n
package org.example.mapper;\r\nimport org.apache.ibatis.annotations.*;\r\nimport org.example.pojo.Category;\r\nimport java.util.List;\r\n@Mapper\npublic interface CategoryMapper {\r\n @Insert(\"insert into category(category_name,category_alias,create_user,create_time,update_time)\" +\r\n \"values (#{categoryName},#{categoryAlias},#{createUser},#{createTime},#{updateTime})\")\r\n void add(Category category);\r\n @Select(\"select * from category where create_user = #{userId}\")\r\n List<Category> list(Integer userId);\r\n @Select(\"select * from category where id = #{id}\")\r\n Category findById(Integer id);\r\n @Update(\"update category set category_name=#{categoryName},category_alias=#{categoryAlias},update_time=now() where id=#{id}\")\r\n void update(Category category);\r\n @Delete(\"delete from category where id=#{id}\")\r\n void deleteById(Integer id);\r\n}\r<\/code><\/pre>\n\n\n\n\u5c3e\u58f0<\/h2>\n\n\n\n
\u4e00\u5468\u4e00\u7801\uff0c\u540e\u9762\u5c31\u662f\u6587\u7ae0\u7ba1\u7406\u7684\u90e8\u5206\u4e86\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u524d\u8a00 \u4e0a\u56de\u4e66\u8bf4\u5230 \u6587\u7ae0\u7ba1\u7406\u7cfb\u7edf\u4e4b\u6dfb\u52a0\u6587\u7ae0\u5206\u7c7b\u3002\u5c31\u662f\u901a\u8fc7\u70b9\u51fb\u201c\u65b0\u5efa\u6587\u7ae0\u5206\u7c7b\u201d\u6309\u94ae\u4ece\u800c\u5728\u670d\u52a1\u7aef\u6570\u636e\u5e93\u4e2d\u589e\u52a0\u4e00\u4e2a\u6587\u7ae0 […]<\/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-899","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\/899","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=899"}],"version-history":[{"count":1,"href":"https:\/\/blog.yiming1234.cn\/index.php\/wp-json\/wp\/v2\/posts\/899\/revisions"}],"predecessor-version":[{"id":904,"href":"https:\/\/blog.yiming1234.cn\/index.php\/wp-json\/wp\/v2\/posts\/899\/revisions\/904"}],"wp:attachment":[{"href":"https:\/\/blog.yiming1234.cn\/index.php\/wp-json\/wp\/v2\/media?parent=899"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.yiming1234.cn\/index.php\/wp-json\/wp\/v2\/categories?post=899"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.yiming1234.cn\/index.php\/wp-json\/wp\/v2\/tags?post=899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/blog.yiming1234.cn\/wp-content\/uploads\/2024\/04\/image-1024x499.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"https:\/\/blog.yiming1234.cn\/wp-content\/uploads\/2024\/04\/image-1-1024x511.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"https:\/\/blog.yiming1234.cn\/wp-content\/uploads\/2024\/04\/image-2-1024x591.png\")
<\/div><\/figure>\n\n\n\n