坦克风云1_登录、注册、注销

注册

首先我们需要一个注册的页面

<div id="register">
        <h1>注册</h1>
        <form action="/user?action=login" method="post">
            <table>
                <tr>
                    <td>
                        <span style="color: red">*</span>
                        <label>用户名:</label>
                    </td>
                    <td>
                        <input type="text" name="username" v-model:value="username" @blur="validate_un()"  placeholder="请输入用户名"></td>
                        <br>
                </tr>
                <span style="color: red">{{message}}</span>
                <tr>
                    <td>
                        <span style="color: red">*</span>
                        <label>密码:</label>
                    </td>
                    <td>
                        <input type="password" name="password" v-model:value="password" @blur="validate_pd()" placeholder="请输入您的密码"><br>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: center">
                        <button type="button" @click="register" v-bind:disabled="isAble">注册</button>
                    </td>
                </tr>
            </table>
        </form>
        <span>已经有账户？</span><a href="login.html">点我登录</a>
    </div>

将表单和vue数据之间进行绑定,以及点击事件绑定

new Vue({
        el:'#register',
        data:{
            username:'',
            password:'',
            message:''
        },
        methods:{
            register(){
                let params = new URLSearchParams();
                params.append("username",this.username);
                params.append("password",this.password);
                params.append("action",'register');
                //发送请求
                axios({
                    method:'post',
                    url:'/player',
                    data: params
                }).then((response=>{
                    if (response.data.isSuccess){
                        alert("用户注册成功！准备前往登录");
                        window.location = 'login.html';
                    }else alert("注册失败,用户名已存在！");
                }));
            },
            //对用户名框进行验证
            validate_un(){
                this.message = '';
                if (this.username.trim() === ''){
                    this.message = '用户名不能为空';
                }
            },
            //对密码框进行数据验证
            validate_pd(){
                this.message = '';
                if (this.password.trim() === ''){
                    this.message = '密码不能为空';
                }
            }
        },
        computed:{
            isAble(){
                return this.username.trim() === '' || this.password.trim() === '';
            }
        }
    })

后端处理请求

controller:

public void register(HttpServletRequest request, HttpServletResponse response){
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        int result = playerService.register(username, password);
        if (result >0){
            JSONUtil.transJson(new Result<String>(true,username),response);
        }else {
            JSONUtil.transJson(new Result<>(false),response);
        }
    }

service

@Override
    public int register(String username, String password) {
        //首先查询用户名是否存在
        boolean hasPlayer = playerDao.isHasPlayer(username);
        if (hasPlayer){
            return 0;
        }
        return playerDao.register(username, password);
    }

dao

//注册sql写入
@Override
    public int register(String username,String password) {
        try {
            String sql = "insert into player values(?,?,?,?,?,0,0,0,?)";
            QueryRunner queryRunner = new QueryRunner(DruidUtil.getDs());
            String pid = UUID.randomUUID().toString();
            //获取坐标
            int[] pos = getPos();
            //获取颜色
            String playerColor = getRandomColor();
            if (pos !=null){
                int i = queryRunner.update(sql,pid,username,password,pos[0],pos[1],playerColor);
                return i;
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return -1;
    }
    
//是否用户名存在
 @Override
    public boolean isHasPlayer(@NotNull String username) {
        try {
            QueryRunner queryRunner = new QueryRunner(DruidUtil.getDs());
            String sql = "select * from player where username = ?";
            Player query = queryRunner.query(sql, new BeanHandler<>(Player.class), username);
            if (query != null)  return true;
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
        return false;
    }

//获取随机颜色
    private String getRandomColor() {
        Random random = new Random();
        int r = random.nextInt(256);
        int g = random.nextInt(256);
        int b = random.nextInt(256);
        return String.format("#%02x%02x%02x",r,g,b);
    }


//获取随机坐标
    private int[] getPos(){
        Random ran = new Random();
        QueryRunner queryRunner = new QueryRunner(DruidUtil.getDs());
        //查询坐标是否重复
        try {
            Player player;
            int x;
            int y;
            do {
                x = ran.nextInt(10)+1;
                y = ran.nextInt(10)+1;
                player = queryRunner.query("select * from player where X = ? and Y = ?", new BeanHandler<>					(Player.class), x, y);
            }while (player != null);
            return new int[]{x,y};
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }		

登录

登录功能相对于注册功能要简单的多，只需要查询数据库中的用户名和密码是否存在。存在则登录成功，否则登录失败，提示用户

页面

<div id="login">
        <h1>登录</h1>
        <form action="/user?action=login" method="post">
            <table>
                <tr>
                    <td>
                        <span style="color: red">*</span>
                        <label>用户名:</label>
                    </td>
                    <td>
                        <input type="text" name="username" v-model:value="username" @blur="validate_un" placeholder="请输入用户名"></td>
                        <br>
                        <span style="color: red">{{message}}</span>
                </tr>
                <tr>
                    <td>
                        <span style="color: red">*</span>
                        <label>密码:</label>
                    </td>
                    <td>
                        <input type="password" name="password" v-model:value="password" @blur="validate_pd" placeholder="请输入您的密码"><br>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: center">
                        <button type="button" @click="login" v-bind:disabled="isAble">登录</button>
                    </td>
                </tr>
            </table>
        </form>
        <span>还没有账户？</span><a href="register.html">点我注册账户</a>
    </div>

同样使用vue进行数据绑定

new Vue({
        el:"#login",
        data:{
            username:"",
            password:"",
            message:''
        },
        methods:{
            login(){
                let params = new URLSearchParams();
                params.append('username', this.username);
                params.append('password',this.password);
                params.append('action','login');
                //发送请求
                axios({
                    url:"/player",
                    method:'post',
                    data: params
                }).then((response)=>{
                    console.log(response.data);
                    if(response.data.isSuccess){
                        let login_player = response.data.data;
                        alert("登录成功！");
                        //存入当前session
                        window.sessionStorage.setItem("loginUser",JSON.stringify(login_player));
                        location.href = "/";
                    }else {
                        alert("用户名或密码有误！")
                        location.reload();
                    }
                });
            },
            //验证用户名不为空
            validate_un(){
                this.message = '';
                if (this.username.trim() === ''){
                    this.message = '用户名不能为空';
                }
            },
            //验证密码不为空
            validate_pd(){
                this.message = '';
                if (this.password.trim() === ''){
                    this.message = '密码不能为空';
                }
            }
        },
    //按钮是否可用
        computed:{
            isAble(){
                return this.username.trim() === '' || this.password.trim() === '';
            }
        }
    })

后台处理

controller

public void login(HttpServletRequest request, HttpServletResponse response){
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        Player login_user = playerService.login(username, password);
        //验证用户登录
        if (login_user != null){
            request.getSession().setAttribute(CUR_USER,login_user);
            JSONUtil.transJson(new Result<>(true,login_user),response);
        }else {
            JSONUtil.transJson(new Result<>(false),response);
        }
    }

service

@Override
    public Player login(String username, String password) {
        Player player = playerDao.login(username, password);
        return player;
    }

dao

@Override
    public Player login(String username, String password) {
        String sql = "select * from player where username = ? and password=?";
        QueryRunner queryRunner = new QueryRunner(DruidUtil.getDs());
        Player player;
        try {
            player = queryRunner.query(sql, new BeanHandler<>(Player.class), username, password);
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
        return player;
    }

控制页面元素

当用户登录时，我们需要一些元素显示，没有登录时则不显示。这样的功能我们需要用到session技术。当用户登录过后，我们将用户对象存入到session会话当中。

request.getSession().setAttribute(CUR_USER,login_user);

在页面上我们通过发送hasLogin请求来让服务端告诉客户端是否登录

hasLogin(){
      axios.get('/player?action=hasLogin').then((response)=>{
                    if (response.data.isSuccess){
                        this.hasUser = true;
                        this.nowUser = response.data.data.username;
                    }else {
                        this.hasUser = false;
               }
      });
}

v-show控制元素是否显示

<h2 v-show="hasUser">尊敬的{{nowUser}},恭喜你成为坦克风云高端玩家！,祝您旅途愉快</h2>
        <a v-show="!hasUser" href="views/login.html">登录/注册</a>
        <a v-show="hasUser" @click.prevent="logout" href="#">注销</a>
        <h1>坦克风云</h1>
        <!--   开始游戏     -->
        <div class="startGame" v-show="hasUser" onclick="location.assign('views/main.html')">
            开始游戏
        </div>

注销

注销其实就是让我们的session会话删除掉登录时存入的用户对象,只需要前端发送请求即可。

/*
        用户注销
     */
    public void logout(HttpServletRequest request, HttpServletResponse response){
        request.getSession().removeAttribute(CUR_USER);
        JSONUtil.transJson(new Result<>(true),response);
    }