170 lines
5.9 KiB
HTML
170 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Admin Console</title>
|
||
<link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
|
||
<link rel="bookmark" href="/assets/favicon.ico" type="image/x-icon" />
|
||
<link href="/assets/vuetify/vuetify.min.css" rel="stylesheet" />
|
||
<link href="/assets/vuetify/materialdesignicons.min.css" rel="stylesheet">
|
||
|
||
|
||
<script src="/assets/vue/vue.min.js"></script>
|
||
<script src="/assets/vuetify/vuetify.min.js"></script>
|
||
<script src="/assets/axios/axios.min.js"></script>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
|
||
<style>
|
||
.align_center {
|
||
max-width: 400px;
|
||
/* 设置表单的宽度 */
|
||
margin: 0 auto;
|
||
/* 设置 margin 的值为 0 auto，实现居中 */
|
||
background-color: #f4f4f4;
|
||
/*设置背景颜色*/
|
||
padding: 20px;
|
||
/*设置内边距*/
|
||
border-radius: 10px;
|
||
/* 设置圆角 */
|
||
box-shadow: 0 0 10px #ccc;
|
||
/* 设置阴影效果 */
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="app"></div>
|
||
|
||
</body>
|
||
<script type="text/x-template" id="app-template">
|
||
<v-app>
|
||
<v-main>
|
||
<div class="align_center">
|
||
<div >
|
||
<img src="/assets/admin_logo.svg" alt="" max-width="200" style="display:block;margin:auto;"/>
|
||
</div>
|
||
<v-alert color="error" type="error" color="red lighten-2" v-if="errorMsg">
|
||
{{errorMsg}}
|
||
</v-alert>
|
||
<v-form ref="form" v-model="valid" lazy-validation action="/admin/login" method="post">
|
||
<v-text-field
|
||
v-model="username"
|
||
:rules="requiredRules"
|
||
label="账号"
|
||
required
|
||
name="username"
|
||
@keyup.enter="login"
|
||
autocomplete="iris-username"
|
||
id="iris-username"
|
||
></v-text-field>
|
||
<v-text-field
|
||
v-model="password"
|
||
:rules="requiredRules"
|
||
label="密码"
|
||
required
|
||
type="password"
|
||
name="password"
|
||
@keyup.enter="login"
|
||
autocomplete="iris-password"
|
||
id="iris-password">
|
||
</v-text-field>
|
||
<v-text-field
|
||
v-model="captcha"
|
||
:rules="requiredRules"
|
||
label="验证码"
|
||
required
|
||
name="captcha"
|
||
@keyup.enter="login"
|
||
id="iris-captcha">
|
||
</v-text-field>
|
||
<img :src="captchaBase64" alt='' @click="refreshCaptcha"/>
|
||
|
||
<div><v-btn class="mr-4" @click="login">登录</v-btn></div>
|
||
</v-form>
|
||
|
||
</div>
|
||
</v-main>
|
||
</v-app>
|
||
</script>
|
||
|
||
<script>
|
||
new Vue({
|
||
el: '#app',
|
||
template: '#app-template',
|
||
data: {
|
||
captchaBase64: '#{.captchaBase64 }',
|
||
errorMsg: "#{.errorMsg}",
|
||
valid: true,
|
||
requiredRules: [
|
||
v => !!v || '不能为空',
|
||
],
|
||
|
||
username: "",
|
||
password: "",
|
||
captcha: '#{.captcha}'
|
||
},
|
||
methods: {
|
||
refreshCaptcha() {
|
||
console.log("获取验证码");
|
||
axios.get('/admin/login/refreshcaptcha')
|
||
.then((response) => {
|
||
console.log(response);
|
||
let data = response.data.data
|
||
return data
|
||
}).then((data) => {
|
||
this.captchaBase64 = data
|
||
|
||
})
|
||
},
|
||
login() {
|
||
let validate = this.$refs.form.validate()
|
||
if (validate) {
|
||
// console.log(this.$refs.form);
|
||
localStorage.setItem("username", this.username)
|
||
localStorage.setItem("password", this.password)
|
||
this.$refs.form.$el.submit()
|
||
// axios.post('/admin/login', {
|
||
// username: this.username,
|
||
// password: this.password,
|
||
// captcha: this.captcha,
|
||
// })
|
||
// .then((response) => {
|
||
// // console.log(response);
|
||
// let data = response.data
|
||
// return data
|
||
// }).
|
||
// then((data) => {
|
||
// console.log(data)
|
||
// if (data.code !== 200) {
|
||
// this.errorMsg = data.msg
|
||
// this.refreshCaptcha()
|
||
// return
|
||
// }
|
||
// this.errorMsg = null
|
||
// location.href = "/admin"
|
||
|
||
// })
|
||
// .catch(function (error) {
|
||
// console.log(error);
|
||
// });
|
||
}
|
||
},
|
||
},
|
||
mounted() {
|
||
// console.log(this.captchaBase64);
|
||
if (!this.captchaBase64) {
|
||
this.refreshCaptcha()
|
||
}
|
||
|
||
if (!this.username) {
|
||
this.username = localStorage.getItem("username")
|
||
this.password = localStorage.getItem("password")
|
||
}
|
||
|
||
},
|
||
vuetify: new Vuetify(),
|
||
})
|
||
|
||
</script>
|
||
|
||
</html> |