提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 1. 前端项目结构
• 一、index.vue
• • 1. 控件在网页、代码之间的映对
  • • 1.1.1 控件
    • 1.1.2 参数
    • 1.3
    • 二、dept.js
    • • 1.代码
      • 2.未完待续
      • 总结

        ---

        前言

        以“系统管理 - 部门管理”

        认识若依前端 index.vue

        认识若依前端 dept.js

        ---

        1. 前端项目结构

        项目结构

        ├── build // 构建相关

        ├── bin // 执行脚本

        ├── public // 公共文件

        │ ├── favicon.ico // favicon图标

        │ └── index.html // html模板

        ├── src // 源代码

        │ ├── api // 所有请求

        │ ├── assets // 主题 字体等静态资源

        │ ├── components // 全局公用组件

        │ ├── directive // 全局指令

        │ ├── layout // 布局

        │ ├── router // 路由

        │ ├── store // 全局 store管理

        │ ├── utils // 全局公用方法

        │ ├── views // view

        │ ├── App.vue // 入口页面

        │ ├── main.js // 入口 加载组件 初始化等

        │ ├── permission.js // 权限管理

        │ └── settings.js // 系统配置

        ├── .editorconfig // 编码格式

        ├── .env.development // 开发环境配置

        ├── .env.production // 生产环境配置

        ├── .env.staging // 测试环境配置

        ├── .eslintignore // 忽略语法检查

        ├── .eslintrc.js // eslint 配置项

        ├── .gitignore // git 忽略项

        ├── babel.config.js // babel.config.js

        ├── package.json // package.json

        └── vue.config.js // vue.config.js

        ——————————————————————————————————————————

        原文链接：https://blog.csdn.net/qq_41607217/article/details/118962345

        ——————————————————————————————————————————

        一、index.vue

        1. 控件在网页、代码之间的映对

        ——————————————————————————————————————————

        ——————————————————————————————————————————

        1.1.1 控件

        el-input：编辑框

        el-select：下拉框

        el-button：按钮

        1.1.2 参数

        // 传入的参数

        v-model=“queryParams.deptName”

        // 提示文本

        placeholder

        // 可以将选择的内容进行清除

        clearable

        // 相关联的函数名

        @keyup.enter.native=“handleQuery”

        // 按钮

        type=“primary” //按钮是蓝色

        type=“warning” //按钮是橙色

        type=“danger” //按钮是红色

        type=“view” //按钮是透明白色

        type=“success” //按钮是绿色

        1.3

        二、dept.js

        1.代码

        代码如下（示例）：

        import request from '@/utils/request'
        // 查询部门列表
        export function listDept(query) {
          return request({
            url: '/system/dept/list',
            method: 'get',
            params: query
          })
        }
        // 查询部门列表（排除节点）
        export function listDeptExcludeChild(deptId) {
          return request({
            url: '/system/dept/list/exclude/' + deptId,
            method: 'get'
          })
        }
        // 查询部门详细
        export function getDept(deptId) {
          return request({
            url: '/system/dept/' + deptId,
            method: 'get'
          })
        }
        // 新增部门
        export function addDept(data) {
          return request({
            url: '/system/dept',
            method: 'post',
            data: data
          })
        }
        // 修改部门
        export function updateDept(data) {
          return request({
            url: '/system/dept',
            method: 'put',
            data: data
          })
        }
        // 删除部门
        export function delDept(deptId) {
          return request({
            url: '/system/dept/' + deptId,
            method: 'delete'
          })
        }
        

        ---

        2.未完待续

        ---

        总结