全栈开发实战小草看书之Web端(九)登录
代码文件(pages/home/Login.vue)
<template>
<div class="background center">
<el-form ref="form" :model="data" :rules="rules" :show-message="false" @keyup.enter="login">
<el-form-item prop="userName">
<el-input v-model="data.userName" maxlength="20" prefix-icon="user"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="data.password" maxlength="50" show-password prefix-icon="lock" @keyup.enter="login"></el-input>
</el-form-item>
<el-form-item>
<div class="row-center">
<el-button type="primary" @click="login">登录</el-button>
</div>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import { useGet, usePost } from "@/http";
export default {
setup() {
const router = useRouter();
const store = useStore();
const state = reactive({
form: null,
data: {
userName: "admin",
password: "",
},
rules: {
userName: {
required: true,
message: "请输入用户名",
trigger: "blur",
},
password: {
required: true,
message: "请输入密码",
trigger: "blur",
},
},
});
const login = () => {
state.form.validate(async (valid) => {
if (valid) {
const user = await usePost("/mgt/login", state.data);
if (user) {
store.commit("saveUser", {
userName: user.userName,
token: user.token,
});
store.commit("saveResources", await useGet("/mgt/sys/resources/search?type=1"));
router.push("/");
} else {
ElMessage.error("用户名或密码错误");
}
} else {
ElMessage.error("请输入用户名或密码");
}
});
};
return {
...toRefs(state),
login,
};
},
};
</script>
上一章 【全栈开发实战小草看书之Web端(八)主入口】
下一章 【全栈开发实战小草看书之Web端(十)布局】