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项目报错
创建
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>