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>
浙公网安备 33010602011771号