坦克风云项目一

最新推荐文章于 2024-06-12 23:40:32 发布

m0_62102386

最新推荐文章于 2024-06-12 23:40:32 发布

阅读量84

点赞数

文章标签： java

本文链接：https://blog.csdn.net/m0_62102386/article/details/131839668

版权

注册模块

注册页面

v-show：

指令的作用是：根据切换元素的显示状态

2.原理是修改元素的display，实现显示隐藏

3.通过判断自定义值为true或false进行隐藏显示

v-show指令是根据条件显示DOM元素的指令，可以用来动态控制DOM元素的显示和隐藏。v-show后面跟的是判断条件，不管初始条件是什么，元素总是会被渲染。

扩展点：

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

区别：

v-if和v-show都是Vue中的指令，用于控制元素的显示和隐藏。

v-if是根据表达式的值来决定元素是否渲染的，如果表达式的值为false，则元素不会被渲染到页面上，如果表达式的值为true，则元素会被渲染到页面上。
v-show也是根据表达式的值来决定元素是否显示的，但是不同的是，即使表达式的值为false，元素也会被渲染到页面上，只是通过CSS的display属性来控制元素的显示和隐藏。
因此，如果需要频繁切换元素的显示和隐藏，建议使用v-show，如果元素的显示和隐藏不频繁，建议使用v-if。
v-show指令设置隐藏是给绑定的DOM元素添加CSS样式：display:none，但是DOM元素仍然存在； v-if指令设置隐藏是将DOM元素整个删除，此时DOM元素不再存在。
编译过程不同 v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；而 v-show 只是简单的基于CSS切换，不管初始条件是什么，元素总是会被渲染。
3、编译条件不同 v-show 由false变为true时不会触发组建的生命周期； v-if 由false变为true时，触发组件的beforeCreate、create、beforeMount、mounter钩子，由true变为false时，触发组件的beforeDestory、destoryed方法。v-if 是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；v-if 也是惰性的，如果初始渲染时条件为假，则什么也不做——直到为真时才开始渲染条件块。
4、性能消耗不同 v-show 由更高的初始渲染消耗， v-if 有更高的切换消耗。

v-model：

.v-model的基本作用

v-model的基本作用是做双向数据绑定，多用于表单元素中的双向数据绑定。
用途

用于在表单类元素(单选、多选、下拉选择、输入框等)上双向绑定数据。
v-model的原理简单描述

v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化。

注意

使用v-model后：

1.表单控件显示的值只依赖所绑定的数据，不再关心初始化时的value属性

2.对于在之间插入的值，也不会生效

3.使用v-model时，如果是用中文输入法输入中文，一般在没有选定词组前，也就是拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发更新。如果希望总是实时更新，可以使用@input代替v-model

trim() 方法

trim() 方法是用来去除字符串两端空格的函数。

trim()函数用于去除字符串两端的空格（空白字符），并返回处理后的字符串。

trim()函数并不影响原来的字符串本身，它返回的是一个新的字符串。

缺陷：只能去除字符串两端的空格，不能去除中间的空格

示例：

var str = " 6 6 ";
var str_1 = str.trim();

console.log(str_1); //6 6//输出左右侧均无空格
单独去除左侧空格则使用 str.trimLeft(); //var str_1 = str.trimLeft();

单独去除右侧空格则使用 str.trimRight();//var str_1 = str.trimRight();

注意：$.trim()函数会移除字符串开始和末尾处的所有换行符，空格(包括连续的空格)和制表符。如果这些空白字符在字符串中间时，它们将被保留，不会被移除。

axios请求方式

axios可以请求的方法： get：获取数据，请求指定的信息，返回实体对象 post：向指定资源提交数据（例如表单提交或文件上传） put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容 patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新 delete：请求服务器删除指定的数据
post请求

post请求一般分为两种类型

1.form-data 表单提交，图片上传、文件上传时用该类型比较多

2. application/json 一般是用于 ajax 异步请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/vue/vue.min.js"></script>
    <script src="/vue/axios.min.js"></script>
</head>
<body>
<div  id="app">
//隐藏
<div v-show="isShow">
    <h1>登入</h1>

    用户名：<input type="text" placeholder="请输入用户名" autofocus  v-model="player.username"  @keyup="checkName2"><br>
    密&emsp;码：<input type="password" placeholder="请输入密码" required  v-model="player.password"   @keyup="checkPsw2"><br>
   <button   @click="login1"  :disabled="isLoginDisable">登入</button>
    <br>
    <br>

没有账户，请先<a href="javascript:void(0)"  @click="exchange1">注册</a>
</div>

<div v-show="!isShow">
    <h1>注册</h1>

    用户名：<input type="text" placeholder="请输入用户名" autofocus  v-model="player.username"  @blur="checkName"><br>
    密&emsp;码：<input type="password" placeholder="请输入密码" required    v-model="player.password"  @keyup="checkPsw"><br>
    <button  @click="register1"  :disabled="isResDisable"  >注册</button>

    已有账户，请先<a href="javascript:void(0)"  @click="exchange1">登入</a>
</div>

</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            player:{
                username:"",
                password:""
            },

            isShow:true,
            isResDisable:false,//false表示不禁用 true表示禁用
            isLoginDisable:false
        },
        methods:{
            exchange1(){
                this.isShow =!this.isShow
            },
            register1(){
                if (this.player.username.trim()&&this.player.password.trim()){//都不为空
                    this.isResDisable=false//不禁用
                    axios.get('/playerC?action=register&username=' +this.player.username+'&password='+this.player.password)
                        .then((resp)=>{
                            //如果成功

                            if (resp.data.r){
                                this.isShow =!this.isShow
                            }
                            alert(resp.data.msg)

                            //如果注册失败，则留在注册页面
                        })
                }else {//名字或密码至少有一个为空
                    this.isResDisable=true//禁用

                }

            },

            checkName(){
                //检查 名字是否为空
                if (this.player.username.trim()){
                    //名字不为空，去数据库查询
                    axios.get('/playerC?action=getByName&username='+this.player.username.trim())
                        .then((resp)=>{
                            if (resp.data){//不为空，数据库中存在该名字
                                alert('该名字已被占用，不能注册')
                                this.isResDisable=true//禁用
                            }else{
                                //为空，数据库中不存在该名字
                                this.isResDisable=false//不禁用
                            }
                        })

                }else {
                    this.isResDisable=true//禁用
                }

            },

            checkPsw(){
                if (this.player.password){
                    this.isResDisable=false//禁用
                }else{
                    this.isResDisable=true//禁用
                }
            },

            login1(){
                if (this.player.username.trim()&&this.player.password.trim()){//都不为空
                    this.isLoginDisable=false
                    //登入后端请求
                    axios.get('/playerC?action=login&username='+this.player.username.trim()+'&password='+this.player.password.trim())
                        .then((resp)=>{
                            //如果成功

                            if (resp.data){//登入成功,去首页
                              location.assign('/')
                            }else{
                                alert('用户名或密码错误，登入失败！')
                            }

                        })
                }else{
                    this.isLoginDisable=true
                }
            },

            checkName2(){
                if (this.player.username.trim()){//都不为空
                    this.isLoginDisable=false//不禁用

                }else{
                    this.isLoginDisable=true//禁用
                }
            },
            checkPsw2(){

                if (this.player.password.trim()){//都不为空
                    this.isLoginDisable=false//不禁用

                }else{
                    this.isLoginDisable=true//禁用
                }

            }
        }

    })

</script>

</html>

@WebServlet注解属性

description：Servlet的描述信息；

displayName：Servlet的显示名称；

initParams：Servlet的初始化参数；

name：Servlet的名称；

urlPatterms：Servlet的访问URL；

value：Servlet的访问URL； **asyncSupported：**声明Servlet是否支持异步操作；

扩展点
. String getParameter(String name):根据参数名称获取参数值
String[] getParameterValues(String name):根据参数名称获取参数值的数组 hobby=xx&hobby=game
Enumeration getParameterNames():获取所有请求的参数名称常常与String[] getParameterValues(String name):根据参数名称获取参数值的数组 hobby=xx&hobby=game这个方法联合使用
getParameterMap()方法 Map<String,String[]> getParameterMap():获取所有参数的map集合，将对象封装称为一个map集合封装对象用的方法是 BeanUtils.populate(user,map);来进行封装

在controller包下

package controller;

import pojo.Player;
import pojo.Result;
import service.IPlayerService;
import service.impl.PlayerServiceImpl;
import util.JsonUtil;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

@WebServlet("/playerC")
public class PlayerC extends HttpServlet {
    private IPlayerService iPlayerService=new PlayerServiceImpl();

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String action = req.getParameter("action");
        HttpSession session = req.getSession();//获取session容器,跟踪摸一个客户端的信息

        if ("register".equals(action)){//注册功能
            //接收用户名和密码
            String username = req.getParameter("username");
            String password = req.getParameter("password");
						//判断是否接受成功
            boolean isR = iPlayerService.register(username, password);
            //响应结果对象R
            Result rs = new Result();
              rs.setR(isR);
              rs.setMsg(isR?"注册成功":"注册失败");
					//转化成json格式，发送前端
            JsonUtil.transJson(rs,resp);

        } else if ("login".equals(action)) {//登入界面
            //接收用户名和密码两个参数
            String username = req.getParameter("username");
            String password = req.getParameter("password");
           Player login_player= iPlayerService.login(username,password);
           if (login_player!=null){//登入成功
               session.setAttribute("login_player",login_player);//session中是否存在login_player作为是否登入的依据
           }
           JsonUtil.transJson(login_player,resp);

        }else if ("getByName".equals(action)){//判断名字是否已经存在
           String username= req.getParameter("username");
           Player player= iPlayerService.getByName(username);
           JsonUtil.transJson(player,resp);
        }else if("getLoginPlayerFromSession".equals(action)){

           Object login_player = session.getAttribute("login_player");
            JsonUtil.transJson(login_player,resp);
        }

    }

}