<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>
