【Java闭关修炼】SpringBoot项目-贪吃蛇对战小游戏-配置git环境和项目创建

项目的逐步细分
配置git环境
创建项目后端
前后端不分离写法-url访问路径解析资源
安装vue
vue文件
后端解析数据发送到前端页面解析出来

项目的逐步细分

匹配界面：需要用微服务
实况直播：webSocket 用户和服务器可以双向发请求
真人PK:websocket协议
对战列表-录像回放
排行榜：bot列表
用户中心：注册登录我的bot bot的记录

配置git环境

作用：存档；同步不同机器的代码

以下是简单的git操作：

初始化仓库：git init
git status test.txt – 查看状态 (红色表示没有添加到暂缓区)
git add test.txt --或者git add (添加到暂缓去,提交所有文件到暂缓区)
git commit test.txt
//这时候会进入编辑模式,让我们添加做了哪些事情,写完之后,esc 退出编辑模式,:wq 保存并退出
git commit -m “初始化项目” //直接提交
git push 推送到github上面
给项目地址起别名：git remote add 别名项目地址
推送：git push -u 项目别名 main(分支)

创建项目后端

下载依赖：注意jdk与springboot 版本的问题

找到项目的入口函数，启动项目

地址栏中输入：localhost:8080 出现以下情况，说明项目启动成功：

前后端不分离写法-url访问路径解析资源

浏览器输入地址的时候记得最后加上/

这里访问的资源：pk目录下面的index.html，那么浏览器就会请求后端，contrroller下面的pk目录下的indexController类，根据index找到对应的注解，从而找到相应的函数，从而返回对应的资源

安装vue

安装Node.js
安装vue/cli：npm i -g @vue/cli
安装指定的vue版本：npm i -g @vue/cli@5.0.4
启动vue自带的图形化项目管理界面 vue ui

在指定位置创建前端的文件夹
选择 Vue3 创建项目
安装两个插件
安装jquery依赖
安装bootstrap依赖
点击运行
点击输出，点击localhost:8080

vue文件

对于每一个vue文件，style标签用来写css,script用来写js,template用来写html

后端解析数据发送到前端页面解析出来

<template><div><div>Bot昵称:{{bot_name}}</div><div>Bot战力:{{bot_rating}}</div></div>
<router-view></router-view>
</template><script>
import $ from 'jquery';
import {ref} from 'vue';// 定义变量之前需要实现导入refexport default{// 定义变量 bot_name bot_ratingname:"App",setup:()=>{// 定义两个变量 存放后端解析出来的数据let bot_name = ref("");let bot_rating = ref("");// 将后端信息提取出来  先定义好后端的解析路径 采用get方式进行获取  打印成功的消息// ajax请求 返回resp消息 包含后端的数据$.ajax({url:"http://localhost:8080/pk/getbotinfo/",type:"get",success:resp=>{// console.log(resp);bot_name.value = resp.name;bot_rating.value = resp.rating;// 解析后端的数据}});// 返回后端获取的数据给上面的div标签return {bot_name,bot_rating}}
}
</script><style></style>

【Java闭关修炼】SpringBoot项目-贪吃蛇对战小游戏-配置git环境和项目创建相关推荐

【Java闭关修炼】SpringBoot项目-贪吃蛇对战小游戏-配置Mysql与注册登录模块2
[Java闭关修炼]SpringBoot项目-贪吃蛇对战小游戏-配置Mysql与注册登录模块2 传统的登录验证模式 JWT登录验证方式下载安装依赖创建JWTUTIL JwtAuthenticati ...
基于Java实现的贪吃蛇大作战小游戏
贪吃蛇大作战小游戏整体思路与架构本项目主要分为三个部分,即UI界面.游戏逻辑与网络传输. UI界面部分,主要是为了实现不同界面之间的切换.包括了注册登陆窗口(loginFrame)与游戏主窗口(G ...
Java实现贪吃蛇大作战小游戏（完整教程+源码）额外实现积分和变速功能
大家好,我是黄小黄同学!今天给大家带来的是小项目是基于Java+Swing+IO流实现的贪吃蛇大作战小游戏.实现了界面可视化.基本的吃食物功能.死亡功能.移动功能.积分功能,并额外实现了主动加速和 ...
贪吃蛇html网页小游戏,网页贪吃蛇HTML5小游戏制作
贪吃蛇是以前我们经常在手机里玩的一个小游戏,现在要是把它搬到网页上也会让人更回味.这是一款非常有趣的HTML5响应式网页贪吃蛇小游戏.在游戏中你可以使用键盘的上下左右来控制蛇的运动方向.现在要列出的是 ...
贪吃蛇宝宝微信小游戏cocoscreator
非常有趣的创意玩法贪吃蛇一笔画玩法里面将近有1000关游戏,分为三个难度乡试会试殿试每个难度通过200关可以解锁下一个难度在这里插入图片描述每得到一条蛇就会产生离线收益兑换道具! 这款 ...
纯JS实现贪吃蛇——超上瘾小游戏！！！
效果图最近使用 JS 写了一个贪吃蛇游戏,效果如下: 谷歌浏览器点击直接在线玩前言贪吃蛇作为一款经典又简单的小游戏,每个人都玩过.实现一个贪吃蛇游戏基本具有以下功能: 棋盘(也被称作 " ...
贪吃蛇（欢乐小游戏）
#include"墙.h" #include"标头.h" #include"蛇.h" #include"食物.h" #i ...
2.配置git环境与项目创建
目录项目介绍配置Git 项目的前后端创建后端项目前后端不分离(示例) 前后端分离修改端口创建前端项目安装vue3 创建vue项目acapp 修改前端代码去掉url路径中的# 前后端通信 ...
python小游戏贪吃蛇下载_python小游戏之贪吃蛇
importpygame,sys,time,randomfrom pygame.locals import * #定义颜色变量 redColour = pygame.Color(255,0,0) bl ...

【Java闭关修炼】SpringBoot项目-贪吃蛇对战小游戏-配置git环境和项目创建

【Java闭关修炼】SpringBoot项目-贪吃蛇对战小游戏-配置git环境和项目创建

项目的逐步细分

配置git环境

创建项目后端

前后端不分离写法-url访问路径解析资源

安装vue

vue文件

后端解析数据发送到前端页面解析出来

【Java闭关修炼】SpringBoot项目-贪吃蛇对战小游戏-配置git环境和项目创建相关推荐

最新文章

热门文章