教你使用VUE+SpringMvc+Spring+Mybatis+Maven搭建自己的电商系统。后台前端框架搭建SpringMybatis，一步步教你一个完整的电商系统，跟着教程走，变身猿猴找工作不在话下。更多精彩内容，请关注公主猿人工厂，点击猿人修炼获取！我们已经结束了设计文章。在接下来的日子里，原人老师将带大家完成我们的设计——一步步教你一个电子商务系统。既然要搭建电子商务系统，那自然是少不了的。对于框架搭建，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的基本配置，hot更新原理是什么，webpack速度优化等等就不多说了，有需要的请自行google。相关文章已经很多了。我们可以看一下项目结构。API和VIEW只是截取了API和VIEW的一些模块，方便大家更直观的理解。从图中可以看出，模块很多，随着业务的迭代发展，我们的模块会不断增加。所以建议按照业务模块划分视图，将视图和api这两个模块一一映射，方便维护。如下图所示：比如basedataManage模块发布了基础数据的API，所以不管项目怎么积累，API和视图的维护还是一目了然。当然，还有一些全域通用的API模块，比如上传组件，可以单独存放。组件这里的组件是一些全局通用的组件，比如分页组件、上传组件、富文本等组件。一些页面级组件建议放在各自的视图文件中，方便管理。如图：Store是用来存储公共访问数据的，但是对于产品发布、品牌管理等两个独立的模板，根本不需要使用Store来存储数据，每个页面都可以存储自己的数据。当然，有些数据还是需要vuex来管理，比如logintoken，用户信息，这些数据还是需要通过Store来存储。像ESLint代码这样的东西，代码规范还是很重要的。拥有一个好的代码规范可以帮助你避免很多低级错误，保证代码的可读性。我个人建议大家使用vscode+eslint来搞定。Eslint可以在你保存代码的时候自动为你完成一些代码修复。要实现这个效果，还需要做一些准备工作，比如先在vscode中安装插件。安装配置ESLint后，我们继续回到VSCode进行扩展设置，依次点击File>Preferences>Settings，搜索EsLint，在settings.json中找到Edit打开，添加如下配置：{这样每次保存，可以实现代码修复和效果。请求地址配置打开文件，.env.development这里我们可以定义一个统一的后端访问地址。打开文件后，将VUE_APP_BASE_API修改为后端接口请求访问地址：http://localhost:9201。这样，在使用相对路径时，所有请求都默认发送到后端9201端口。如果你的后端端口不同，你也可以做一些调整。请求的统一封装打开文件：/utils/request.js，我们结合项目业务，根据响应中返回的状态值，使用拦截器的方式进行统一处理。//响应拦截器跨域问题我们决定采用前后端分离的方式来搭建我们的系统，那么自然而然就会出现跨域问题，我们可以通过后端cors来解决，内置后续的后端框架会在文章中给出具体的解决方案。routingconfiguration配置文件，打开/router/index.js，项目的路由跳转配置在这里，左边的页面菜单能看到的部分都在这里。最后，我们一起来看看效果吧。运行命令（推荐淘宝镜像），国内的会快很多。npminstall--registry=https://registry.npm.taobao.orgnpmrundev想跟着实战进阶？添加小编微信shangaladepangzi，备注：顺丰实战。基本代码给你，大家一起玩吧。
