SpringBoot 项目——配置git环境与项目创建
文章目录
一、项目设计
采用前后端分离模式: 后端用 SpringBoot 框架。前端采用 Vue3 框架,包括 Web 端和 App 端。
所实现系统结构如下:
前后端分离模式介绍:
-
服务器端存储前端和后端,其中后端和前端不一定存储到同一台服务器上。
-
用户每打开一个网页本质上是向服务器发送一个请求(url链接,可以存储数据与参数),服务器接受到请求后悔向前端返回一个页面(字符串),浏览器接受到这个字符串之后将字符串转换成页面内容在用户浏览器上显示出来。
-
前后端不分离
用户在客户端每发一个请求,服务器端直接返回一个完整的html网页。(html网页在后端完成直接返回) -
前后端分离
用户通过客户端发送请求,服务器将数据传递给用户浏览器,浏览器端动态用js填充渲染完整的html网页。(html网页在前端用js填充渲染)客户端第一次 url 请求,后端将整个前端模板发送给客户端(此时不发送数据),然后用到哪些数据再去跟服务器请求。之后每次前端向服务器发送请求,后端只讲数据发送给前端然后前端接收到数据之后在客户端浏览器中动态将数据拼接到模板中(js 代码实现)。
前后端分离优势:
同一个后端可以支持多个端口,后端实现数据,不同前端显示不同的界面(Web、App 等)。不同前端返回的数据相同,仅仅展示格式不同。
二、配置 git 环境
1、git 作用
• 代码存档。
• 同步不同机器上的代码。(云端:github,acgit,gitee)
• 多人协作方便。
2、git 配置
-
安装 Git Bash
-
进入家目录生成秘钥:执行命令 ssh-keygen → cd .ssh → ls将公钥的内容上传到云端
-
本地创建项目
进入项目目录,初始化 git:git init
查看当前git仓库未收录的文件:git status
收录当前目录下的所有未收录文件:git add .
保存当前版本:git commit -m " "
-
云端创建项目与本地仓库对应
-
多机器通过云端同步:
1、需要同步的位置中打开gitbash,
git clone
+网址(初次)。(每次修改后存入云端:
git status
→git add .
→git commit -m " "
→git push
)2、需要同步的位置
git pull
,每次将云端版本拉取下来,实现同步。
三、创建后端(IDEA→SpringBoot)
前后端不分离写法
浏览器向后端发送一个 url
请求,后端解析 url
链接对应 controller
所写里的某一个函数。由函数返回值决定所渲染的html
,最后将完整html
返回给前端。
前后端分离写法(后端)
返回的是数据
,而不是整个html
页面。
四、创建前端(VSCode→Vue)
创建了前端 Web 端和 App 端。(创建 vue 项目步骤)
- 创建 web 项目,装入插件 :
vuex
、vue-router
,依赖:bootstrap
、jquery
。 - 创建 acapp项目,装入插件:
vuex
。 - git 维护。
git status
→git add .
→git commit -m " "
→git push
五、在后端SpringBoot中解决跨域问题
添加配置类: 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() {
}
}
六、将后端返回的函数值传入前端
利用ajax
,将后端url
中函数返回值
传递给前端变量
。
具体步骤:
• 客户端下载并调用前端框架(vue)所写代码(html、js、css
),利用 ajax
向服务器发送请求。
• 服务器根据 ajax
中的url
调用后端中对应函数。
• 函数返回值传回一个 json
对象数据,传回给浏览器动态填充前端网页。
前端 vue:
后端 SpringBoot:
返回给前端显示: