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

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

<
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天天扭码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值