一次前后端分离架构的实践

一次前后端分离架构的实践

拜读了 @pkwenda 的前后端分离架构系列文章之后，感觉又GET到了新技能，于是乎深入地学习了 Vue 一波，下面谈谈我的感受。

最大感受就是代码解耦了，前后端代码不再混杂在一个项目中，开发人员可以各司其职，但同时部署也变得复杂了，原本只需部署一个项目的，现在我们不得不部署两个项目的，这无疑增加了部署的难度。

关于实践项目 Wanna Spring ：这是一个记录个人信息，采用前后端分离的项目。传送门：Github or Gitee

后端开发的一些注意事项

• 跨域支持

  由于我们需要前后端分开部署，自然不会是同一个端口，所以后端必须支持跨域访问（这并不是什么技术难点），不然前端的请求会被拒之门外哦。

• 接口规范

  规范的接口可以降低我们的沟通成本，所谓规范的接口就是走REST风格路线，也就是我们常说的RESTful API。

  这里再哆嗦一下4个常用的方法：GET获取资源，POST创建资源，PUT更新资源，DELETE删除资源。开发中我们应该为HTTP接口选择正确的方法，以便让他人更容易理解接口的用途。

  关于什么是RESTful，其实就是一个风格的规范而已，想了解更多的话请自行谷歌（因为这个真的不好解释）

浅谈前端

由于笔者是一个后端码农，对前端也不是很熟悉，所以下面将主要介绍一个后端同学学习前端的历程以及用到的类库，所以这里会写得多一些，有不正确的地方欢迎指出哦

这也是我的第一次学习前端开发吧，之前写的页面也都是传统的、基于ES5开发，现在回头看，JS里都是一堆的全局函数和全局变量，着实看着让人难受呀。

• ES6模块化开发

  这让我重新燃起了对JavaScript的兴趣，ES6带来了很多新特性，最让我感到熟悉的还是箭头函数（类似Java的Lambda表达式）， 变量也有了局部变量 let 和常量 const 的声明方式，不过最好用的还是模板语法了

  深受Java封装的思想之后，感觉有了强迫症:joy:

• ESLint

  这里我其实是想吐槽一下ESLint规则的，什么代码缩进两个空格，行尾不能有分号等等，这让入门的我真是摔了一跟头。 不过代码规范还是重要的，习惯了也就好了。

  特别说明：并不是说这个规范不好，只是刚开始的时候有一点不习惯啦

• 大名鼎鼎的VUE

  Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动

  不得不说VUE真的很优秀，学习成本很低，节约了我很多的时间。这里没有太多要写的，毕竟用法官方文档已经写得很详细了。 感谢VUE带给我们的欢乐。

• ElementUI

  组件化开发、组件复用真是好用得不要不要的。之前虽然听过ElementUI，但那时我还沉浸于Bootstrap4，也并不知道这是基于VUE开发的一套组件框架， 这还是在今年最受欢迎的国产开源软件投票中再次看到ElementUI，然后决定学习了一波， 发现真的是非常好用，及其方便。

  还有同样是饿了么前端团队开发的基于Vue和ECharts封装的VCharts图表组件

• 用到的其他库

  • Axios 超级好用的HTTP请求库

  • DayJS 一个日期处理库

  • Validator 一个字符串校验库

  • JSCookie 一个轻量级的Cookie操作库

总结

互联网发展至今，各个领域的技术越来越来成熟，前后端分离的架构似乎会成为未来开发的趋势。 最后，希望自己跟得上这个新技术层出不穷的时代吧，加油:facepunch:

项目源代码：Github or Gitee

转载于:https://juejin.im/post/5c03f050f265da6130749eb1