springboot+vue项目从第一行代码到上线部署全流程

一、引言

相信很多前端工程师或后端工程师都有一个全栈梦，或者想了解一下自己写的代码是如何融入到整个项目的，或者想知道自己的“另一半”为什么会写出那么臭的代码……

后端工程师会想：“前端小子怎么回事，我“费尽心思”传的那么几十个数据，他怎么就展示了一两个？”

于此同时前端工程师看着“费尽心思”的数据暗想，“byd，怎么每个接口的数据传输的格式都不一样，还有你登录接口为什么要求用户输入自己的ID主键？”

于是两者气愤的去找了全栈的流程，想找出对方代码“又臭又长”的原因，机缘巧合下他们共同点开了这一篇博客……

本文将带领大家走完一个springboot+vue前后端分离项目的全流程，以尽可能简短的语言，帮助大家理解项目的前后端交互和上线部署

注：本人为大二在校生，代码风格参考黑马程序员和尚硅谷，有所不足，敬请斧正

二、项目效果展示

项目连接☞:120.27.247.221:80 (电脑打开哈)

部分项目效果展示——

登录页面

主页

个人信息页面

发表文章页面

注：这是一个简单的小网站，也是用其部分代码来带大家走完全流程的上线网站，里面小bug不少（其实是懒得改，不是）

三、项目准备

注：这里不包括插件和依赖噢,用到的话后面会说明的

后端部分——

IDEA专业版、jdk17、Mysql-8.0.31、Maven-3.6.1

前端部分——

VSCode、node.js

部署部分——

云服务器ECS(或者随便什么服务器了)

四、部分项目结构的分析

后端部分

1）项目的总体结构

项目分为三个模块，分别是common、pojo、server三个模块

三个模块有各自的作用和存放的项目文件，使项目更加清晰有条理

2）common模块

common模块负责管理在整个项目都可以使用到的方法等，如utils就可能放置一些jwt工具，oss工具之类的，exception中放置处理异常的方法，json中放置json转换器等

3）pojo模块

pojo模块负责管理项目中全局可以用到的实体类等，比如Admin、User等实体类

4）server模块

server模块负责管理一些具体的业务逻辑，比如登录功能，发表文章功能等，这里需要特殊说明的是“controller、service、dao”三层架构，是后端项目常用的项目结构，controller层负责规定方法请求的url，service层负责处理方法的具体逻辑，比如信息校验之类的，dao层负责依据方法的需求处理数据库，这三层架构层层递进，是springboot项目的核心

前端部分

注：这个项目的前端结构挺草率，毕竟本人主要从事后端，但是基本的结构还是能分清的，小项目够用

这个虽然比较乱，但是基本的结构还是可以介绍一下的

1.public

放置的是项目用到的一部分静态资源（特别是那种可以复用的资源，比如其他大佬写的炫酷页面）

2.api

放置的是调用后端接口的方法，比如下面这一坨代码

import request from '@/utils/request'

import type { userLogin } from '@/types/userLogin'




// 枚举管理注册模块接口地址

enum API {

  // 注册接口地址

  REGISTER = '/user/register',

  GET_CODE = '/auth',

  VERIFY_CODE = '/auth',

  LOGIN = '/user/login',

  FIND_PASSWORD = '/user/changePasswordByEmail',



}

//注册函数

export const goRegister = (user: userLogin) => {

  // 直接传递 user 对象

  return request.post(API.REGISTER, user)

}

export const getCode = (email: string) => {

  return request

    .post(`${API.GET_CODE}/send-code?email=${encodeURIComponent(email)}`) // 将 email 作为查询参数

    .then((response) => response.data)

    .catch((error) => {

      console.error('获取验证码失败:', error)

      throw error // 抛出错误以便调用者处理

    })

}

export const verifyCode = (email: string, code: string) => {

  return request

    .post(

      `${API.VERIFY_CODE}/verify-code?email=${encodeURIComponent(email)}&code=${encodeURIComponent(code)}`

    ) // 将 email 作为查询参数

    .then((response) => response.data)

    .catch((error) => {

      console.error('校验验证码失败:', error)

      throw error // 抛出错误以便调用者处理

    })

}

其中比如/user/register都是后端提供的接口的路径，前端在这里调用后端的接口，goRegister()便是前端通过封装后端接口得出的一个方法

3.components

其中一般封装全局组件，比如你随便打开一个页面，你滑动页面但是一直保持不动的那一部分，或者是你一个需要重复使用的组件，比如后面要介绍的富文本编辑器

4.pages

其中是一个个的页面，比如你现在退出了阅读我这篇文章回到了主页，主页和读我这篇文章的页面就是两个不同的“page”

5.router

里面管理的是每个页面的路由，你现在可以看一下你浏览器的导航栏，是不是有类似http://xxx/xxx/xxx这里的/xxx就是一个路由的路径它会带你去到某一个“page”

6.style

里面是放置的一些全局可以用到的样式，比如这个小项目就是在里面放了清楚全局默认样式的样式

7.types

里面放置一些实体类，用来接收后端传来的数据，或者往后端去传数据

<