前后端分离实践

技术分享：

最近工作项目推进前后端分离，开始实践vue开发。

今天和大家分享一种思维，如何将传统的开发方式迭代为前后端分离模式。

随着node，vue，react，angular等技术的流行，前后端分离的开发模式逐渐成为开发的主流模式，但是相信很多大型的项目一开始使用的技术是jquery+java或者其他后台语言，由于项目比较庞大，进行代码的重构以及推行前后端分离并不是一件容易的事情，所以实行前后段分离成为flag，一直说做，一直做不起来。

这种情况下迭代着实现前后端分离式最好的方式，一方面不耽误旧的功能的使用，另一方面能够在写新的功能时能够采用前后端分离的模式。

有两种方式：

一、CDN方式

即官方提供的在页面中引入vue或者react等框架的js文件，可以部分使用这些框架的功能，很方便但是这种做法并不彻底

二、完全分离

即用vue框架实现完全的分离，使用过前后端分离的同学都知道，前端项目完成后要发布即将打包后的文件扔到服务器即可或者使用ngnix代理指向index文件，在这里也一样，将打包后的html以及静态文件放到项目中，然后在后台接口的url中指向该页面即可

下面举例在django框架开发的web应用中的使用（前端项目使用的是vue-cli）

首先为了避免打包后static文件名与django的默认static冲突打包配置做以下处理

build: {

    index: path.resolve(__dirname, '../dist/index.html'),

    assetsRoot: path.resolve(__dirname, '../dist'),

    assetsSubDirectory: 'resourceStatic',

    assetsPublicPath: '/static/',

其中resourceStatic可以根据自己喜好定义

打包后的目录如下

打包目录

将index.html放到django项目的templates文件夹下，将resourceStatic放到django项目的satic文件夹下

然后在django项目中后台接口直接指向index.html文件所在的目录即可。

url view

健身打卡

运动：跑步15分钟，Higher巅峰训练30分钟，拉伸10分钟

晚饭：大果粒加燕麦

体重：55kg

每日一句

让最核心的理念随处可见，提醒人们时刻谨记。随时随地地使用，让它成为人们时刻不忘的追求。把它公之于众，意味着团队所有诚邀都知道自己应该交付什么样的功能。

-------《简约至上》