后端部分代码,前端mock镜像设计,提供脚手架。
后端采用gin框架
,自行搭建MVC架构
,包括Controller、Model、Router、DB
四个主要部分。
Controller
提供获得数据信息的各种方法,通过与Models
交互,获得需要的数据,然后返回给View
。在前后端分离的实现中,View
被包装成api
,通过Router
为api
定向,BaaS架构下,后端只提供必要的数据支持,页面及交互效果不再负责。
前端采用Vue框架
,其本身支持MVVM架构
,前后端分离的设计下,前端由数据驱动,通过获得后端api
提供的数据,为用户提供相应的交互体验。mock
测试使用基于mock.js
的一个应用实现。
后端采用MVC架构
,前端采用MVVM架构
,我们很容易注意到MVC
的Model
是数据库,View
被封装成api
后作为数据被前端直接使用,MVVM
的Model
由api
获得,View
是用户获得的体验效果,也就是说,可以认为后端的View
就是前端的Model
。那么这整个CS架构都将是数据驱动的。
从数据库 >> api >> 页面
,数据是这样流动的。在早期前后端不分离时,后端使用模板语法兼顾页面的渲染和跳转,这个时候是 数据库 >> 页面
这样直接的流动,渲染过程使用DTL等等语法可以直接忽略。虽然这样减少了数据的流动性,实现更加简单,但是在网络传输中的数据体量增大了,所以对用户其实并不友好。使用api
的封装,减小了数据粒度,而且将与用户交互的前端直接分离出来,可以着重发展用户相关的功能及体验,这对项目的商业化、实用性和用户好感度的提升都有很大的好处。
使用前后端分离的架构,前端的文件放在网络指定地址上,用户格局url
可以直接访问,当用户在该网页上进行api请求
时,后端才会接收到相关请求,并返回数据,前端再在相应页面上完成数据渲染以及呈现。分工明确。