20230419前端查询列表添加新字段,实现删除功能,增加功能 2023年4月19日
java项目组
vue的created和methods哪个先执行

在Vue中，created和methods是两个不同的生命周期钩子和实例方法，它们分别在不同的时机被执行。

created是Vue实例在创建完成后立即调用的生命周期钩子，它在实例被创建之后立即执行，这意味着在created钩子函数执行时，Vue实例已经完成了数据观测、属性和方法的运算、事件回调的初始化等一系列的操作。

methods是Vue实例中定义的方法，用于处理用户交互或响应数据变化等功能。methods可以在Vue实例创建后被调用，可以通过this关键字来访问Vue实例中的数据和其他方法。

由于created钩子函数是在Vue实例创建完成后立即执行的，因此created钩子函数执行的时候，methods已经被定义了，也就是说methods比created先执行。也就是说，当Vue实例创建完成后，created钩子函数会被立即调用，然后才会执行methods中的方法。

需要注意的是，在Vue中，created钩子函数只会在实例创建时执行一次，而methods中的方法可以被多次调用。

vue的生命周期有哪些

在Vue中，一个组件实例从创建到销毁的过程中，会触发一系列的生命周期钩子函数，这些钩子函数可以让我们在不同的阶段执行一些特定的逻辑，方便我们进行状态管理、数据操作、DOM更新等操作。Vue的生命周期可以分为以下八个阶段：

  1. beforeCreate: 在实例被创建之初，数据观测和属性初始化之前执行。
  2. created: 在实例被创建之后，数据观测和属性初始化完成之后执行。
  3. beforeMount: 在模板编译和挂载之前执行。
  4. mounted: 在模板编译和挂载完成之后执行。
  5. beforeUpdate: 在数据更新之前，DOM被重新渲染之前执行。
  6. updated: 在数据更新之后，DOM被重新渲染之后执行。
  7. beforeDestroy: 在实例被销毁之前执行，此时实例仍然可用。
  8. destroyed: 在实例被销毁之后执行，此时实例已经不可用。

除了这些钩子函数之外，还有一些其他的钩子函数，例如activated和deactivated，用于处理组件的keep-alive状态。

需要注意的是，每个生命周期钩子函数都有特定的用途和执行时机，使用不当可能会导致一些问题，因此在使用时需要结合具体场景进行选择和合理使用。

 

实例被创建之后的流程图

查询逻辑,点击下面图片可以放大

删除逻辑

删除功能

vue代码

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="id"
      label="id"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="名字"
      width="180">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄"
      width="180">
    </el-table-column>
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="text"
          icon="el-icon-edit"
          @click="handleUpdate(scope.row)"
        >修改</el-button>
        <el-button
          size="mini"
          type="text"
          icon="el-icon-delete"
          @click="handleDelete(scope.row.id)"
        >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import { listNotice, delNotice } from "@/api/student/student";
export default {
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询学生列表 */
    getList() {
      listNotice().then(response => {
        this.tableData = response.data;
      });
    },
    /** 点击删除按钮 */
    handleDelete(id){
      console.log(id)
      this.$modal.confirm('是否确认删除学生编号为"' + id + '"的数据项？').then(function() {
        return delNotice(id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    }
  }
}
</script>
<style>
</style>

js代码

import request from '@/utils/request'
// 查询列表
export function listNotice(query) {
  return request({
    url: '/student/student/list',
    method: 'get',
    params: query
  })
}
// 删除学生
export function delNotice(id) {
  return request({
    url: '/student/student/delete?id=' + id,
    method: 'get'
  })
}

增加功能

vue代码

<template>
  <div>
    <el-button type="primary" @click="addBtn()">添加</el-button>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名字"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="180">
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="学生姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学生年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="formOk()">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>
<script>
import { listNotice,delNotice,addNotice } from "@/api/student/student";
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible : false,
      form : {}
    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询公告列表 */
    getList() {
      listNotice().then(response => {
        this.tableData = response.data;
      });
    },
    /** 点击删除按钮 */
    handleDelete(id){
      this.$modal.confirm('是否确认删除学生编号为"' + id + '"的数据项？').then(function() {
        return delNotice(id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 点击确定按钮事件 */
    formOk(){
      addNotice(this.form).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.dialogFormVisible = false;
        this.getList();
      });
    },
    /** 点击添加事件 */
    addBtn(){
      this.form = {};
      this.dialogFormVisible = true
    }
  }
}
</script>
<style>
</style>

js代码

import request from '@/utils/request'
// 查询列表
export function listNotice(query) {
  return request({
    url: '/student/student/list',
    method: 'get',
    params: query
  })
}
// 删除学生
export function delNotice(id) {
  return request({
    url: '/student/student/delete?id=' + id,
    method: 'get'
  })
}
// 新增学生
export function addNotice(data) {
  return request({
    url: '/student/student/add',
    method: 'post',
    data: data
  })
}