实现前后端分离的心得

in 编程
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

实现前后端分离的心得

对目前的web来说,前后端分离已经变得越来越流行了,越来越多的企业/网站都开始往这个方向靠拢。那么,为什么要选择前后端分离呢?前后端分离对实际开发有什么好处呢?

为什么选择前后端分离

如何做到前后端分离

(以下的内容都是基于我们的电影购票网站来讨论的)
前端的技术框架是: vue全家桶+nodejs+express(实现的是单页面(SPA)应用)
首先,先分清楚前后端的工作

我们项目的整一个架构如下:

这里写图片描述

接下来进入正题,如何实现前后端分离

  1. 一般来说,要实现前后端分离,前端就需要开启一个本地的服务器来运行自己的前端代码,以此来模拟真实的线上环境,并且,也是为了更好的开发。因为你在实际开发中,你不可能要求每一个前端都去搭建一个java(php)环境,并且在java环境下开发,这对于前端来说,学习成本太高了。但如果本地没有开启服务器的话,不仅无法模拟线上的环境,而且还面临到了跨域的问题,因为你如果写静态的html页面,直接在文件目录下打开的话,你是无法发出ajax请求的(浏览器跨域的限制),因此,你需要在本地运行一个服务器,可是又不想搭建陌生而庞大的java环境,怎么办法呢?nodejs正好解决了这个问题。在我们项目中,我们利用nodejs的express框架来开启一个本地的服务器,然后利用nodejs的一个http-proxy-middleware插件将客户端发往nodejs的请求转发给真正的服务器,让nodejs作为一个中间层。这样,前端就可以无忧无虑的开发了
  2. 由于前后端分离后,前端和后台同时开发时,就可能遇到前端已经开发好一个页面了,可是却等待后台API接口的情况。比如说A是负责前端,B是负责后台,A可能用了一周做好了基本的结构,并且需要API接口联调后,才能继续开发,而此时B却还没有实现好所需要的接口,这种情况,怎么办呢?在我们这个项目里,我们是通过了mock来提供一些假数据,我们先规定好了API接口,设计出了一套API文档,然后我们就可以通过API文档,利用mock(http://mockjs.com)来返回一些...,这样就可以模拟发送API到接受响应的整一个过程,因此前端也不需要依赖于后端开发了,可以独立开发,等到后台的API全部设计完之后,就可以比较快速的联调。

为什么要引入nodejs作为中间层

前面的我发的项目结构图中,已经表明,在这个项目里,我们将nodejs作为中间层,那么,为什么我们要特地引入nodejs呢?直接用java做不就行了吗?

前端服务器如何部署

nodejs前端服务器的职责

  1. 作为静态文件服务器,当用户访问网站的时候,将index.html以及其引入的js、css、fonts以及图片返回给用户
  2. 负责将客户端发来的ajax请求转发给后台服务器

其实前端服务器的部署工作是算比较简单的,具体有以下两个点:

  1. 将开发完的前端代码,利用webpack打包成静态压缩文件
  2. 在服务器上,利用pm2负载均衡器来执行以下的代码来开启服务器:

(PS:其实也有一个做法,就是用nginx来做反向代理,负责转发请求,根据客户端访问的url把这个请求转发到不同的服务,比如访问/api/*的请求,就转发到后台服务,访问其它的请求,就转发到nodejs服务)
以上,就是我对于前后端分离的一些看法,以及一些实践,如果大家有什么好的想法,欢迎交流。
本次项目代码的地址为:https://github.com/chenjigeng... 由于本项目的后台服务已经下线,此项目运行不起来。只供参考

本文地址在->本人博客地址, 欢迎给个 start 或 follow

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看