vue移动端项目功能的总结

最新推荐文章于 2024-05-14 12:11:23 发布

hanjuyuan

最新推荐文章于 2024-05-14 12:11:23 发布

阅读量625

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/hanjuyuan/article/details/119490428

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.删除功能：

需求：就是点击删除会弹出弹框--根据选择---删除相应的内容

实现的思路：1.利用element组件找到对话框或弹出层，然后进行相应的修改即可（注：这里需要传递id）

代码展示：

①布局忽略只有js部分

//删除是需要调用接口的 并且需要传递相应的id 如：
（具体操作参照接口文档）

// 删除权限
export function delPermission(id) {
  return request({
    url: `/sys/permission/${id}`,
    method: 'delete'
  })
}

//给需要删除的按钮绑定点击事件，参数传相应的id
记得引入（此处代码不展示）
注意参数！---看接口返回的数据是什么，就传参数是什么！！！！！！是对象就传入row！！！

      <el-button type="text" @click="delPermission(row.id)"> 删除</el-button>

//设置相关的方法--处理相关的业务逻辑
①设置方法调用方法--先提示用户是否需要删除---然后进行调用删除的请求接口api--删除之后在调用页面的渲染接口---在提示删除成功
②此调用的情况可能会失败也会成功所以就得配合try和catch。和用async和await；如果是使用.then就可以不用try和catch了是吗？
  methods: {
     // 删除操作
    async delPermission(id) {
      try {
        await this.$confirm('确定要删除该数据吗')
        await delPermission(id)
        this.getPermissionList()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    }
}

2.添加功能

项目：6:组织架构的新增的功能。7.权限管理的新增角色! 8.新增员工！9.新增分配权限

需求：也就是点击新增的时候会弹出一个弹出框==》其中有确定和取消和关闭！！！

思路：利用element组件的弹出层 ---进行代码的修改

代码的实现:

1)先发起请求--post请求！（具体的参考接口文档）==》传递参数data

2）新增窗口的页面布局--利用组件

注：这里需要自己定义一个数据在data---来控制弹出层的显示和隐藏！！！

注：也会定义相应的值来接收==》如果都是表单验证的数据就可以不用在定义？？？

3）绑定点击事件---（一般弹出框可以单独封装一个单独的组件）--会涉及组件传值

一般是父传子（父组件来显示和隐藏），子通过props来接收，然后子组件修改数据

子传父（自定义事件）---代码展示：(分配角色：)

<script>
export default {
    4.设置相关的数据接收父组件的显示和隐藏+以及当前的用户的id
  props: {
    showRoleDialog: {
      type: Boolean,
      default: false
    },
    // 用户的id 用来查询当前用户的角色信息
    userId: {
      type: String,
      default: null
    }
  }
}
</script>

4）主要的业务逻辑:就是传递参数，执行相关的业务逻辑

①就是显示弹出层

②然后进行相关的业务逻辑处理！

③涉及表单验证！（四步曲）

④也会涉及计算属性--与编辑弹出层同在时！

技巧：会在弹出层绑定关闭（与取消的点击和方法一样-- @close="btnCancel"）

 <el-dialog title="编辑弹层" :visible="showDialog" @close="btnCancel">
      <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="120px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="roleForm.name" />
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="roleForm.description" />
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>

2.1添加功能--下拉菜单

①发起请求

②下拉菜单绑定的是foucs事件（光标聚焦）

③设置方法--调用方法

④渲染数据（数据一般是数组来接收的，所以可以循环遍历获取）==》（可参考组件！）

补充：复选框列表的循环依旧如此

------------------------------------------------------------------------------

2.2.添加功能---之确定功能

需求：当点击新增页面的确定按钮时，我们需要完成对表单的整体校验，如果校验成功，进行提交

1）给确定按钮绑定点击事件

2）在校验表单的时候是需要获取个表整个表单的，那如何获取个表单呢？通过操作 DOM--$ref

3）给表单设置ref==》获取到表单

4)调用新增接口--重新获取数据--提示成功--关闭弹出层！！

注：这里调用接口点击确定时候一般都会传递参数

4）设置相关的方法==》提供了一个参数？-->这个参数表示的是什么？是什么打印就知道了啊！

返回的是true？===》如果为true表示效验通过

    // 点击确定时触发
    btnOK() {
      this.$refs.deptForm.validate(async isOK => {
        if (isOK) {
          // 表示可以提交了
          await addDepartments({ ...this.formData, pid: this.treeNode.id }) // 调用新增接口 添加父部门的id
//会涉及在渲染数据--然后提示成功--关闭弹出层
        }
      })
    }

补充：这里提供了三种方式：

①回调函数：+配合使用async和await--回调传参数！

②通过.then==》这里使用.then就可以直接使用catch获取失败的提示信息

validate效验也可以是.then的方式，用then来接受成功的回调==》（角色权限）

  btnOK() {
      this.$refs.perForm.validate().then(() => {
        if (this.formData.id) {
          return updatePermission(this.formData)
        }
        return addPermission(this.formData)
      }).then(() => {
        //  提示消息
        this.$message.success('新增成功')
        this.getPermissionList()
        this.showDialog = false
      })
    },

③通过async和await

   // 点击确定时 校验整个表单
    async btnOK() {
      try {
          //validate()是组件的内部属性为表单的验证！
        await this.$refs.addEmployee.validate()
        // 调用新增接口--调用整个表单！
        await addEmployee(this.formData) // 新增员工
        // 告诉父组件更新数据
        // this.$parent 可以直接调用到父组件的实例 实际上就是父组件this
        // this.$emit
        this.$parent.getEmployeeList()
          //然后就关闭弹出层！
        this.$parent.showDialog = false
          //捕获错误！
      } catch (error) {
        console.log(error)
      }
    },

5）数据的渲染===》会涉及组件之间的传值！

-------------------------------------传递参数的补充：！！！！

扩展运算符扩展对象的话，会把对象的属性和他的属性值，拆解开来一一赋值给一个新对象

首先因为这个接口要的参数是一个对象，其次你解构对象后，必须要拿新对象接收之前那个为什么那样写，是因为那个isFrontDisplay不是一个表单的项所以我写外面了

4.添加功能---之关闭 / 取消功能（待续。。。。）

具体步骤：

①重新获取之前表单验证的数据--全清空操作

②在重新验证表单--利用组件的原有方法：resetFiedds（）

③关闭弹出层！！！！

  btnCancel() {
      this.formData = {
        name: '', // 名称
        code: '', // 标识
        description: '', // 描述
        type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
        pid: '', // 因为做的是树 需要知道添加到哪个节点下了
        enVisible: '0' // 开启
      }
      this.$refs.perForm.resetFields() //组件的属性--表单重置！
      this.showDialog = false
    },

其他补充：

方法一：弹出层的关闭采取.sync或者取消的事件@click=“ btnCancel”

方法二：绑定取消事件（也会涉及组件的传值--一般是子传父--配合.sync）

// 子组件 update:固定写法 (update:props名称, 值)
this.$emit('update:showDialog', false) //触发事件
// 父组件 sync修饰符
<child  :showDialog.sync="showDialog" />

btnCancel() {
      this.$refs.deptForm.resetFields() // 重置校验字段
      this.$emit('update:showDialog', false) // 关闭
    }

----------------------------------------------------------------------------------------------

5..编辑功能（涉及回写）

项目：6.部分信息编辑，7.编辑角色

1..编辑部门功能实际上和新增窗口，采用的是一个组件，只不过我们需要将新增场景变成编辑场景

2.绑定点击事件--可能涉及组件传值（父传子或子传父）

2.显示弹出层以后需要获取接口的数据（其实也就是需要获取表单详情的接口）===》可以调用新增的窗口的数据！！！！？？？

怎么区分有时候需要在data里面要定义数据呢？

3.注：一样的，需要传递相应的数据

补充：如果父组件想拿到子组件的属性和方法===》可以通过ref来获取。

4.新增和编辑的区别在于：

①新增是弹出弹出层--然后调用接口数据--确定即可；

②编辑是先请求数据在弹出弹出层==》目的是为了不出现闪烁的问题！！！！

③而且新增在绑定点击事件的时候是控制显示与隐藏。而编辑是方法名，并且需要传递id。

编辑确定的按钮会传递--新增的表单的数据！！！

    async editRole(id) {
      this.roleForm = await getRoleDetail(id)
      this.showDialog = true // 为了不出现闪烁的问题 先获取数据 再弹出层
    },
      async btnOK() {
      try {
        await this.$refs.roleForm.validate()
        // 只有校验通过的情况下 才会执行await的下方内容
        // roleForm这个对象有id就是编辑 没有id就是新增
        if (this.roleForm.id) {
          await updateRole(this.roleForm)
        } else {
          // 新增业务
        }
        // 重新拉取数据
        this.getRoleList()
        this.$message.success('操作成功')
        this.showDialog = false
      } catch (error) {
        console.log(error)
      }
    },

----------------------------------------------------------------------------------------------------

7.编辑功能+新增功能一起合写！！！！！

①计算属性：显示标题

computed: {
    showTitle() {
      return this.formData.id ? '编辑部门' : '新增子部门'
    }
  },

②

  async btnOK() {
      try {
        await this.$refs.roleForm.validate()
        // 只有校验通过的情况下 才会执行await的下方内容
        // roleForm这个对象有id就是编辑 没有id就是新增
        if (this.roleForm.id) {
          await updateRole(this.roleForm)
        } else {
          // 新增业务
          await addRole(this.roleForm)
        }
        // 重新拉取数据
        this.getRoleList()
        this.$message.success('操作成功')
        this.showDialog = false // 关闭弹层  =>  触发el-dialog的事件close事件
      } catch (error) {
        console.log(error)
      }
    },
    btnCancel() {
      this.roleForm = {
        name: '',
        description: ''
      }
      // 移除校验
      this.$refs.roleForm.resetFields()
      this.showDialog = false
    }

8.接口返回的是1.0代表男和女的整理！！！

9.组件传值的总结：

10.树状结构渲染页面的总结

11.权限篇和路由篇的总结

12.路由的页面的总结

13.token的总结：

14.接口的相关总结：

1.接口是根据restful的规则设计的删除 delete 新增 post 修改put 获取 get

15.触发事件的总结：

1.下拉菜单的触发

①在本组件的下拉选项。==》练习：组织架构

②在表单的下拉选项

2.点击下拉菜单的触发

16.插槽的使用总结：

hanjuyuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue移动端项目功能的总结

1.删除功能：需求：就是点击删除会弹出弹框--根据选择---删除相应的内容实现的思路：1.利用element组件找到对话框或弹出层，然后进行相应的修改即可（注：这里需要传递id）代码展示：①布局忽略只有js部分//删除是需要调用接口的并且需要传递相应的id 如：（具体操作参照接口文档）// 删除权限export function delPermission(id) { return request({ url: `/sys/permission/${id..
复制链接

扫一扫

专栏目录