程序员经验分享-hwhale

Vue + Springboot 前后端分离项目实践：项目简介及教程

2023-10-26

专栏目录（持续更新）

Vue.js + Spring Boot 前后端分离项目实践（一）：项目简介
Vue.js + Spring Boot 前后端分离项目实践（二）：搭建 Vue.js 项目
Vue.js + Spring Boot 前后端分离项目实践（三）：前后端结合测试（登录页面开发）
Vue.js + Spring Boot 前后端分离项目实践（四）：数据库的引入
Vue.js + Spring Boot 前后端分离项目实践（五）：使用 Element 辅助前端开发
Vue.js + Spring Boot 前后端分离项目实践（六）：前端路由与登录拦截器

前言

之前写了一些关于 Java EE 的文章，主要是理论性质的，目的是帮助大家快速了解 Java EE 的核心内容，早日进入 Java Web 开发的大坑。当然只有理论是不够的，开发是一门技术活，有很多细节需要在实践中理解，所以我决定做一个实践教程。

选用 Vue.js + Spring Boot 来开发这个项目，是因为这两种框架是当下最新、最热门的技术之一，也是实现所谓 前后端分离 的最佳选择之一。

网上相关教程很多，但要么只是做了一个 DEMO ，要么对许多关键问题一笔带过。我的目标是根据这个教程，可以把一个完整的项目还原出来，所以我会尽量详细地描述开发的过程。当然，每个人的理解方式不同，可能有些细节没讲到位，欢迎大家在评论区提问，也可以通过邮箱 (Evan_Nightly@163.com) 联系我，我一定会认真解答。

一、项目概述

这个项目我把它命名为 “白卷”，因为它是从 0 开始逐渐开发的，而它的本质是一个 图书管理系统，系统里的内容也需要逐步添加，象征着知识的从无到有，从有到多。另外我还给它起了一个英文名字，叫 White Jotter（白色笔记本），纯粹是为了谐音。

项目的基本结构如下图：
在这里插入图片描述

（一）开发思路

虽说项目是前后端分离的，但毕竟主要开发人员只有我一人（薅了个学弟帮忙，但演变成了我边做边给他讲），所以只能在前后端之间不断穿梭。但在做教程的时候，我会尽量模块化地去讲解。

其实要做一个这种教程还真不容易，几乎是要把项目再做一遍。。。

系统主要分为三大模块：首页（展示模块）、图书馆（核心功能模块）和笔记本（扩展功能模块），每个模块对应多个具体功能。

（二）需求分析

有一种说法是开发项目需要花费百分之八十的精力在分析设计上，剩下的百分之二十才是撸代码。这个数值准不准不知道，但是这种思想是正确的。我过去想做什么总是直接开干，做过许多无用功，希望大家不要一门心思扑在代码上，多花些精力做项目的总体设计、需求分析这些，对个人的成长绝对有好处。

因为这是个小项目，我就不浪费太多篇幅了，只对应上面的 图书馆 模块，做一个简单的需求分析。
在这里插入图片描述

第一部分：功能摘要

1.图书展示

功能描述 优先级
基本信息 高
补充信息 中

2.图书管理

功能描述 优先级
图书分类 高
图书上传 高
图书维护 高

3.信息查询

功能描述 优先级
图书检索 中
图书排序 低

4.其它功能

功能描述 优先级
阅读标注 低

第二部分：功能需求

1.图书展示

该页面需要良好的图书展示功能，能够反映出图书的基本信息，并做到简洁、美观，与网站整体风格一致。

图书需展示的信息如下：

书名、作者、简介、封面等。

2.图书管理

图书分类

根据网站总体设计，图书的分类由用户自定义（可支持多级分类），并以标签作为辅助。

分类具有严格的层级关系，属于树状结构，而标签则相互独立。

用户可利用分类或标签进行图书的筛选。

图书上传

用户可以上传本地电子书或实体书信息至服务器。

电子书需要的信息有：书名、作者、简介、封面、分类、标签、附件

实体书需要的信息有：书名、作者、简介、封面、分类、标签、存放位置

信息维护

修改： 用户可以根据需要修改图书的信息。除了上传时的信息外，还可以输入额外的内容，如：评分、阅读情况、阅读笔记。（可增加自定义栏）

删除： 用户可以根据需要删除图书条目。

3.信息查询

图书检索

添加搜索栏，进行智能全文搜索。（包括对分类和标签的搜索）

图书排序

根据名称、时间、评分等对图书排序。

4.其它功能

标注

阅读过程中可以添加笔记并保存。

##### （持续开发中）

二、技术栈

项目比较完整的技术栈如下。

1.前端技术栈

1.Vue.js
2.ElementUI
3.axios

2.后端技术栈

1.SpringBoot
2.SpringSecurity
3.MySQL

在开发过程中还会不断用到一些细碎的技术，有必要的我会增添上去。

3.主要参考内容

1.How2J.cn - Java 全栈学习网站
2.Vue.js - 渐进式 JavaScript 框架
3.Element - 网站快速成型工具

三、时间安排

因为项目只能利用业余时间开发，所以时间跨度会稍微长一点，计划在 五月之前 基本完成核心内容模块以及相应的教程。

项目我会每天跟进，教程每一周写一到两篇，还是有一些压力的，幸亏我不用 996，感谢老板。

GitHub 地址：https://github.com/Antabot/White-Jotter

欢迎大家访问我的博客 Evan 的博客！

转载于:https://www.cnblogs.com/Evan-Gao/p/10788526.html

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Java

前端

后端

ViewUI

Vue + Springboot 前后端分离项目实践：项目简介及教程 的相关文章

随机推荐

  • 数据在底层的存储模式

    1 数据的存储模式 大端存储模式 常见于我们的手机等 低地址放高数据 小端存储模式 比如PC 低地址存放低数据 面试题 设计程序判断大小端 这里可以有两种方式 1 写一个函数通过数据类型 int main int a 0x11223344

  • 我的服务器开发之路-安装mysql之mariadb并更改数据库路径

    centos最好安装mariadb 输入rpm qa grep mariadb 并没有显示版本号 则说明并没有安装mariadb 输入yum remove mysql mysql server mysql libs可完全卸载mysql相关

  • K8S个人学习之路

    服务器预备环境 1 永久禁用swap空间 1 临时关闭swap分区 重启失效 swapoff a 2 永久关闭swap分区 sed ri s swap etc fstab 2 修改k8s gcr io 路径的镜像 其他的镜像仓库 MY RE

  • Spark-RDD编程

    Spark在进行计算的时候通常会包含以下几个步骤 创建SparkContext上下文对象 使用SparkContext加载数据创建RDD RDD的转换算子transfotmations RDD的行动算子actions RDD的缓存和持久化

  • 反射获取字段的值与非空校验

    获取指定字段的值 通过字段对应的get方法 public Object getFieldValueByName1 String fieldName Object obj try String firstLetter fieldName su

  • 《Semi-Supervised Semantic Segmentation with Cross-Consistency Training》 2020CVPR 论文阅读

    在这项工作中 作者首先观察到 对于语义分割 低密度区域在隐藏表示中比在输入中更明显 作者提出了交叉一致性训练 其中预测的不变性是施加不同的扰动在编码器输出上 Cross Consistency Training 该模型包含一个共享的enco

  • SQL千万级大数据量查询优化

    转发自 https blog csdn net long690276759 article details 79571421 spm 1001 2014 3001 5506 防止查询资料找不到来源 很详细 1 对查询进行优化 应尽量避免全表

  • c++中istringstream及ostringstream超详细说明

    文章目录 1 stringbuf类介绍 1 1 stringbuf类构造函数 1 2 str函数 2 istringstream类 2 1 rdbuf函数 2 2 swap函数 3 ostringstream类和stringstream类

  • whisper

    Robust Speech Recognition via Large Scale Weak Supervision 介绍 大规模弱监督的训练 先前的方法都是通过大量的无监督学习训练 无监督的数据容易收集 所以通过大量无监督的学习可以训练出

  • Node中的事件循环

    Node中的事件循环 Node的底层语言是libuv 使用v8引擎解析js脚本 libuv负责调用接口API 将不同的任务交给不同的线程处理 再将处理结果交给v8引擎 v8引擎再将处理结果发送给用户 Node中任务的执行顺序 timers定

  • Mybatis-Plus：Service接口

    目录 IService接口 1 写实体类 2 写mapper接口 3 写service接口 4 写service接口的实现类 IService自带方法 1 save 2 SaveOrUpdate 3 Remove 4 Update 5 Ge

  • xss-domcobble绕过XSSfilter

    目录 DOM破坏的原理 例题 多层标签 HTMLCollection 一些常见的标签的关系 三层标签如何获取 例题 DOM破坏的原理 DOMClobber是一种攻击技术 它利用了DOM 文档对象模型 的特性来破坏或修改网页的结构和功能 DO

  • WDK李宏毅学习笔记第十五周01_Conditional Generation by Conditional

    Conditional Generation by GAN 文章目录 Conditional Generation by GAN 摘要 1 Supervised Conditional GAN 1 1 目的 1 2 做法 1 3 Discr

  • 把一个base64编码的图片绘制到canvas (canvas的图片在转成dataurl)

    把一个base64编码的图片绘制到canvas 需要引入jquery

  • SpringBoot中ThreadPoolTaskExecutor的使用

    文章目录 1 配置自己的线程池 2 使用 2 1 在Service层使用 2 2 多线程中使用事务的写法 2 3 方法内多线程 2 3 1 错误写法 2 3 2 正确写法 一 2 3 2 正确写法 二 2 3 3 正确写法 三 3 线程池与

  • mysql的相关技术说明_MySQL 系统架构 说明

    说明 本文转自 简朝阳 MySQL ACE 的 MySQL性能调优与架构设计 一 逻辑模块组成 总的来说 MySQL 可以看成是二层架构 第一层我们通常叫做SQL Layer 在MySQL 数据库系统处理底层数据之前的所有工作都是在这一层完

  • 计算机熔断与服务降级,Hystrix---服务熔断和服务降级

    一 服务熔断 防止服务雪崩 作用在服务提供者 服务熔断 熔断机制是应对雪崩效应的一种微服务链路保护机制 当扇出链路的某个微服务不可用或者响应时间太长时 会进行服务的降级 进而熔断该节点微服务的调用 快速返回 错误 的响应信息 当检测到该节点

  • Java多线程——Lock

    Lock 从JDK 5 0开始 Java提供了更强大的线程同步机制 通过显式定义同步锁对象来实现同步 同步锁使用Lock对象充当 java util concurrent locks Lock接口是控制多个线程对共享资源进行访问的工具 锁提

  • Java的静态绑定与动态绑定

    我们可以对思考一个问题 JVM是如何知道调用的是哪个类的方法源代码 这里面到底有什么内幕呢 这篇文章我们就将揭露JVM方法调用的静态 static binding 和动态绑定机制 auto binding 理解这两个绑定之前 我们不妨先理解

  • Vue + Springboot 前后端分离项目实践：项目简介及教程

    专栏目录 持续更新 Vue js Spring Boot 前后端分离项目实践 一 项目简介Vue js Spring Boot 前后端分离项目实践 二 搭建 Vue js 项目Vue js Spring Boot 前后端分离项目实践 三 前

热门标签