51 lines
1.1 KiB
Vue
51 lines
1.1 KiB
Vue
<template>
|
|
<div class="login-wrapper">
|
|
<form @submit="onLogin">
|
|
<p>
|
|
<input placeholder="请输入账号" type="text" v-model="data.account">
|
|
</p>
|
|
<p>
|
|
<input placeholder="请输入密码" type="text" v-model="data.password">
|
|
{{ data.password }}
|
|
</p>
|
|
<button type="submit">登录</button>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {reactive} from "vue";
|
|
import http from "../util/http";
|
|
|
|
export default {
|
|
name: "User",
|
|
setup() {
|
|
// vue 数据双向绑定(响应式原理)
|
|
// vue2 Object.definedProperty
|
|
// vue3 Proxy
|
|
const data = reactive({
|
|
account: '',
|
|
password: ''
|
|
})
|
|
|
|
function onLogin(e: Event) {
|
|
e.preventDefault()
|
|
http.post('/admin/user/login', data).then(result => {
|
|
console.log(result)
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
}
|
|
|
|
return {
|
|
data, onLogin
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.login-wrapper {
|
|
|
|
}
|
|
</style> |