Vue+Element UI实现CRUD

vue.config.js

//导入defineConfig函数
const { defineConfig } = require('@vue/cli-service')
//将defineConfig函数的结果导出
module.exports = defineConfig({
  //转译依赖项
  transpileDependencies: true,
  //开发服务器配置
  devServer: {
    //指定服务器端口
    port: 9090,
    //配置代理服务器
    proxy: {
      //触发代理的路径前缀
      '/api': {
        //指定API请求应发送到的目标URL
        target: 'http://localhost:8080',
        //改变请求的源
        changeOrigin: true
      }
    }
  }
})

student.js

import axios from "axios";

//分页条件查询
export function page(pageNum, pageSize, name, sex) {
    return axios({
        url: '/api/student/findByPage?pageNum=' + pageNum + '&pageSize=' + pageSize + '&name=' + name + '&sex=' + sex,
        method: 'get'
    })
}

//新增
export function add(student) {
    return axios({
        url: '/api/student/add',
        method: 'post',
        data: student
    })
}

//编辑
export function edit(student) {
    return axios({
        url: '/api/student/edit',
        method: 'put',
        data: student
    })
}

//删除
export function remove(id) {
    return axios({
        url: `/api/student/remove/${id}`,
        method: 'delete'
    })
}

Student.vue

<template>
  <div>
    <!-- 搜索框：通过v-model双向绑定输入框的值，筛选学生的姓名和性别 -->
    <el-input v-model="records.name" placeholder="请输入姓名" class="search-box" clearable></el-input>
    <el-select v-model="records.sex" placeholder="请选择性别" class="search-box" clearable>
      <el-option label="男" value="男"></el-option>
      <el-option label="女" value="女"></el-option>
    </el-select>
    <!-- 查询按钮：点击触发query()方法，查询学生信息 -->
    <el-button type="primary" @click="query()">查询</el-button>
    <!-- 新增按钮：点击触发add()方法，打开编辑对话框用于新增学生信息 -->
    <el-button type="primary" @click="add()">新增</el-button>
    <!-- 分隔线：分隔查询区域和学生信息展示区域 -->
    <el-divider></el-divider>
    <!-- 学生信息表格：通过v-bind:data绑定学生数据列表，通过el-table-column定义表格的列 -->
    <el-table v-bind:data="students">
      <!-- 展示学生的编号、姓名、性别和生日，每一列通过prop属性绑定到相应数据字段 -->
      <el-table-column label="编号" prop="id"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="性别" prop="sex"></el-table-column>
      <el-table-column label="生日" prop="birthday"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <!-- 编辑按钮：点击触发edit()方法，打开编辑对话框用于编辑学生信息 -->
          <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
          <!-- 删除按钮：点击触发remove()方法，删除学生信息 -->
          <el-button @click="remove(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件，其属性包括：总记录数、每页显示条数、当前页码、分页布局、
         每页显示条数列表、当前页码改变事件监听器、每页显示条数改变事件监听器 -->
    <el-pagination :total="total" :page-size="records.pageSize" :current-page="records.pageNum"
                   layout="prev,pager,next,sizes,->,total" :page-sizes="[5, 10, 15, 20]" @current-change="currentChange"
                   @size-change="sizeChange"></el-pagination>

    <!-- 学生信息编辑对话框 -->
    <el-dialog title="学生信息" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="编号">
          <el-input v-model="form.id" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.sex">
            <el-option value="男"></el-option>
            <el-option value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker v-model="form.birthday" type="date" value-format="yyyy-MM-dd"
                          placeholder="选择日期" style="width: 180px;"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <!-- 确定按钮：点击触发save()方法，保存学生信息 -->
          <el-button type="primary" @click="save()">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
//引入API模块
import {page, add, edit, remove} from '@/api/student'
const options = {
  mounted() {
    this.query() //页面加载时自动执行查询
  },
  data() {
    return {
      students: [], //学生数据列表
      total: 0, //总记录数
      dialogVisible: false, //编辑对话框的可见性
      //当前编辑的学生信息
      form: {
        id: 0,
        name: "",
        sex: "",
        birthday: ""
      },
      //查询条件
      records: {
        id: 0,
        name: "",
        sex: "",
        birthday: "",
        pageNum: 1, //当前页码
        pageSize: 5 //每页显示条数
      }
    }
  },
  methods: {
    //当前页码改变时触发，更新records.pageNum并重新查询
    currentChange(pageNum) {
      this.records.pageNum = pageNum;
      this.query();
    },
    //每页显示条数改变时触发，更新records.pageSize并重新查询
    sizeChange(pageSize) {
      this.records.pageSize = pageSize;
      this.query();
    },
    //新增
    add() {
      this.dialogVisible = true
      this.form = {};
    },
    //编辑
    edit(row) {
      this.form = {...row};
      this.dialogVisible = true
    },
    //保存
    async save() {
      if (this.form.id) { //如果存在id，则编辑信息
        edit(this.form).then(() => {
          this.dialogVisible = false
          this.query()
        })
      } else { //如果不存在id，则新增信息
        add(this.form).then(() => {
          this.dialogVisible = false
          this.query()
        })
      }
    },
    //删除
    async remove(id) {
      console.log(id)
      try {
        //弹窗确认删除操作
        await this.$confirm('此操作将永久删除该数据, 是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        //执行删除操作
        await remove(id)
        //查询更新后的数据
        await this.query()
      } catch (e) {
        console.log('取消删除', e)
      }
    },
    //查询
    async query() {
      //调用page方法，传递指定参数，await关键字使该函数暂停执行，直到page方法返回的Promise被解决，并将结果赋值给resp变量
      const resp = await page(this.records.pageNum, this.records.pageSize, this.records.name, this.records.sex)
      this.students = resp.data.data.records; //将records属性的值赋给this.students，更新学生列表
      this.total = resp.data.data.totalRow;   //将totalRow属性的值赋给this.total，更新总记录数
    }
  }
}
export default options
</script>

<style scoped> /* 样式仅应用于当前组件的元素 */
.search-box {
  width: 180px;
  margin: 10px;
}
.el-input,
.el-select {
  width: 180px;
}
</style>