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

项目模块拆分

在我们进行开发的时候，对于一个大的项目，我们可以根据项目有多少主要的页面来对项目进行拆分。

• 比如，此项目中，对于用户，有登录和注册功能，有我的Bot页面，存放自己创建的bot，这个时候，可以创建一个用户中心模块，代表这些功能。

• 然后游戏的主界面是两条蛇进行pk，在此页面下，还有匹配界面，实况直播，真人pk等功能，可以把这些作为pk页面的子模块。

• 另外还需要支持对战列表和排行榜界面，这两个可以再单独拿出来分别作为一个模块。
  主界面大概可以长成这个样子：
  

配置git环境

简便方法

可以直接在云端先创建一个仓库，然后git clone到本地，这样就省去一系列的配置环节了，反正我一直是这么干的。

创建完成以后，复制https格式的git地址。

然后本地打开git bash，直接git clone，就可以了。但是前提是本地的ssh公钥已经传到了远程git，否则还得身份验证。

创建后端项目

选一个Spring Web，再选一个模板引擎Thymeleaf。
Springboot的后端，主要是为了实现函数。每一个链接对应一个函数。

演示前后端不分离的写法

函数可以写到任意一个地方，只要加一个Controller的注解，就可以做映射了。一般情况下，是新建一个包，也就是一个目录，叫Controller。在这个目录下，按照模块分类，可以再建几个模块对应的目录。比如叫IndexController。


然后加上对应的注解，回车，包自动就加进来了。
pk作为父目录，其子目录可以在这个Controller中继续添加路径。

返回的页面在template中定义。

前后端分离

如果前后端分离的话，那么后端就不再直接返回一个页面了，而是返回一个数据。如果要返回数据的话，这里要用RestController。大概就是restful的意思。

至于为什么要这么做，这就是规定，就是一堆字符串处理，开发的时候会用就行了。

修改默认端口

默认端口是8080，本地是127.0.0.1，

安装vue3

略

解决跨域问题

springboot后端开放的是3000端口，但是Vue那边用的是8080端口，这个时候如果用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() {
    }
}