【前端vue】理解VUE前端框架中src下的api文件夹与views文件夹

文章目录

• ⭐前言
• ⭐一、api 文件夹
• • 🌟用途
  • 🌟典型结构
  • 🌟代码示例
  • 🌟如何理解？
  • ⭐二、views 文件夹
  • • 🌟用途
    • 🌟典型结构
    • 🌟代码示例
    • 🌟如何理解？
    • ⭐三、关系关联
    • ⭐四、快速理解代码的技巧
    • ⭐五、常见问题
    • ⭐总结

      ---

      标题	详情
      作者	JosieBook
      头衔	CSDN博客专家资格、阿里云社区专家博主、软件设计工程师
      博客内容	开源、框架、软件工程、全栈（,NET/Java/Python/C++）、数据库、操作系统、大数据、人工智能、工控、网络、程序人生
      口号	成为你自己，做你想做的
      欢迎三连	👍点赞、✍评论、⭐收藏

      ⭐前言

      在 Vue 项目中，api 和 views 是两个非常重要的目录，它们分别承担不同的职责。以下是理解这两个目录的指南：

      ⭐一、api 文件夹

      🌟用途

      存放所有与后端接口交互的代码（HTTP 请求封装）。

      集中管理项目的 API 接口，方便维护和复用。

      🌟典型结构

      

      🌟代码示例

      import request from '@/utils/request'
      // 部门列表
      export function deptLists(params?: any) {
          return request.get({ url: '/dept.dept/lists', params })
      }
      // 添加部门
      export function deptAdd(params: any) {
          return request.post({ url: '/dept.dept/add', params })
      }
      // 编辑部门
      export function deptEdit(params: any) {
          return request.post({ url: '/dept.dept/edit', params })
      }
      // 删除部门
      export function deptDelete(params: any) {
          return request.post({ url: '/dept.dept/delete', params })
      }
      // 部门详情
      export function deptDetail(params: any) {
          return request.get({ url: '/dept.dept/detail', params })
      }
      // 部门列表全部
      export function deptAll() {
          return request.get({ url: '/dept.dept/all' })
      }
      

      🌟如何理解？

      • 每个 .api.js 文件对应一个功能模块的接口。

      • 接口函数通常使用 axios 或 fetch 发起 HTTP 请求。

      • 在 Vue 组件中，会通过 import { login } from ‘@/api/user.api’ 调用这些接口。

        ⭐二、views 文件夹

        🌟用途

        • 存放页面级 Vue 组件（路由对应的页面）。

        • 通常与路由配置（src/router/index.js）一一对应。

          🌟典型结构

          

          🌟代码示例

              
          
                  
                      
                          
                              
                          
                          
                              
                                  
                                  
                              
                          
                          
                              
                                  
                                  
                                  
                              
                          
                          
                              查询
                              重置