暑假生活每周总结9

本周继续进行了javaweb的练习。

进行了前端页面的学习。

<template>
  <div>
 <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-button type="primary" @click="xianshi">添加新的图书类</el-button>
            </el-form-item>
          </el-form>
<el-dialog
          title="添加"
          :visible.sync="dialogVisible"
          width="40%"
  >
    <el-form ref="form" :model="add_form" label-width="80px">
      <el-form-item label="书类别">
        <el-input v-model="add_form.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add" >提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
</el-dialog>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      type="index"
      width="300">
    </el-table-column>
    <el-table-column
      prop="name"
      label="类名"
      width="500">
    </el-table-column>
      <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="openDialog(scope.row)">编辑</el-button>
                <el-button
                  type="danger"
                  size="mini"
                  @click="deleted(scope.row.id)"
                  >删除</el-button>
              </template>
    </el-table-column>
  </el-table>
    <el-dialog
                  title="修改"
                  :visible.sync="dialogVisible_up"
                  width="40%"
          >
            <el-form ref="form" :model="update_dorm" label-width="80px">
              <el-form-item label="类别名">
                <el-input v-model="update_dorm.name"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="closeDialog">取消</el-button>
              </el-form-item>
            </el-form>

          </el-dialog>
  </div>
  
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
        dialogVisible: false, // 控制表单的显示与隐藏
        dialogVisible_up:false,
      tableData: [],
      add_form:{
        lei:1,
        name:'',
      },
      update_dorm:{
        name:"",
        id:''
      }
    };
  },
  methods: {
    //以下时修改的三个方法
      openDialog(row) {
        // Populate the form data with the corresponding row data
        this.update_dorm.name = row.name;
        this.update_dorm.id=row.id;
        // Show the dialog
        this.dialogVisible_up = true;
      },
      submitForm() {
        // Handle form submission logic
        var _this=this;
        axios({
          method: "put",
          //url: "http://localhost:8080/dome1/elServlet?method=add",
          url:"/api/books",
          data:_this.update_dorm
        }).then(function(resp){
          if (resp.data.msg=="success"){
            _this.dialogVisible_up = false;
            _this.selectAll();

            _this.$message({
              message: '成功修改',
              type: 'success'
            });
          }
        })
      },
      closeDialog() {
        // Reset the form and hide the dialog
        this.update_dorm = {};
        this.dialogVisible_up = false;
      },
    xianshi:function(){this.dialogVisible=true},
    add:function(){
var _this = this;
console.log(this.add_form)
      axios({
        method: "post",
        url:"/api/books",
        data:_this.add_form
      }).then(function (resp) {
        console.log(resp.data.msg)
        _this.selectAll();
        _this.dialogVisible=false;
        _this.add_form={};
      });
    },
    
    selectAll: function () {
      //发送异步请求,获取数据
      var _this = this;
      axios({
        method: "get",
        url:
          "/api/books"
      }).then(function (resp) {
        _this.tableData = resp.data.data;
        console.log(resp.data.data)
      });
    },
   deleted: function (id) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //确认
          var _this = this;
          axios({
            method: "delete",
            url:"/api/books/"+id,
          }).then(function (resp) {
            if (resp.data.msg == "success") {
              _this.selectAll();
              _this.$message({
                message: '删除成功',
                type: 'success'
              });
            }
          })
        }).catch(() => {
          //取消
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
  },
  mounted() {
    this.selectAll();
  },
};
</script>

<style>
</style>

对于组件和数据的学习，还有axios的请求处理。

后端分析处理的每个流程学习分析。