SpringBoot做一个项目（一）

#上传git和项目部署环境

用到的工具
idea
visual studio code
vue3
springboot
acgit(和git类似的代码托管平台，算法acwing旗下)
node.js

项目骨架已经搭完了
项目代码

@[##git安装]

中国下载地址 : https://git-scm.com/

官方下载地址 : https://gitforwindows.org/

@[##git配置仓库]

生成密钥

右击进入Git Bash Here

利用ssh-keygen进行生成密钥 --这里是需要在home目录，不是桌面（desktop）

然后会生成两个文件一个是id_rsa,id_rsa.pub

利用cat id_ras.pub打开这个文件,复制里面的全部内容（也可以到文件夹直接打开文件）

@[##Acgit配置]

官网https://git.acwing.com/

进入偏好设置

@[##本地创建仓库]

创建一个文件（地址随便），这个文件作为仓库，重命名kob

进入文件后，打开Git Bash Here 然后输入

git init
vim readme.md
git status 
git add .
git status
git commit -m "创建项目"

@[##acgit配置]

新建一个空白项目

建立后，到本地 的git 面板链接name和邮箱，然后push

创建完项目候，在自己的项目下会有更新的面板

@[##idea配置后端]

1.idea创建

位置放在kob里面

2.启动项目

可以进入localhost:8080

3.第一个页面

创建两个包controller pk和一个IndexController类

添加@Controller注解和RequestMapping("/pk/)

创建 index.html

在resource中创建一个pk文件夹,然后创建index.html

重启，进入localhost:8080/pk/index/

@[##前端]

安装Nodejs

安装@vue/cli

打开windows powershell，执行：

npm i -g @vue/cli

如果执行后面的操作有bug，可能是最新版有问题，可以尝试安装早期版本

启动vue自带的图形化项目管理界面

vue ui

常见问题1：Windows上运行vue，提示无法加载文件，表示用户权限不足。

解决方案：用管理员身份打开终端，输入set-ExecutionPolicy RemoteSigned，然后输入y

常见问题2：vue ui 报错 可能是版本问题

解决方案:更新或者换成推荐版本

进入ui界面
点击创建，进入后选择vue3 ,地址是kob的根目录

安装两个依赖JQuery和bootstrap

启动访问

git上传

@[##解决跨域问题]

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

完工，里面一些小细节还是看这个

友链