大概流程如下(git比较详细)
我的markdown语法写的好丑啊呜呜呜
-
设计分析
-
配置Git环境
1、作用
存档
同步不同机器上的代码
2、步骤
cd 进入家目录
ssh-keygen 生成秘钥(然后一路回车)
cd .ssh 其中rsa为私钥 第二个是公钥
cat id_rsa.pub 全选密码按住鼠标左键自动复制
将秘钥上传至acgit或者GitHub
在你想要的地方创建空文件夹进入
git init
文本文档->md文件
git status
git add .
git commit -m "创建项目"
至此就在本地创建成功了 -
云端创建
直接在acgit创建新项目
将本地与云端连通命令
git config user.name "H B"
git config user.email "3343806536@qq.com"
git remote add origin git@git.acwing.com:BHH/kob.git
git push -u origin main
粘贴快捷键 右键+paste 或者 shift+insert
至此本地仓库与云端仓库一一对应
- 技术栈
Springboot + vue3 前后端分离
1、后端
前后端不分离:
向后端返回一个连接
package com.kob.backend.controller.pk;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/pk/")
public class IndexController {
@RequestMapping("index/")
public String index() {
return "pk/index.html";
}
}
后端解析连接返回一个页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Hello World</h1>
<div style="text-align: center">
<img src="/image/img.png" alt="">
</div>
</body>
</html>
前后端分离:
链接对应函数名,通过controller一层一层找,后端将结果算出返回给前端
@RestController
@RequestMapping("/pk/")
public class BotInfoController {
@RequestMapping("getbotinfo/")
public List<Map<String, String>> getBotInfo(){
List<Map<String, String>> list = new LinkedList<>();
Map<String, String> bot1 = new HashMap<>();
bot1.put("name", "tiger");
bot1.put("rating", "1500");
Map<String, String> bot2 = new HashMap<>();
bot2.put("name", "lion");
bot2.put("rating", "1800");
list.add(bot1);
list.add(bot2);
return list;
端口设置、上传git
在application.properties中将端口换成非8080(防止与前端冲突)
在kob文件夹中打开gitbash:
git status
git add .
git commit -m "创建后端"
git push
2、前端
- 环境配置 Vue
- 分别创建web、acapp项目
- git进行同步
在web项目可能报错
TypeScript intellisense is disabled on template, you can config "jsx": "preserve" in tsconfig or
jsconfig to enable it, or config vueCompilerOptions.experimentalDisableTemplateSupport
to disable this prompt
- 在jsconfig加上"jsx":"preserve"
就行了
最后在后端根目录下加入config解决跨域问题即可
3、总体流程
vue中代码在用户浏览器中执行
用户打开网址 将vue的代码下载到浏览器里
浏览器执行到Ajax代码时
函数向后端发送请求
后端找到路径里的相应函数
然后返回一个json对象传回用户浏览器
用户浏览器拿到结果之后将页面的值换成传回的值
到此所有的配置就全部完成