day07 项目启动以及git

spring框架

spring 负责整合各种框架，把new对象的部分交给spring去做，对象new不出来，项目就启动不起来，这样可以有效保证所需要的对象都在容器中存在，后续的部分都可以顺利执行
控制反转：业务对象创建依赖资源的控制权反转给容器
依赖注入：容器把业务对象依赖的资源注入到业务对象

容器：IOC容器
业务对象：servlet/action/controller
依赖资源：service

mybatis用于取代dao层

git

用于版本控制，程序员们每天将自己写的代码传入git仓库里，
add将修改过的文件添加到Git的暂存区（staging area），这是准备提交的第一步；
再commit将暂存区的更改提交到本地仓库，这样更改就被保存在本地的版本历史中；
如果有需求也可以push将本地仓库的更改推送到远程仓库，通常是在团队协作时，将个人的更改共享给其他团队成员；
使用pull从远程仓库拉取最新的更改到本地仓库，这通常发生在开始工作前，以确保你的代码库是最新的。

commit到git的安装特别简单，一直点击下一步即可，通常使用bash命令行来运行这样比较快。

常用操控的命令行指令——

git clone http仓库网址 + 输入华为云用户名、密码可以将本地项目和git仓库联系起来
git cat hello.txt 看到文件的内容
git pwd 看到当前所在的目录
git add hello.txt 不用加引号
git status 获取当前你提交的文件
git log 看你是不是有任何的commit
--引号 必须英文的！！！
git commit [hello.txt] -m "add new file hello.txt" 上传到华为云仓库,“-m”不能省略！！！
用 git pull origin master 来更新本地的文件

debug

解决之前提出的下拉表格无法根据某一行的内容来决定是否显示表格的问题~！

具体就是根据每一行（记录）UserNum的计算值判断点击下拉之后是否可以显示表格，如果UserNum>0，就可以显示，如果=0就不显示表格。

因为UserNum也是计算得到的，所以不能和别的列一样直接从对象中获取，想了很多种方法tree-props属性还是v-if都不行，但是解决方法其实很简单，就是下拉列代码内部加一层div嵌套在template内部，再使用v-show，直接判断每一行（记录/对象）所包含的对象数组的长度即可，而并不能根据UserNum来判断

如图圈住的代码换成——

<div v-show="props.row.bankUserList != null&& props.row.bankUserList.length > 0">

附上完整代码——

<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" >
          <div v-show="props.row.bankUserList != null&& props.row.bankUserList.length > 0">
          <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>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="UserNum"  width="180">
        <template slot-scope="props">
        {{ props.row.bankUserList != null ? props.row.bankUserList.length : null }}
        </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" },
        ],
      },
    };
  },
  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>