2.配置git环境与项目创建

原创 已于 2022-09-06 16:13:03 修改 · 989 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#spring boot #后端 #java

于 2022-07-20 12:59:02 首次发布
本文介绍了如何配置Git环境，创建一个前后端分离的Spring Boot后端项目和Vue3前端项目。讲解了从项目介绍、Git的使用，到前后端的创建与配置，包括修改端口、解决跨域问题和前后端通信的实现。项目名为KOB，是一个基于WebSocket的蛇类AI对战平台，涉及的技术栈包括Spring Boot、Vue、WebSocket和Git。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

项目介绍

项目驱动技术，实现什么项目，在选择去选择什么语言;项目拆分出来的每个模块，看是用什么技术来实现

项目名称：KOB （King of Bots）
做一个游戏的AI作战平台, 蛇类的对战游戏，每个用户user可以创建任意个AI（bot）,限制每个用户同一时间只能派出一个bot出战（防止最强的bot被复制无数个，霸占排行榜）,每一个bot其实就是一段代码；每个对局有两名玩家，每名玩家控制一条蛇，上右下左，每次当一条蛇死时，就结束回合。
每一个bot就相当于函数代码，比如random%4 最简单的四个方向；(每局对战也可以是一个微服务)

项目讲解周期大概两个月~

网站logo：
在这里插入图片描述
项目包含的模块：

  • PK模块：匹配界面（需要使用微服务）、实况直播界面（WebSocket协议）、聊天框（WebSocket协议）;我们这里使用websocket协议。

  • 对战列表模块：对局列表界面、对局录像界面

  • 排行榜模块：Bot排行榜界面

  • 用户中心模块：注册界面、登录界面、我的Bot界面、每个Bot的详情界面

websocket协议：双向协议，客户到服务端发请求，服务端到客户端发请求。
http协议： 是客户端向服务端发送请求，服务端返回响应，是单向协议。

系统架构：
在这里插入图片描述
****对应项目最终实现架构的效果图：
web页面最上面的是导航栏
在这里插入图片描述
最终的展示效果：

在这里插入图片描述

配置Git

使用git维护代码
1.存档（本地，或者云端），历史所有代码，commit提交版本
2.公司代码开发，家里代码开发，同步不同机器的代码（github或者acgit或者）

这里使用网站git.acwing.com 维护代码 ；工具使用 gitbash

https://git.acwing.com/users/sign_in

Git连接gitee或者github网站时是通过ssh通信的，不支持密码操作，
需要使用密钥来及进行操作，使用 linux 系统生成密钥。
在gitbash中安装 （因此要先安装gitbash https://gitforwindows.org/）
步骤：
（1) cd （到家homepath目录）
（2) ssh-keygen (生成ssh文件,一路回车默认)
（3) cd .ssh （进入.ssh文件中）
（4）cat id_rsa.pub (查看ssh公钥内容，一堆密钥，复制)
（5）按住鼠标左键自动复制密钥（ 在gitbash界面）
（6）添加密钥 （即在git.acwing网站的SSH密钥选项中添加SSH, ）

（7）初始化本地文件夹
在新创建项目 kob 的文件夹打开过git执行命令，git init 出现.git的文件夹，也就初始化仓库成功了。（有可能隐藏）

终端中 ls -a 显示所有文件

一般再这个文件夹中创建一个reademe文件
在这里插入图片描述

测试：
(8) 建议记事本，快捷简单，markdown语法
(9) git status 查看当前文件的状态，有哪些文件没有被commited；
(10) git add . 表示把当前文件夹未收录的文件收录到仓库里面
(11) 把当前版本保存下来 git commit -m "创建项目" 下一步上传 git push （和云端同步起来）
(12) 在云端gitacwing网站创建一个空项目kob （同名），方便同步； （创建完成后会提示进行一个配置）
(13) Git全局设置；命令执行时，如果有多个项目最好不要配置--global (意味着git上所有项目都用一个配置)
在这里插入图片描述

解决bug:
![在这里插入图片描述](https://img-blog.csdnimg.cn/3e0237f84a694560afc15f96b0b10743.png
在这里插入图片描述

使用ssh克隆。在一个文件夹中，打开gitbash 输入git clone 链接

每次修改(删除)完一个项目的文件mfgtest.txt之后，要更新到云端时

打开gitbash
git status
更新流程操作：
git add .
git commit -m "test" // 名称叫做test
git push

git pull 拉取

项目的前后端

后端：backend（服务器端），使用springboot来写;可以对接mysql或者redis或者硬盘或者微服务

在这里插入图片描述

前端：名称web，使用vue3来写，vue会将最终的项目打包成html和css几个静态文件。

简单解释前后端交互流程： 即客户端发送一个请求（url）到后端 ,服务端回向前端返回一个字符串（一个大的文件），浏览器接收到字符串会渲染成页面；

本质: 就是服务器函数调用，url可以传函数的参数，用户的所有操作; 都是调用函数，函数的参数在url里面，服务器负责返回一个结果。

传统模式：前后端不分离，比如，客户端发一个函数调用的请求，服务端直接把相应代码或者页面返回，
如今：前后端分离，比如打开一个网站，第一步，服务器先加载浏览器的html静态页面先传过来，再向服务器发送请求，服务器只将数据返回，前端接收到数据时，再动态的将数据插入（字符串处理）到 html 的某个部分，生成页面（渲染，字符串拼接）；

前后端分离：如果服务端返回的数据使用浏览器的 js 实现，就是前后端分离；如果是在服务端，如java直接实现的就是前后端不分离的。

MVC模式： MVC模式和前后端分离没有关系，分离有MVC格式，不分离也有MVC模式。
本质： 每一个后端就是一个函数，url链接就是调用函数名，函数就相当于C (Controllr,负责用于向用户返回数据的一个控制器), V视图就是html ，M（model）就是数据库。

我们这里要实现前后端分离的项目：

优点：写同一个后端接口，可以支持多个端口，只是前端展示的格式不一样；

技术栈：
后端：Springboot框架， 使用Idea工具来写；
前端：Vue框架，使用vscode工具来写；

创建后端项目

第一步，使用Idea创建Springboot项目，通过Spring initializer。
（注：服务器在国外，创建不成功就多试几次）
项目创建成功后，idea右下角，不用点击初始化git；

bug问题：java类文件不能正常显示，pom环境无法导入；
在这里插入图片描述
在这里插入图片描述

每一个链接对应一个函数，一般把函数创建子在一个新的目录；controller包，存储后端所有的函数。**

写一个函数，加上@controller注解就可以实现映射了。
demo：
在这里插入图片描述
测试结果：在这里插入图片描述

前后端不分离（示例）

这种代码方式是前后端不分离的情况，前端发送链接，后端会解析这个链接对应的是哪一个函数，主要是看在controller里面是哪一个函数；函数返回的是一个html页面，浏览器源代码和这个html文件完全一致；
在这里插入图片描述

前后端分离

后端就不在返回一个页面的，而是返回一个数据；
通过controller一层一层的往下找出来的，后端将数据计算出，返回给前端。
在这里插入图片描述
示例代码：

@RestController
@RequestMapping("/pk/")
public class BotInfoController {
    //返回一个字符串
    @RequestMapping("getbotinfo/")
    public String getBotInfo(){
        return "hhhh";
    }
    @RequestMapping("getbotinfo02/")
    public List<String> getBotInfo02(){
        List<String> list=new LinkedList<>();
        list.add("sword");
        list.add("tiger");
        list.add("123");
        return list;
    }
    @RequestMapping("getbotinfo03/")
    // jason 格式
    public Map<String,String> getBotInfo03(){
       Map<String,String> map=new HashMap<>();
       map.put("name","tiger");
       map.put("rating","1500");
        return map;
    }
    @RequestMapping("getbotinfo04/")
    public List<Map<String,String>> getBotInfo04(){
        List<Map<String,String>> list=new LinkedList<>();
        Map<String,String> bot1=new HashMap<>();
        bot1.put("name","tiger");
        bot1.put("rating","1500");
        Map<String,String> bot2=new HashMap<>();
        bot2.put("name","apple");
        bot2.put("rating","1800");
        list.add(bot1);
        list.add(bot2);
        return list;
    }
}

修改端口

创建的项目默认端口本来是8080 ，但是未来写vue前端页面时的时候，vue端口号也是8000；
因此我们修改一下在application.properties文件夹；
server.port=3000
注：不要换80端口（特殊端口）
在这里插入图片描述

这时后端返回的是一个对象,即前后端分离方式

创建前端项目

使用vscod编辑器（webstorm和vscode作用一样）
vscode下载地址：https://code.visualstudio.com/

安装vue3

教程：https://www.acwing.com/file_system/file/content/whole/index/content/5997810/在这里插入图片描述

bug：解决vue@cli安装很慢的问题。
npm config set registry https://registry.npm.taobao.org --global 修改安装镜像地址信息

在powershell中启动vue前端 vue -V 查看版本 vue ui` 启动vue脚手架
在这里插入图片描述

在这里插入图片描述

  • 选择在git初始化过的文件夹中新创建项目web，方便使用git同步到云端
  • 创建项目时，包管理器选择npm 不选则会初始化git
  • 创建vue3项目时间长，文件会比较大。
  • 创建完成后，安装插件vue-router和vuex和依赖jquery 和bootsrap
  • 点击任务栏，运行->输出
    localhost:8080访问
    在这里插入图片描述

git保存代码到云端操作
git status
git add .
git commit -m "test" (名称叫做test)
git push

创建vue项目acapp

使用vscode**打开前端web项目(本地的文件夹), 同时vue在线前端界面要启动服务web项目。
在这里插入图片描述

修改前端代码

代码自己需要修改一下，不对称的改为对称的，冗余的删除掉

如 AboutView.vue 、 HomeView.vue、 HelloWorld.vue 都可以删掉
剩余一些冗余的代码也要删掉

注意：vue创建文件时，文件名至少包含两个大写字母；

去掉url路径中的#

前端vue网页路径多了一个#号，去掉#的办法 如下,

在这里插入图片描述
下面的 createWebHashHistory() 中的 hash 四个字母也要删除掉
保存代码，刷新网页；
在这里插入图片描述

前后端通信

实现目标：刚才后端写的函数，怎么样在前端里去访问它。

步骤：
（1）在前端文件夹里面写，App.vue文件, 每一个vue文件都有三个标签

  • template (写html代码)
  • script (写js代码)
  • style (写css代码)

（2）解决前后端跨域问题；
（3）拼接后端返回对象数据和前端页面
需要修改前端的js文件。

<template>
  <div>
    <div>Bot昵称:{{ bot_name }}</div>
    <div>Bote战力:{{ bot_rating }}</div>
  </div>
  <router-view></router-view>
</template>

<script>
import $ from 'jquery';
import { ref } from 'vue';
export default {
  name: "App",
  // setuo 是主函数入口
  setup: () => {
    let bot_name = ref("");
    let bot_rating = ref("");
    //访问后端链接
    $.ajax({
      url: "http://localhost:3000/pk/getbotinfo03/",
      type: "get",
      success: resp => {
        // console.log(resp);
        bot_name.value = resp.name;
        bot_rating.value = resp.rating;
      }
    });
    return {
      bot_name,
      bot_rating
    }
  }

}
</script>


<style>
</style>

跨域

域名=ip+端口号，

跨域问题（前端和后端的额域名不一致，即浏览器的安全机制）
前端：http://localhost:8080/ vue端口8080
后端：http://localhost:3000/pk/getbotinfo03/ 端口是3000

在后端创建一个类在这里插入图片描述
添加这个类意思h意思表明后端是允许其它域名的访问。在这里插入图片描述>重新启动后端，访问localhost:8080>在这里插入图片描述
问题：只是后端返回的对象数据没有和前端页面拼接起来；
接下来需要修改前端js文件。

修改完js文件后，成功显示后端返回数据在前端页面；
在这里插入图片描述

解决跨域问题代码：

package com.kob.backend.config;

import org.springframework.context.annotation.Configuration;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Configuration
public class CorsConfig implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

        String origin = request.getHeader("Origin");
        if(origin!=null) {
            response.setHeader("Access-Control-Allow-Origin", origin);
        }

        String headers = request.getHeader("Access-Control-Request-Headers");
        if(headers!=null) {
            response.setHeader("Access-Control-Allow-Headers", headers);
            response.setHeader("Access-Control-Expose-Headers", headers);
        }

        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");

        chain.doFilter(request, response);
    }

    @Override
    public void init(FilterConfig filterConfig) {

    }

    @Override
    public void destroy() {
    }
}

作者：yxc
链接：https://www.acwing.com/file_system/file/content/whole/index/content/5997810/
来源：AcWing
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

添加网页背景

在这里插入图片描述在前端App.vue文件写style代码

<!-- 从根目录开始写路径，@/表示根路径 -->
<style>
body {
  background-image: url("@/assets/background.png");
  background-size: cover;
}
</style>

总结

流程：用户打开链接后，前端就会执行代码，在vue里面写的所有代码，最后都会在用户浏览器执行。用户打开某个网址是将这一坨代码下载到浏览器中，浏览器会按个执行ajax代码。
后端函数被调用之后会将对象返回给用户浏览器。

看过的视频课要及时 复盘~~~~
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值