先挖坑吧····等把老项目代码整理完了，来分享一下怎么把让你哭的代码慢慢改造成你希望的模样
项目从接手到现在大概有三个星期左右了，之前老项目是使用传统的MVC模式来处理的，后台语言使用PHP，然后通过模板输出页面。趁着这次需求变更准备尝试一下前后端分离，把项目剥离出来。
前后端分离的必要性
PHP的模板系统其实与当前比较流行的前端框架之间有一定的相似之处，例如：条件渲染、列表渲染等等。但是涉及到交互的地方就会使用大量的JQuery操作DOM树，而且对于页面跳转来说，只能通过本地保存数据或者后端数据填充的方式来进行页面间传值，前端十分依赖于后台的开发环境。在开发过程中如果能够脱离后台环境的限制，肯定会更加方便。
技术选型
技术选型不多讲，每个项目或者公司都会有自己的选择，这个项目我们选择了Vue+VueRoute+Jquery。之所以没有直接抛弃Jquery是因为项目需要依赖于UEditor，而公司开发的历史插件是依赖于JQuery的，而且在前置项目中也使用了大量的JQuery，所以无奈之下只能依赖，但尽量从项目中剥离。
前置项目：就是在老项目接口剥离过程中，两个小伙伴在老项目环境下依赖vue等开发的。
悲伤的开始
想法总是好的，但现实是残酷的，首先要面临的就是浏览器跨域的问题。因为需要大量的数据请求涉及到浏览器跨域，为了更好的模拟真实环境，我们在本地使用了nginx反向代理域名到局域网服务器，然后修改host文件将约定域名映射到本地80端口，同时在nginx中过滤项目路径映射到本地。听上去好像有点绕，其实主要要解决的问题就是把本地开发环境和局域网服务器变成同一个域下的服务，来解决跨域问题。
恩，后来发现做的这些基本上用webpack都可以做到
然后做完这一切后，使用vue-cli搭建整个框架，然后引入需要的模块，再把前置项目从老项目中剥离，结构化后引入项目。改写自动化脚本，改写nginx配置，将浏览器端的热更新请求拦截并转发到本地。
恩，这一切做完以后，发现，其实仅仅只是做了一个项目剥离。
开发
前置项目中使用了大量的JQuery，首先将所有通过JQuery操作DOM树的地方改写，仅仅保留Ajax请求，这部分到后来会通过封装Fetch的方式进行改写。
先写这么多，待续。。。
先挖坑吧····等把老项目代码整理完了，来分享一下怎么把让你哭的代码慢慢改造成你希望的模样
项目从接手到现在大概有三个星期左右了，之前老项目是使用传统的MVC模式来处理的，后台语言使用PHP，然后通过模板输出页面。趁着这次需求变更准备尝试一下前后端分离，把项目剥离出来。
前后端分离的必要性
PHP的模板系统其实与当前比较流行的前端框架之间有一定的相似之处，例如：条件渲染、列表渲染等等。但是涉及到交互的地方就会使用大量的JQuery操作DOM树，而且对于页面跳转来说，只能通过本地保存数据或者后端数据填充的方式来进行页面间传值，前端十分依赖于后台的开发环境。在开发过程中如果能够脱离后台环境的限制，肯定会更加方便。
技术选型
技术选型不多讲，每个项目或者公司都会有自己的选择，这个项目我们选择了Vue+VueRoute+Jquery。之所以没有直接抛弃Jquery是因为项目需要依赖于UEditor，而公司开发的历史插件是依赖于JQuery的，而且在前置项目中也使用了大量的JQuery，所以无奈之下只能依赖，但尽量从项目中剥离。
悲伤的开始
想法总是好的，但现实是残酷的，首先要面临的就是浏览器跨域的问题。因为需要大量的数据请求涉及到浏览器跨域，为了更好的模拟真实环境，我们在本地使用了nginx反向代理域名到局域网服务器，然后修改host文件将约定域名映射到本地80端口，同时在nginx中过滤项目路径映射到本地。听上去好像有点绕，其实主要要解决的问题就是把本地开发环境和局域网服务器变成同一个域下的服务，来解决跨域问题。恩，后来发现做的这些基本上用webpack都可以做到
然后做完这一切后，使用vue-cli搭建整个框架，然后引入需要的模块，再把前置项目从老项目中剥离，结构化后引入项目。改写自动化脚本，改写nginx配置，将浏览器端的热更新请求拦截并转发到本地。
恩，这一切做完以后，发现，其实仅仅只是做了一个项目剥离。
开发
前置项目中使用了大量的JQuery，首先将所有通过JQuery操作DOM树的地方改写，仅仅保留Ajax请求，这部分到后来会通过封装Fetch的方式进行改写。
先写这么多，待续。。。