⼿把⼿教你使⽤VUE+SpringMVC+Spring+Mybatis+Maven构建
属于。。。
猿实战是⼀个原创系列⽂章，通过实战的⽅式，采⽤前后端分离的技术结合SpringMVC Spring Mybatis,⼿把⼿教你撸⼀个完整的电商系统，跟着教程⾛下来，变⾝猿⼈到⼯作不是问题。想要⼀起实战吗？，关注公主号猿⼈⼯⼚，获取基础代码，⼿把⼿带你开发属于⾃⼰的电商系统。
设计的⽂章我们告⼀段落了，接下来的⽇⼦⾥，猿⼈君就带着⼤家⼀起来完成我们的设计——⼿把⼿的教你撸⼀个电商系统。
既然要搭建⼀个电商系统，那么⾃然少不了，框架搭建的事情，web开发发展到今天，前后端分离已是不争的事实。我们这个系统暂时就使⽤⼤家⽿熟能详的VUE来做前端框架吧，⾄于后端，我们采⽤SpringMVC、Spring、MyBatis的⽅式来搞定它吧。
也许你要说后端有点⽼旧，但是猿⼈君要告诉你，技术有⼀个长期的发展过程，现在还有不少的线上系统，使⽤的就是这个技术，你不了解这些，相信你在⽇后会遇到很多问题。架构是可以演进的，猿⼈君故意选择了⼀个使⽤⼴泛，看起来⽼旧的结构来带你完成领域逻辑的事情。⾄于之后的演进和调整，会在实战系列完成之后推出，尽请期待。
废话就不多说了，我们⼀起来思考⼀个问题，⼀个系统是怎么搭建起来的？我们是先搭建后台系统还是先搭建前台系统？你可以想⼀想之前的设计，前台的数据来源是什么？⾃然是来源于后台系统维护的数据。所以我们还是先搭建后台系统吧。
徒⼿搭建⼀个系统，⼀穷⼆⽩的情况下，怎么办呢？从零开始去搞定所有的事情，⾃然是⽐较困难的。最简单的办法，⾃然是⼀个可以使⽤的⼿脚架，来解决这个问题。嗯，现在开源的东西还是⽐较流⾏，这⾥给你推荐⼀个⼤家经常使⽤的东西——vue-element-admin。
为什么选择这样⼀个开源的后端框架，给你⼀个⽹址，panjiachen.gitee.io/vue-element-admin/，不妨去看⼀下。
vue element admin
vue-element-admin是⼀个⽐较流⾏的开源后台框架，提供了丰富的UI组件，以及较好的⽂档⽀持，还⽀持i8n的国际化解决⽅案，基本上能够满⾜我们项⽬开发的UI需要。框架是基于element-ui进⾏⼆次开发的，那么⾄少在⽂档上，能够跟上社区的节奏，参考资料也很多，就它了吧。
接下来，我们就开始来讲怎么玩耍的事情了。总的来讲，我们的后台系统是根据vue-element-admin⼆次开发⽽来，有⼀定的基础门坎，在这⾥，我们也不会太去讲，vue的基础使⽤，webpack 的基础配置，热更新原理是什么，webpack速度优化等等，有需求的请⾃⾏ google，相关⽂章已经很多了。我们可以看⼀下项⽬结构。
API和VIEW
简单的截取下API和VIEW的部分模块，⽅便你更加直观的理解。
如图可见模块有很多，⽽且随着业务的迭代开发，我们的模块还会会越来越多。所以这⾥建议根据业务模块来划分 views，并且将views 和api 两个模块⼀⼀对应，从⽽⽅便维护。如下图：
如 basedataManage模块下放的都是基础数据的api，这样不管项⽬怎么累加，api和views的维护还是清晰的，当然也有⼀些全区公⽤的api 模块，⽐如上传组件什么的单独存放就⾏。
Components
这⾥的 components 放置的都是全局公⽤的⼀些组件，如，分页组件，上传组件，富⽂本等等⼀些列组件。⼀些页⾯级的组件建议还是放在各⾃views⽂件下，⽅便管理。如图：
Store
⽤于存放公共访问的数据，但是⽐如商品发布、品牌管理这种独⽴的两个模板，就根本没有必要使⽤ Store来存储data，每个页⾯⾥存放⾃⼰的 data 就⾏。当然有些数据还是需要⽤ vuex 来统⼀管理的，如登录token,⽤户信息，还是需要使⽤Store来存储的。
ESLint
撸代码这种事情，代码规范还是很重要的。有⼀个良好的代码规范，可以帮你避免很多低级错误，也能保证代码的可读性。个⼈推荐你使⽤vscode+eslint的⽅式来搞定。Eslint可以在你保存代码的时候，帮你⾃动完成⼀些代码修复⼯作。
要达到这种效果，有⼀些准备⼯作还是需要你来做的，⽐如先在vscode中安装插件。
安装并配置完成 ESLint 后，我们继续回到 VSCode 进⾏扩展设置，依次点击 File > Preferences > Settings ，搜索EsLint，到Edit in settings.json打开，添加如下配置：
{
// 开启
"able": true,
// 保存
"eslint.autoFixOnSave": true,
"eslint.run": "onType",

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。