简介：什么是前后端分离：尽管每个人对前后端分离的理解不一样，但绝大多数认同的前后端分离的例子就是SPA(Single-page application)，所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式提供的，前端只管展现。从 ...

什么是前后端分离： 尽管每个人对前后端分离的理解不一样，但绝大多数认同的前后端分离的例子就是SPA(Single-page application)，所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式提供的，前端只管展现。从某种意义上来说，SPA确实做到了前后端分离，但这种方式存在两个问题：WEB服务中，SPA类占的比例很少。很多场景下还有同步/同步+异步混合的模式，SPA不能作为一种通用的解决方案。现阶段的SPA开发模式，接口通常是按照展现逻辑来提供的，有时候为了提高效率，后端会帮我们处理一些展现逻辑，这就意味着后端还是涉足了View层的工作，不是真正的前后端分离。SPA式的前后端分离，是从物理层做区分（认为只要是客户端的就是前端，服务器端的就是后端），这种分法已经无法满足我们前后端分离的需求，我们认为从职责上划分才能满足目前我们的使用场景：前端：负责View和Controller层。后端：只负责Model层，业务处理/数据等。 为什么要前后端分离？ 1 、现有开发模式的适用场景现有的开发模式，各有各的适用场景，没有哪一种完全取代另外一种。比如后端为主的MVC，做一些同步展现的业务效率很高，但是遇到同步异步结合的页面，与后端开发沟通起来就会比较麻烦。Ajax为主SPA型开发模式，比较适合开发APP类型的场景，但是只适合做APP，因为SEO等问题不好解决，对于很多类型的系统，这种开发方式也过重。2 、前后端职责不清在业务逻辑复杂的系统里，我们最怕维护前后端混杂在一起的代码，因为没有约束，M-V-C每一层都可能出现别的层的代码，日积月累，完全没有维护性可言。虽然前后端分离没办法完全解决这种问题，但是可以大大缓解。因为从物理层次上保证了你不可能这么做。3、开发效率问题淘宝的Web基本上都是基于MVC框架webx，架构决定了前端只能依赖后端。所以我们的开发模式依然是，前端写好静态demo，后端翻译成VM模版，这种模式的问题就不说了，被吐槽了很久。直接基于后端环境开发也很痛苦，配置安装使用都很麻烦。为了解决这个问题，我们发明了各种工具，比如VMarket，但是前端还是要写VM，而且依赖后端数据，效率依然不高。另外，后端也没法摆脱对展现的强关注，从而专心于业务逻辑层的开发。4、对前端发挥的局限性能优化如果只在前端做空间非常有限，于是我们经常需要后端合作才能碰撞出火花，但由于后端框架限制，我们很难使用Comet、Bigpipe等技术方案来优化性能。为了解决以上提到的一些问题，我们进行了很多尝试，开发了各种工具，但始终没有太多起色，主要是因为我们只能在后端给我们划分的那一小块空间去发挥。只有真正做到前后端分离，我们才能彻底解决以上问题。 下面我们就利用vue+node+mySql实现前后端分离 环境搭建 第一步安装node：可以在http://nodejs.cn/download/ 直接下载安装哦，各种系统的都有，并且新版本不需要手动配置环境。安装好后打开cmd输入node -v 和 npm -v即可查看是否安装成功。 第二步安装vue：直接在命令行中输入npm install vue。再进入到想要创建项目的目录下；//安装脚手架npm install –global vue-cli//安装webpack相关依赖vue init webpack my-project//进入到项目中cd my-projectnpm install//运行vue项目npm run dev第三步安装node express：在项目下（my-project）cmd输入：npm install express第四步安装xammp和navicat：这个简单，就不用详细介绍啦！直接安装后就运行mysql就行。然后用navicat建立数据库。做好了准备工作，接下来我们进入今天的主题： 效果预览： vue代码（局部）： 这里需要用Vue-resource不然this.$http.post报错！这个推荐一个大神写的比较详细的 新建服务器目录 直接在vue项目中建立servser文件夹node文件都可以放到项目中。最后npm run build会生成dist文件夹！文件夹中的文件是最后的页面。 node代码： 首先建立服务 建立api接口： 数据库： vue路由管理 和跨域管理 在config文件夹下index.js文件中 dev: 中添加如下代码。 直接运行localhost：8088就好啦。对编程感兴趣，想了解更多的编程知识，关注头条号一起玩转编程更多编程资讯、干货持续更新中~本文仅代表作者个人观点，不代表巅云官方发声，对观点有疑义请先联系作者本人进行修改，若内容非法请联系平台管理员，邮箱2522407257@qq.com。更多相关资讯，请到巅云www.yinxi.net学习互联网营销技术请到巅云建站www.yx10011.com。