|
阅读：5013回复：1
vue后台管理系统项目中使用的一些技术
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 等等 。 。 。 |
|
公众号
