项目实战——配置git环境与项目创建

目录

一、项目设计

 二、配置git环境和项目配置

1、git的作用

2、git 环境配置

 3、初始化git仓库

 4、前后端分离项目

三、创建后端

 四、创建前端

五、如何解决跨域问题

---

一、项目设计

我们会做一个蛇类对战游戏，用户可以创建AI（bot）代替自己参战，也可以选择自己参战，bot 其实就是一段代码。

游戏整体设计可以参考 botzone 网站

观看对局 - Botzone

 两名玩家分别控制自己的蛇进行上下左右的移动，看看谁能活到最后！

bot 其实是一个函数，可以控制我们的蛇进行不同方向的移动，我们为了简单可以设计上下左右为数字1234，那么我们每次都要返回一个数字（1~4）。

项目的制作周期估计在20天左右~

 整个项目是前后端分离的

Web端设计

 二、配置git环境和项目配置

1、git的作用

1）代码存档，git可以看到代码的所有历史版本，可以进行回档

2）可以同步不同机器上的代码

3）多人开发

2、git 环境配置

首先下载 git bash

Git for Windows

打开git bash 后我们还需要配置，git bash 是通过 ssh 通信的

1、输入ssh-keygen 然后一路回车
2、进入家目录 然后cd .ssh 然后ls 里面有两个文件一个私钥一个公钥
3、cat一下公钥然后复制中摁住鼠标左键git bash就会自动复制 打开git ee
打开设置点ssh密钥然后上传即可
4、在创建的项目文件夹里git bash 输出git init然后回车即可ls -a查看隐藏文件
5、git status表示当前目录下有多少文件还没有收录到仓库里
git add .全部收录
6、打开acgit把git全局设置一下然后推送现有文件夹即可

 3、初始化git仓库

首先创建一个你想要开发项目的文件夹

这里我是创建了一个“git”文件夹

 在 gitbash 中打开并输入命令 

git init

 可以看到我们初始化之后的文件夹有了一个 .git文件夹，代表我们初始化成功

 创建一个.md文件描述我们的文件！

查看更改状态

git status

 保存更改 

git add .

git commit -m "创建项目"

 

 之后我们在云端创建项目，并将本地的项目同步起来

打开git ee 创建项目

 

 复制命令到 git bash 运行

如果有多个项目，尽量去掉 --global ，否则所有的项目都会用同一个配置，不太好~

然后复制第二条命令运行

 然后我们将现有的文件夹推送到云端，由于我们已经初始化过了本地仓库，因此我们从 “已有仓库” 开始执行

 

 初始化工作完成！

假设我们现在有两台电脑，如何实现代码同步呢？

 在任意一个文件夹输入

git clone + 我们刚才克隆的ssh信息

我们的文件夹就存在刚才的项目代码

 如何在已有项目的基础上同步我们云端的代码呢？直接 输入

git pull

就可以把我们在另一台电脑操作的代码同步到云端的代码同步下来

 4、前后端分离项目

 MVC中的   C：Controller  V：View  M：Model

三、创建后端

创建springboot项目：

 

 创建完运行发现我们的 8080 端口被占用了，打开cmd查看并在任务管理器杀死该进程

 

 出现 spring 的 logo 我们的项目就创建完成了！

打开浏览器，输入 http://127.0.0.1:8080 

 我们可以同时在test中引入ChromeDriver的相关依赖~~

 

 测试一下controller 页面

 由于我们vue的端口也是 8080，因此我们在这里把spring项目的端口改为3000

记得我们项目的创建地址一定要在 我们的git 仓库里

 记得同步到线上仓库

 

 四、创建前端

前端我们使用的是vue，并且需要在vs code上编写前端代码，大家可以自行下载

Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.https://code.visualstudio.com/

我们还需要装 Node.js 和 vue 脚手架

Vue.js - The Progressive JavaScript Framework | Vue.js (vuejs.org)https://vuejs.org/Node.js (nodejs.org)https://nodejs.org/en/

 打开vue ui

 

 

打开项目管理器创建项目

 

选好路径，创建项目

 

记得删掉初始化 git 仓库，（我们已经有了git仓库） 

 选择vue3即可

vue的项目创建时间一般比较久，耐心等待即可

安装我们的 vue-router 和 vuex 插件

 

我们还需要安装 jquery 依赖和 bootstrap

 

 

创建完成！ 

同理我们创建我们的acapp端项目并添加插件vuex

 vue-router 就不用装了

完成！

最后用git维护

 

五、如何解决跨域问题

用vscode打开项目

 

 如何在我们的前端获取我们后端返回的参数呢？

用 ajax 实现通信

 这时我们发现域名不一样时会有跨域问题，这时浏览器的一种保护机制

如何解决跨域问题呢？

先创建一个CorsConfig类：

 添加以下代码：

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() {
    }
}

 

成功解决了跨域问题

 

 

 最后换上我们自己的背景图片，大功告成！