<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- element-plus-->
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
<!-- import JavaScript -->
<script src="https://unpkg.com/element-plus"></script>
<link rel="stylesheet" href="login-elementplus.css">
</head>
<body>
<div id="app">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item >
<el-input v-model="username" placeholder="用户名" clearable />
</el-form-item>
<el-form-item >
<el-input v-model="password" placeholder="密码" clearable />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="refFun">提交</el-button>
</el-form-item>
</el-form>
</div>
<script>
const { ElMessage } = ElementPlus;
const { createApp, ref, reactive } = Vue;
const username = ref('');
const password = ref('');
createApp({
setup() {
//写完函数也要去注册
function refFun() {
axios.post('http://192.168.5.220:8083/system/register', {
username: username.value,
password: password.value
})
.then(function (response) {
ElMessage({
message: response.data,
type: 'success',
});
})
.catch(function (error) {
ElMessage.error(error)
});
}
return {
username,
password,
refFun,
}
}
}).use(ElementPlus).mount('#app')
</script>
</body>
</html>
附加css:
body{
background-color: dimgrey;
}
#app{
background-color: white;
height: 200px;
width: 500px;
left: 500px;
top:150px;
position: absolute;
border-radius: 10px;
padding: 50px 30px;
border: 2px solid red;
}