{ "code": 200, "message": "查询成功", "data": { "list": [ { "id": 7, "user_id": 2, "category_id": 2, "title": "李子柒独自一人建设茅草屋", "slug": "life", "summary": "独立女性李子柒，独自一人建设茅草屋阳光房，花园好美", "content": "<h1><strong>独立女性李子柒</strong></h1><h2><span style=\"color: rgb(66, 144, 247);\">预览图片</span></h2><p>文章内容缺失...<img src=\"https://cxyuan.asia/uploads/images/5f407515-0fb0-482c-bfad-02ec47df6619.jpg\" alt=\"sprite-00002.jpg\" data-href=\"https://cxyuan.asia/uploads/images/5f407515-0fb0-482c-bfad-02ec47df6619.jpg\" style=\"width: 100%;\"/></p><h2><span style=\"color: rgb(216, 68, 147);\">预览视频</span></h2><p><br></p><div data-w-e-type=\"video\" data-w-e-is-void>\n<video poster=\"\" controls=\"true\" width=\"1080\" height=\"auto\"><source src=\"https://cxyuan.asia/uploads/videos/c47506ce-fcef-4887-a1af-3b6d7e8faf4a.mp4\" type=\"video/mp4\"/></video>\n</div><p>作者：<span style=\"color: rgb(225, 60, 57);\">小元</span></p>", "cover_image": "https://cxyuan.asia/uploads/images/3309040b-99a3-4881-99e0-c5319b7cb9c2.png", "article_type": "original", "status": "published", "visibility": "public", "is_featured": 0, "is_pinned": 0, "published_at": "2026-05-15 22:35:05", "view_count": 0, "deleted_at": null, "created_at": "2026-05-15 22:35:05", "updated_at": "2026-05-16 23:10:05", "author": { "id": 2, "username": "admin", "nickname": "管理员", "avatar": "uploads/avatars/2_1778593695087.png" }, "Category": { "id": 2, "name": "生活", "slug": "life" }, "tags": [ { "id": 1, "name": "PHP", "slug": "php" }, { "id": 3, "name": "JavaScript", "slug": "javascript" }, { "id": 4, "name": "Laravel", "slug": "laravel" } ] }, { "id": 6, "user_id": 2, "category_id": 2, "title": "走出故宫做御膳-榆钱三宝", "slug": "", "summary": "比较美味的榆钱", "content": "<h2 style=\"text-align: start;\">走出故宫做御膳的榆钱三宝</h2><p><br></p><div data-w-e-type=\"video\" data-w-e-is-void>\n<video poster=\"\" controls=\"true\" width=\"1080\" height=\"auto\"><source src=\"https://cxyuan.asia/uploads/videos/c6eeb8d0-9a89-457d-9354-d3ef07b99907.mp4\" type=\"video/mp4\"/></video>\n</div><p><br></p>", "cover_image": "https://cxyuan.asia/uploads/images/df1a5210-73a7-4d0f-b3f7-e571845ac2ba.jpg", "article_type": "original", "status": "published", "visibility": "public", "is_featured": 0, "is_pinned": 0, "published_at": "2026-05-15 22:17:22", "view_count": 0, "deleted_at": null, "created_at": "2026-05-15 22:17:22", "updated_at": "2026-05-16 23:12:14", "author": { "id": 2, "username": "admin", "nickname": "管理员", "avatar": "uploads/avatars/2_1778593695087.png" }, "Category": { "id": 2, "name": "生活", "slug": "life" }, "tags": [ { "id": 7, "name": "Docker", "slug": "docker" } ] }, { "id": 3, "user_id": 1, "category_id": 1, "title": "VUE3计算属性及监听属性", "slug": "vue3", "summary": "getter 和 setter,computed具有缓存的作用,watch监听源的几种形式,watch深度监听和立即执行,watchEffect 会在监听的依赖数据发生变化时直接调用，而不需要指定明确的监听源,watch 回调函数的触发机制， watchEffect 后置刷新和 watchPostEffect", "content": "<h2>精读VUE3文档</h2><blockquote>vue一些计算属性及watch监听的一些内容</blockquote><h3>计算属性</h3><h4>getter 和 setter</h4><pre><code class=\"language-javascript\">const firstName = ref('Kate')\nconst lastName = ref('Jen')\n\nconst fullName = computed({\n // getter\n get(){\n return firstName.value + ' ' + lastName.value;\n },\n // setter\n set(newValue){\n // Es6结构赋值\n [firstName.value,lastName.value] = newValue.split(' ');\n }\n})\n\nfullName.value = \"John Lee\" // 此处会触发Setter函数.firstName和lastName也会相应更新</code></pre><p> </p><h4>computed具有缓存的作用</h4><p>计算属性会追踪依赖，如果依赖没有变动，将自动返回缓存中的数据，而调用方法每次重新渲染的的时候都会重新执行，会消耗更多的性能</p><p><br></p><h3>watch 监听</h3><h4>1.watch监听源的几种形式</h4><pre><code class=\"language-javascript\">const num = ref(2)\nconst obj = ref({key:1})\n\nwatch(num,()=>{}) // 监听单个的 ref响应式数据\nwatch(()=>obj.key,(newVal)=>{}) // 监听一个getter函数\nwatch(()=>obj.value.key + num.value,(sum)=>{}) // 监听一个getter函数\nwatch([num,obj],(newVal1,nweVal2)=>{}) // 监听一个数组</code></pre><p><br></p><h4>2.watch深度监听和立即执行</h4><pre><code class=\"language-javascript\">const num = ref(2)\nconst obj = ref({key:1,deepKey:{num:3}})\nconst updateNum = ()=>{\n return num.value+obj.value.deepKey.num\n}\n\nwatch(obj,()=>{\n // 达到深度监听\n},{deep:true}) \n\n\nwatch(obj,()=>{\n // 立即执行\n},{immediate:true}) </code></pre><p><br></p><h4>3.watchEffect 会在监听的依赖数据发生变化时直接调用，而不需要指定明确的监听源</h4><pre><code class=\"language-javascript\">const id = ref(1)\nconst data = ref()\n\nwatchEffect(async ()=>{\n const res = await fetch(`http://api.details/${id}`)\n data.value = res\n})</code></pre><p><br></p><h4>4.watch 回调函数的触发机制， watchEffect 后置刷新和 watchPostEffect</h4><pre><code class=\"language-javascript\">\n// 当响应数据发生变化时，dom和watch同时监听到。此时，watch的回调将会vue组件更新之前被调用。获取组件dom数据是组件更新之前的\nwatch(somRefProperty,()=>{\n let dom = document.querySelector('...') // 数据更新之前的dom \n})\n\n// 后置刷新的方式。配置flush为post\nwatch(somRefProperty,()=>{\n let dom = document.querySelector('...') // 数据更新之后的dom \n},{flush:'post'})\nwatchEffect(()=>{\n let dom = document.querySelector('...') // 数据更新之后的dom \n},{flush:'post'})\n\n// 后置刷新的watchEffect 可以简写为 watchPostEffect\nwatchPostEffect(()=>{\n let dom = document.querySelector('...') // 数据更新之后的dom \n})</code></pre><p><br></p><h3>组件</h3><h4>1.component元素动态组件</h4><pre><code class=\"language-javascript\">import componentA from \"./xx.vue\"\nimport componentB from \"./xx.vue\"\n\nconst currentComponent = computed(()=>route.query.isA?componentA:componentB)\n\n<component :is=\"currentComponent\"></component>\n\n<component is=\"div\"></component>\n\n<component is=\"a\" href=\"/a/b\"></component></code></pre><p><br></p><h4>2. 组件元素位置限制的问题处理</h4><pre><code class=\"language-javascript\">import customTr from './tr/vue'\n\n<table>\n <custom-tr></custom-tr> 此处使用自定义组件，会被忽略掉\n</table> \n\n// ---------------- 正确使用 ---------------\n<table>\n <tr is=\"vue:custom-tr\"></tr> 此处使用自定义组件，会被忽略掉\n</table> </code></pre><p><br></p><h4>3. 组件的引用和获取（ref）</h4><pre><code class=\"language-html\"><script setup>\nimport child from './child'\nconst childRef= ref(null)\n\nonMounted(()=>{\n // 在挂载之后获取子组件中的数据\n const data = childRef.data\n})\n</script>\n<template>\n <child ref=\"childRef\"></child>\n</template></code></pre><p><br></p><pre><code class=\"language-html\"><script setup>\nconst data = ref('我是子组件的数据')\nconst fn = ()=>{\n alert()\n}\n// 注意：在使用了 script setup 组合是api形式的组件中，子组件的数据是私有的不允许父组件访问。\n// 必须使用 defineExpose 将数据显式的暴露出去才能被父组件访问的到\ndefineExpose({\n data,\n fn\n})\n</script>\n<template>\n <span>我是子组件，数据：{{data}}</span>\n</template></code></pre><p><br></p><h4>4. 组件透传-attribute</h4><p>父组件在引用组件上属性（class,style,@click等）会被透传给子组件（子组件根节点可以使用$attrs接受到）</p><pre><code class=\"language-javascript\">// 父组件\nimport child from './child'\n<child class=\"test\" @click=\"fn\"></child>\n\n//子组件会被渲染成这样（这个div是子组件的根节点）\n<button class=\"test\" @click=\"fn\"></button>\n\n// 子组件中使用$attrs\n<button>{{$attrs.class}}</button>\n\n//取消属性透传\ndefineOptions({\n inheritAttrs: false\n})\n\n//如果不是根节点怎么使用透传的属性?使用v-bind 配和 inheritAttrs: false 即可实现\n<div class=\"child-components-wrap\">\n <button class=\"btn\" v-bind=\"$attrs\">click me</button>\n</div>\ndefineOptions({\n inheritAttrs: false\n})\n\n// 子组件有多个根节点-需要显示的绑定透传的attrs\n<header></header>\n<main v-bind=\"$attrs\"></main>\n<footer></footer> </code></pre><p><br></p><h4>5. 组件js如何透传-attribute</h4><pre><code class=\"language-html\"><script setup>\n import { useAttrs } from 'vue'\n const attrs = useAttrs()\n</script></code></pre><p><br></p><h3> 组合式函数</h3><ul><li>组合式函数是vue3.0中新增的api，可以用来代替vue2.x中的mixin</li></ul><pre><code class=\"language-javascript\">const useMouse = () => {\n const state = ref({\n x: 0,\n y: 0\n })\n const update = (e: MouseEvent) => {\n state.value.x = e.pageX\n state.value.y = e.pageY\n }\n const onMouseMove = (e: MouseEvent) => {\n update(e)\n }\n return {\n state,\n update,\n onMouseMove\n }\n}\n\n// 使用useMouse\nconst { state, update, onMouseMove } = useMouse()\n\n// 异步实现\n// fetch.js\nimport { ref, watchEffect, toValue } from 'vue'\n\nexport function useFetch(url) {\n const data = ref(null)\n const error = ref(null)\n\n const fetchData = (dt) => { \n // toValue() 是一个在 3.3 版本中新增的 API。它的设计目的是将 ref 或 getter 规范化为值\n fetch(toValue(url))\n .then((res) => res.json())\n .then((json) => (data.value = json))\n .catch((err) => (error.value = err))\n }\n\n watchEffect(() => {\n // reset state before fetching..\n fetchData(url)\n })\n\n return { data, error }\n}</code></pre><p><br></p><h3>自定义指令</h3><p>自定义指令是vue2.x中使用的api，在vue3.0中进行了升级，使用更加简单</p><h4>1.注册自定义指令</h4><pre><code class=\"language-javascript\">// 全局注册\nconst app = createApp({})\napp.directive('focus',{\n//\n})</code></pre><p><br></p><h4>2.指令的钩子</h4><pre><code class=\"language-javascript\">const myDirective = {\n // 在绑定元素的 attribute 前\n // 或事件监听器应用前调用\n /**\n * @el 指令所绑定的元素这里可以直接操作DOM\n * @binding {value,oldValue,arg, modifiers,instance:使用该指令的组件实例,dir}\n * @vnode 代表绑定元素的底层 VNode\n * @prevVnode 代表之前的渲染中指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。\n */\n created(el, binding, vnode, prevVnode) {\n // 下面会介绍各个参数的细节\n },\n // 在元素被插入到 DOM 前调用\n beforeMount(el, binding, vnode, prevVnode) {},\n // 在绑定元素的父组件\n // 及他自己的所有子节点都挂载完成后调用\n mounted(el, binding, vnode, prevVnode) {},\n // 绑定元素的父组件更新前调用\n beforeUpdate(el, binding, vnode, prevVnode) {},\n // 在绑定元素的父组件\n // 及他自己的所有子节点都更新后调用\n updated(el, binding, vnode, prevVnode) {},\n // 绑定元素的父组件卸载前调用\n beforeUnmount(el, binding, vnode, prevVnode) {},\n // 绑定元素的父组件卸载后调用\n unmounted(el, binding, vnode, prevVnode) {}\n}\n\n// 示例\n<button v-click:double.stop=\"fn\">按钮</button>\n// binding 对象\n{\n arg: 'double',\n modifiers: { stop: true },\n value: fn,\n oldValue: undefined,///* 上一次更新时 `fn` 的值 */\n instance: Vue 实例,\n}\n\n\n// 简化形式\n<input v-color=\"color\">按钮</input>\napp.directive('color',(el,binding)=>{\n // 这会在 `mounted` 和 `updated` 时都调用\n el.style.color = binding.value\n})</code></pre><h3>休息一下吧~</h3><p><br></p><div data-w-e-type=\"video\" data-w-e-is-void>\n<video poster=\"\" controls=\"true\" width=\"1080\" height=\"auto\"><source src=\"https://cxyuan.asia/uploads/videos/0954a4c6-b072-4c5c-8fe1-2dd5aad288b0.mp4\" type=\"video/mp4\"/></video>\n</div><p><br></p>", "cover_image": "https://cxyuan.asia/uploads/images/c293b2c5-f708-4443-b9c7-813fd4a0151a.png", "article_type": "reprint", "status": "published", "visibility": "public", "is_featured": 0, "is_pinned": 0, "published_at": "2026-05-09 19:54:12", "view_count": 0, "deleted_at": null, "created_at": "2026-05-09 19:54:12", "updated_at": "2026-05-16 23:13:19", "author": { "id": 1, "username": "superAdmin", "nickname": "超级管理员", "avatar": "https://loremflickr.com/cache/resized/65535_53079205248_62a1e33600_n_200_200_nofilter.jpg" }, "Category": { "id": 1, "name": "技术", "slug": "tech" }, "tags": [ { "id": 3, "name": "JavaScript", "slug": "javascript" }, { "id": 5, "name": "Vue.js", "slug": "vuejs" } ] }, { "id": 2, "user_id": 1, "category_id": 1, "title": "测试富文本编辑器相关功能", "slug": "wang-editor", "summary": "富文本编辑器相关功能", "content": "<h2><span style=\"color: rgb(66, 144, 247);\">插入 JS 片段</span></h2><pre><code class=\"language-javascript\">const firstName = ref('Kate')\nconst lastName = ref('Jen')\n\nconst fullName = computed({\n // getter\n get(){\n return firstName.value + ' ' + lastName.value;\n },\n // setter\n set(newValue){\n // Es6结构赋值\n [firstName.value,lastName.value] = newValue.split(' ');\n }\n})\n\nfullName.value = \"John Lee\" // 此处会触发Setter函数.firstName和lastName也会相应更新</code></pre><h3><span style=\"color: rgb(216, 68, 147);\">插入 JSON 片段</span></h3><pre><code class=\"language-javascript\">\n{\n \"name\": \"x-admin\",\n \"type\": \"module\",\n \"version\": \"1.0.1\",\n \"description\": \"A crafted admin template, built with Vue3, Vite, TypeScript, Element Plus, and more\",\n \"dependencies\": {\n \"@element-plus/icons-vue\": \"2.3.1\",\n \"@wangeditor/editor\": \"5.1.23\",\n \"axios\": \"1.7.9\",\n \"colord\": \"2.9.3\",\n \"dayjs\": \"1.11.13\",\n \"element-plus\": \"2.12\",\n \"js-cookie\": \"3.0.5\",\n \"lodash-es\": \"4.17.21\",\n \"mitt\": \"3.0.1\",\n \"normalize.css\": \"8.0.1\",\n \"nprogress\": \"0.2.0\",\n \"path-browserify\": \"1.0.1\",\n \"path-to-regexp\": \"8.2.0\",\n \"pinia\": \"3.0.1\",\n \"screenfull\": \"6.0.2\",\n \"vue\": \"3.5.13\",\n \"vue-router\": \"4.5.0\"\n },\n \"packageManager\": \"yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e\"\n}</code></pre><h3><span style=\"color: rgb(225, 60, 57);\"><strong>插入 HTML 片段</strong></span></h3><pre><code class=\"language-html\"><div class=\"wang-editor-wrapper\">\n \n <div ref=\"toolbarRef\" class=\"wang-editor-toolbar\">哈哈哈什么玩意</div>\n\n \n <div ref=\"editorRef\" class=\"wang-editor-content\" :style=\"{ minHeight: `${props.height}px` }\">是啊 666 </div>\n</div></code></pre><p>大家都说好。我也觉得很好！</p><p>哈哈哈！oooo!!!休息一下，看会儿视频哦～</p><p><br></p><div data-w-e-type=\"video\" data-w-e-is-void>\n<video poster=\"\" controls=\"true\" width=\"1080\" height=\"auto\"><source src=\"https://cxyuan.asia/uploads/videos/86f16a60-959a-44b9-9912-e40de2269732.mp4\" type=\"video/mp4\"/></video>\n</div><p>作者：不便透露姓名的 XXX</p>", "cover_image": "https://cxyuan.asia/uploads/images/6ce1e4a5-95ea-4fdd-a83a-d6fb62d19728.jpg", "article_type": "original", "status": "published", "visibility": "public", "is_featured": 0, "is_pinned": 0, "published_at": "2026-05-08 21:24:49", "view_count": 0, "deleted_at": null, "created_at": "2026-05-08 17:55:22", "updated_at": "2026-05-16 23:14:58", "author": { "id": 1, "username": "superAdmin", "nickname": "超级管理员", "avatar": "https://loremflickr.com/cache/resized/65535_53079205248_62a1e33600_n_200_200_nofilter.jpg" }, "Category": { "id": 1, "name": "技术", "slug": "tech" }, "tags": [ { "id": 3, "name": "JavaScript", "slug": "javascript" } ] }, { "id": 1, "user_id": 1, "category_id": 3, "title": "阿里妈妈·智造字走在前沿", "slug": "留白", "summary": "阿里妈妈·智造字，以研习古今造字的脉络，跨越历史长河，传承汉字基因，探寻中华深层审美规律。\n\n以 AI 智能的方式开启造字新的起点，以博古存今的思维做突破创新。在曾经的边界，再延伸，再创造。", "content": "<h1>阿里妈妈·智造字走在前沿</h1><h2>简介</h2><p>阿里妈妈·智造字，以研习古今造字的脉络，跨越历史长河，传承汉字基因，探寻中华深层审美规律。</p><p><br></p><p>以 AI 智能的方式开启造字新的起点，以博古存今的思维做突破创新。在曾经的边界，再延伸，再创造。</p><p><br></p><p>与时俱进的适配当下多模态媒体的字体，以满足商业之需。</p><p><br></p><p>以智慧编码解开造字密码，以智能美学探索字的无限可能。</p><p><br></p><p>将展现字体千姿百态，触达每一个商业场景，阿里妈妈·智造字，植根商业，普惠商家，为商业创造更好的体验和价值。</p><p><br></p><h2>查看图片</h2><p><img src=\"https://cxyuan.asia/uploads/images/2da2b2bc-920f-4005-8947-ef9b5bcc4a26.jpeg\" alt=\"EC3CB2F7-DF9A-4262-9143-AD78C0680679.jpeg\" data-href=\"https://cxyuan.asia/uploads/images/2da2b2bc-920f-4005-8947-ef9b5bcc4a26.jpeg\" style=\"\"/></p><p><br></p><p>嘻嘻哈哈～</p><p><br></p><div data-w-e-type=\"video\" data-w-e-is-void>\n<video poster=\"\" controls=\"true\" width=\"auto\" height=\"auto\"><source src=\"https://cxyuan.asia/uploads/videos/02c3c9c6-57ce-4afd-adea-d80a77abb2a8.mp4\" type=\"video/mp4\"/></video>\n</div><p>作者：<span style=\"color: rgb(64, 169, 255);\">大元子</span></p>", "cover_image": "https://cxyuan.asia/uploads/images/23d47c2f-448c-4e7d-b063-47489eea896f.jpeg", "article_type": "original", "status": "published", "visibility": "public", "is_featured": 0, "is_pinned": 0, "published_at": "2026-04-27 23:56:20", "view_count": 0, "deleted_at": null, "created_at": "2026-04-27 23:52:41", "updated_at": "2026-05-16 23:16:16", "author": { "id": 1, "username": "superAdmin", "nickname": "超级管理员", "avatar": "https://loremflickr.com/cache/resized/65535_53079205248_62a1e33600_n_200_200_nofilter.jpg" }, "Category": { "id": 3, "name": "产品动态", "slug": "product" }, "tags": [ { "id": 1, "name": "PHP", "slug": "php" }, { "id": 3, "name": "JavaScript", "slug": "javascript" }, { "id": 5, "name": "Vue.js", "slug": "vuejs" } ] }, { "id": 5, "user_id": 1, "category_id": 3, "title": "后台管理系统RuoYi v4.8.3", "slug": "ruoyi-v483", "summary": "一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适的。于是利用空闲休息时间开始自己写了一套后台系统。如此有了若依。她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。", "content": "<h2 style=\"text-align: left;\">平台简介</h2><p style=\"text-align: left;\">一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适的。于是利用空闲休息时间开始自己写了一套后台系统。如此有了若依。她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。</p><p style=\"text-align: left;\">性别男，若依是给女儿取的名字（寓意：你若不离不弃，我必生死相依）</p><p style=\"text-align: left;\">若依是一套全部开源的快速开发平台，毫无保留给个人及企业免费使用。</p><ul><li style=\"text-align: left;\">前端基于 <a href=\"https://gitee.com/hplus_admin/hplus\" target=\"\">Hplus(H+)</a> 后台主题 UI 框架。</li><li style=\"text-align: left;\">前后端分离版本，请移步<a href=\"https://gitee.com/y_project/RuoYi-Vue\" target=\"\">RuoYi-Vue</a>，微服务版本，请移步<a href=\"https://gitee.com/y_project/RuoYi-Cloud\" target=\"\">RuoYi-Cloud</a></li><li style=\"text-align: left;\">阿里云折扣场：<a href=\"https://gitee.com/link?target=http%3A%2F%2Faly.ruoyi.vip\" target=\"_blank\">点我进入</a>，腾讯云秒杀场：<a href=\"https://gitee.com/link?target=http%3A%2F%2Ftxy.ruoyi.vip\" target=\"_blank\">点我进入</a>  </li></ul><h2 style=\"text-align: left;\">版本分支</h2><p style=\"text-align: left;\">RuoYi 框架提供 Spring Boot 2.x / 3.x / 4.x 多版本分支的并行维护。</p><table style=\"width: 100%; text-align: left;\"><tbody><tr><th colspan=\"1\" rowspan=\"1\" width=\"auto\">名称</th><th colspan=\"1\" rowspan=\"1\" width=\"auto\">说明</th><th colspan=\"1\" rowspan=\"1\" width=\"auto\">地址</th></tr><tr><td colspan=\"1\" rowspan=\"1\" width=\"auto\">master 默认分支</td><td colspan=\"1\" rowspan=\"1\" width=\"auto\">Spring Boot 4.x (JDK 17+)</td><td colspan=\"1\" rowspan=\"1\" width=\"auto\" style=\"text-align: left;\"><a href=\"https://gitee.com/y_project/RuoYi\" target=\"\">https://gitee.com/y_project/RuoYi</a></td></tr><tr><td colspan=\"1\" rowspan=\"1\" width=\"auto\">springboot3 分支</td><td colspan=\"1\" rowspan=\"1\" width=\"auto\">Spring Boot 3.x (JDK 17+)</td><td colspan=\"1\" rowspan=\"1\" width=\"auto\"><a href=\"https://gitee.com/y_project/RuoYi/tree/springboot3\" target=\"\">https://gitee.com/y_project/RuoYi/tree/springboot3</a></td></tr><tr><td colspan=\"1\" rowspan=\"1\" width=\"auto\">springboot2 分支</td><td colspan=\"1\" rowspan=\"1\" width=\"auto\">Spring Boot 2.x (JDK 8+)</td><td colspan=\"1\" rowspan=\"1\" width=\"auto\"><a href=\"https://gitee.com/y_project/RuoYi/tree/springboot2\" target=\"\">https://gitee.com/y_project/RuoYi/tree/springboot2</a></td></tr></tbody></table><h2 style=\"text-align: left;\">内置功能</h2><ol><li style=\"text-align: left;\">用户管理：用户是系统操作者，该功能主要完成系统用户配置。</li><li style=\"text-align: left;\">部门管理：配置系统组织机构（公司、部门、小组），树结构展现支持数据权限。</li><li style=\"text-align: left;\">岗位管理：配置系统用户所属担任职务。</li><li style=\"text-align: left;\">菜单管理：配置系统菜单，操作权限，按钮权限标识等。</li><li style=\"text-align: left;\">角色管理：角色菜单权限分配、设置角色按机构进行数据范围权限划分。</li><li style=\"text-align: left;\">字典管理：对系统中经常使用的一些较为固定的数据进行维护。</li><li style=\"text-align: left;\">参数管理：对系统动态配置常用参数。</li><li style=\"text-align: left;\">通知公告：系统通知公告信息发布维护。</li><li style=\"text-align: left;\">操作日志：系统正常操作日志记录和查询；系统异常信息日志记录和查询。</li><li style=\"text-align: left;\">登录日志：系统登录日志记录查询包含登录异常。</li><li style=\"text-align: left;\">在线用户：当前系统中活跃用户状态监控。</li><li style=\"text-align: left;\">定时任务：在线（添加、修改、删除)任务调度包含执行结果日志。</li><li style=\"text-align: left;\">代码生成：前后端代码的生成（java、html、xml、sql）支持CRUD下载。</li><li style=\"text-align: left;\">系统接口：根据业务代码自动生成相关的api接口文档。</li><li style=\"text-align: left;\">服务监控：监视当前系统CPU、内存、磁盘、堆栈等相关信息。</li><li style=\"text-align: left;\">缓存监控：对系统的缓存查询，删除、清空等操作。</li><li style=\"text-align: left;\">在线构建器：拖动表单元素生成相应的HTML代码。</li><li style=\"text-align: left;\">连接池监视：监视当前系统数据库连接池状态，可进行分析SQL找出系统性能瓶颈。</li></ol><h2 style=\"text-align: left;\">在线体验</h2><ul><li style=\"text-align: left;\">admin/admin123</li><li style=\"text-align: left;\">陆陆续续收到一些打赏，为了更好的体验已用于演示服务器升级。谢谢各位小伙伴。</li></ul><p style=\"text-align: left;\">演示地址：<a href=\"https://gitee.com/link?target=http%3A%2F%2Fruoyi.vip\" target=\"_blank\"><span style=\"color: rgb(66, 144, 247);\">http://ruoyi.vip</span></a><br>文档地址：<a href=\"https://gitee.com/link?target=http%3A%2F%2Fdoc.ruoyi.vip\" target=\"_blank\"><span style=\"color: rgb(66, 144, 247);\">http://doc.ruoyi.vip</span></a></p><h2 style=\"text-align: left;\">演示图</h2><p style=\"text-align: center;\"><img src=\"https://cxyuan.asia/uploads/images/f20bcbbd-7b96-48dc-b38d-ef6bff03b2b3.png\" alt=\"640.png\" data-href=\"https://cxyuan.asia/uploads/images/f20bcbbd-7b96-48dc-b38d-ef6bff03b2b3.png\" style=\"\"></p><h3 style=\"text-align: left;\"><span style=\"color: rgb(106, 57, 201);\">放松一下吧</span>😀～</h3><p style=\"text-align: left;\"><br></p><div data-w-e-type=\"video\" data-w-e-is-void>\n<video poster=\"\" controls=\"true\" width=\"auto\" height=\"auto\"><source src=\"https://cxyuan.asia/uploads/videos/3b822052-7563-4943-8c42-8a9a51d276be.mp4\" type=\"video/mp4\"/></video>\n</div><p style=\"text-align: left;\"><br></p><p style=\"text-align: left;\">搬运工：<span style=\"color: rgb(225, 60, 57);\">   小圆圆     </span><span style=\"color: rgb(89, 89, 89);\">日期：2024-03-03</span></p>", "cover_image": "https://cxyuan.asia/uploads/images/bc006c65-6784-465f-9eda-3e388611d359.png", "article_type": "original", "status": "published", "visibility": "public", "is_featured": 0, "is_pinned": 0, "published_at": "2025-03-11 17:26:27", "view_count": 0, "deleted_at": null, "created_at": "2025-03-11 17:26:27", "updated_at": "2026-05-16 23:17:30", "author": { "id": 1, "username": "superAdmin", "nickname": "超级管理员", "avatar": "https://loremflickr.com/cache/resized/65535_53079205248_62a1e33600_n_200_200_nofilter.jpg" }, "Category": { "id": 3, "name": "产品动态", "slug": "product" }, "tags": [ { "id": 3, "name": "JavaScript", "slug": "javascript" } ] } ], "pagination": { "page": 1, "pageSize": 15, "total": 11, "totalPages": 1 } } }