独立完成系统开发一：项目简介

从工作到现在也有很长一段时间了，在这段时间里经历了很多同时也学到了很多。当然我也意识到了一个问题，哪就是如果仅仅是在工作中重复的去做一些类似于curd之类的事，没有将所学的东西真正运用到实际的项目中以及对一个项目没有一个全面的了解，那么可能就真的只能是一个码农了。

所以我决定用我这些年所学的东西去独立的完成一个项目。虽然这个可能有点难度，并且需要耗费很多精力，但我觉得还是很有必要的，在提升自身能力的同时也相当于给这些年所付出的努力一个交代吧。为了更便于以后查看以及给这个项目的历程做个记录，所以我决定把这个写成一个博客的专栏，如果能帮助其他的童鞋那再好不过。同时我也会根据这个项目为主干去写一些这个项目里面所用到的技术博文。当然这个项目里面没用到的我有时间也会去写一写，在加深理解的同时也能够帮助其他需要的童鞋。

项目介绍

这篇是我写的第一篇博文就先介绍一下这个项目吧。
这个项目的名字我想了很久，最后决定叫他MyAdmin，这个名字主要受到MySQL的启发（当然MySQL中My是MySQL作者女儿名字的简写并不是“我的”的意思。而这里的My意思就是“我的”），然后管理系统都叫什么admin之类的。所以就想到了MyAdmin，听起来还不错哈~

而项目图标的设计，由于项目叫MyAdmin所以主要突出My ，所以图标里面要体现出这个单词，最后设计的出来的结果：

感觉还不错哈~，下面我来解释一下这个图标以及设计时的灵感，首先这个图标外圈绿色部分的写法和M的写法一致的，只不过M的最后一笔是竖着的|而这里是斜着的/。然后图标中的最后一笔/和前两笔也就是v的部分连起来可以看成y，这里稍微有点抽象哈。这样就将M和y整合在一起了，最后整个图形拼起来整体像一个斜着的V，而这个项目前端本来就是用Vue做的，所以感觉这个图标更合适了呢。最后是配色由于图标整体看起来像一个V，而Vue的图标也是V，所以外圈的颜色参考了Vue的图标的配色，毕竟Vue的图标设计的还是很棒的哈。

目前项目已经完成，部分代码也开源了，具体可以查看github或gitee，欢迎star，如有问题可以提交相关issue，后面会考虑完全开源哈，敬请期待~

演示地址：http://101.34.139.112/

演示环境说明：演示地址目前只有工作流示例和生成代码展示可以进行增加及修改系列操作，其他功能只开放了查询操作
账号：管理员（admin），其他用户（user1、user2、user3...具体可查看系统中用户模块）
密码：所有用户的密码都为123456

业务

这个项目的目标是作为一个系统的基础平台，里面包含一个系统中所有的基础功能，然后我们可以基于这个平台快速进行各种业务模块的开发。当然我也会在项目中提供一系列的示例。具体包含哪些功能可以参考github或gitee中的介绍

使用技术

这个项目采用的是一个前后端分离的模式，技术选型

前端主要是基于Vue，然后结合vue-element-admin前端模板来实现。
后端主要是基于Java，然后通过SpringBoot，MyBatis-Plus，Shiro、Activiti等框架来实现

最初我是打算使用微服务的架构然后通过Spring Cloud来实现的，不过这个可能会更复杂，所以想先把SpringBoot版本的弄好后面在弄个Spring Cloud的这样会简单点一步步来哈，并且如果项目不是特别大用微服务架构反而没有单个项目好。

具体涉及知识点

了解这些会让你更好的掌握整个项目

前端
- 基础的：HTML、JavaScript、CSS、ES6、Sass
- Vue系列及相关：Vue.js、Vuex、Vue Router 、Vue CLI，ElementUI、Axios
- 插件：插件有很多这里简单列举几个：EChartss、js-xlsx、wangEditor、vue-amap等等
- 其他：Node.js、webpack、mock.js、ESlint、Babel
后端
- 基础的：Java
- 框架：Spring Boot、MyBatis-Plus、Shiro、Swagger2、Activiti
- 数据库：MySQL
- 缓存：Ehcache、Redis
- 其他：JWT、Druid、Logback等等
工具
- 前端开发工具使用VSCode，这个可以结合ESlint插件实现代码格式自动修复
- 后端开发工具使用IntelliJ IDEA，当然Eclipse也行，个人觉得idea在各个方面都比Eclipse好，只不过占的内存有点大
- 代码管理使用git，而且idea对git的支持比svn要好
- web服务器，在正式环境这里使用Nginx来实现动静分离及反向代理，如果部署多台后端还可以通过Nginx实现负载均衡，前端项目通过webpack打包好之后直接放到Nginx中就可以了，当然如果开发环境我们直接使用webpack-dev-server来实时打包构建就可以了，Vue CLI构建的项目都会自带，至于后端直接使用SpringBoot内置的Tomcat就行了。

当然整个项目所涉及到的东西肯定不仅仅只有这些，具体可以参考项目中的Maven以及npm依赖。

技术的选型

上面说了项目里面涉及到的技术，而市面上的技术框架很多，所以下面来简单说一下我为什么选择他们。

前端

前端首先要明确一个点就是我们要弄的是一个前端分离的项目，因为前后端分离相比于前后端不分离的项目有很大的优势例如

提高工作效率，分工更加明确。前端只关注前端的事，后台只关心后台的活，两者开发可以同时进行。不会出现相互制约的情况
性能提升，通过前端路由的配置，我们可以实现页面的按需加载，无需一开始加载首页便加载网站的所有的资源，服务器也不再需要解析前端页面，并且在大并发情况下，可以水平扩展前后端服务器
让系统更容易维护，发生bug，可以快速定位是谁的问题，不会出现互相踢皮球的现象，而且处理问题只需要一方处理就行了
当然其中最主要的原因是因为使用前后端分离后，前端和后端就没有了强耦合，他们之间通过接口进行交互。而且由于前端独立了出来，所以前端会变得更强大，能够实现更多的功能，使用更多的特性

Vue

在前后端分离的项目中前端框架主要有这么几个，分别是Vue、React以及Angular，他们都有各自的优点但也有很多相似的地方，至于我选择Vue主要有这么几方面

首先这个项目并不是很大所以没必要使用Angular，然后Vue和React相比我更熟悉的是Vue。当然有时间也许我会弄个React的。至于Vue和React的区别以及哪个更好，可以自己到知乎上去看看，这两个的争论还是很激烈的
还有就是Vue中我找到了一个很好用的前端模板vue-element-admin ，通过这个模板我可以少做很多的前端工作。

ElementUI

Vue的前端UI有很多例如：iView、ElementUI等等，因为vue-element-admin使用的UI是ElementUI，所以这里也使用了ElementUI，而ElementUI是饿了么前端开源的UI框架所以还是很优秀的

后端

SpringBoot
- 目前Java项目中如果是新增的项目90%都会采用SpringBoot吧，相比于直接使用Spring，使用SpringBoot最直观的优势就是可以省去大量的配置，因为他为我们提供了开发绝大多数场景的starter pom，这些starter可以帮我们进行大量的自动配置，要什么那么只需要导入对应的starter pom依赖就可以了，并且使用SpringBoot之后对项目进行配置不用再编写xml，在配置的时候我们可以直接修改配置文件或者在代码里面提供相应bean就可以了
MyBatis-Plus
- MyBatis-Plus他是Mybatis的一个增强，通过他可以实现不用写sql就可以操作数据库，当然这个只适用于增删改以及一些简单的查询，复杂的查询还是建议自己写sql。而且他还提供了分页组件、代码生成器等等。具体可以参考官网，这个是国人开发的，所以文档中文支持特别好
Shiro和JWT
- 由于Spring Security上手难度稍微有点高。所以我就选择了比较熟悉而且使用简单的Shiro，至于JWT是因为我们这个是前后端分离的项目所以需要对Shiro进行改造，而JWT则作为token来使用
Swagger2
- 因为我们是前后端分离的项目，那么怎么分离呢？这就需要在后端使用Swagger2以及在前端使用mock.js来实现了，在前端可以通过mock来模拟后端的数据这样就不需要在依赖于后端了，而在后端通过Swagger可以生成接口文档，而且还可以直接对接口进行测试这样就不需要在依赖于前端了而且还可以直接生成接口文档。
Activiti
- 工作流常见的框架有JBPM和Activiti，这两个我都有了解过，Activiti相对于JBPM会简单很多，而且相对于JBPM我更熟悉Activiti，所以项目的工作流我选择了Activiti
MySQL
- 目前常用的数据就两个Oracle和MySQL，在这里我选择了MySQL，因为MySQL更灵活。而且操作简单。并且相对于Oracle我更了解MySQL

系统预览

这里只贴PC端的项目图片，至于移动端的以及工作流的gif图片预览可以去github或gitee上去看（工作流gif图片有点大，推荐到gitee上看，github可能加载不出来，不过gitee上大于1M的文件要登录之后才可以查看哦）

下一篇：独立完成系统开发二：前端搭建