155 lines
3.9 KiB
Vue
155 lines
3.9 KiB
Vue
<template>
|
|
<div class="loginPage">
|
|
<el-row class="loginItem">
|
|
<el-form
|
|
:inline="false"
|
|
:model="ruleForm"
|
|
label-position="right"
|
|
class="formItem"
|
|
:rules="rules"
|
|
ref="ruleForm"
|
|
>
|
|
<el-col :span="8" :xs="24" :sm="24" :md="8" :lg="8">
|
|
<el-form-item
|
|
label="用户名："
|
|
label-width="100px"
|
|
prop="username"
|
|
style="padding-right: 20px"
|
|
>
|
|
<el-input
|
|
v-model="ruleForm.username"
|
|
placeholder="请输入用户名"
|
|
class="usernameClass"
|
|
></el-input> </el-form-item
|
|
></el-col>
|
|
|
|
<el-col
|
|
:span="8"
|
|
:xs="24"
|
|
:sm="24"
|
|
:md="8"
|
|
:lg="8"
|
|
style="padding-right: 20px"
|
|
>
|
|
<el-form-item label="密码：" label-width="100px" prop="pwd">
|
|
<el-input
|
|
placeholder="请输入密码"
|
|
v-model="ruleForm.pwd"
|
|
show-password
|
|
class="usernameClass"
|
|
></el-input> </el-form-item
|
|
></el-col>
|
|
<el-col :span="8" :xs="24" :sm="24" :md="8" :lg="8">
|
|
<el-form-item>
|
|
<el-button type="primary" round @click="submitForm('ruleForm')"
|
|
>登录</el-button
|
|
>
|
|
</el-form-item></el-col
|
|
>
|
|
</el-form>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { apis } from "../../api/index";
|
|
// console.log(apis);
|
|
export default {
|
|
data() {
|
|
return {
|
|
formInline: {},
|
|
ruleForm: {
|
|
username: "",
|
|
pwd: "",
|
|
},
|
|
rules: {
|
|
username: [
|
|
{ required: true, message: "请输入用户名", trigger: "blur" },
|
|
{ min: 6, message: "用户名不得少于6字符", trigger: "blur" },
|
|
],
|
|
pwd: [
|
|
{ required: true, message: "请输入密码", trigger: "blur" },
|
|
{ min: 6, message: "密码不得少于6字符", trigger: "blur" },
|
|
],
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
userLogin() {
|
|
let that = this;
|
|
that
|
|
.$http({
|
|
// 利用实际后端服务的
|
|
method: apis.user.login.method,
|
|
url: apis.user.login.url,
|
|
params: {
|
|
username: that.ruleForm.username,
|
|
password: that.ruleForm.pwd,
|
|
},
|
|
//利用mock的
|
|
// method: "POST", // 使用 POST 方法
|
|
// url: "/login", // 使用 mock 接口路径
|
|
// data: {
|
|
// username: that.ruleForm.username,
|
|
// password: that.ruleForm.pwd,
|
|
// },
|
|
})
|
|
.then((response) => {
|
|
that.$message.closeAll();
|
|
that.$message({
|
|
message: "登陆成功",
|
|
type: "success",
|
|
});
|
|
that.$store.commit("setToken", response.data.data);
|
|
console.log("res", response);
|
|
that.$router.push("/");
|
|
})
|
|
.catch((error) => {
|
|
console.log("error", error.message);
|
|
console.log("error", error);
|
|
that.$message.error(error.message);
|
|
});
|
|
},
|
|
submitForm(formName) {
|
|
let that = this;
|
|
console.log(that.$refs);
|
|
that.$refs[formName].validate((valid) => {
|
|
if (valid) {
|
|
that.userLogin();
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
},
|
|
|
|
// mounted() {
|
|
// console.log("*******", this.$http);
|
|
// this.userLogin();
|
|
// },
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.loginPage {
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
// background-color: aquamarine;
|
|
.loginItem {
|
|
width: 100%;
|
|
// background-color: antiquewhite;
|
|
.formItem {
|
|
width: 100%;
|
|
// background-color: yellow;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
</style> |