目录
一、表单跳转后地址栏多了问号
<h1>登录</h1> <br> <form> 昵称:<input type="text" v-model="player.username" @blur="checkName2"> <br> 密码:<input type="text" v-model="player.password" @keyup="checkPwd2"> <br> <button :disabled="isLogDisable" @click="login1">登录</button> <br><br><br> <p>没有账户,请先<a href="#" @click="exchange1">注册</a></p> </form>
原意是想通过表单将账户名和密码传到后台servlet执行,若是账户或密码错误的话,弹窗显示"用户名或密码错误,登录失败!",但是值确实是传到后台台并没有弹窗显示,但会马上跳转页面到一开始的登录界面,并且在地址栏上多出了一个问号,如 http://localhost:8080/login.html => http://localhost:8080/login.html?。在地址栏多了个问号这个页面,重新登录一遍才能实现页面成功跳转,而且每次重新打开浏览器都会有这个小问题(换个浏览器打开也是一样)。
后来查资料发现是因为表单有一个跳转的作用而且button也添加了页面跳转的函数,两者有点冲突,于是就将button放到了form的外面,就发现没有跳转到当前页面了。
<h1>登录</h1> <br> <form> 昵称:<input type="text" v-model="player.username" @blur="checkName2"> <br> 密码:<input type="text" v-model="player.password" @keyup="checkPwd2"> <br> </form> <button :disabled="isLogDisable" @click="login1">登录</button> <br><br><br> <p>没有账户,请先<a href="#" @click="exchange1">注册</a></p>
二、HTML点击按钮button跳转页面的几种实现方法
方法一:在button标签中加上onclick属性,赋值为Javascript
<input type="button" onclick='location.href=("index.html")' />//在本页面打开
<input type="button" onclick='window.open("newIndex.html")' />//打开新页面
<button class="startGame" onclick="window.location.href='../game/main.html'" >进入游戏</button>
//跳转到新页面
方法二:触发一个函数跳转
<script>
function jump(){
window.location.href="http://www.baidu.com";
}
</script>
<button οnclick="jump()">我是一个按钮</button>
方法三:a标签的超链接可以直接嵌套一个button
<a href="https://www.baidu.com/">
<button>点我跳转到度娘!</button>
</a>
方法四:表单的action定向提交跳转
<form action="xx.html" method="post">
<input type="button" value="按钮">
</form>
三、实现用户登陆和注销的操作
1、定位到注销按钮所在位置,并为其添加链接(跳转到相关servlet程序中的相关方法)与点击事件(提示是否退出操作
<a href="/playerC?action=logOut" >注销</a>
2、在servlet中创建退出方法
public class EmployeeServlet extends BaseServlet {
//注销操作
public void logout(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
//清除缓存
request.getSession().invalidate();
//页面跳转,注销之后建议使用重定问跳转到登录页面
response.sendRedirect(url);
}
3、在vue中添加点击事件的具体操作,如下图用v-if,v-else方法显示不同的效果:
<div id="app">
<p v-if="isLogin">
<span>欢迎您,尊敬的高端玩家{{login_player.username}}! <a href="/playerC?action=logOut" >注销</a> </span>
<br><br>
<button class="startGame" onclick="window.location.href='../game/main.html'" >进入游戏</button>
</p>
<p v-else>
<a href="login.html">登录/注册</a><br><br>
</p>
</div>