Vue + Spring Boot 项目实战(一):项目简介

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Neuf_Soleil/article/details/88925013

专栏目录(持续更新)

第一部分

Vue + Spring Boot 项目实战(一):项目简介
Vue + Spring Boot 项目实战(二):搭建 Vue.js 项目
Vue + Spring Boot 项目实战(三):前后端结合测试(登录页面开发)
Vue + Spring Boot 项目实战(四):数据库的引入
Vue + Spring Boot 项目实战(五):使用 Element 辅助前端开发
Vue + Spring Boot 项目实战(六):前端路由与登录拦截器
Vue + Spring Boot 项目实战(七):导航栏与图书页面设计
Vue + Spring Boot 项目实战(八):数据库设计与增删改查
Vue + Spring Boot 项目实战(九):核心功能的前端实现
Vue + Spring Boot 项目实战(十):图片上传与项目的打包部署

第二部分

Vue + Spring Boot 项目实战(十一):用户角色权限管理模块设计

前言

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

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

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

一、项目概述

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

这个项目的第一阶段是一个 图书管理系统,主要帮助大家理解以下知识点:

  • 如何从 0 开始搭建 Web 项目?
  • 什么是前后端分离?如何实现前后端分离?
  • 单页面应用有哪些特点?
  • 如何在 Web 项目中使用数据库?
  • 在开发中如何利用各种辅助手段?
  • Vue.js 的基本概念与用法
  • 简单的前端页面设计
  • 如何部署 Web 应用?

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

(一)开发思路

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

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

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

(二)需求分析

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

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


第一部分:功能摘要

1.图书展示

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

2.图书管理

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

3.信息查询

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

4.其它功能

功能描述 优先级
阅读标注

第二部分:功能需求

1.图书展示

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

图书需展示的信息如下:

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

2.图书管理

图书分类

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

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

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

图书上传

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

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

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

信息维护

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

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

3.信息查询

图书检索

添加搜索栏,进行智能全文搜索。(包括对分类和标签的搜索)

图书排序

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

4.其它功能

标注

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

(持续开发中)

二、技术栈

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

1.前端技术栈

1.Vue.js
2.ElementUI
3.axios

2.后端技术栈

1.SpringBoot
2.Shiro
3.MySQL
4.JPA

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

3.主要参考内容

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

三、总体计划

因为项目只能利用业余时间开发,而且有些东西我也是刚刚接触,所以时间跨度会稍微长一点,希望不至于成为有生之年系列。

这个项目的迭代,我想大概分成如下几个阶段:

  • 第一阶段,简单的图书管理系统
  • 第二阶段,实现用户权限管理,成为较为完善的后台内容管理系统
  • 第三阶段,考虑实际应用场景,开发前台,把项目改造为互联网应用
  • 第四阶段,上线运营,处理可能遇到的各种问题

感觉这套教程我能写到退休了。。。

虽然我想最终把项目上线,但并不期望它有什么商业价值,所以有些设计并不是很贴合实际,只是为了对应知识点,希望大家可以理解。

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

下一篇:Vue + Spring Boot 项目实战(二):搭建 Vue.js 项目

展开阅读全文

没有更多推荐了,返回首页