vue3+springboot创建一个web项目流程(极其详细)

前期技术栈学习路线(可跳过,这是给自己挖的坑hh)

前端:

html+css+javascript基础
jquery(js方法集成库,重点是各种调用操作)
ajax(不刷新整个网页(异步)对网页的某部分进行数据更新,很重要)
vue3(注意版本)

后端(真不熟,至少要java语法基础和mysql知识吧qwq)

java语法
mysql的知识
JDBC(java操作数据库的接口)
servlet(java开发动态网页的规范)
mybatis(JDBC大升级,使用简单的注解来操控数据库，从中crud)

还需要了解的知识：(课上挖坑和总结)

第一，做项目之前要花一半的时间来构思整个项目需要达到什么展示效果，再去学习相关的技术

深入一点说，至少要想好前端展示的页面是什么样子的，要做哪几个功能等等

第二，http协议和websocket协议有何区别？

http协议的请求只能从客户端发起，而websocket协议可以从服务端发起请求，也可以从客户端发请求(计网应该会学，不着急)

第三，微服务是什么？

将一个系统按业务划分成多个子系统，每个子系统都是完整的，可独立运行的，子系统间的交互可通过HTTP协议进行通信(也可以采用消息队列来通信，如RoocketMQ，Kafaka等)(不懂)

第四，redis是什么？

一个性能优异的数据库

第五，什么是前后端分离项目，什么是前后端不分离项目？

在前后端分离项目中，前端通常会将整个网页的代码通过API发送给服务器，服务器返回数据后，前端使用JavaScript进行数据解析和页面渲染。前端通过AJAX或Fetch等技术从后端获取数据，并使用模板引擎或前端框架（如React、Vue.js）将数据动态地渲染为HTML页面。这样可以实现前后端的解耦，提高灵活性和可扩展性。

相比之下，在前后端不分离项目中，前端和后端代码存在于同一个项目中，部分页面内容由后端直接生成并渲染，然后整个页面作为响应返回给客户端。前端通常会使用服务端模板引擎（如JSP、PHP模板）或基于后端语言的HTML渲染库（如ASP.NET、Django）来生成HTML。页面中的动态交互一般由后端生成相应的JavaScript代码来处理。

因此，在前后端不分离项目中，服务器负责生成整个页面的HTML内容，包括前端所需的初始状态和页面交互逻辑。客户端接收到完整的HTML响应后，不需要再进行数据请求和前端渲染，而是直接呈现给用户。这种方式可以减轻客户端的工作量，但也降低了前后端的解耦程度，并且可能导致页面加载速度较慢。

一.项目代码维护以及项目后端创建

①使用git进行项目维护(项目代码管理平台:AC_Git)

git作用:可以看到项目提交历史上各个版本的代码,可做到多机同步代码

git初始化:
1.下载 git: https://gitforwindows.org/

2.创建项目文件夹(这里我的文件夹名字叫做 startWeb )

3.进入文件夹，并在空白区域右键,选中 Git Bash Here

4.输入 cd 进入根目录下

5.输入 ssh-keygen 并一路回车,如果看见一堆气泡一样的图案说明生成成功，可以继续往下进行！

6.输入命令 cd .ssh，进入.ssh文件夹下

7.输入命令 ls -a ,可以看到其中有一个名为 id_rsa.pub 的文件

8.使用 cat id_rsa.pub 命令获取文件内容，并用鼠标左键全选进行复制

这就是我们需要的ssh密钥，可以先将它保存在一个记事本中稍后使用

9.之后进入Ac Git官网进行项目管理
注册账号登录后，点击转到偏好设置

10.点击左侧ssh密钥

11.输入之前创建好的密钥，并输入名称(随便什么名字都可以，一般叫”家”)

12.添加成功!

13.返回最开始的主页，选择 新建项目

14.创建空白项目

15.输入 项目名称 和 项目描述 ，选择 可见性级别，下面 取消勾选，之后新建项目即可

tip:希望有人看就设置为 公开 ，不希望有人看就设置 私有

16.可以看到项目创建成功，接下来要进行git仓库的设置

17.回到项目文件夹，右键打开 git-bash, 初始化git仓库 ，输入 git init 命令

18.我们这时如果点击查看并选择显示隐藏文件，可以看到出现了一个 .git文件夹，说明初始化成功。

19.之后我们手动在当前目录下，新建一个 readme.md 文件

20.在这个文件其中可以写一些项目简介以及备注

21.之后我们在git bash中输入 git status 命令，我们可以看到底部出现了一个红色的文件，文件名就是我们刚才创建的 readme.md。

tip:使用此命令可以查看当前仓库下所有新创建的文件以及出现变更的文件，其为红色;若已经是最新版本，则为绿色。

22.这个文件是红色，说明我们还没有把它的最新版本添加到我们当前的仓库中，所以我们要添加一下。
输入 git add . 命令，并再次输入 git status 进行查看,可以看到其变为绿色，说明已经将此文件加入本地的仓库中。

23.可以这样理解，我们只是将这个文件添加到我们 本地的仓库 中,而我们 云端的仓库 还没有收录我们的文件，所以我们需要两步操作，第一步是给这个仓库当前所有的文件做一个整合，起一个名字作为1.0版本；第二步是上传到我们的云端仓库之中(个人理解)
我们先做第一步，输入 git commit -m "项目创建git仓库",这样就保存了当前仓库的版本

tip:这里命令的最后双引号中的内容可以自己随便起

我们再做第二步，需要把我们的仓库当前版本上传到云端(ps:这里步骤有一点多),我们云端的项目不是自动创建好的，需要本地-云端对应起来才可以
打开我们之前创建好的项目页面，可以看到底部有很多命令：

24.耐心一点，我们将这些命令逐渐输入到我们的git-bash中(ps:不需要全输进去，按照我的步骤来就可以)
先复制git全局设置这两行，但是都要去掉global!!!
这里复制到git-bash中不能直接使用ctrl-v，而是需要鼠标右键点击paste,或者用shift+insert键


没有报错就进行下一步喽
我们输入 推送现有文件夹 下的命令 git remote add origin git@git.acwing.com:zziiliu/startweb.git

之后这个命令非常容易出错，输入这个部分最底下的命令 git push -u origin master 注意一定要把main换成master!
这里面输入命令之后回车，需要再输入一次yes即可

25.刷新一下我们的网页，可以看到我们的版本已经成功上传到了云端仓库中，我们的 最后提交 一栏中有我们输入的版本的名字，前面是我们添加的read.md文件，而下方出现了我们read.md文件的内容以供参考。

凡是 最后提交 相同的，都是我们新添加到仓库的最新的文件

这样，我们的git仓库创建完成！做到这里恭喜你走出了第一步！
我们在之后的步骤中，会用到这些操作，所以一定要创建好你的代码管理仓库

tip:可以使用git的克隆命令复制仓库，可以使用git pull拉取最新的文件，可以使用git push上传我们修改的文件，在之后的步骤当中我们会用到这些操作的，不必着急。
tip:其他代码管理平台的git仓库也可按照此流程来进行呦

②开始创建后端项目

1.要开始创建一个项目的后端，我们需要先下载一个idea(点击进入官网下载)

tip:这里需要注意，idea正版如果没有学生认证的话只能免费使用两周，而咱们学校的学生认证有一些问题，拿不到认证资格，所以可以花钱，或者另辟蹊径去得到能正常使用的版本。

2.下载完idea后，打开，并点击 新建项目

3.我们的项目自己起一个名字，并把它放在我们创建了git仓库的文件夹当中，这里我起的名字是 backend,下面是我所写的注意事项
一，左侧应选择 spring Initializr
二，右侧的服务器url，其实应该选择默认的 start.spring.io,奈何官网总是挂，有可能在选中后右边还是一直转圈无法加载，所以可以用阿里云的url代替，即 start.aliyun.com 。科学上网可以用前者，更推荐用前者。
三，名称随便填写，但是要有代表性
四，位置放在我们创建的项目文件夹中
五，不需要创建git仓库
六，语言选择 Java,类型选择 Maven,JDK选择 1.8，Java版本选择 8，其他不用动，直接下一步即可。

4.点击下一步，需要注意图中画红框的这三个东西
第一个springboot版本，需要版本在3.0以下，注意是2.几的版本，千万不要选择3.0以上，因为我们的java版本不支持
第二个，选择依赖项，这里我们只选择① web->Spring Web 和② Template Engines->Thymeleaf 即可
上述所有工作做完后点击创建

5.这个时候进行项目的初始化，所以可能需要等待一段时间，等待所有文件加载完毕

6.此时我们的项目基本创建完毕，可以点击src->main->java->com.example.backend下有一个名为 BackendApplication.java 的文件，点击运行即可检验我们的项目是否可以正常运行

tip:如果没有运行键，并且提示你安装JDK,那么按照它的提示安装即可
tip:可以在设置->插件的位置处搜索Chinese，让idea变成中文，但是不推荐中文版本
tip:如果运行后在终端出现端口被占用的情况，可以点击resources下的application.properties文件，修改server.port后的数字进行修改

7.正常运行后，应该显示这样的页面

8.打开浏览器输入 localhost:8084 (这里我改了端口号为8084)，如果出现hello world界面那么恭喜你，说明运行成功，项目后端创建成功！

tip:关于后端代码，暂时不讲解，在后续的文档中我会详细注解

③前端项目的创建

1.前端框架我们用的是vue.js,在此之前，我们需要下载：
第一，node.js(请下载稳定版LTS，一路回车即可)

第二，vscode来写前端代码(仍然一路回车即可)

2.安装完之后我们准备下载vue框架(vue3)
首先在桌面（或者别的什么地方都可以），用管理员身份打开powershell
打开powershell后输入命令：npm i -g @vue/cli回车
如果执行后面的操作有bug，可能是最新版有问题，可以尝试安装早期版本，比如：npm i -g @vue/cli@4 回车
之后在终端输入 vue ui 回车,等待项目图形化界面启动

tip:在文件夹下快速打开powershell的方法：左手按住shift后，鼠标右键可以看到在此打开powershell窗口

3.进入图形化界面之后开始进行项目创建和项目配置
在主页上选择 创建

在我们之前创建的文件夹下，选择 在此创建新项目

输入项目名称，并按照默认设置进行配置，不用git仓库，点击下一步

4.在这个页面选择版本Vue 3,点击创建项目

5.这里我们vue的项目比较大（一般100多M），所以需要耐心等待
项目创建成功之后就是这个样子的

我们需要安装一些插件和依赖，点击左侧的插件，安装vue-router以及vue-x

tip:vue-router对应vue的路由配置服务，而vue-x对应vue的全局组件服务

点击依赖，点击右上角的安装依赖，

先搜索 Jquery 并安装

再搜索 bootstrap

再搜索一个 @popperjs/core,以此类推，不再贴图了

6.完成上述步骤之后，我们可以点击 任务，点击 serve ,再点击 运行

出现右侧的绿色符号之后，说明构建成功！这个时候我们点击 输出

往下拉，可以看见底部有一个网址，点击蓝色的网址

如果显示了这样的一个页面，说明我们的前端项目创建成功！

tip:暂时不着急修改我们的前端代码

④项目代码上传git仓库

1.打开我们的项目文件夹

2.右键打开 git-bash,输入命令 git status,可以看到我们新创建的文件夹都为红色，说明它们还没有收录到我们的本地仓库中

3.输入命令 git add . 后，再输入命令 git status ，如果变绿说明已经全部收录

4.收录完成后我们需要对现有的仓库代码起一个名字，提交这个名字指代的项目代码
输入命令 git commit -m "前后端创建成功"

5.之后我们输入命令 git push 上传我们的版本到云端仓库中

6.打开我们的项目托管平台Ac Git,在首页点击我们新建的项目，越往下创建的项目越新

7.我们可以看到我们之前提交的版本和更新时间

8.至此，我们完成了整个项目创建的开始工作。写这样的长文既费时间又费心血，但是为了帮助更多有志于学习这方面的同学，我甘愿如此。如果你对我的文章感到满意，不妨给我点一个赞再走呦！

tip:下期预告：关于0基础如何用vue3搭建一个个人博客平台的详细流程