Acwing《Spring Boot 框架课》2.配置git环境与项目创建

不爱做帅哥

于 2023-02-09 18:38:11 发布

阅读量489

点赞数 1

分类专栏： SpringBoot学习笔记文章标签： git spring boot github vue

本文链接：https://blog.csdn.net/weixin_49619623/article/details/128955222

版权

SpringBoot学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

写这个专题是为了记录自己的学习过程，因为原先没接触过spring boot和vue，如果有错误，请指正！

Git的配置

1.git的作用：①更好的版本管理 ②不同机器的代码管理 ③更好的分布式管理

2.git的安装：一路默认即可

3.安装完成后在桌面右键选择Git Bash

4.设置密钥

①cd到家目录

②利用ssh-keygen生成密钥

③复制id_ras.pub里的内容放入https://git.acwing.com/用户设置里的SSH密钥

5.项目仓库设置

①我们在本地创建一个项目文件夹，进入文件夹，鼠标右键git Bash

②输入git init 进行初始化，在文件夹下会出现.git文件夹（可能会被隐藏）

③输入touch readme.md 创建一个md文件，然后利用vim reademe.md进行写入（vim不会用可以去补一补Linux基本命令）

6.git操作

每当我们做了工程的一部分我们都需要将我们的项目上传来保持版本更新

①git status

②git add .

③git status再次在查看文件状态

④git commit -m "xxxxx" 将文件提交到本地仓库

下面的操作是已经配置到本地到云的路径了

⑤配置用户名和邮箱

⑥按照网页上创建好出现的命令，复制粘贴

⑦git push -u origin master 将本地仓库push到云端

总结：git pull 拉取；git commit 递交到本地仓库；git add 将文件到暂存区；git push push云端

IDEA

1.创建项目

选择Thymeleaf是为了模拟前后端不分离的情况，我们这里不演示，可以不选。

2.启动项目

启动项目，输入127.0.0.1:8080进行访问

3.改变端口

为了防止冲突，我们将我们后端的串口修改下，如图

4.前后端分离：后端不再返回页面，而是返回数据（后端实际上就是函数）

① 我们创建pk文件夹，并在文件夹下创建BotInfoController类，并且添加@RestController和@RequestMapping("/pk/")

@RestController：是controller和responseBody的结合；该类中所有的api接口返回的数据，都用json形式返回客户端

@Controller 将当前的修饰类注入SpringBoot IOC容器，使得项目运行时，这个类就被实例化

@RequestMapping()：用于映射请求

② 增加相应的映射，我们创建Map类（注意Map类里的key与value都必须是String类型）来测试

Vue

1.安装Node.js：npm运行在node.js上面，所以得先安装node.js

2 .安装完成我们打开powershell（用管理员的方式）输入：npm i -g @vue/cli (如果后面有版本问题，可以安装npm i -g @vue/cli@5.0.4)

3.安装vue完成后，我们vue ui 打开

4.点击创建项目，输入文件名web，勾掉git，并选vue3，创建完成后，在插件里安装两个插件

安装两个依赖

5.然后创建acapp与上述相同（只需要安装vuex插件，不用安装依赖）

6.完成我们就可以启动web了

有页面跳出来就好啦！

Vscode

1.启动vscode

2.删除掉一些无关信息

App.vue里的东西都要删掉，留几个标签就行，没用的全删掉！删完之后要记得保存ctrl+s，看看有没有报错

前端代码编写

1.每个vue就三个标签templa，script，style分别对应html，js，css

（前端的东西重点在模仿，也不需要额外去学习）

2.然后我们呢在vue.js里编写代码（success不要拼错，我就拼错了害得我找了老半天）

<template>  
<div>  
 <div>Bot昵称:{{ bot_name }}</div>  
 <div>Bot战力:{{ bot_rating }}</div>  
</div>  
<router-view/>  
</template>  
  
<script>  
import $ from 'jquery';  
import { ref } from 'vue'; //为了定义变量  
export default {  
  name:"App",  
  setup:() =>{   //整个函数的入口  
    let bot_name = ref("");  
    let bot_rating = ref("");  
  //访问后端  
    $.ajax({   
      url:"http://127.0.0.1:3000/pk/getbotinfo/",  
      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>

3.保存后会发现报错，是因为我们还没有解决SpringBoot中的跨域问题

创建config文件夹，在其下创建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() {
    }
}

4.大概率是没问题了，有问题的话自己debug下吧