系统架构——前后端分离

前后端分离大概是指是HTML和服务器代码的分离，因为浏览器中解释执行的HTML+JS+CSS代码混合着<%%>包含的内容确实是不友好，于是就有人发明了代码分离的技术，比如asp.net的基于事件的codebehind，struts的mvc方式。再后来，为了更彻底地分离，前端直接做成了独立的程序包或应用，比如基于浏览器的angular、react之类的。这种前后端分离的好处是显而易见的，即增加了代码的可读性，增加了可维护性，同时也容易分配开发任务，前后端可以并行开发，互不干扰。

在实际开发中，新的项目，只要是正式的项目，肯定是尽量代码分离的，况且现在主流的程序框架都是MVC结构的，你不想分离都难，唯一纠结的地方就是选择服务端渲染还是客户端渲染的问题。服务端渲染和客户端渲染的比较大的差别大概有两点，一个是响应速度上，服务端渲染每次返回的一个完整的HTML代码或是部分HTML代码，而客户端渲染则所有界面逻辑都在客户端，变更界面不用每次都向服务器请求。由于客户端渲染每次操作只请求纯数据的部分，这样无论响应速度还是网络流量都会比服务端渲染好点。当然服务端渲染也有服务端渲染的好处，就是生成页面连同数据一同发过来的，不用复杂的Dom操作，这样有利于开发的效率，毕竟服务端的调试要比客户调试来得方便。

我们可以用代码的方式来比较一下这两者的不同。假设我们要开发一个网店系统，其中有一功能就是商品的管理，商品有一个分类属性，商品和分类是从属关系，一般设计成多对一的关系。比如以下关于分类和商品实体的定义代码：

    /// <summary>
    /// 分类实体
    /// </summary>
    [Table("CategoryInfo")]
    public class CategoryInfo
    {
        public Guid Id { get; set; }
        public string Title { get; set; }

        public override string ToString()
        {
            return Title;
        }
    }
    
    
    /// <summary>
    /// 商品实体
    /// </summary>
    [Table("CommodityInfo")]
    public class CommodityInfo
    {
        public Guid Id { get; set; }

        public string Title { get; set; }

        public float Price { get; set; }

        public Guid CategoryInfoId { get; set; }

        public CategoryInfo Category { get; set; }

        public override string ToString()
        {
            return Title;
        }
    }

然后，我们在DbContext里边加上这两行：

        public DbSet<CategoryInfo> CategoryInfos { get; set; }

        public DbSet<CommodityInfo> CommodityInfos { get; set; }

因为我们只做简单的CRUD操作，所以这个示例中免去了业务层代码逻辑，我们将直接在Controller中进行Linq查询，无论是MVC项目，还是WEB API项目，查询逻辑是一样的。

//MVC中的Action
        public IActionResult Index()
        {
            return View(dbContext.CommodityInfos.ToList());
        }

//API中的查询
        [HttpGet()]
        public CommodityInfo[] All()
        {
            return dbContext.CommodityInfos.ToArray();
        }

接下来就有区别了，MVC中我们只要定义一个View视图。

@model List<RelationData.CommodityInfo>
@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<table class="table">
    <tr><th>分类</th><th>商品名称</th></tr>
    @foreach (var p in Model)
    {
        <tr><td>@p.Category</td><td>@p</td></tr>
    }
</table>

而客户端渲染要先建一个Angular（当然也可以是其它的），我们可以在VS中创建，也可以命令行创建。为了方便，我们用DevExpress。
HTML部分：

<dx-data-grid id="gridContainer"
    [dataSource]="dataSource"
    [remoteOperations]="false"
    [allowColumnReordering]="true"
    [rowAlternationEnabled]="true"
    [showBorders]="true"
    (onContentReady)="contentReady($event)">

    <dxo-paging [pageSize]="10"></dxo-paging>
    <dxo-pager
        [showPageSizeSelector]="true"
        [allowedPageSizes]="[10, 25, 50, 100]"
    ></dxo-pager>
    <dxo-search-panel
        [visible]="true"
        [highlightCaseSensitive]="true"
    ></dxo-search-panel>
    <dxo-group-panel
        [visible]="true"
    ></dxo-group-panel>
    <dxo-grouping
        [autoExpandAll]="false"
    ></dxo-grouping>

    <dxi-column dataField="Category.Title" caption="分类"></dxi-column>
    <dxi-column caption="Title" dataField="商品名称"></dxi-column>

</dx-data-grid>

组件部分：

import { NgModule, Component, Pipe, PipeTransform, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxDataGridModule,
         DxBulletModule,
         DxTemplateModule } from 'devextreme-angular';
import DataSource from 'devextreme/data/data_source';
import { Service } from './app.service';

@Component({
  selector: 'app-counter-component',
  templateUrl: './commodity.component.html'
})
export class CommodityComponent {
    
    dataSource: DataSource;

    constructor(service: Service) {
        this.dataSource = service.getDataSource();
    }
}

数据服务：

import { Injectable } from '@angular/core';
import 'devextreme/data/odata/store';
import DataSource from 'devextreme/data/data_source';

@Injectable()
export class Service {
    getDataSource() {
        return new DataSource({
            store: {
                url: 'https://localhost/api/commodity/all'
            }
        });
    }
}

相较而言，两者似乎差不多，区别是服务器端渲染是内存传递对象，而客户端渲染是通过json来传递对象。另外就是客户端增加了一个技能栈，当然你也可以不用Angular框架，而是直接用ajax的方式直接操作Dom树。

前后端分离，我们还可以再扩展一下。现在的客户端框架，其实就是将原来的瘦端进行了富化，现在有了丰富的第三方UI组件，原来需要桌面程序才能实现的东西，现在通过纯网页也可以实现了，因而前端并不限于HTML，不包括桌面应用，手机APP、小程序等不直接处理业务逻辑的各类终端。

Xamarin中获取Json数据：

  var uri = new Uri (string.Format ("http://localhost/api/all", string.Empty));

  ...
  var json = JsonConvert.SerializeObject (item);
  var content = new StringContent (json, Encoding.UTF8, "application/json");

  HttpResponseMessage response = null;
  if (isNewItem)
  {
    response = await _client.PostAsync (uri, content);
  }
  ...

  if (response.IsSuccessStatusCode)
  {
    Debug.WriteLine (@"	TodoItem successfully saved.");

  }
  ...