从零实现博客平台—Springboot+Vue分析篇

导言

springboot与vue是近两年快速火起来的框架，前者是基于springmvc而来的javaweb框架，后者是基于js的mvvm渐进式框架,两者如果说有什么共同点，那么就是他们很火，他们都是吸纳许多优秀框架的集合，让开发更加快捷，更加高效，接下来我将开始使用springboot+vue一起来完成一个前后分离的博客平台项目。为了让某些没有正式开发的经验的读者能够进一步了解实际的开发经验我将以博客为例从零开始讲解开发流程：

项目开发流程.PNG

以上即为简单的开发流程，当然实际的开发过程会更复杂，测试方面就包含单元测试，压力测试等多种测试。接下我们就以开发博客为例，开发本次开发之旅吧。

需求收集

假设当前有一个甲方博客平台需求：开发一个类似一样的博客网页应用——爱博客。

1.能够编写图文的编辑器
2.能够显示博客列表与博客详情
3.能够多用户登陆注册，并且管理博客
4.能够统计博客
5.能够自定义首页，如轮播图，侧栏广告等

需要分析

需求分析.png

通过上面的思维导图可以看出，该博客平台的基础对象为用户，博客文章，次要对象为轮播图、侧栏广告。由此可以设定为首页，博客详情页，编辑页，个人管理页（轮播|广告|个人信息|账户管理），登陆注册页等5个页面。接下来我们开始详细功能分析，将模糊需求转化为实际功能。

功能分析

功能分析.png

通过上面的思维导图可以看出主要展示页面为首页，博客详情页，主要编辑页面为博客编辑页面，个人中心页面，在头像、轮播、广告、写作需要上传图片功能，发布博客文章页面需要新增一个发布成功统计页面。接下来进入原型图设计

UI原型图设计

登陆.png

首页.png

写作.png

发布.png

详情.png

个人中心.png

*本次原型图是仿照，采用软件Mockplus,不过导出需要会员，当然也可以用墨刀也非常好用，其次就是如果缺少icon,也可以到阿里图库

技术选型

1.前端使用：node+vue+element
2.后端：springboot+mybatisplus
3.数据库：mysql
4.服务器：centos7

数据库建立

下面开始也是本次核心模块之一，关于这次模块我采用的六合分析法来分析我们本次所涉及到的表与字段的架构。首先我们本次博客系统所涉及的核心表有用户表，文章表，文章评论表，轮播图表，侧栏广告表，接下来我们一次对这些表进行详细的分析：

用户表

用户表.png

文章表&文集表&评论表

文章字段表.png

从上图可以发现文章表所关联的还有文集表，文章评论表，以及喜欢表，四表组成的完整的文章业务功能

轮播图表&侧栏广告表

banner.png

由于轮播与侧栏广告基本结构一致，我这里就采用区别的方法来区分两者，所以需要增加一个type字段管理分类，已经管理层级可以使用lv来管理显示在首页还是其他子页面的层级关系。

思维导图原文件：https://github.com/sunql0827/blog-vue/tree/master/mind

*思维导图使用MindMaster,该思维导图不同于xmind，更加好用。

小结

许多人开发都是拿到需求撸起袖子就干，这样的方式只会让项目在后期越来越臃肿，会导致数据库反复整改甚至重构，合理的分析项目需求，能够更加简化项目，让业务逻辑更加清晰。后面我会将实战流程尽快更新上来，全面了解整个开发流程。