基于Vue的前后端分离项目实践

学习web前端 2019-12-20

一、为什么需要前后端分离

1.1什么是前后端分离
  前后端分离这个词刚在毕业(15年)那会就听说过,但是直到17年前都没有接触过前后端分离的项目。怎么理解前后端分离?直观的感觉就是前后端分开去做,即功能和职责上的一种划分,前端负责页面的渲染,部分页面交互的逻辑,然后通过网络请求与后端进行数据的交互;后端则着重关注业务逻辑的处理,直接操控数据库。

1.2前后端未分离前
(1)jsp + servlet 开发模式:

JSP页面:负责视图层的渲染及交互,内部可以嵌入java 代码,在某些场景下开发起来比较方便,但是这种页面和java代码混合开发的方式造成逻辑不够直观,项目代码维护起来困难。

Servlet类: 负责接收from表单提交的参数,进行业务层逻辑和页面导航的处理。但是这种方式需要区分请求的方式,手动把请求的参数拿出来进行封装。基本上一个请求对应一个servlet,需要在web.xml文件中配置urL映射或者注解的方式。

大体流程:

编写JSP页面,引入java常用类库和JSTL标签库,编写HTML表单,CSS,javascript。
编写Servlet 方法,重写service()方法,需要手动获取请求参数,然后业务逻辑处理。
配置web.xml。在web.xml文件中注册servlet,配置请求映射(简单方法:增加注册)。
       基于Vue的前后端分离项目实践

(2)jsp + spring mvc开发模式:spring 框架流行起来后,着重关注的是分层设计,即MVC的概念,个人认为jsp+spring 带来的最大好处是简化了之前servlet时代编写web流程的复杂度,各种注解、各种参数自动注入极大提高了java web的开发效率,此时对Jsp页面有一个共同的约束,即JSP页面不要在嵌入除标签外的java代码,这样初步把视图层抽出来。但是这种方式的约束性依然很大,即应用强依赖于java生态。

大体流程:

搭建spring 框架,在web.xml中配置spring mvc的分发器。
编写jsp页面,利用各种Jquery插件和前端css框架,也能做出漂亮的交互界面。
编写spring controller,只需要几个注解即可和表单的请求匹配,web请求的参数能够自动注入到controller请求的方法,一个controller可以匹配n多个请求。其中controller可以分为两种,一种是返回页面路径的controller,这个controller可以携带Java对象到页面;另外一种是返回特定格式的json,常用的是json.  

基于Vue的前后端分离项目实践

     
(3)模板+spring boot:

spring boot是spirng的一个脚手架,能够快速搭建spring项目,使用默认配置减少开发者手动的配置,与第三发包的各种整。模板相对于jsp页面来说,进一步进行视图层的模块化,即可以按照页面的结构进行划分,常用的例如Header,footer,Silder Menu, Center Conter这样的版块接口进行划分,把页面进行分片处理,提高代码的复用度。

模块划分如下:

 基于Vue的前后端分离项目实践

1.3前后端分离后
从上面可以看到java web生态系统不断的完善和加强,对于绝大多少web系统的开发来说足够了,那为什么要搞前后端分离?个人认为有以下几个原因:一个是职责划分需要,页面开发和业务逻辑开发并行进行来缩短开发周期。二是术业有专攻,随着页面的交互、UI要求不断提升,前端同学在页面方面的开发更具有专业性。三是前端具有强大的生态系统,有许多现成的组件和框架可以进行大项目的模块化开发,正则意义上实现交互和逻辑的逻辑和物理上的完全分离。

前端项目+后台接口

1.4前后端分离的优点与缺点
  优点:

对于中大型项目,能够提升开发效率,提高交互和UI效果,缩短开发周期。
前端能够处理一大部分验证和交互逻辑,从而减少与服务器间的交互次数,减小服务器处理压力,并且页面是由浏览器渲染生成。
前端具有强大的组件库和处理工具,项目更容易跨平台。
降低维护成本。
接口和前端组件能够复用。
缺点:

需要更多的沟通成本。未进行前后端分离时,由后端同学完成整个项目的开发,前后端分离时需要和前端同学进行接口的沟通和联调。
对于小、交互性要求不高的项目,进行前后端分离反而效率较低,当然全栈开发除外。
部署流程更复杂。前后端分离一般是两个项目环境,需要投入更多硬件和运维。
二、前后端分离步骤
2.1 分离前的业务功能划分
  职责划分:当从非前后端分离的项目转到前后端分离的项目,如何确认分离的切入点?首选需要理解前后端的职责,即前端负责页面构建和交互处理,后端负责接口定义和业务处理。所有页面上能看到的功能基本都是前端的,所有涉及数据的查询、保存都是后端的,前端不需要关心数据的输入和输出,而关注数据在这个过程中的交互逻辑;后端需要关心页面如何渲染和交互,而关注输出数据和接收数据。从上面可以看出职责即是功能的划分。

 基于Vue的前后端分离项目实践

  模块划分:前后端模块划分关注点不同。后端模块划分时一般有两种方式,第一种是先分层,再按照模块划分。即先按照全局、工具、控制层、服务层、数据操作层等这种基于MVC的结构进行划分,然后再将控制层、服务层、数据操作层按照业务模块进行划分。第二种方式按先模块后结构进行划分,即先按照业务模块划分不同的结构,然后每个模块根据需要决定是否进行MVC结构的划分。第一种更适用于中小型项目的构建,第二种更适用于大型项目,能够对按照业务垂直划分结构,方便部署和扩展。

  前端模块划分基本基于功能的层次结构。第一层一般是全局配置、静态资源、工具类、视图、组件并列的结构,第二层是组件的复合结构和视图的复合结构,第三层是组件的独立结构。

 基于Vue的前后端分离项目实践

2.2 前端需要了解的知识点
在进行前后端分离之前需要普及一下前端相关的知识。如下:

javascript:

  基本概念:JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。它由ECMAScript(描述该语言的语法和基本对象)、文档对象模型(DOM,描述处理网页内容的方法和接口)、浏览器对象模型(BOM,描述与浏览器进行交互的方法和接口)三部分构成。

  生态:这里说的生态即简单介绍一下JS能够做些什么。数据可视化,例如D3.js、百度的Echars;移动端应用,例如Cordova、DeviceOne,能够一次开发多平台发布。服务端:Node.js,常用的框架有Express;桌面应用:NW.js和Electron,他们可以使用HTML和javascript开发桌面一个应用,而且一次开发,多平台运行。其它的还有游戏(WebGL)、AR、VR的应用支持。

MVVM:MVVM是Model-View-ViewModel的缩写。这个可以和MVC进行对比一下。MVC如下:

     基于Vue的前后端分离项目实践

MVVM如下:

 基于Vue的前后端分离项目实践

这里可以看到相对于MVC,MVVM多了一个ViewModel的概念。在前端页面中,把Model用纯Javascript对象表示,View 负责显示,两者做到了最大限度的分离。把Model和View关联起来就是ViewModel。ViewModel负责吧Model的数据同步到View显示出来,还负责把View的修改同步到Model。想象一下传统的MVC开发web应用的流程?

  Vue: vue 是一个MVVM的渐进式框架,被设计可以自定向上逐层应用。Vue核心库只关注视图层,不仅易于上手,还便于与第三方库或已有项目整合。

  Node: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。

  ES6: es6的全名是ECMAscript 2015。ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

  Node Express 框架: Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。Express 框架核心特性:(1)可以设置中间件来响应 HTTP 请求。(2)定义了路由表用于执行不同的 HTTP 请求动作。(3)可以通过向模板传递参数来动态渲染 HTML 页面。

  IView: IView 是一个基于Vue 的第三方组件库,包含了后台开发过程中最基本的组件,组件代码比较简洁,文档和示例比较全。

  IView Admin: 一个GitHub开源项目,是基于IView 基础组件构建的一个后台管理系统,包含了最基本的路由、状态管理、权限等后台系统共有的功能,可基于此系统进行后台的订制开发。

2.3 前后端分离项目开发流程
  前后端分离的项目开发过程中最重要的就是接口文档的编写,它是前后端交互的门户。

 基于Vue的前后端分离项目实践

2.4 前端开发方法
  了解脚手架(CLI):脚手架的意思是帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装,让我们不需要为了编辑或者一些其他事情浪费时间  总而言之,就是快速搭建项目的,让我们可以早点去写代码。Vue 官网提供了相应的CLI工具,帮助我们快速搭建项目。

 基于Vue的前后端分离项目实践

  了解构建工具:这里介绍一下webpack。前端项目开发是使用Vue基于组件方式进行的,但是运行时需要生成浏览器可以理解的js、css、html文件,那这两中文件形式的转换就是webpack的作用,它打包所有资源、打包所有脚本、打包所有图片、打包所有样式。

 基于Vue的前后端分离项目实践

  基本插件:Babel: 他是一种用途很多的javascript编译器,他把最新版的javascript编译成当下可以执行的版本,简言之,利用babel就可以让我们在当前的项目中随意的使用这些新最新的es6,甚至es7的语法。ESLint: ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。

组件设计:

  什么是组件?从代码层面来说一个.vue文件就是一个组件,从功能层面来说组件应该是一个可以复用的功能。组件的特点是当一个组件设计完毕后,后续需要类似的功能,只需要简单的引用组件,然后做些定制化的配置即可。个人理解组件可以划分两大类,第一类是基础组件/原子组件,这类组件是页面的基础构成不封,本身不可或者不宜再划分为子组件,例如Button,Table,这类都算是基础组件,IView基本上是一个基础组件库。第二类是复合组件/框架性组件,这类组件是由基本组件经过合理的布局聚合在一起构成的,它拥有许多默认的配置,从而在类似的页面视图页面能够极大的减小重复代码。

  设计原则:(1)基本思想是组件应该是于业务无关的。设计组件时不应该有任何具体业务逻辑因素的影响。(2)组件时复用代码和视图的抽象,多关注不同的页面,找出共同的接口和不同的特效,抽象出公用的部分。(3)组件应该足够灵活,后续功能特效的新增,不应该对原有引用组件的地方构成影响。

  实例分析(复合组件):

2.5 前后端交互
  保证前后端开发功能的正确性除了详细的需求文档和原型设计外,重要的就是接口文档。接口文档描述了前后端数据交互的方法、格式。前后端项目分离后,许多之前后端需要处理的工作,都将由前端处理,主要涉及以下:页面的导航功能,即Vue Router、组件之间公共信息的保存,即Vuex,服务器数据资源的请求,即axios,其它的比较主要的就是权限、安全。

  路由:Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:(1)嵌套的路由/视图表;

  (2)模块化的、基于组件的路由配置;(3)路由参数、查询、通配符;(4)基于 Vue.js 过渡系统的视图过渡效果;(5)细粒度的导航控制;(6)带有自动激活的 CSS class 的链接

  状态:Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.多个视图依赖于同一状态。为什么需要它?在开发应用中组件之间需要进行信息交流,父组件通过Props属性注入数据,子组件通过感受数据的变化进行相应的逻辑相应。子组件通过自定义事件的方式告知父组件数据发生变化。但是这两种方式只合适对于嵌套层次不深的组件,并且对于兄弟组件间的状态传递无能为力。因此,我们为什么不把组件的共享状态抽取出来,以一个全局单例模式管理呢?在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!

  资源:这里所说的资源主要是指数据资源,即决定前端是否有权限去访问数据资源,一般采用携带token的方式保证资源的安全性。后端采用自定义token策略或者标准的OAuth 认证策略。

  权限:前后端分离后,后端主要控制资源的权限,前端控制页面的权限。权限控制可以分为两大类,第一类是视图权限,即不同的用户只能看到自己改看到的东西,这个细分为菜单权限和按钮权限,菜单权限限制了用户看到的页面;按钮权限限制了用户在页面能够进行的操作。第二类是资源权限:即用户是否用访问数据资源的权限,这类权限在后台项目中不常见。

  菜单权限的实现方法:第一种由前端维护菜单权限,即前端拥有所有的菜单映射,当用户登录后,根据用户的角色对菜单权限进行刷选,类似数据库表和视图的关系,这种方式开发成本较低,能够满足绝大多数对权限变动频率低的系统,缺点是有一定的维护成本,功能不够灵活。第二种是由后端决定菜单权限,即用户登录成功后,菜单树由后端生成直接返回,这样做是足够灵活,但是开发、沟通需要付出更多的时间。第三种是混合开发:即静态权限和动态权限相结合。很多后台系统有一部分菜单是角色公共的后者基本固定角色的,这部分菜单应该由前端预选定义好,对于变动较多的菜单,由后端返回必要信息,进行简单拼接即可。这种方式的工作量介于第一种和第二种之间。

  按钮权限:按钮权限一般通过自定义指令实现,即自定义Vue权限指令,根据传入的角色决定按钮是否显示。但是这种只适用于页面有表单组件的页面,对于需要动态生成的组件页面,需要提供一个全局权限查询方法。

2.5 前端项目部署
  部署方式:前后端分离的项目一般有两种部署方式。第一种是通过build命令将项目打包成静态资源,然后copy静态资源到后端项目的静态目前下,然后通过tomcat服务器进行启动即可,这种方式不推荐。第二种方式是前后端分别部署,前端项目可以使用node 启动一个服务,运行在Node环境中,后端部署在tomcat中,这种方式方便前后端各自水平扩展。

相关推荐