用户登录测试基本完成
This commit is contained in:
@@ -33,7 +33,7 @@
|
||||
</div>
|
||||
<div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;">
|
||||
<el-card class="box-card" style="width: 13vw">
|
||||
<el-button type="info" plain @click="loginDialogVisible = true">登 录</el-button>
|
||||
<el-button type="info" plain @click="openLogin()">登 录</el-button>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card" style="margin-top: 20px;width: 13vw">
|
||||
@@ -75,7 +75,7 @@
|
||||
<i slot="suffix" :class="icon" @click="showPass"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-form-item prop="code" style="display: flex;flex-wrap: nowrap;flex-direction: row;">
|
||||
<el-input
|
||||
prefix-icon="el-icon-mobile-phone"
|
||||
type="text"
|
||||
@@ -83,13 +83,16 @@
|
||||
v-model="ruleForm.code"
|
||||
class="vertify_code"
|
||||
auto-complete="false"
|
||||
style="width: 15vw"
|
||||
style="width: 15.8vw"
|
||||
></el-input>
|
||||
<!-- <span class="code">验证码</span> -->
|
||||
<img :src="imageUrl" @click="resetImg" class="vertify_img"/>
|
||||
</el-form-item>
|
||||
<div style="display: flex;flex-direction: row;justify-content: space-between">
|
||||
<el-checkbox v-model="checked" class="remeberMe">记住我</el-checkbox>
|
||||
<el-form-item prop="remember">
|
||||
<el-checkbox v-model="ruleForm.remember" class="remember">记住我</el-checkbox>
|
||||
</el-form-item>
|
||||
|
||||
<el-link type="success" @click="registerFun()">没有账户？去注册!</el-link>
|
||||
</div>
|
||||
|
||||
@@ -116,20 +119,23 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import Vue from "vue";
|
||||
export default {
|
||||
name: "HomeComponent",
|
||||
data() {
|
||||
return {
|
||||
loginDialogVisible: false,
|
||||
registerDialogVisible: false,
|
||||
imageUrl: "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date(),
|
||||
imageUrl: "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getDate(),
|
||||
checked: false,
|
||||
passwordVisible: "password",
|
||||
icon: "el-icon-view",
|
||||
ruleForm: {
|
||||
username: "",
|
||||
password: "",
|
||||
code: "",
|
||||
username: null,
|
||||
password: null,
|
||||
code: null,
|
||||
remember:null
|
||||
},
|
||||
rules: {
|
||||
username: [
|
||||
@@ -146,10 +152,15 @@ export default {
|
||||
this.account(); //获取cookie的方法
|
||||
},
|
||||
methods: {
|
||||
|
||||
openLogin(){
|
||||
this.loginDialogVisible=true;
|
||||
},
|
||||
closeLogin(){
|
||||
this.loginDialogVisible=false;
|
||||
},
|
||||
// ******登录*****
|
||||
account() {
|
||||
console.log(this.getCookie("username"));
|
||||
// console.log(this.getCookie("username"));
|
||||
this.ruleForm.username = this.getCookie("username");
|
||||
this.ruleForm.password = this.getCookie("password");
|
||||
},
|
||||
@@ -172,7 +183,7 @@ export default {
|
||||
}
|
||||
},
|
||||
clearCookie() {
|
||||
this.setCookie("", "", -1); //清除cookie
|
||||
this.setCookie("", "",-1); //清除cookie
|
||||
},
|
||||
|
||||
// 方法
|
||||
@@ -180,34 +191,56 @@ export default {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
//取参数
|
||||
let params = new URLSearchParams();
|
||||
params.append("name", this.ruleForm.username);
|
||||
params.append("password", this.ruleForm.password);
|
||||
params.append("code", this.ruleForm.code);
|
||||
// let params = new URLSearchParams();
|
||||
// params.append("username", this.ruleForm.username);
|
||||
// params.append("password", this.ruleForm.password);
|
||||
// params.append("code", this.ruleForm.code);
|
||||
// params.append("remember",this.ruleForm.remember)
|
||||
if (this.checked == true) {
|
||||
//存入cookie
|
||||
this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天
|
||||
this.setCookie(this.ruleForm.username, this.ruleForm.password,7); //保存7天
|
||||
} else {
|
||||
this.clearCookie();
|
||||
}
|
||||
|
||||
//调用方法提交
|
||||
// getLoginStatus(params).then((res) => {
|
||||
// if (res.code == 1) {
|
||||
// localStorage.setItem("userName", this.ruleForm.username);
|
||||
// this.$router.push("/Info");
|
||||
// this.notify("登录成功", "success");
|
||||
// }
|
||||
// if (res.code == 0) {
|
||||
// this.notify("验证码错误", "error");
|
||||
// }
|
||||
// if (res.code == 2) {
|
||||
// this.notify("用户名或密码错误", "error");
|
||||
// }
|
||||
// });
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/userLogin',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
username: this.ruleForm.username,
|
||||
password: this.ruleForm.password,
|
||||
code: this.ruleForm.code,
|
||||
remember: this.ruleForm.remember,
|
||||
|
||||
}
|
||||
}).then(function (res){
|
||||
// Vue.prototype.$message({
|
||||
// message: '成功！',
|
||||
// type: 'success'
|
||||
// });
|
||||
if(res.data.code===200){
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', { style: 'color: teal'}, res.data.msg),
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: res.data.msg
|
||||
});
|
||||
}
|
||||
console.log(res);
|
||||
});
|
||||
} else {
|
||||
this.closeLogin();
|
||||
return false;
|
||||
}
|
||||
this.closeLogin();
|
||||
|
||||
});
|
||||
},
|
||||
//点击图片更换验证码
|
||||
|
||||
Reference in New Issue
Block a user