鱼遇海

全栈开发博客实战项目：前后端开发流程以及项目部署随着互联网的蓬勃发展，全栈开发成为了越来越受欢迎的趋势。前端开发和后端开发之间的紧密合作和协同工作已经成为了现代软件开发中的重要组成部分。然而，许多开发者在学习和工作的过程中往往只专注于前端或后端，缺乏对整个开发流程的全面了解。因此，有必要通过一个实际的全栈开发项目来帮助这些开发者深入理解全栈开发的流程和方法。项目背景：在过去，博客的建立往往需要一定的技术门槛，需要熟悉前端、后端以及数据库等多个领域的知识。

直接下载最新版安装即可，也可以私聊我直接发安装包、idea、datagrip我给你提供激活码。开发工具：vscode、idea、datagrip。

node默认的下载镜像在国外，所以在后面开发过程中可能会出现下载依赖失败的情况，为了避免这种情况，这里设置一下国内的镜像源、方便后面快速下载（如果你有魔法就不用设置了）window + s键，搜索查看高级系统设置，双击打开 —— 高级 —— 环境变量 —— 系统变量 ——点击path进去，把node的安装目录添加进去确认即可。查看是否已经安装完成 npm属于弄得下的一个包，node安装完成，npm自动有了。出现以下情况表示安装完成，如果为出现以下情况，请联系我给你处理~输入以下命令查看安装情况。

一直傻瓜式的点next就可以（保持网络畅通），安装路径可以自己设置（我这里就默认安装到c盘了），过程中会有一个默认的用户信息 root，和下一步提示设置密码的操作，设置的密码要记住，后面进入mysql的时候需要输入；这时候就可以进入mysql，输入以下命令、会提示输入密码、再输入安装时设置的密码就可以进入mysql进行操作了。window + s 搜索查看高级系统设置—— 高级 —— 环境变量 —— 系统变量。下载完成后双击安装的 jdk ，点下一步，选择安装目录，一直点下一步，直到结束。

然后在assets文件夹下创建一个 tailwind.css 文件（名称可以自定义） 写上以下代码，并引入到入口文件main.js。在src下新建views文件夹，在views下新建blog文件夹，在blog下新建List.vue 和 Add.vue 文件。安装Element-Plus并引入到入口文件 main.js （这里使用了全局引入，按需引入的参考官网，很简单）会生成 tailwind.config.js 和 postcss.config.js 文件即可。// tailwind.css文件。

Lombok：写实体类的时候添加@Data注解后就会自动加上get set等方法，操作方便快捷。打开idea后， New Project ，用Maven构建 Spring Boot 项目。点击Next后：先勾选两个基本的依赖，后面再手动添加其它需要的依赖。Spring Web: 表示是一个web应用程序。

连接本地数据库，第一次连接会提示安装驱动，保持网络畅通跟着点击即可。打开idea中的后端项目，安装依赖、更改配置、连接数据库。创建一个数据库（数据库名称可以自取）右击数据库新建控制台，用于创建数据表。打开datagrip软件。创建一个blog的表。

resources/mapper：存放sql脚本的文件。controller：后端控制器，用于路由导航。service：存放写业务逻辑代码的接口。​ impl：实现service的目录。mapper：存放mapper方法的。commen：存放公共代码的。config：存放配置代码的。entity：存放实体代码的。

/ 查询是根据title条件和分页查询的，这里在sql里默认写死为5条数据了（主打简便，可以根据自己的想法更改）响应实体：（随便封装的，可以根据自己的想法封装）

打开前端项目、在根目录下新建 .evn.development .env.production 两个文件，分别添加以下内容。// 添加环境变量（vite项目 前缀必须以 VITE 开头，通过 import.meta.env 来读取环境变量）// .env.production (暂时没有生产环境，先和开发环境一致，后面后端部署到生产时，再更改这个地址)更改Add.vue文件（其实跟5.4步骤的没有变化，确认以下最终代码，在页面新增测试）样式部分可以根据自己的喜欢来调整（项目重点是打通前后端流程及部署）

需要先注册后再登录，新用户有优惠的,也有免费试用的，学生的还有学生价，用来玩选个最便宜的就ok了。*** 记住服务器的公网IP 和 设置服务器密码，用于后续进行终端远程连接服务器时使用。我这里已经买过所以没有试用的和第一次优惠的价格了（99 元/年）自定义的端口：比如此项目用了 5173 这个端口了。登录后点击产品 选择云服务器ECS。

第三步：把解压后的包移入到 /usr/lib/jvm下面（路径可以自定义，配环境变量时对应上就好了）显示nginx表示启动成功，此时可以在浏览器直接输入服务器地址回车，就可以看到nginx默认页面了。有很多，比如mobax、xshll等等，我这里选择mobax，下载个免费版的即可。第一步，创建远程连接的用户，用户默认为root，密码为远程服务器的密码。*** 在哪个目录下执行的wget 就下载到了哪个目录 ***输入完成后，按Esc键后，输入 :wq!第二步，输入远程公网IP，选择刚刚创建的用户。