<
template
>
<
div
>
<
div
class=
"login-wrap"
v-show="
showLogin"
>
<
h3
>登录
</
h3
>
<
p
v-show="
showTishi"
>{{
tishi}}
</
p
>
<
input
type=
"text"
placeholder=
"请输入用户名"
v-model="
username"
id=
"username"
>
<
input
type=
"password"
placeholder=
"请输入密码"
v-model="
password"
id=
"password"
>
<
button
v-on:click="
login"
>登录
</
button
>
<
span
v-on:click="
ToRegister"
>没有账号？马上注册
</
span
>
</
div
>
<
div
class=
"register-wrap"
v-show="
showRegister"
>
<
h3
>注册
</
h3
>
<
p
v-show="
showTishi"
>{{
tishi}}
</
p
>
<
input
type=
"text"
placeholder=
"请输入用户名"
v-model="
newUsername"
>
<
input
type=
"password"
placeholder=
"请输入密码"
v-model="
newPassword"
>
<
button
v-on:click="
register"
>注册
</
button
>
<
span
v-on:click="
ToLogin"
>已有账号？马上登录
</
span
>
</
div
>
</
div
>
</
template
>
<
script
>
import {
setCookie,
getCookie}
from
'../../assets/js/cookie.js'
export
default {
name:
'Login',
data () {
return {
showLogin:
true,
showRegister:
false,
showTishi:
false,
tishi:
'',
username:
'',
password:
'',
newUsername:
'',
newPassword:
''
}
},
mounted () {
if (
getCookie(
'username')) {
this.
$router.
push(
'/home')
}
},
methods: {
login () {
if (
this.
username ===
'' ||
this.
password ===
'') {
alert(
'请输入用户名或密码')
}
else {
alert(
this.
username)
let
data = {
'username'
:
this.
username,
'password'
:
this.
password}
/*接口请求*/
this.
$http.
post(
'http://127.0.0.1:8081/test.jsp',{
username:
this.
username,
myPwd:
this.
password},{
emulateJSON:
true}).
then((
res)
=>{
alert(
res.
data)
console.
log(
res)
if(
res.
data == -
1){
this.
tishi =
'该用户不存在'
this.
showTishi =
true
}
else
if(
res.
data ==
0){
this.
tishi =
'密码输入错误'
this.
showTishi =
true
}
else
if(
res.
data ==
'admin'){
/*路由跳转this.$router.push*/
this.
$router.
push(
'/main')
}
else{
this.
tishi =
'登录成功'
this.
showTishi =
true
setCookie (
'username',
this.
username,
1000*
60)
setTimeou (
function(){
this.
$router.
push(
'/home')
}.
bind(
this),
1000)
}
})
}
}
}
}
</
script
>
<
style
>
.login-wrap {
text-align:
center;
}
input {
display:
block;
width:
250px;
height:
40px;
line-height:
40px;
margin:
0
auto;
margin-bottom:
10px;
outline:
none;
border:
1px
solid
#888;
padding:
10px;
box-sizing:
border-box;
}
p {
color:
red;
}
button {
display:
block;
width:
250px;
height:
40px;
line-height:
40px;
margin:
0
auto;
border:
none;
background-color:
#41b883;
color:
#fff;
font-size:
16px;
margin-bottom:
5px;
}
span {
cursor:
pointer;
}
span:hover {
color:
#41b883;
}
</
style
>
this.
$http.
post(
'http://127.0.0.1:8081/test.jsp',{
username:
this.
username,
myPwd:
this.
password},{
emulateJSON:
true})
这一段表示跨域请求的http,emulateJSON:true一定要写明
JAVA后台写法：
<%@ page language="java" contentType="text/html; charset=GBK" pageEncoding="GBK"%> <% String userName = request.getParameter("username"); String password = request.getParameter("password"); response.setHeader("Access-Control-Allow-Origin", "*"); out.println("{'data':1}"); %>
如果不写response.setHeader("Access-Control-Allow-Origin", "*");
会出现跨域请求报错