Vue + Springboot 前后端分离项目实践:项目简介及教程_weixin_30468137的博客-程序员秘密

技术标签: ViewUI  java  前端  javascript  

专栏目录(持续更新)

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 ,要么对许多关键问题一笔带过。我的目标是根据这个教程,可以把一个完整的项目还原出来,所以我会尽量详细地描述开发的过程。当然,每个人的理解方式不同,可能有些细节没讲到位,欢迎大家在评论区提问,也可以通过邮箱 ([email protected]) 联系我,我一定会认真解答。

一、项目概述

这个项目我把它命名为 “白卷”,因为它是从 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

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

智能推荐

VS程序包管理器控制台指令_樱Cherry桃的博客-程序员秘密

PM> Update-Package  -ProjectName 'CMS.Update(这里是项目名)'   -Reinstall Newtonsoft.Json(这里包名)

dev/sda3 磁盘占满问题解决_/dev/sda3_解惑先生的博客-程序员秘密

1、服务器问题查看服务器日志占用情况,发现日志文件本身没有占用多少磁盘空间,但是硬盘分区已经满了,导致服务器的服务也有问题;df -h/dev/sda3占用了100%,那么我们du -s -h ./*看下目录的占用情况:du -s -h ./*发现日志本身没有占多少空间。2、大概原因:在apache/tomcat服务在运行状态下,清空了运行服务的日志,从而导致了/dev/sda3 满了的问题。一般情况下,大多数服务(包括脚本)在运行时,是不能删除当前正在写入的日志文件

C/C++使用ODBC连接Microsoft SQL server数据库_c/c++使用odbc连接sql server数据库完整流程_缎锦小妹的博客-程序员秘密

转自【C语言】使用ODBC连接Microsoft SQL server数据库 | 学步园+http://www.xuebuyuan.com/542420.html主要内容转载,本人加了几张图,会更清晰一点的~【C语言】使用ODBC连接Microsoft SQL server数据库因为最近要用C对SQL Server进行连接,但发现网上关于这方

C#打包(含数据库)方法简介 VB_韦大宝110的博客-程序员秘密

一).创建部署项目 1. 在“文件”菜单上指向“添加项目”,然后选择“新建项目”。 2. 在“添加新项目”对话框中,选择“项目类型”窗格中的“安装和部署项目”,然后选择“模板”窗格中的“安装项目”。在“名称”框中键入 setup1。 3. 单击“确定”关闭对话框。 4. 项目被添加到解决方案资源管理器中,并且文件系统编辑器打开。 5. 在“属性”窗口中,选择 ProductName 属性,并键

稳压二极管、肖特基二极管、静电保护二极管、TVS管_weixin_30603633的博客-程序员秘密

1.稳压二极管正向导通电压跟普通二级管一样约为0.7v,反向状态下在临界电压之前截止,在达到临界电压的条件下会处于导通的状态,电压也不再升高,所以用在重要元器件上,起到稳压作用。稳压二极管主要利用其反向击穿时U-I曲线很陡峭这个特性,所以它工作在反偏状态。稳压二极管,英文名称Zenerdiode,又叫齐纳二极管。稳压二极管原理:稳压二极管的伏安特性曲线的正向特性和普通二极管差...

自然语言处理( NLP )Subword Models_weixin_46783985的博客-程序员秘密

word2vec一个人读书时,如果遇到了生僻的词,一般能根据上下文大概猜出生僻词的意思,而 Word2Vec 正是很好的捕捉了这种人类的行为。它的缺点是hicontext 很小,没有使用全局的cooccur,所以实际上对cooccur的利用很少GloVe词义相近的词对贡献次数多,词义差得比较远的词对共现次数比较少,但其实他们的区分度并不明显。相比于word2vec,因为golve更容易并行化,所以速度更快,达到67.1%的准确率,只需要花4h12m。由于GloVe算法本身使用了全局信息,自然内存费的

随便推点

20篇原创 & 5w+字,结束了这个5月_李肖遥的博客-程序员秘密

关注、星标公众号,直达精彩内容来源:技术让梦想更伟大作者:李肖遥5月是我一年中最喜欢的一个月,这个月也是发生了很多事情,今天主要与大家分享一下写文章、公众号、职场等等心得,应该是对大家都有...

全国城市空气质量实时发布平台数据抓取采集获取_`〃阿拉鰰dеиɡら.的博客-程序员秘密

全国城市空气质量实时发布平台(https://air.cnemc.cn:18007/ 原http://106.37.208.233:20035/)数据抓取采集获取,数据处理方法

Deep Learning for Nature Language Processing---第四讲(上)_Xiaomin-Wu的博客-程序员秘密

分类的基础知识和标记notation采样采集到的数据集:xi —输入. 例如 :单词(标号或向量vector),context windows,句子,文档等.yi —标签. 例如:情感,其他的单词,命名实体(参照NER),买卖决断,以后还会涉及到: multi-­‐word sequences分类 intuition训练集:{xi,yi}Ni=1简单模型:1.分类固定的二位word vector

Language Model 论文_language model papers_ippputeeel的博客-程序员秘密

1.A Neural Probabilistic Language Modelwww.jmlr.org/papers/volume3/bengio03a/bengio03a.pdfBegio的一篇文章,建立语言模型根本的问题是维度灾难,为了解决这个问题使用N-gram,但N-gram的问题是对于训练集中没有出现的句子,概率很小,所以要把N取得小,这样有两点问题:1....

服务器卡死,重启报错: INFO: task blocked for more than 120 seconds_格格巫 MMQ!!的博客-程序员秘密

问题:服务器负载很高,但是CPU利用率不高。服务器经常夯住,网站打不开,SSH连接非常不稳定,输入命令夯住。重启服务器报错:INFO: task blocked for more than 120 seconds问题原因:默认情况下, Linux会最多使用40%的可用内存作为文件系统缓存。当超过这个阈值后,文件系统会把将缓存中的内存全部写入磁盘, 导致后续的IO请求都是同步的。将缓存写入磁盘时,有一个默认120秒的超时时间。 出现上面的问题的原因是IO子系统的处理速度不够快,不能在120秒将缓存中