实现在线五子棋项目功能1

实现之后的项目展示:

实现大致步骤:

1:简单的登录和注册页面

2:按照用户的天梯分数实现匹配机制.

3:实现两个玩家在网页端进行五子棋对战的功能

核心技术

Spring/SpringBoot/SpringMVC
WebSocket
MySQL
MyBatis
HTML/CSS/JS/AJAX

实现用户模块

编写数据库代码

数据库设计

配置 MyBatis

编辑 application.properties

创建实体类

创建 model.User 类

创建 UserMapper

创建 mapper.UserMapper 接口.

此处主要提供四个方法:

selectByName: 根据用户名查找用户信息. 用于实现登录.
insert: 新增用户. 用户实现注册.
userWin: 用于给获胜玩家修改分数.
userLose: 用户给失败玩家修改分数.

实现 UserMapper.xml

前后端交互接口

需要明确用户模块的前后端交互接口. 这里主要涉及到三个部分. 登录注册和获取用户信息

登录接口

请求:

POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencodedusername=zhangsan&password=123

响应:

HTTP/1.1 200 OK
Content-Type: application/json{userId: 1,username: 'zhangsan',score: 1000,totalCount: 10,winCount: 5
}

注册接口

请求:

POST /register HTTP/1.1
Content-Type: application/x-www-form-urlencodedusername=zhangsan&password=123

响应:

HTTP/1.1 200 OK
Content-Type: application/json{userId: 1,username: 'zhangsan',score: 1000,totalCount: 10,winCount: 5
}

获取用户信息

请求:

GET /userInfo HTTP/1.1

响应:

HTTP/1.1 200 OK
Content-Type: application/json{userId: 1,username: 'zhangsan',score: 1000,totalCount: 10,winCount: 5
}

服务器开发

主要实现三个方法:

login: 用来实现登录逻辑.
register: 用来实现注册逻辑.
getUserInfo: 用来实现登录成功后显示用户分数的信息.
客户端开发
创建 login.html

<div class="nav">联机五子棋
</div>
<div class="login-container"><div class="login-dialog"><!-- 标题 --><h3>登录</h3><!-- 输入用户名 --><div class="row"><span>用户名</span><input type="text" id="username" name="username"></div><!-- 输入密码 --><div class="row"><span>密码</span><input type="password" id="password" name="password"></div><!-- 提交按钮 --><div class="row submit-row"><button id="submit">提交</button> </div></div>
</div>

设置一些css样式

通过 jQuery 中的 AJAX 和服务器进行交互.

//js代码
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script>// 通过 ajax 的方式实现登录过程let submitButton = document.querySelector('#submit');submitButton.onclick = function() {// 1. 先获取到用户名和密码let username = document.querySelector('#username').value;let password = document.querySelector('#password').value;$.ajax({method: 'post',url: '/login',data: {username: username,password: password},success: function(data) {console.log(JSON.stringify(data));if (data && data.userId > 0) {// 登录成功, 跳转到游戏大厅alert("登录成功!")location.assign('/game_hall.html');} else {alert("登录失败! 用户名密码错误! 或者该账号正在游戏中!");}}});}
</script>

注册页面

创建 register.html

<div class="nav">联机五子棋
</div>
<div class="login-container"><div class="login-dialog"><!-- 标题 --><h3>注册</h3><!-- 输入用户名 --><div class="row"><span>用户名</span><input type="text" id="username" name="username"></div><!-- 输入密码 --><div class="row"><span>密码</span><input type="password" id="password" name="password"></div><!-- 提交按钮 --><div class="row submit-row"><button id="submit">提交</button> </div></div>
</div>

在 register.html 中, 编写 js 代码

<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script>// 通过 ajax 的方式实现登录过程let submitButton = document.querySelector('#submit');submitButton.onclick = function() {// 1. 先获取到用户名和密码let username = document.querySelector('#username').value;let password = document.querySelector('#password').value;$.ajax({method: 'post',url: '/register',data: {username: username,password: password},success: function(data) {console.log(JSON.stringify(data));if (data && data.username) {// 注册成功, 跳转到游戏大厅alert('注册成功!')location.assign('/login.html');} else {alert("注册失败!");}}});}
</script>

代码编写完毕后, 运行程序, 验证注册效果.

实现在线五子棋项目功能1相关推荐

(在线教育)项目总结
一.在线教育项目功能点(B2C) 1.后台管理系统 1.登录功能(SpringSecurity框架) 2.权限管理功能 (1)菜单管理列表.添加.修改.删除 (2)角色管理 * 列表.添加.修改.删 ...
Spring项目-在线五子棋
文章目录网页版在线五子棋 1. 项目介绍 2. 项目演示 3. 前置知识 3.1 WebSocket 3.2 代码示例 3.2.1 服务器代码 3.2.2 客户端代码 4. 需求分析和概要设计 4. ...
在线 OJ 项目(二) · 操作数据库 · 设计前后端交互的 API · 实现在线编译运行功能
一.操作数据库前的准备二.封装操作数据库数据的相关操作三.设计前后端交互的 API 四.实现在线编译运行功能一.操作数据库前的准备设计数据库表我们需要对数据库中存储的题目进行操作. 创建一个 ...
纯java编写的联机五子棋项目（附带开源链接）
文章目录说明功能展示客户端说明服务端说明总结说明这是用java写的一个联机五子棋项目,该项目是我大二上期的时候写的,那时候学完了java基础,想要把学的技术都综合使用一下,于是就在国庆节 ...
Java实现在线预览功能
java实现在线预览功能,需要用到 jacob.dll jacob.jar 预览pdf所需js pdfobject.min.js 将上传文件转为pdf保存. <divclass=&quo ...
黑马在线教育项目---15-16、datatables插件
黑马在线教育项目---15-16.datatables插件一.总结一句话总结: datatables插件也比较好用,引入好插件的js和css后,核心代码也就是插件的初始化,如果要修改配置可以百度 ...
php 开发一个聊天系统,ajax+php 实现一个简单的在线聊天室功能（附带源码）
通过ajax和setInterval()函数,配合php+mysql实现一个简单的在线聊天室的功能.附带详细源码案例.这个聊天室是一个简单的聊天室,通过javascript setInterval() ...
【JEECG技术文档】JEECG在线聊天插件功能集成文档
原文地址:http://jeecg.iteye.com/blog/2320670 JEECG在线聊天插件功能集成文档前提: 采用jeecg_3.6.3版本以上(Maven工程) 插件项目: 在线聊天 ...
【高校宿舍管理系统】第零章项目功能和技术路线
第零章项目功能和技术路线提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第零章项目功能和技术路线前言一.项目功能 1. ...