SpringBoot项目-配置环境和项目创建

1.项目的组成

2.安装和配置git

2.1安装git

网址Git for Windows去下载，一路回车即可

2.2配置git

2.2.1进入家目录生成密钥

cd进入家目录 

ssh-keygen生成

cd .ssh 有两个文件，一个私钥，一个公钥。使用命令id_rsa.pub把公钥取出。然后把内容上传大奥acgit上去。

3.创建后端项目

4.创建前端项目

4.1下载VsCode

 官网：Visual Studio Code - Code Editing. Redefined

4.2配置vue环境

安装node.js   

官网：Node.js — Run JavaScript Everywhere

安装@vue/cli 

打开终端powershell输入命令

npm i -g @vue/cli

4.3图形化创建vue项目

启动图形化 vue ui

问题记录

1.使用管理员身份打开powershell并输入命令

set-ExecutionPolicy RemoteSigned

2.未配置nodejs环境

参考博客 Nodejs安装教程-CSDN博客 进行安装。

原博客当中的淘宝镜像已经过期，需要换成最新的淘宝镜像

npm config set registry https://registry.npmmirror.com

3.第一次创建vue项目报错

参考博客Vue创建项目页面报错Cannot read properties of undefined (reading ‘indexOf‘)_cannot read properties of undefined (reading 'inde-CSDN博客

创建

powershell输入命令

vue ui

下载插件

下载依赖 jquery和bootstrap

5.前端项目小改动

1.发现路径里面有#号，需要改变

方法：把两个地方的Hash都去掉

2.删除没用的文件、代码

删除这三个文件

6.前端获取后端的数据

<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/botinfo",
      type:"get",
      success: resp => {
        console.log(resp);
        bot_name.value = resp.name,
        bot_rating.value = resp.rating
      }
    });

    return {
      bot_name,
      bot_rating
    }
  }
}
</script>

解决跨域问题

package com.kob.backend.config;

import jakarta.servlet.*;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.context.annotation.Configuration;


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

7.背景图片

<style>
body {
  background-image: url("@/assets/background.png");   /*图片地址*/
  background-size: cover;  /*百分百覆盖界面*/
}
</style>