-
只有用到respTemplate的时候需要用到传参数 MultivalueMap restTemplate.postForObject(addPlayerUrl,data,String.class); 这里需要用到
-
游戏可以用来收钱吗
如果是直接收费的话 需要申请游戏版号
如果是收取广告费的话 就不需要 -
可以看所有人的对局记录 这样可以显得网站热闹一些
-
不用非得强迫自己完成某些功能 给用户一些限制就可以了 bot页面分页没什么用
用户自己也创建不了这么多bot也记不住
用户自己上传头像
- 推荐直接租一个云服务器的云盘 云盘会提供api 接入过来就可以了
包括数据库 等等服务都不要自己实现 阿里云服务是个人都可以看懂 它期望所有人都来买它的服务
多表查询
- 这块用不到多表查询 mybatis处理多表相对复杂一些 但大多数都不需要处理多表查询
前端
-
表单居中 在table里边 使用textalin=center
-
跳转到任何界面 引入router from router.index router.push({name:”record_content”,
- params”{record} )//这里简写了 js里kv一样
报错
- 一直提示找不到文件
router import RecordContentView from "../views/record/RecordContentView"
路径正确 最后发现自动补全出错 RecordContenView完全出错 原来是前面的打错了 import R的时候少个t补全
根据本页面出现的单词进行补全的
指示点
如果是在 service 或者在 controller 注入
里边就不需要定义成静态 不需要写set了
如果是第三方类的话 就需要定义成静态 写一个set 在上面写autowired
192.168.12/localhost/127.0.0.1/都可以
module的update只能传一个参数 如果很多 需要给他传到字典里边
排行榜页面查询
接口实现
@Autowired
private UserMapper userMapper;
@Override
public JSONObject getlist(Integer page) {
IPage<User> userIPage=new Page<>(page,3);
QueryWrapper<User> queryWrapper=new QueryWrapper<>();
queryWrapper.orderByDesc("rating");
List<User> users=userMapper.selectPage(userIPage,queryWrapper).getRecords();
JSONObject resp=new JSONObject();
for(User user:users){
user.setPassword("");
}
resp.put("users",users);
resp.put("user_count",userMapper.selectCount(null));
return resp;
}
实现分页功能
复制任一Pagination
到table下面
在ul里添加style float=right
想要变蓝 加上active 行为 点击换页
const update_page = () => {
let max_pages = parseInt(Math.ceil(total_records / 10));
let new_pages = [];
for (let i = current_page - 2; i <= current_page + 2; i++) {
if (i >= 1 && i <= max_pages) {
new_pages.push({
number: i,
is_active: i == current_page ? "active" : "",
});}
}
pages.value = new_pages;}
<nav aria-label="...">
<ul class="pagination" style="float:right;">
<li class="page-item">
<span class="page-link">前一页</span>
</li>
<li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number">
<a class="page-link" href="#">{{ page.number }}</a>
</li>
<li class="page-item">
<a class="page-link" href="#">后一页</a>
</li>
</ul>
</nav>
无论打开Pk或者录像页面 打开的都是gameMap.js
如果是对战和之前一样 如果是录像的话 现在判断一下需要区分两者
在聚焦函数addListeningEvent
上进行判断区分
更新一下步数
store.commit("updateSteps", {
a_steps: record.record.asteps,
b_steps: record.record.bsteps,
})
每秒走五个格子 一个格子走完需要200 毫秒 我们定义每三百毫秒 设定一下方向
就可以将整个过程回放出来了
if(this.store.state.record.is_record){
let k=0;//当前
const a_steps=this.store.record.a_steps;
const b_steps=this.store.record.b_steps;// 这里this代表 js和store.js在同一颗树下
const loser=this.store.state.record.recor_loser;
const [snake0,snake1] =this.snakes;//取出来蛇 取出来了地址
const interval_id=setInterval(()=>{
if(k>=a_steps.length-1)//最后一步不计算 因为这一步非法而且已经死亡 没有实现
{
if (loser === "all" || loser === "A") {
snake0.status = "die";
}
if (loser === "all" || loser === "B") {
snake1.status = "die";
}
clearInterval(interval_id);//这里使用了它的id
}else{
snake0.set_direction(parseInt(a_steps[k]));
snake1.set_direction(parseInt(b_steps[k]));
}
},300);
注意这里不需要和后端通信 只需要设定一下方向让蛇移动就可以了
字符串一维数组 转化为 二维数组
const stringTo2D = map => {
let g = [];
for (let i = 0, k = 0; i < 13; i++) {
let line = [];
for (let j = 0; j < 14; j++, k++) {
if (map[k] === '0') line.push(0);
else line.push(1);
}
g.push(line);
}
return g;
}
进入录像页面
const open_record_content = recordId => {
for (const record of records.value) {
if (record.record.id === recordId) {
store.commit("updateIsRecord", true);
console.log(record);
store.commit("updateGame", {
map: stringTo2D(record.record.map),
a_id: record.record.aid,
a_sx: record.record.asx,
a_sy: record.record.asy,
b_id: record.record.bid,
b_sx: record.record.bsx,
b_sy: record.record.bsy,
})
router.put({
name: "record_content",
params: {
recordId,
}
})
break;
}
}
}
显示录像
record.js
右键store.pk复制 改名record 挂载到store树里
import ModuleRecord from './record'
modules:{record:ModuleRecord,}
因为这个页面和game是一样的 都是操作蛇
所以我们存储 信息看看是对战还是录像
将pk页面直接复制到recordcontentview.vue
里边 应为都是一样的
{
path: '/record/:recordId/',
name: "record_content",
component: RecordContentView,
meta: {
requestAuth: true,//是否需要签名
}
},
因为都是打开的页面 需要记录
找到记录之后 需要更新一下我们的状态 store.commit("updateIsRecord",true);
打开录像页面之前先要把他标记成录像页面
因此打开pk页面 需要我们把他标记成false
否则一对战就开始放录像
console.log(record)
查看参数格式和内容
点击查看录像
我们绑定的click事件 <button type="button" class="btn btn-secondary"@click="open_record_content(record.record.id)">查看录像</button>
这里传入的参数 和v-key是一样的 不存在单项目这一说法record.id
F12->Console->target里有全部信息 注意这里的aid没有下划线
对局记录
table
<tr v-for="record in records" :key="record.record.id">// 这里
<td>
<img :src="record.a_photo" alt="" class="record-user-photo">
<span class="record-user-username">{{ record.a_username }}</span>
</td>
<td>
<img :src="record.b_photo" alt="" class="record-user-photo">
<span class="record-user-username">{{ record.b_username }}</span>
</td>
<td>{{ record.result }}</td>
<td>{{ record.record.createtime }}</td>//这里的record代表一个Pojo实例
后端
List<Record> records=recordMapper.selectPage(recordIPage,queryWrapper).getRecords();
List<JSONObject> items=new LinkedList<>();
for(Record record:records){
JSONObject item=new JSONObject();
item.put("record",record);
items.add(item);
一个item代表一个具体的条目 item包含两个玩家的头像和用户名
img和span占一个格子 代表上下排列 是一体的 这里并没有指明
但是record确实有一个id
record.record.id ->item.record.id
分页 先把功能写完 再写分页
在后端把简单的逻辑写出来 应为返回结果还要一直结果.属性名
直接把结果返回给前端 节省用户浏览器内存 自己写的方便 这里把判断A赢还是B赢
写在后端了
在img和span之间加上空格  
牛逼sp
前端
setup内部直接调用就可以调用函数
除了注册登录不需要headers 其他页面都需要headers
一个变量变灰色必须要用 不然会报ce
展示所有记录需要一个table
查询对局记录
实现获取对局列表的api
实现一个service 实现一个serviceImpl 再实现controller
添加分页功能 添加到讲义里边了 alt+enter导入类
创建service
传入页数 实现GetRecordListService
GetRecordListServiceImpl
GetRecordListController
在前端分页需要把所有数据都传过来 增加压力
更新天梯分
调用到保存对局记录里边
private void updateUserRating(Player player,Integer rating){
User user=WebSocketServer.userMapper.selectById(player.getId());
user.setRating(rating);
WebSocketServer.userMapper.updateById(user);
}
传入一个玩家 形参直接使用 实例化一个用户 调用用户的接口
注意需要更新一下玩家 而不是直接更新
更新天梯积分
赢者加五分 输者扣两分 平局不加分
使用UserMapper来更新天体积分 直接调用game里边的 userMapper
使用它的就可以了 不需要再引入了
这个服务的内存要求可能高一点
金言
一定要把ai打死 否则显得我们很傻
sp-0128-8
创建对战列表与排行榜页面
表头
Idea操 作 指 南:https://www.acwing.com/blog/content/25456/
每次都要点击的网址:https://www.acwing.com/blog/content/28250/
G i t B a s h : https://www.acwing.com/blog/content/22768/
WindowsIdea :https://www.acwing.com/blog/content/23868/
本节课讲义https://www.acwing.com/file_system/file/content/whole/index/content/6459285/