Vue第二次备份

2024-11-09 15:04:10 +00:00 · 2024-11-09 15:04:10 +00:00 · 0644caa46a
parent e8540d4e83
commit 0644caa46a
1 changed files with 133 additions and 0 deletions
--- a/APP-2.vue
+++ b/APP-2.vue
@ -0,0 +1,133 @@
+<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>