133 lines
2.7 KiB
Vue
133 lines
2.7 KiB
Vue
<script setup>
|
|
import {
|
|
ref,
|
|
onMounted,
|
|
reactive
|
|
} from 'vue';
|
|
import axios from 'axios'
|
|
|
|
const studentList = ref(null)
|
|
//生命周期方法 直接执行
|
|
onMounted(() => {
|
|
myClick()
|
|
})
|
|
// 查询
|
|
function myClick() {
|
|
axios({
|
|
//不带参数
|
|
method: 'GET',
|
|
url: 'http://127.0.0.1:8080/student/studentlist',
|
|
}).then(res => {
|
|
console.log(res.data)
|
|
//TODO 显示数据
|
|
studentList.value = res.data.data
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
}
|
|
//删除
|
|
function deleteStudent(row) {
|
|
console.log(row)
|
|
axios({
|
|
//带参数
|
|
method: 'POST',
|
|
url: 'http://127.0.0.1:8080/student/deleteStudent',
|
|
params: {
|
|
id: row.id
|
|
}
|
|
}).then(res => {
|
|
console.log(res.data)
|
|
myClick()
|
|
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
}
|
|
|
|
const dialogVisible = ref(false)
|
|
const form = reactive({
|
|
id: null,
|
|
age: 0,
|
|
name: ''
|
|
})
|
|
//编辑
|
|
function updataStudent(row) {
|
|
console.log(row)
|
|
dialogVisible.value = true
|
|
//row --> form
|
|
Object.assign(form,row)
|
|
}
|
|
|
|
//更新
|
|
function updataNewStudent(){
|
|
axios({
|
|
//带参数
|
|
method: 'POST',
|
|
url: 'http://127.0.0.1:8080/student/updateStudent',
|
|
params: form
|
|
}).then(res => {
|
|
console.log(res.data)
|
|
dialogVisible.value = false
|
|
myClick()
|
|
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
}
|
|
|
|
//增加
|
|
function addStudent(){
|
|
dialogVisible.value = true
|
|
Object.assign(form,{
|
|
id: null,
|
|
age: 0,
|
|
name: ''
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 增删改查 -->
|
|
|
|
<el-button @click="addStudent">增加</el-button>
|
|
|
|
<el-table :data="studentList" border stripe style="width: 100%">
|
|
<el-table-column prop="id" label="id" width="180" />
|
|
<el-table-column prop="age" label="年龄" width="180" />
|
|
<el-table-column prop="name" label="姓名" />
|
|
<el-table-column fixed="right" label="操作" min-width="120">
|
|
<template #default="{row}">
|
|
<el-button link type="danger" size="small" @click="deleteStudent(row)">
|
|
删除
|
|
</el-button>
|
|
<el-button link type="primary" size="small" @click="updataStudent(row)">
|
|
编辑
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<el-dialog v-model="dialogVisible" title="增加和编辑用户功能" width="500" :before-close="handleClose">
|
|
<el-form :model="form" label-width="auto" style="max-width: 600px">
|
|
<el-form-item label="id">
|
|
<el-input disabled v-model="form.id" />
|
|
</el-form-item>
|
|
<el-form-item label="年龄">
|
|
<el-input v-model="form.age" />
|
|
</el-form-item>
|
|
<el-form-item label="姓名">
|
|
<el-input v-model="form.name" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="updataNewStudent()"> 确定 </el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
|
|
</template>
|
|
|
|
<style> |