用户登录测试基本完成
This commit is contained in:
@@ -1,5 +0,0 @@
|
||||
import http from '@/utils/http';
|
||||
|
||||
export function homeData(params){
|
||||
return http.get('/api/list', params)
|
||||
}
|
||||
@@ -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();
|
||||
|
||||
});
|
||||
},
|
||||
//点击图片更换验证码
|
||||
|
||||
@@ -3,12 +3,14 @@ import App from './App.vue'
|
||||
import router from './router'
|
||||
import Element from 'element-ui'
|
||||
import './assets/styles/element-variables.scss'
|
||||
|
||||
import axios from "axios";
|
||||
axios.defaults.withCredentials=true;
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.use(Element);
|
||||
new Vue({
|
||||
router,
|
||||
axios,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
import request from './request';
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const http = {
|
||||
get(url, params) {
|
||||
const config = {
|
||||
method: 'GET',
|
||||
url: url,
|
||||
params: params ? params : {},
|
||||
}
|
||||
return request(config);
|
||||
},
|
||||
post(url, data) {
|
||||
const config = {
|
||||
method: 'POST',
|
||||
url: url,
|
||||
data: data ? data : {},
|
||||
}
|
||||
return request(config);
|
||||
}
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
import axios from 'axios' // 使用前要先安装依赖：npm install axios
|
||||
|
||||
// 创建axios实例
|
||||
const service = axios.create({
|
||||
// 这里可以放一下公用属性等。
|
||||
baseUrl: 'http://localhost:8082/helloGithub_war_exploded/', // 用于配置请求接口公用部分，请求时会自动拼接在你定义的url前面。
|
||||
withCredentials: false, // 跨域请求时是否需要访问凭证
|
||||
timeout: 3 * 1000, // 请求超时时间
|
||||
})
|
||||
|
||||
// 请求拦截器
|
||||
service.interceptors.request.use(config => {
|
||||
// 给管理后台的接口设置header头，添加Authorzation属性
|
||||
let token = sessionStorage.getItem('token')
|
||||
config.headers['Authorization'] = token//给header头添加token值
|
||||
|
||||
return config
|
||||
}, error => {
|
||||
// 出现异常
|
||||
return Promise.reject(error);
|
||||
})
|
||||
|
||||
service.interceptors.response.use(response => {
|
||||
// 后台正常响应的状态，如果是200， 说明后台处理没有问题
|
||||
/* if (response.status == 200) {
|
||||
return response.data;
|
||||
} */
|
||||
// return response.data 可以在这里统一的获取后台响应的数据进行返回，而这里面就没有请求头那些
|
||||
return response
|
||||
}, error => {
|
||||
return Promise.reject(error);
|
||||
})
|
||||
|
||||
|
||||
export default service;
|
||||
@@ -1,22 +1,23 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-header style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
|
||||
<HeaderComponent></HeaderComponent>
|
||||
</el-header>
|
||||
<el-container>
|
||||
<el-main>
|
||||
<keep-alive>
|
||||
<router-view></router-view>
|
||||
</keep-alive>
|
||||
</el-main>
|
||||
<el-header style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
|
||||
<HeaderComponent></HeaderComponent>
|
||||
</el-header>
|
||||
<el-container>
|
||||
<el-main>
|
||||
<keep-alive>
|
||||
<router-view></router-view>
|
||||
</keep-alive>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeaderComponent from "@/components/Header.vue";
|
||||
|
||||
export default {
|
||||
name:"HomeView",
|
||||
components: {
|
||||
HeaderComponent,
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user