猿实战是一个原创系列文章，通过实战的形式，采纳前后端拆散的技术联合 SpringMVC Spring Mybatis, 手把手教你撸一个残缺的电商零碎，跟着教程走下来，变身猿人找到工作不是问题。更多精彩内容，敬请大家关注公主号猿人工厂，点击猿人养成获取！
设计的文章咱们告一段落了，接下来的日子里，猿人君就带着大家一起来实现咱们的设计——手把手的教你撸一个电商零碎。
既然要搭建一个电商零碎，那么天然少不了，框架搭建的事件，web 开发倒退到明天，前后端拆散已是不争的事实。咱们这个零碎临时就应用大家耳熟能详的 VUE 来做前端框架吧，至于后端，咱们采纳 SpringMVC、Spring、MyBatis 的形式来搞定它吧。
兴许你要说后端有点老旧，然而猿人君要通知你，技术有一个长期的倒退过程，当初还有不少的线上零碎，应用的就是这个技术，你不理解这些，置信你在日后会遇到很多问题。架构是能够演进的，猿人君成心抉择了一个应用宽泛，看起来老旧的构造来带你实现畛域逻辑的事件。至于之后的演进和调整，会在实战系列实现之后推出，尽请期待。
废话就不多说了，咱们一起来思考一个问题，一个零碎是怎么搭建起来的？咱们是先搭建后盾零碎还是先搭建前台零碎？你能够想一想之前的设计，前台的数据起源是什么？天然是来源于后盾系统维护的数据。所以咱们还是先搭建后盾零碎吧。
徒手搭建一个零碎，一穷二白的状况下，怎么办呢？从零开始去搞定所有的事件，天然是比拟艰难的。最简略的方法，天然是找一个能够应用的手脚架，来解决这个问题。嗯，当初开源的货色还是比拟风行，这里给你举荐一个大家常常应用的货色——vue-element-admin。
为什么抉择这样一个开源的后端框架，给你一个网址，https://panjiachen.gitee.io/v…，无妨去看一下。
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 关上, 增加如下配置：
{这样每次保留的时候，就能够达到代码修复和的成果。
申请地址配置
关上文件，.env.development 在这里咱们能够定义对立的后端拜访地址。关上文件后 VUE_APP_BASE_API，批改为后端接口申请拜访地址为：http://localhost:9201。
这样所有的申请，在应用相对路径的时候，都默认发给后端的 9201 端口，如果你的后端端口不同，你也能够做一些调整。
申请的对立封装
关上文件：/utils/request.js，咱们联合我的项目业务，应用了拦截器的形式中依据 response 中返回的状态值进行对立解决。
// response interceptor跨域问题
咱们决定应用前后端拆散的形式来搭建咱们的零碎，那么天然不可避免的会跨域问题，这个问题咱们能够通过后端的 cors 来解决，在后续的后端框架搭建的文章中会给出具体的解决方案。
路由配置
配置文件，关上 /router/index.js，我的项目的路由跳转配置就在这里了，左侧的页面菜单你能看到的局部，都在这里了。
最初咱们一起来看一看成果吧。运行命令（倡议采纳淘宝镜像），国内的会快上不少。
npm install –registry=https://registry.npm.taobao.org
npm run dev
想要跟着实战进阶？加小编微信 shangaladepangzi，备注：SF 实战。给你根底代码，大家一起游玩。