day06 项目实践：router，axios

vue组件的生命周期钩子

今天几乎没有讲什么新内容，就是一起做项目，只有一个小小的知识点，就是关于vue组件的生命周期钩子，其中最重要的四个函数——

beforeCreate()：组件创建之间执行
created()：组件创建之后立即执行
beforeMount()：组件渲染前执行
mounted()：组件渲染完毕之后立即执行

项目

最终实现页面——

BankView.vue中负责前端页面显示和调用配置的请求函数——

发现表格的column里面可以嵌套template，template可以配置slot-scope，来指代当前表格，可以用scope.row的方式得到当前行的记录，以便获得记录的任何信息；

尝试了根据表格内容修改column的type，但是最终只是列了下拉表格中包含几个元素，不知道怎样获得当前记录所包含的数组有多少，而且后端查询的时候，如果是findById就查不到BankUser的内容，也就是bankUserList是null的，尝试过设一个计算属性来设置type，但是失败了，导致每一个下拉表格都打不开了

<template>
  <div>
    <h1>Bank View</h1>
    <el-button @click="find" type="primary">search</el-button>
    <el-button @click="add" type="primary">add</el-button>
    <br /><br /><br />
    <el-input v-model="inputValue" placeholder="请输入id"></el-input>
    <br /><br />
    <el-table :data="bankList" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.bankUserList" style="width: 100%">
            <el-table-column label="userName" prop="userName">
            </el-table-column>
            <el-table-column label="role" prop="role"> </el-table-column>
            <el-table-column label="realName" prop="realName">
            </el-table-column>
            <el-table-column label="password" prop="password">
            </el-table-column>
            <el-table-column label="phone" prop="phone"> </el-table-column>
            <el-table-column label="createTime" prop="createTime">
            </el-table-column>
            <el-table-column label="updateTime" prop="updateTime">
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="UserNum"  width="180">
        <template slot-scope="props">
        {{ props.row.bankUserList != null ? props.row.bankUserList.length : 0 }}
        </template>
      </el-table-column>
      <el-table-column label="bankId" prop="bankId" width="180">
      </el-table-column>
      <el-table-column label="bankName" prop="bankName" width="180">
      </el-table-column>
      <el-table-column label="bankPhone" prop="bankPhone" width="180">
      </el-table-column>
      <el-table-column label="introduce" prop="introduce" width="300">
      </el-table-column>
      <el-table-column label="money" prop="money" width="180">
      </el-table-column>
      <el-table-column label="rate" prop="rate" width="180"> </el-table-column>
      <el-table-column label="repayment" prop="repayment" width="180">
      </el-table-column>
      <!--  -->
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            @click="deleteBank(scope.row.bankId)"
            type="text"
            size="small"
            >删除</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="updateBank(scope.row.bankId)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--  添加的对话框-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="bankForm">
        <el-form-item
          label="bankName"
          :label-width="formLabelWidth"
          prop="bankName"
        >
          <el-input v-model="form.bankName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="bankPhone"
          :label-width="formLabelWidth"
          prop="bankPhone"
        >
          <el-input v-model="form.bankPhone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="introduce"
          :label-width="formLabelWidth"
          prop="introduce"
        >
          <el-input v-model="form.introduce" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="money" :label-width="formLabelWidth" prop="money">
          <el-input v-model="form.money" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="rate" :label-width="formLabelWidth" prop="rate">
          <el-input v-model="form.rate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="repayment"
          :label-width="formLabelWidth"
          prop="repayment"
        >
          <el-input v-model="form.repayment" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import bankApi from "../api/bank";

export default {
  name: "BankView",
  created() {
    this.findAndBankUser();
  },
  data() {
    return {
      bankList: [],
      bank: {},
      inputValue: "",
      dialogFormVisible: false, // 控制添加的对话框是否可见
      title: "",
      formLabelWidth: "100px",
      form: {
        bankName: "",
        bankPhone: "",
        introduce: "",
        money: "",
        rate: "",
        repayment: "",
      },
      rules: {
        bankName: [
          { required: true, message: "请输入银行名称", trigger: "blur" },
          {
            min: 2,
            max: 50,
            message: "长度在 2 到 50 个字符",
            trigger: "blur",
          },
        ],
        bankPhone: [
          { required: true, message: "请输入银行电话", trigger: "blur" },
          { min: 11, max: 11, message: "长度为11位", trigger: "blur" },
        ],
        introduce: [
          { required: true, message: "请输入银行介绍", trigger: "blur" },
          {
            min: 2,
            max: 200,
            message: "长度在 2 到 200 个字符",
            trigger: "blur",
          },
        ],
        money: [
          { required: true, message: "请输入银行存款金额", trigger: "blur" },
        ],
        rate: [{ required: true, message: "请输入银行利率", trigger: "blur" }],
        repayment: [
          { required: true, message: "请输入银行还款期限", trigger: "blur" },
        ],
      },
    };
  },
  computed:{
    expandMethod(row){
        if(row.bankUserList != null && row.bankUserList.length > 0){
            row.type = "expand";
        }else{
            row.type = "default";
        }
        return row.type;
    }
  },
  methods: {
    updateBank(id) {
      this.title = "编辑银行";
      this.dialogFormVisible = true;
      bankApi.findById(id).then((res) => {
        if (res.data.code == 200) {
          if (res.data.data == null) {
            this.infoMessage("数据库错误，请联系管理员");
          } else {
            this.form = res.data.data;
          }
        } else {
          this.errorMessage(res.data.message);
        }
      });
    },
    deleteBank(id) {
      this.$confirm("确定要删除编号为" + id + "的数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          bankApi.deleteBank(id).then((res) => {
            if (res.data.code == 200) {
              this.successMessage("删除了" + res.data.data + "条数据");
              this.findAndBankUser();
            } else {
              this.errorMessage(res.data.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    save() {
      // 验证表单
      this.$refs.bankForm.validate((validate) => {
        if (validate) {
          // 验证通过，可以提交数据
          if (this.form.bankId == null || this.form.bankId == 0) {
            bankApi.saveBank(this.form).then((res) => {
              if (res.data.code == 200) {
                this.successMessage("添加了" + res.data.data + "条数据");
                // this.successMessage();
                this.findAndBankUser();
              } else {
                this.errorMessage(res.data.message);
              }
            });
          } else {
            bankApi.updateBank(this.form).then((res) => {
              if (res.data.code == 200) {
                this.successMessage("修改了" + res.data.data + "条数据");
                this.findAndBankUser();
              } else {
                this.errorMessage(res.data.message);
              }
            });
          }

          this.dialogFormVisible = false;
          this.$refs.bankForm.resetFields(); //重置表单
        }
      });
    },
    cancel() {
      this.dialogFormVisible = false;
      this.$refs.bankForm.resetFields(); //重置表单
    },
    add() {
      this.title = "添加银行";
      this.dialogFormVisible = true;
      this.$refs.bankForm.resetFields(); //重置表单
    },
    find() {
      if (this.inputValue) {
        // alert(this.inputValue);
        this.findById();
      } else {
        this.findAndBankUser();
      }
    },
    findById() {
      bankApi.findById(parseInt(this.inputValue, 10)).then((res) => {
        // alert(parseInt(this.inputValue, 10));
        if (res.data.code == 200) {
            this.bank = res.data.data;
          if (this.bank != null) {
            
            this.$set(this, "bankList", []); // 清空原有数据
            this.bankList.push(this.bank);
          } else {
            this.infoMessage("没有找到该银行");
          }
        } else {
          this.errorMessage(res.data.message);
        }
      });
    },
    findAndBankUser() {
      bankApi.findAndBankUser().then((res) => {
        if (res.data.code == 200) {
          this.bankList = res.data.data;
        }
      });
    },
    successMessage(message) {
      this.$message({
        message: message,
        type: "success",
      });
    },
    infoMessage(message) {
      this.$message({
        message: message,
        type: "warning",
      });
    },
    errorMessage(message) {
      this.$message.error(message);
    },
  },
};
</script>

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
    })
}