手把手教你使用VUE+SpringMVC+Spring+Mybatis+Maven构建属于你自己的电商系统之vue后台前端框架搭建——猿实战01

猿实战是一个原创系列文章，通过实战的方式，采用前后端分离的技术结合SpringMVC Spring Mybatis,手把手教你撸一个完整的电商系统，跟着教程走下来，变身猿人找到工作不是问题。更多精彩内容，敬请大家关注公主号猿人工厂，点击猿人养成获取！

设计的文章我们告一段落了，接下来的日子里，猿人君就带着大家一起来完成我们的设计——手把手的教你撸一个电商系统。

既然要搭建一个电商系统，那么自然少不了，框架搭建的事情，web开发发展到今天，前后端分离已是不争的事实。我们这个系统暂时就使用大家耳熟能详的VUE来做前端框架吧，至于后端，我们采用SpringMVC、Spring、MyBatis的方式来搞定它吧。

也许你要说后端有点老旧，但是猿人君要告诉你，技术有一个长期的发展过程，现在还有不少的线上系统，使用的就是这个技术，你不了解这些，相信你在日后会遇到很多问题。架构是可以演进的，猿人君故意选择了一个使用广泛，看起来老旧的结构来带你完成领域逻辑的事情。至于之后的演进和调整，会在实战系列完成之后推出，尽请期待。

废话就不多说了，我们一起来思考一个问题，一个系统是怎么搭建起来的？我们是先搭建后台系统还是先搭建前台系统？你可以想一想之前的设计，前台的数据来源是什么？自然是来源于后台系统维护的数据。所以我们还是先搭建后台系统吧。

徒手搭建一个系统，一穷二白的情况下，怎么办呢？从零开始去搞定所有的事情，自然是比较困难的。最简单的办法，自然是找一个可以使用的手脚架，来解决这个问题。嗯，现在开源的东西还是比较流行，这里给你推荐一个大家经常使用的东西——vue-element-admin。

为什么选择这样一个开源的后端框架，给你一个网址，https://panjiachen.gitee.io/vue-element-admin/，不妨去看一下。

vue-element-admin是一个比较流行的开源后台框架，提供了丰富的UI组件，以及较好的文档支持，还支持i8n的国际化解决方案，基本上能够满足我们项目开发的UI需要。框架是基于element-ui进行二次开发的，那么至少在文档上，能够跟上社区的节奏，参考资料也很多，就它了吧。

接下来，我们就开始来讲怎么玩耍的事情了。总的来讲，我们的后台系统是根据vue-element-admin二次开发而来，有一定的基础门坎，在这里，我们也不会太去讲，vue的基础使用，webpack 的基础配置，热更新原理是什么，webpack速度优化等等，有需求的请自行 google，相关文章已经很多了。我们可以看一下项目结构。

 

 

API和VIEW

简单