项目实战（二）

最新推荐文章于 2024-08-21 18:07:10 发布

astzk

最新推荐文章于 2024-08-21 18:07:10 发布

阅读量46

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_60654299/article/details/131835008

版权

网页的灵活性和vue关联程度很大，要灵活使用vue中从java接口中获取的mysql数据进行更改验证或者调用。如在这个登录功能上就进行了多层联动（style以及大量文字被省略）。

html层

<html>
  <head>
    <title>主界面</title>
    <script src="/vue/axios.min.js"></script>
    <script src="/vue/vue.min.js"></script>
</head>
  <body>
  <h1>坦克风云</h1>

  <div id="app">
  <p v-if="isLogin">
    <span>尊敬的{{login_player.username}}，恭喜你成为坦克风云高端玩家，祝您旅途愉快!<br><br><a href="index.jsp">注销</a></span>
    <br><br>
    <button onclick="location.assign('player/kingdom.html')" >进入游戏</button>
  </p>

    <p v-else>
      <a href="/player/login.html">登录/注册</a>
    </p>

  </div>
  </body>
<script>
  new Vue({
    el:'#app',
    data:{
      isLogin:false,
      login_player:{}
    },
    methods:{
      getLoginPlayer(){
        //从session中获取登录的玩家信息
        axios.get('/playerC?action=getLoginPlayerFromSession').then((resp)=>{
          console.log(resp.data)
          if (resp.data){
            this.isLogin=true
            this.login_player=resp.data
          }else {
            this.isLogin=false
          }
        })
      },
    mounted(){
      this.getLoginPlayer()
    }
  })
</script>
</html>

Dao层

负责在html注册后随机生成pid，xy坐标以及颜色并进行登录验证

public class PlayerDaoImpl implements IPlayerDao {
    /*
    * 注册方法，返回值为-1表示失败，1表示成功*/
    @Override
    public int register(String username, String password) {
        try{
            /*1.创建dbutils工具类的核心操作对象qr
          2.调用query或update方法 */
            QueryRunner qr = new QueryRunner(DruidUtil.getDs());
            //随机生成pid
            String pid= UUID.randomUUID().toString();
            int [] pos=randomPos();
            if (pos!=null){
                //随机生成玩家在世界地图中的颜色
                String color=randomColor();
                return qr.update("insert into player values(?,?,?,?,?,0,0,0,?)",pid,username,password,pos[0],pos[1],color);
            }
        }catch (Exception e){
            e.printStackTrace();
        }
        return -1;
    }

    @Override
    public Player getByName(String username) {
        try{
            /*1.创建dbutils工具类的核心操作对象qr
          2.调用query或update方法 */
            QueryRunner qr = new QueryRunner(DruidUtil.getDs());
            return qr.query("select * from player where username=?",new BeanHandler<>(Player.class),username);
        }catch (Exception e){
            e.printStackTrace();
        }
        return null;
    }

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

    //获取所有玩家的位置信息以颜色信息
    @Override
    public List<Player> getPlayers() {
        try{
            QueryRunner qr = new QueryRunner(DruidUtil.getDs());
            return qr.query("select * from player",new BeanListHandler<>(Player.class));
        }catch (Exception e){
            e.printStackTrace();
        }
        return null;
    }

    //生成一个#01ff66 16禁止的rgb颜色 %02x %表示站位符，用于填充r,g,b 02表示2个长度，不是2个长度的用0填充 x表示16进制
    private String randomColor() {
        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);
    }

    //在1-10范围内随机生成二维坐标平面
    private int[] randomPos() {
        QueryRunner qr = new QueryRunner(DruidUtil.getDs());
        Random r=new Random();
        //避免坐标重复
        try {
            Player player=null;
            int x,y;
            do{
                x = r.nextInt(10)+1;
                y = r.nextInt(10)+1;
                //player!=null 表示x,y在数据库中存在，要继续循环，重新随机生成
                player = qr.query("select * from player where x=? and y=?", new BeanHandler<>(Player.class), x, y);
            }
            while (player!=null);
            return new int[]{x,y};
        }catch (Exception e){
            e.printStackTrace();
        }
        return null;//表示异常情况
    }

    //测试uuid生成pid
    public static void main(String[] args) {
        String id= UUID.randomUUID().toString();
        System.out.println(id);
        //测试颜色
        System.out.println(new PlayerDaoImpl().randomColor());
    }
    
}

Dao接口层

public interface IPlayerDao {
    int register(String username, String password);

    Player getByName(String username);

    Player login(String username, String password);

}

Service层

public class PlayerServiceImpl implements IPlayerService {
    private IPlayerDao playerDao=new PlayerDaoImpl();
    private IPlayerArmyDao playerArmyDao=new PlayerArmyDaoImpl();
    @Override
    public boolean register(String username, String password) {
        int i=playerDao.register(username,password);
        return i>0;
    }

    @Override
    public Player getByName(String username) {
        return playerDao.getByName(username);

    }

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

    @Override
    public List<Player> getPlayers() {
        return playerDao.getPlayers();
    }

}

Service层接口

public interface IPlayerService {
    boolean register(String username, String password);

    Player getByName(String username);

    Player login(String username, String password);
}

Controller层

负责提供方法供网页使用。

@WebServlet("/playerC")
public class PlayerC extends HttpServlet {
    private IPlayerService playerService=new PlayerServiceImpl();
    private IPlayerArmyService playerArmyService=new PlayerArmyServiceImpl();

    @Override
    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=playerService.register(username,password);
            //响应结果对象R
            Result rs = new Result();
            rs.setR(isR);
            rs.setMsg(isR?"注册成功!":"注册失败!");
            JsonUtil.transJason(rs,resp);

        }else if("login".equals(action)){//登录功能
            //接收用户名和密码两个参数
            String username = req.getParameter("username");
            String password = req.getParameter("password");
            Player login_player =playerService.login(username,password);
            if (login_player!=null){//登陆成功
                //查询当前玩家的战斗岗位的所有火力部署
                List<PlayerArmy> state1ArmyList=playerArmyService.State1ArmyList(login_player.getPid());
                //关联到player中
                login_player.setState1ArmyList(state1ArmyList);
                session.setAttribute("login_player",login_player);//session中是否有login_player作为登录的依据
            }
            JsonUtil.transJason(login_player,resp);

        }else if("getByName".equals(action)){//判断昵称是否已经存在
            String username = req.getParameter("username");
            Player player = playerService.getByName(username);
            JsonUtil.transJason(player,resp);

        }else if ("getLoginPlayerFromSession".equals(action)){//获取信息功能
            Object login_player =session.getAttribute("login_player");
            JsonUtil.transJason(login_player,resp);

        }
    }
}

总结

其实该案例总体还是围绕vue,controller,sevice,dao层，工具类去层层嵌套，作为初学者可能还是不好掌握具体代码书写流程，就导致进度很慢，其次部分方法使用不熟。但是大致的框架是必须要记住的。剩下的无非就是在这上面拓展和使用。

astzk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
项目实战（二）

其实该案例总体还是围绕vue,controller,sevice,dao层，工具类去层层嵌套，作为初学者可能还是不好掌握具体代码书写流程，就导致进度很慢，其次部分方法使用不熟。但是大致的框架是必须要记住的。剩下的无非就是在这上面拓展和使用。
复制链接

扫一扫