Vue第一次备份

2024-11-09 15:03:51 +00:00 · 2024-11-09 15:03:51 +00:00 · e8540d4e83
parent 200c50b03a
commit e8540d4e83
1 changed files with 103 additions and 0 deletions
--- a/App-1.vue
+++ b/App-1.vue
@ -0,0 +1,103 @@
+<script setup>
+import {ref,onMounted} from 'vue'
+import axios from 'axios';
+const msg = ref("hello world")
+//生命周期方法
+onMounted(() => {
+	console.log("onMounted")
+	myClick()
+})
+const studentList = ref(null)
+function myClick(){
+	axios({
+		method:'GET',
+		url:'http://127.0.0.1:8080/student/studentlist'
+	}).then(res =>{
+		console.log(res.data)
+		studentList.value = res.data.data
+	}).catch(err =>{
+		console.log(err)
+	})
+}
+function login(){
+	axios({
+		method:'POST',
+		url:'http://127.0.0.1:8080/student/login',
+		params:{
+			username:username.value,
+			password:password.value
+		}
+	}).then(res =>{
+		console.log(res.data)
+		if(res.data.code==0){
+			alert(res.data.msg)
+		}else{
+			alert(res.data.msg)
+		}
+	}).catch(err =>{
+		console.log(err)
+	})
+}
+const handlesucess=(response,file,fileList)=>{
+	console.log(response)
+}
+const mycolor = ref("red")
+const username = ref('')
+const password = ref('')
+</script>
+
+<template>
+	<el-table :data="studentList" 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>
+
+
+<el-button type="danger" round plain  @click="myClick">点击</el-button>
+<el-row>
+	<el-col :span="8"></el-col>
+	<el-col :span="8">
+		<el-input type="text" v-model="username"/>
+	</el-col>
+</el-row>
+<el-row>
+	<el-col :span="8"></el-col>
+	<el-col :span="8">
+		<el-input type="text" v-model="password"/>
+	</el-col>
+</el-row>
+
+<el-button @click="login">登录</el-button>
+<el-upload
+    class="upload-demo"
+    drag
+	:on-succes="handlesucess"
+    action="http://127.0.0.1:8080/student/uploadcommit"
+    multiple
+  >
+    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+    <div class="el-upload__text">
+      Drop file here or <em>click to upload</em>
+    </div>
+    <template #tip>
+      <div class="el-upload__tip">
+        jpg/png files with a size less than 500kb
+      </div>
+    </template>
+  </el-upload>
+</template>
+
+
+<style>
+.red{
+	background-color: red;
+	width: 100px;
+	height: 100px;
+}
+.blue{
+	background-color: blue;
+	width: 100px;
+	height: 100px;
+}
+</style>