[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-De7YPnEc":3,"public-project-articles-De7YPnEc":17},{"id":4,"uuid":5,"project_id":6,"title":7,"content":8,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},773,"De7YPnEc",49,"05. Springboot3+vue3实现增删改查、分页查询、批量删除（上）","## 本节课你要做到下面的效果\n\n分页条件模糊查询\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1740207082828-bd7adcdc-087f-492d-b318-6e258416b0dd.png)\n\n\n\n## 安装 axios 封装前后端对接数据工具\n\n```vue\nnpm i axios -S\n```\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1740202860367-160a8520-63c7-458f-9120-013e421848c6.png)\n\n## 简单测试 axios\n\n```vue\naxios.get('http:\u002F\u002Flocalhost:9999\u002Fadmin\u002FselectAll').then(res => {\n  console.log(res)\n})\n```\n\n跨域错误：\n\n\u003Cfont style=\"color:#DF2A3F;\">has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.\u003C\u002Ffont>\n\n## 跨域处理\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1740203130208-665b5c2e-15c5-4c1e-babb-d60aaeafb750.png)\n\n在 Springboot 里面设置统一的跨域处理\n\n```java\npackage com.example.common;\n\nimport org.springframework.context.annotation.Bean;\nimport org.springframework.context.annotation.Configuration;\nimport org.springframework.web.cors.CorsConfiguration;\nimport org.springframework.web.cors.UrlBasedCorsConfigurationSource;\nimport org.springframework.web.filter.CorsFilter;\n\n\u002F**\n * 跨域配置\n *\u002F\n@Configuration\npublic class CorsConfig {\n\n    @Bean\n    public CorsFilter corsFilter() {\n        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();\n        CorsConfiguration corsConfiguration = new CorsConfiguration();\n        corsConfiguration.addAllowedOrigin(\"*\"); \u002F\u002F 1 设置访问源地址\n        corsConfiguration.addAllowedHeader(\"*\"); \u002F\u002F 2 设置访问源请求头\n        corsConfiguration.addAllowedMethod(\"*\"); \u002F\u002F 3 设置访问源请求方法\n        source.registerCorsConfiguration(\"\u002F**\", corsConfiguration); \u002F\u002F 4 对接口配置跨域设置\n        return new CorsFilter(source);\n    }\n}\n\n```\n\n设置完后记得重启\n\n## 封装统一的请求工具 request.js\n\n```javascript\nimport axios from \"axios\";\nimport {ElMessage} from \"element-plus\";\n\nconst request = axios.create({\n  baseURL: 'http:\u002F\u002Flocalhost:9999',\n  timeout: 30000  \u002F\u002F 后台接口超时时间\n})\n\n\u002F\u002F request 拦截器\n\u002F\u002F 可以自请求发送前对请求做一些处理\nrequest.interceptors.request.use(config => {\n  config.headers['Content-Type'] = 'application\u002Fjson;charset=utf-8';\n  return config\n}, error => {\n  return Promise.reject(error)\n});\n\n\u002F\u002F response 拦截器\n\u002F\u002F 可以在接口响应后统一处理结果\nrequest.interceptors.response.use(\n  response => {\n    let res = response.data;\n    \u002F\u002F 兼容服务端返回的字符串数据\n    if (typeof res === 'string') {\n      res = res ? JSON.parse(res) : res\n    }\n    return res;\n  },\n  error => {\n    if (error.response.status === 404) {\n      ElMessage.error('未找到请求接口')\n    } else if (error.response.status === 500) {\n      ElMessage.error('系统异常，请查看后端控制台报错')\n    } else {\n      console.error(error.message)\n    }\n    return Promise.reject(error)\n  }\n)\n\nexport default request\n```\n\n## 测试前后端数据查询\n\n使用 request 工具发起一次请求\n\n```vue\nrequest.get('\u002Fadmin\u002FselectAll').then(res => {\n  if (res.code === '200') {\n    console.log(res)\n  } else {\n    ElMessage.error(res.msg)\n  }\n})\n```\n\n获取的数据样例：\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1740203941917-f91e7a64-e311-4554-8bdf-df54e9e4a7bf.png)\n\n## 分页查询\n\n### 分页对象\n\ntotal：数据库表所有数据总的个数\n\nlist: 返回的数据数组\n\npageNum: 当前的页码\n\npageSizer: 每页展示的个数\n\n### 使用 PageHelper 插件\n\n在 pom.xml 里添加依赖\n\n```xml\n\u003C!-- 分页插件pagehelper -->\n\u003Cdependency>\n    \u003CgroupId>com.github.pagehelper\u003C\u002FgroupId>\n    \u003CartifactId>pagehelper-spring-boot-starter\u003C\u002FartifactId>\n    \u003Cversion>1.4.6\u003C\u002Fversion>\n    \u003Cexclusions>\n        \u003Cexclusion>\n            \u003CgroupId>org.mybatis\u003C\u002FgroupId>\n            \u003CartifactId>mybatis\u003C\u002FartifactId>\n        \u003C\u002Fexclusion>\n    \u003C\u002Fexclusions>\n\u003C\u002Fdependency>\n```\n\n\n\n后端返回的分页对象\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1740204993859-1ad33970-51e2-491c-b169-76b53bd5d126.png)\n\n\n\n### 分页查询的请求方法\n\n```vue\n\u003Cdiv class=\"card\" style=\"margin-bottom: 5px\">\n    \u003Cel-table :data=\"data.tableData\" style=\"width: 100%\" :header-cell-style=\"{ color: '#333', backgroundColor: '#eaf4ff' }\">\n      \u003Cel-table-column type=\"selection\" width=\"55\" \u002F>\n      \u003Cel-table-column prop=\"username\" label=\"账号\" \u002F>\n      \u003Cel-table-column prop=\"name\" label=\"名称\" \u002F>\n      \u003Cel-table-column prop=\"phone\" label=\"电话\" \u002F>\n      \u003Cel-table-column prop=\"email\" label=\"邮箱\" \u002F>\n    \u003C\u002Fel-table>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"card\">\n    \u003Cel-pagination\n        v-model:current-page=\"data.pageNum\"\n        v-model:page-size=\"data.pageSize\"\n        layout=\"total, sizes, prev, pager, next, jumper\"\n        :page-sizes=\"[5, 10, 20]\"\n        :total=\"data.total\"\n        @current-change=\"load\"\n        @size-change=\"load\"\n    \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n```vue\nconst load = () => {\n  request.get('\u002Fadmin\u002FselectPage', {\n    params: {\n      pageNum: data.pageNum,\n      pageSize: data.pageSize\n    }\n  }).then(res => {\n    if (res.code === '200') {\n      data.tableData = res.data.list\n      data.total = res.data.total\n    } else {\n      ElMessage.error(res.msg)\n    }\n  })\n}\nload()\n```\n\n\n\n## 排查问题：页面数据少了，不展示怎么办？\n\n看网络请求的数据对不对\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1740205341110-cfa4aeda-18ab-483b-b780-3fd83dd83218.png)\n\n## 卸载 vue 的 dev-tools\n\n```vue\nnpm uninstall vite-plugin-vue-devtools \n```\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1740204821199-deff9bcf-0f70-49fc-9637-ead83ab09d75.png)\n\n## 条件查询\n\n前端传入条件，后端给出结果，注意看 sql 语句\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1740206472155-96f5b871-d8e9-4f1c-ac39-7ef8590eb348.png)\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1740206459685-2e9703b4-492b-4404-8ce1-17f1d5c5b5de.png)\n\n在网络请求的载荷里面有数据\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1740206530147-a3639249-8a43-4096-85b8-1c3a53fe4404.png)\n\n\n\n\n\n条件查询的 sql 语句\n\n```sql\n\u003Cselect id=\"selectAll\" resultType=\"com.example.entity.Admin\">\n    select * from `admin`\n    \u003Cwhere>\n        \u003Cif test=\"username != null\">username like concat('%', #{username}, '%')\u003C\u002Fif>\n        \u003Cif test=\"name != null\">and name like concat('%', #{name}, '%')\u003C\u002Fif>  \u003C!-- 相当于 name like '%1%' -->\n    \u003C\u002Fwhere>\n    order by id desc\n\u003C\u002Fselect>\n```\n\nvue 调用：\n\n```vue\nconst data = reactive({\n  username: null,\n  name: null,\n  pageNum: 1,\n  pageSize: 5,\n  total: 0,\n  tableData: []\n})\n\nconst load = () => {\n  request.get('\u002Fadmin\u002FselectPage', {\n    params: {\n      pageNum: data.pageNum,\n      pageSize: data.pageSize,\n      username: data.username,\n      name: data.name\n    }\n  }).then(res => {\n    if (res.code === '200') {\n      data.tableData = res.data.list\n      data.total = res.data.total\n    } else {\n      ElMessage.error(res.msg)\n    }\n  })\n}\nload()\n```\n\n\n\n## 本节课代码案例\n\nAdmin.vue\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv class=\"card\" style=\"margin-bottom: 5px\">\n      \u003Cel-input clearable @clear=\"load\" style=\"width: 260px; margin-right: 5px\" v-model=\"data.username\" placeholder=\"请输入账号查询\" :prefix-icon=\"Search\">\u003C\u002Fel-input>\n      \u003Cel-input clearable @clear=\"load\" style=\"width: 260px; margin-right: 5px\" v-model=\"data.name\" placeholder=\"请输入名称查询\" :prefix-icon=\"Search\">\u003C\u002Fel-input>\n      \u003Cel-button type=\"primary\" @click=\"load\">查 询\u003C\u002Fel-button>\n      \u003Cel-button @click=\"reset\">重 置\u003C\u002Fel-button>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"margin-bottom: 5px\">\n      \u003Cel-button type=\"danger\">批量删除\u003C\u002Fel-button>\n      \u003Cel-button type=\"primary\">新 增\u003C\u002Fel-button>\n      \u003Cel-button type=\"success\">批量导入\u003C\u002Fel-button>\n      \u003Cel-button type=\"info\">批量导出\u003C\u002Fel-button>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"card\" style=\"margin-bottom: 5px\">\n      \u003Cel-table :data=\"data.tableData\" style=\"width: 100%\" :header-cell-style=\"{ color: '#333', backgroundColor: '#eaf4ff' }\">\n        \u003Cel-table-column type=\"selection\" width=\"55\" \u002F>\n        \u003Cel-table-column prop=\"username\" label=\"账号\" \u002F>\n        \u003Cel-table-column prop=\"name\" label=\"名称\" \u002F>\n        \u003Cel-table-column prop=\"phone\" label=\"电话\" \u002F>\n        \u003Cel-table-column prop=\"email\" label=\"邮箱\" \u002F>\n      \u003C\u002Fel-table>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\">\n      \u003Cel-pagination\n          v-model:current-page=\"data.pageNum\"\n          v-model:page-size=\"data.pageSize\"\n          layout=\"total, sizes, prev, pager, next, jumper\"\n          :page-sizes=\"[5, 10, 20]\"\n          :total=\"data.total\"\n          @current-change=\"load\"\n          @size-change=\"load\"\n      \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { reactive } from \"vue\";\nimport {Search} from \"@element-plus\u002Ficons-vue\";\nimport request from \"@\u002Futils\u002Frequest.js\";\nimport {ElMessage} from \"element-plus\";\n\nconst data = reactive({\n  username: null,\n  name: null,\n  pageNum: 1,\n  pageSize: 5,\n  total: 0,\n  tableData: []\n})\n\nconst load = () => {\n  request.get('\u002Fadmin\u002FselectPage', {\n    params: {\n      pageNum: data.pageNum,\n      pageSize: data.pageSize,\n      username: data.username,\n      name: data.name\n    }\n  }).then(res => {\n    if (res.code === '200') {\n      data.tableData = res.data.list\n      data.total = res.data.total\n    } else {\n      ElMessage.error(res.msg)\n    }\n  })\n}\nload()\n\nconst reset = () => {\n  data.username = null\n  data.name = null\n  load()\n}\n\n\u003C\u002Fscript>\n\n\n```\n\n\n\nAdminController\n\n```java\npackage com.example.controller;\n\nimport com.example.common.Result;\nimport com.example.entity.Admin;\nimport com.example.service.AdminService;\nimport com.github.pagehelper.PageInfo;\nimport jakarta.annotation.Resource;\nimport org.springframework.web.bind.annotation.GetMapping;\nimport org.springframework.web.bind.annotation.RequestMapping;\nimport org.springframework.web.bind.annotation.RequestParam;\nimport org.springframework.web.bind.annotation.RestController;\n\nimport java.util.List;\n\n@RestController\n@RequestMapping(\"\u002Fadmin\")\npublic class AdminController {\n\n    @Resource\n    AdminService adminService;\n\n    @GetMapping(\"\u002FselectAll\")  \u002F\u002F   完整的请求路径：http:\u002F\u002Fip:port\u002Fadmin\u002FselectAll\n    public Result selectAll() {\n        List\u003CAdmin> adminList = adminService.selectAll();\n        return Result.success(adminList);\n    }\n\n    \u002F**\n     * 分页查询\n     * pageNum: 当前的页码\n     * pageSize：每页的个数\n     *\u002F\n    @GetMapping(\"\u002FselectPage\")\n    public Result selectPage(@RequestParam(defaultValue = \"1\") Integer pageNum,\n                             @RequestParam(defaultValue = \"10\") Integer pageSize,\n                             Admin admin) {\n        PageInfo\u003CAdmin> pageInfo = adminService.selectPage(pageNum, pageSize, admin);\n        return Result.success(pageInfo);  \u002F\u002F 返回的是分页的对象\n    }\n\n}\n\n```\n\n\n\nAdminService\n\n```java\npackage com.example.service;\n\nimport com.example.entity.Admin;\nimport com.example.exception.CustomerException;\nimport com.example.mapper.AdminMapper;\nimport com.github.pagehelper.PageHelper;\nimport com.github.pagehelper.PageInfo;\nimport jakarta.annotation.Resource;\nimport org.springframework.stereotype.Service;\n\nimport java.util.List;\n\n@Service\npublic class AdminService {\n\n    @Resource\n    AdminMapper adminMapper;\n\n    public List\u003CAdmin> selectAll() {\n        return adminMapper.selectAll(null);\n    }\n\n    public PageInfo\u003CAdmin> selectPage(Integer pageNum, Integer pageSize, Admin admin) {\n        \u002F\u002F 开启分页查询\n        PageHelper.startPage(pageNum, pageSize);\n        List\u003CAdmin> list = adminMapper.selectAll(admin);\n        return PageInfo.of(list);\n    }\n\n}\n\n```\n\nAdminMapper.xml\n\n```xml\n\u003C?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n\u003C!DOCTYPE mapper\n      PUBLIC \"-\u002F\u002Fmybatis.org\u002F\u002FDTD Mapper 3.0\u002F\u002FEN\"\n      \"https:\u002F\u002Fmybatis.org\u002Fdtd\u002Fmybatis-3-mapper.dtd\">\n\u003Cmapper namespace=\"com.example.mapper.AdminMapper\">\n\n  \u003Cselect id=\"selectAll\" resultType=\"com.example.entity.Admin\">\n      select * from `admin`\n      \u003Cwhere>\n          \u003Cif test=\"username != null\">username like concat('%', #{username}, '%')\u003C\u002Fif>\n          \u003Cif test=\"name != null\">and name like concat('%', #{name}, '%')\u003C\u002Fif>  \u003C!-- 相当于 name like '%1%' -->\n      \u003C\u002Fwhere>\n      order by id desc\n  \u003C\u002Fselect>\n\n\u003C\u002Fmapper>\n```\n\n","coding",1,10827,1519,"2025-02-22 15:09:19","2026-05-03 22:49:02","带小白做毕设2025系列课程","graduation-project-2025",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,28,35,42,49,56,57,64,71,78,85,92,99,106,113,120,127,134,141,148,155],{"id":21,"uuid":22,"project_id":6,"title":23,"type":9,"status":10,"public_enabled":10,"views":24,"sort":25,"created_at":26,"updated_at":27,"project_title":15,"project_slug":16},766,"XmlcAcY0","00. 带小白做毕设2025课程介绍",19012,1512,"2025-02-22 15:29:01","2026-05-07 15:33:28.189425+00",{"id":29,"uuid":30,"project_id":6,"title":31,"type":9,"status":10,"public_enabled":10,"views":32,"sort":33,"created_at":34,"updated_at":14,"project_title":15,"project_slug":16},767,"nmjXCdVH","01. 前端Vue3 框架的快速搭建以及项目工程的讲解",15797,1513,"2025-02-13 17:13:40",{"id":36,"uuid":37,"project_id":6,"title":38,"type":9,"status":10,"public_enabled":10,"views":39,"sort":40,"created_at":41,"updated_at":14,"project_title":15,"project_slug":16},768,"pMdPrVeH","02. 使用Vue3集成Element-Plus快速搭建一个管理系统的页面框架",15959,1514,"2025-02-14 11:25:07",{"id":43,"uuid":44,"project_id":6,"title":45,"type":9,"status":10,"public_enabled":10,"views":46,"sort":47,"created_at":48,"updated_at":14,"project_title":15,"project_slug":16},771,"8PikYMQU","03. Springboot3框架的快速搭建以及项目工程的讲解",12768,1517,"2025-02-21 17:21:51",{"id":50,"uuid":51,"project_id":6,"title":52,"type":9,"status":10,"public_enabled":10,"views":53,"sort":54,"created_at":55,"updated_at":14,"project_title":15,"project_slug":16},772,"Q1TCG9Jj","04. Springboot3整合MyBatis实现数据库操作",11144,1518,"2025-03-07 15:50:30",{"id":4,"uuid":5,"project_id":6,"title":7,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},{"id":58,"uuid":59,"project_id":6,"title":60,"type":9,"status":10,"public_enabled":10,"views":61,"sort":62,"created_at":63,"updated_at":14,"project_title":15,"project_slug":16},774,"YKEHfsPd","06. Springboot3+vue3实现增删改查、分页查询、批量删除（下）",7760,1520,"2025-02-22 22:00:02",{"id":65,"uuid":66,"project_id":6,"title":67,"type":9,"status":10,"public_enabled":10,"views":68,"sort":69,"created_at":70,"updated_at":14,"project_title":15,"project_slug":16},775,"sNDKpWVJ","07. Springboot3+Vue3实现excel批量导入导出",6552,1521,"2025-02-23 10:49:24",{"id":72,"uuid":73,"project_id":6,"title":74,"type":9,"status":10,"public_enabled":10,"views":75,"sort":76,"created_at":77,"updated_at":14,"project_title":15,"project_slug":16},776,"1uMP9O6C","08. Springboot3+vue3实现登录注册功能",7964,1522,"2025-02-23 18:14:13",{"id":79,"uuid":80,"project_id":6,"title":81,"type":9,"status":10,"public_enabled":10,"views":82,"sort":83,"created_at":84,"updated_at":14,"project_title":15,"project_slug":16},777,"WahvQp1v","09. Springboot3+vue3实现JWT登录鉴权",7151,1523,"2025-02-23 21:58:00",{"id":86,"uuid":87,"project_id":6,"title":88,"type":9,"status":10,"public_enabled":10,"views":89,"sort":90,"created_at":91,"updated_at":14,"project_title":15,"project_slug":16},778,"QFFAqZh1","10. Springboot3+vue3实现文件上传和下载",6171,1524,"2025-02-24 14:16:27",{"id":93,"uuid":94,"project_id":6,"title":95,"type":9,"status":10,"public_enabled":10,"views":96,"sort":97,"created_at":98,"updated_at":14,"project_title":15,"project_slug":16},1278,"S2eL2g5L","11. Springboot3+vue3实现个人中心、修改密码",5945,1525,"2025-02-24 18:10:59",{"id":100,"uuid":101,"project_id":6,"title":102,"type":9,"status":10,"public_enabled":10,"views":103,"sort":104,"created_at":105,"updated_at":14,"project_title":15,"project_slug":16},1279,"LkN8Mmsn","12. Springboot3+Vue3实现系统公告功能",4967,1526,"2025-02-25 11:50:13",{"id":107,"uuid":108,"project_id":6,"title":109,"type":9,"status":10,"public_enabled":10,"views":110,"sort":111,"created_at":112,"updated_at":14,"project_title":15,"project_slug":16},1280,"i7wziuEN","13. Springboot3+Vue3实现角色权限控制",4446,1527,"2025-02-25 11:51:38",{"id":114,"uuid":115,"project_id":6,"title":116,"type":9,"status":10,"public_enabled":10,"views":117,"sort":118,"created_at":119,"updated_at":14,"project_title":15,"project_slug":16},1281,"pGwiTCRn","14. Springboot3+Vue3实现富文本编辑器功能",4578,1528,"2025-02-26 16:04:58",{"id":121,"uuid":122,"project_id":6,"title":123,"type":9,"status":10,"public_enabled":10,"views":124,"sort":125,"created_at":126,"updated_at":14,"project_title":15,"project_slug":16},1282,"tZ8iDql5","15. Springboot3+Vue3实现模块之间的关联",4454,1529,"2025-02-26 18:28:55",{"id":128,"uuid":129,"project_id":6,"title":130,"type":9,"status":10,"public_enabled":10,"views":131,"sort":132,"created_at":133,"updated_at":14,"project_title":15,"project_slug":16},1283,"gb01JPC2","16. Springboot3+Vue3实现echarts数据统计",4307,1530,"2025-03-03 16:58:21",{"id":135,"uuid":136,"project_id":6,"title":137,"type":9,"status":10,"public_enabled":10,"views":138,"sort":139,"created_at":140,"updated_at":14,"project_title":15,"project_slug":16},1284,"59bDkSFf","17. Springboot3+Vue3实现提交审核业务功能",3793,1531,"2025-03-04 11:58:16",{"id":142,"uuid":143,"project_id":6,"title":144,"type":9,"status":10,"public_enabled":10,"views":145,"sort":146,"created_at":147,"updated_at":14,"project_title":15,"project_slug":16},1285,"gApyb58X","18. Springboot3+Vue3实现预约审核业务功能",3332,1532,"2025-03-05 20:07:24",{"id":149,"uuid":150,"project_id":6,"title":151,"type":9,"status":10,"public_enabled":10,"views":152,"sort":153,"created_at":154,"updated_at":14,"project_title":15,"project_slug":16},1286,"XfpY5re0","19. Springboot3+Vue3实现前台首页的设计",3508,1533,"2025-03-05 20:08:12",{"id":156,"uuid":157,"project_id":6,"title":158,"type":9,"status":10,"public_enabled":10,"views":159,"sort":160,"created_at":161,"updated_at":14,"project_title":15,"project_slug":16},1287,"BnSPRBOc","20. Springboot3+Vue3实现前台轮播图和详情页的设计",4062,1534,"2025-03-17 17:13:36"]