今天几乎没有讲什么新内容,就是一起做项目,只有一个小小的知识点,就是关于vue组件的生命周期钩子,其中最重要的四个函数——
beforeCreate():组件创建之间执行
created():组件创建之后立即执行
beforeMount():组件渲染前执行
mounted():组件渲染完毕之后立即执行
最终实现页面——
BankView.vue中负责前端页面显示和调用配置的请求函数——
发现表格的column里面可以嵌套template,template可以配置slot-scope,来指代当前表格,可以用scope.row的方式得到当前行的记录,以便获得记录的任何信息;
尝试了根据表格内容修改column的type,但是最终只是列了下拉表格中包含几个元素,不知道怎样获得当前记录所包含的数组有多少,而且后端查询的时候,如果是findById就查不到BankUser的内容,也就是bankUserList是null的,尝试过设一个计算属性来设置type,但是失败了,导致每一个下拉表格都打不开了
Bank View
search add
{{ props.row.bankUserList != null ? props.row.bankUserList.length : 0 }} 删除 编辑 取 消 保 存
bank.js中创建请求函数——
要注意有四种请求方式:
get(查找,需要后端@RequestParam,或使用@PathVariable,前端传参params)、
post(添加,后端需要@RequestBody,前端传参data)、
put(修改,后端需要@RequestBody,前端传参data)、
delete(删除,需要后端@RequestParam,或使用@PathVariable,前端传参params)
还有注意参数名要前后端对应!!!不然就执行不了
import request from '../utils/request'; export default{findById,findAndBankUser,saveBank,deleteBank,updateBank} function findById(id) { return request({ url:'/bank/findById', method:'get', params:{bankId:id} }) } function findAndBankUser(){ return request({ url:'bank/findAndBankUser', method:'get' }) } function saveBank(bank){ return request({ url:'bank/save', method:'post', data:bank }) } function deleteBank(id){ return request({ url:'bank/delete', method:'delete', params:{bankId:id} }) } function updateBank(bank){ return request({ url:'bank/update', method:'put', data:bank }) }