Vue3+SpringBoot快速开发模板

这篇具有很好参考价值的文章主要介绍了Vue3+SpringBoot快速开发模板。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

起因:个人开发过程经常会使用到Vue3+SpringBoot技术栈来开发项目,每次在项目初始化时都需要涉及一些重复的整理工作,于是结合一些个人觉得不错的前后端模板进行整合,打通一些大多数项目都需要的实现的基础功能,以便于快速开发项目。代码已按个人力所能及的规范编写,如有不足多多见谅~

一.功能预览

为了提高模板的通用性与精简性,只实现一些基础的功能:

  • 登录 \ 注册
  • 密码修改 \ 重置
  • 用户管理(增删改分页)
  • 个人信息查看 \ 修改
  • 头像上传

(1) 登录

登录、注册、修改密码、重置密码表单后端已实现基础的格式校验。
Vue3+SpringBoot快速开发模板,项目开发,spring boot,后端,java

(2) 注册

验证码方面都是采用邮箱验证码,可根据个人需要进行配置或者修改。参考博客:

  • 手机验证码
  • 邮箱验证码
    Vue3+SpringBoot快速开发模板,项目开发,spring boot,后端,java

(3) 重置密码

Vue3+SpringBoot快速开发模板,项目开发,spring boot,后端,java

(4) 主页

Vue3+SpringBoot快速开发模板,项目开发,spring boot,后端,java

(5) 用户管理

基础的增删改查功能,包括图片上传(admin角色状态展示)

Vue3+SpringBoot快速开发模板,项目开发,spring boot,后端,java

(6) 修改密码

Vue3+SpringBoot快速开发模板,项目开发,spring boot,后端,java

(7) 个人信息

Vue3+SpringBoot快速开发模板,项目开发,spring boot,后端,java

(8) 编辑个人信息

Vue3+SpringBoot快速开发模板,项目开发,spring boot,后端,java

二.必备配置

上述预览效果必要配置项:

  • 前端
    • 使用如下指令安装依赖包即可
# 1. 安装依赖包
pnpm install
# 2. 启动项目
pnpm dev
  • 后端
    • 根据/sql目录下的/create_table.sql创建表
    • 修改application.yml文件中的 MySQL数据库连接Redis数据库连接
    • 修改/utils/CodeUtils.java中的邮箱配置
    • 阿里云oss配置

三.代码说明

  • 代码地址:https://gitee.com/fspStudy/quick-develop-template.git (前后端项目放在了同一个父目录中,可以根据需要分别管理)

  • 前端模板基于Pure Admin 进行二次开发,可以参考一下原始模板。

  • 后端模板基于b站程序员鱼皮编程导航中的通用版本模板进行二次开发。文章来源地址https://www.toymoban.com/news/detail-633126.html

到了这里,关于Vue3+SpringBoot快速开发模板的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SpringBoot项目使用MyBatisX+Apifox IDEA 插件快速开发

            今天跟大家介绍两个快速开发项目的插件。能大大提高开发效率。希望能帮助到大家。         MyBatis-Plus为我们提供了强大的mapper和service模板,能够大大的提高开发效率。但是在真正开发过程中,MyBatis-Plus并不能为我们解决所有问题,例如一些复杂的SQL,多表

    2024年02月15日
    浏览(34)
  • vue3 解决使用vscode开发工具编辑vue3项目时代码一直标红

    从网上查的,插件还没升级到vue3版本(比如vue3项目根标签可以多个,vue2项目根标签只能有一个,以及等等差异) 解决方法1 然后关闭vscode,再重启vscode就可以了! 解决方法2 将eslint插件卸载重装,就可以解决了!

    2024年02月07日
    浏览(67)
  • Vue3 - hooks 功能模块抽离示例(项目开发常用)

    在 vue3 项目开发中,功能模块或页面 / 组件逻辑都避免不了 hooks,充分利用它会使项目代码耦合较低、复用性更强、易维护等。 本文 提供 vue3 真实项目开发中,最常见的 hooks 功能抽离示例, 按照此示例,可进行更多场景的举一反三。 新手小白一看就懂,秒知 hooks 的概念和

    2024年02月13日
    浏览(37)
  • vue3微信公众号商城项目实战系列(1)开发环境准备

    项目忙完,这次上新,写一个前端系列,采用vue3来开发一个微信公众号商城。 前言: 1. 微信公众号商城本质也是一个网站,由一个个网页组成,只不过这些网页运行在手机端,能响应手指的点击、长按、拖拽等操作。 2. 既然是网页,当然可以用3件套(js+html+css)来写,但象

    2023年04月14日
    浏览(100)
  • SpringBoot+Vue项目实例开发及部署

    目录 一、SpringBoot快速上手 1、SpringBoot介绍 2、SpringBoot特点 3、快速创建SpringBoot应用 4、SpringBoot开发热部署 二、Web开发基础 1、Web入门 2、控制器 3、路由映射 4、参数传递 三、Web开发进阶 1、静态资源访问 2、文件上传原理 3、拦截器 四、构建RESTful服务 1、RESTful介绍 2、RESTf

    2024年02月06日
    浏览(45)
  • 【新项目开发】vue3+ts+elementPlus+ffmpegjs开发纯web端的视频编辑器

    当在项目中使用新技术时,我们应该首先进行调研,了解其特点和使用方法。在实现功能时,我们可以采用最简单的方式,而不必过于关注项目的设计和结构。一旦掌握了新技术,我们可以根据其API属性进行代码设计,以便更好地开发。以开发一个纯web端的视频编辑处理器为

    2024年02月15日
    浏览(55)
  • 基于vscode开发vue3项目的详细步骤教程 3 前端路由vue-router

    1、Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 2、Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客 3、基于vscode开发vue项目的详细步骤教程_水w的博客-CSDN博客 4、基于vscode开发vue项目的详细步骤教程 2 第三方图标库FontAwesome_水w的

    2024年02月02日
    浏览(71)
  • Vue+SpringBoot项目开发:后台登陆功能的实现(二)

    项目搭建传送门:从零开始,SpringBoot项目快速搭建 在本地mysql数据库新建库,库名:vue_demo,(数据库名字可自行更改,更改完记得在pom.xml中也同步更改) 项目结构 下面是具体文件的代码 pom.xml 返回实体类封装ResultBody ResultBody.java 用户实体类 User.java 登录方法入参 LoginReq.

    2024年02月13日
    浏览(44)
  • 22、springboot的Profile(通过yml配置文件配置 profile,快速切换项目的开发环境)

    就是通过 配置的 profile 快速切换开发环境。 ▲ 1. 声明Profile ▲ 2. 设置活动Profile 演示如何通过profile配置文件,来快速切换开发环境。 步骤: 1、 添加一个正式环境用的yml----application-dev.yml,写对应的正式环境配置 添加一个测试环境用的yml----application-test.yml,写对应的测试环

    2024年02月02日
    浏览(43)
  • Vue+SpringBoot项目开发:登录页面美化,登录功能实现(三)

    上一章写了从零开始Vue+SpringBoot后台管理系统:Vue3+TypeScript项目搭建 Vue+TypeScript的前端项目已经搭建完成了 这一章的内容是引入element-plus和axios实现页面的布局和前后端数据的串联,实现一个登陆的功能,跳转到首页 现在前端项目的一个结构目录 在src/main.js中加入element-plus

    2024年02月13日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包