kentik
新手
新手
  • 最后登录2021-11-23
  • 发帖数1
阅读:326回复:1

vue后台管理系统项目中使用的一些技术

楼主#
更多 发布于:2021-09-28 20:14
1.表格数据的增删改查
1.1 点击按钮获取表格中'当前行'的所有数据:用template标签把button包起来,通过solt-scope属性来获取,给点击事件传送scope.row参数,示例代码如下:




<template slot-scope=“scope”>
   <button @click=add(scope.row)>删除</button>
</template>





通过scrope.row.id 等等,来获取表格的字段名!
删除:获取id后,将id传参给后端即可实现删除
id:scope.row.id


新增:1.先在data方法中写一个对象,这里命名为addForm。2.对象内的键名与新增表单中的相应input绑定。3.通过v-model绑定input,将addForm中的键值赋给要传参给后端的键名。返回数据data后,重新渲染数据到表格中


编辑:



第一步,先将表格中当前行的数据,渲染到编辑表单中。
实现方法---与新增类似,先在data方法中写一个对象,这里命名为editForm。.对象内的键名与修改表单中的相应input绑定。将表单中的值赋给editForm中键名的值。




第二步,修改input内容后,将editForm中的键名,传参给后端。返回数据后,重新渲染表格。


查询:绑定input框。将input值传参给后端,返回数据渲染




2.传参给后端的3种形式
let data = {
id:'',
name:'',
phone:''
}



1. JSON格式, 直接将data作为参数传输

2. 表单格式, 需要用到  $qs.stringfiy(data)  转换


3. formdata 格式:一般用于文件图片的上传。


需要在axios请求中设置请求头

headers: { 'content-type': 'multipart/formdata' }



3. watch监听

监听单个值的变化:

userPhonr(newVal,oldVal){

//在此进行一些逻辑操作

}
监听多个值的变化:先在computed计算属性中,定义监听对象
computed:{
   watchUserPhone(){
     const {userPhone,userPwd} = this    //解构函数
    }
}
在watch中,
watch:{
   watchUserPhone(newVal,oldVal){
    //在此进行逻辑操作
    }
}

4.组件之间参数的传递
1.父传子:在父组件中 v-model 绑定数据 ,子组件中通过props接收参数
2.子传父:通过$emit和自定义on事件 传递
3.子孙传参
在祖组件中导入computed  通过解构
import {computed} from ’vue‘


非响应式传值
传送:
provide(){
return{
msg:this.msg
}
}
接收:
inject:[“msg”]

响应式传值
import {computed} from ‘vue’
传送:
provide(){
return{
msg:computed(()=>this.msg)
}
}

接收:
inject:[“msg”]

使用:pw_msg.value

5.路由传参
1.router-link :to = {path:'',query:name}
组件接收参数。$route.query.name
2.push 传参
$router.push({path:'',params:''})

6.formData 实现上传文件等
template:

<form action="" method="post" enctype="multipart/form-data" ref="form1">
  <input name="file" type="file">
</form>  

注:input中必须要有name ,否则无法上传

let form = this.$refs.form1
let formData = new FormData(form)
formData.append("id", this.subId)
 请求中设置请求头 { headers: { 'content-type': 'multipart/formdata' }
})

有待补充,初稿!



登录注册,限制手机登录验证
导航守卫beforEach
动态生成面包屑,通过meta元信息实现
动态生成nav-bar
等等


小魏学编程
新手
新手
  • 最后登录2021-11-22
  • 发帖数4
沙发#
发布于:2021-09-28 20:25
曾总666
游客


返回顶部

公众号

公众号