SpringBoot+Vue3+Element Plus 仿百度网盘实战

用户9266143231807
871 阅读7分钟

image.png

SpringBoot+Vue3+Element Plus 仿百度网盘实战

download: 3w ukoou com

重构内容 设计：

将MyBatis迁移到Mybatis Plus（迁移工作非常耗时间）+ JPA的形式进行数据增删改 + 无XML 迁移FastJson到Jackson（FastJson的坑就不多说了） 对数据库的表进行重新优化设计 去除所谓的低代码生成.....(这种级别的代码生成其实意义不大，真正拿这个脚手架来开发的话，也用不上) 各个层的日志进行切面打印 前后端密码加密传输 设计多级缓存体系 Map -> Guava > Redis. 不同场景使用不同级别的缓存。Redis缓存内嵌入本地缓存。 合理的分包： common（公共包） / infrastructure（基础框架设施） / domain(业务逻辑) / orm（数据层） / admin(管理后台) / api （外部API） Ruoyi的角色是多职位多角色的设计，但是作为小型快速开发脚手架，没必要这样设计，我改成单职位单角色。 统一注解拦截数据权限

规范：

切分不同环境的启动文件 统一设计异常类 统一设计错误码并集中管理 统一系统内的变量并集中管理 统一返回模型 引入Google代码格式化模板（Ruoyi的代码格式很另类....） 后端代码的命名基本都整改OK 前端代码的命名也非常混乱，进行了整改

整改：

引入hutool包以及guava包去掉大量自己造的轮子（大量工作.....） 引入lombok去除大量getter setter代码 调整日志级别 字典类型数据完全用Enum进行代替 移除SQL注入的Filter，因为迁移到Mybatis Plus就不会有这个注入的问题 XSS直接通过JSON拦截过滤。 替换掉很多Deprecated的类以及配置

优化：

优化异步服务 优化Excel相关类的设计，采用hutool包成熟的轮子 权限判断使用缓存 IP地址查询引入离线包 引入多级缓存体系

还有很多整改的点一时想不起来了，很多细枝末节的改动，整改整个项目花了很多时间。基本上整个项目都重构了一遍。

Vue 3 +Spring Boot 大型前后端项目实战

后端主要技术栈：Spring Boot。

前端主要技术栈：Vue3.2.x + Vue-Router4.x + Pinia + Vant4.x + Less + Vite 4.x + Axios。

下图即为该小册最终开发出的 Vue3 实战项目宣传图，包含 13 张实战项目的页面截图。

2022-2新蜂商城所有页面排版psd-min

这是一个前后端分离的线上商城项目，技术栈为 Spring Boot 和 Vue3，帮助读者具备开发和统筹一个完整项目的能力是此小册的目标，本小册将会带你进行一次 Spring Boot + Vue3全栈项目开发的开发实战，让你在实战中融会贯通当下的热门技术栈。

小册中会选取当下主流的技术，带你从零开始实现一个完整且纯正的前后端分离商城应用，实现前端、后端、数据库设计与开发流程，此小册将通过技术栈的详细讲解、多个功能模块的开发实践、并结合实际项目开发中的产品流程来完成这个任务。

增值服务说明-2023-1.png

最热门的前后端开发技术栈，必须掌握

一个可以实操练手的完整项目，再配备上详细的技术讲解手册，相信无论身处哪个技术领域，都是你提高自身技术水平最高效的工具，此小册将围绕 Spring Boot 和 Vue3 两个目前比较流行的 技术栈向大家呈现一个大型项目完整的开发流程。

实践项目以 Spring Boot 和 Vue3 技术栈为主线，采用前后端分离架构：

不管你是初入职场或即将进入职场，想深入学习和了解 Spring Boot 框架和 Vue 的话，那这门课几乎是你最好的选择，如果你想用 Spring Boot 和 Vue 来开发和上线一个企业级应用，新蜂商城 Vue 版本和这本小册都是你的不二之选。

本小册中包含前端和后端知识，对于前端开发人员和后端开发人员都是一个很好的学习选择。为了更好的阅读体验，笔者将本小册的优点和特性整理在了一张图片中，可以让读者更方便地查看，如下图所示。

img

即学即用，辅助开发者选择合适的开发方向

新蜂商城项目开源之后，有一点是笔者始料未及的，这个商城项目被很多在校大学生和求职者用来作为毕业设计和求职时的项目经历。新潮美观的页面、交互，完善的商品管理和购物流程，简易的启动方式和较低的学习成本，与其他的相关项目比较起来更加有优势。

现在，对于这部分开发者来说又多了一个前后端分离版本可以学习和使用。新蜂商城v1版本只有PC端的页面，加入前后端分离Vue版本之后，新蜂商城的展现形式更加丰富，此时的项目总览图如下图所示。

img

从左到右依次为：新蜂商城Vue3版本后台管理系统页面、新蜂商城v1版本页面、新蜂商城Vue版本商城端的三个页面。不仅仅是展现形式的增多和产品线的丰富，技术栈也加入了Vue，开发模式也变成了前后端分离模式。

新蜂商城的学习用户和使用者不仅仅是在校学生，对于很多已经在从事这个行业的开发者来说也是一个不错的选择。第一版主要是面向后端Java开发人员，第二版直接加入了Vue技术栈，也就是本小册所实战的项目版本。这个项目也进化成前后端分离的项目，后续也会逐渐升级迭代，让开发者们可以学习到更多的实践知识和理论知识。

对于大多数在校生来说，选择毕业后的从业方向，是个让人很头疼的问题，本小册也会给读者一些学习方向和职业选择上的指引。小册中的实践项目包括了两个方向，服务端语言是Java，前端框架是Vue。如果读者可以认真地看完整套教程，将会更立体地认识到这两个开发方向，明白前端和后端分别的职责和主要任务，自然会明白自己更倾向于去做前端开发还是服务端开发。

商城项目是对技术栈的一次全面考核。你将掌握从环境搭建到最后的部署上线一整套前端开发的流程，线上接口及开发文档让你快人一步熟悉真实职场的开发环境，当大家都在用 Mock 数据切页面的时候，你已经完成个人上线的项目。项目开发过程，遇到一些关键的知识点，如 HTTP 请求库、全局状态管理等，会进行知识点的扩充，对市面上功能类似的库进行对比，让你在工作中能根据需求的变化，选择自己需要的工具库。

package com.tansci.controller;

import com.tansci.common.annotation.Log;

import com.tansci.common.constant.Constants;

import com.tansci.service.payment.PayService;

import io.swagger.annotations.Api;

import io.swagger.annotations.ApiOperation;

import lombok.extern.slf4j.Slf4j;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.bind.annotation.PostMapping;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.PrintWriter;

/**

  • @ClassName： ApiController.java

  • @ClassPath： com.tansci.controller.ApiController.java

  • @Description： API开发接口

  • @Author： tanyp

  • @Date： 2022/4/21 11:21

**/

@Slf4j

@RestController

@RequestMapping("api")

@Api(value = "api", tags = "API开发接口")

public class ApiController {

@Autowired

private PayService payService;



@PostMapping("wx/notify")

@Log(modul = "API开发接口-微信支付回调", type = Constants.SELECT, desc = "微信支付回调")

@ApiOperation(value = "微信支付回调")

public void wxNotify(HttpServletRequest request, HttpServletResponse response) throws IOException {

    payService.wxNotify(request, response);

    PrintWriter out = response.getWriter();

    out.print("success");

    out.close();

}



@PostMapping("wx/refundNotify")

@Log(modul = "API开发接口-微信退款回调", type = Constants.SELECT, desc = "微信退款回调")

@ApiOperation(value = "微信退款回调")

public void wxRefundNotify(HttpServletRequest request, HttpServletResponse response) throws IOException {

    payService.wxRefundNotify(request, response);

    PrintWriter out = response.getWriter();

    out.print("success");

    out.close();

}



@PostMapping("ali/notify")

@Log(modul = "API开发接口-支付宝回调", type = Constants.SELECT, desc = "支付宝回调")

@ApiOperation(value = "支付宝回调")

public void aliNotify(HttpServletRequest request, HttpServletResponse response) throws IOException {

    payService.aliNotify(request, response);

    PrintWriter out = response.getWriter();

    out.print("success");

    out.close();

}

}

avatar
文章
阅读
粉丝