笔记-文章管理模块：前后端衔接核心流程（精简代码 + 思路）

✅ 步骤一：页面搭建（ArticleManage.vue）

💡 先搭好结构，把展示的位置留出来，比如下拉框、表格等

<el-select v-model="categoryId">
  <el-option v-for="c in categorys" :label="c.categoryName" :value="c.id" />
</el-select>

📌 思路：

• 页面需要“文章分类数据”，但现在是空的。

• 所以等页面加载时，我们得主动去“请求后台获取”。

---

✅ 步骤二：封装接口请求（api/article.js）

💡 写一个方法，专门用来向后端发请求，获取分类数据。

export const articleCategoryListService = () => {
  return request.get('/category')
}

📌 思路：

• 封装请求是为了组件中只管调用，不管细节。

• request.get('/category') 是真正连接后端的关键点。

---

✅ 步骤三：页面中调用接口（ArticleManage.vue）

💡 在 setup() 中引入刚才写的请求方法，调用并存到 categorys 中。

import { articleCategoryListService } from '@/api/article.js'

const categorys = ref([])

const articleCategoryList = async () => {
  const result = await articleCategoryListService()
  categorys.value = result.data
}

📌 思路：

• 这个函数就是“请求 + 数据赋值”

• categorys 是页面绑定用的响应式变量。

---

✅ 步骤四：自动触发请求（页面加载时）

💡 页面一加载就调用上面的函数

onMounted(() => {
  articleCategoryList()
})

📌 思路：

• 只有在页面加载后调用这个函数，分类才会被赋值，页面上才能展示。

• 没有这一步，接口不会被调用，页面就不会有数据。

---

🔁 总结一句话逻辑链：

页面需要数据 → 页面加载时调用函数 → 函数调用接口 → 接口返回数据 → 赋值到变量 → 页面回显绑定

---

通用记忆这个模式，就记住这 5 步：

📦 页面搭建 🔗 封装接口 🧠 定义变量 ⚙️ 调用接口 👀 页面绑定