前言

最近几年前后端分离架构大行其道，而且各种框架也是层出不穷。本文通过dotnetcore +vue 来介绍 前后端分离架构实战。

涉及的技术栈

服务端技术

• mysql

  本项目使用mysql 作为持久化层

• orm

  dapper 短小精悍，被称为orm中的瑞士军刀。作者之前使用EF 比较多，总感觉 EF 对一些复杂查询需要原生sql支持的不是那么好，EF 生成sql 不好控制，涉及对性能要求比较高的地方，优化起来不够理想。作者在最近的几个项目中接触到dapper，它对原生sql查询支持的相当给力，使用起来也比较简便，感觉真是爱不释手，嘿嘿。。。
  https://github.com/StackExchange/Dapper

• 架构

  服务端整体架构采用仓储模式
  Repository是一个独立的层，介于领域层与数据映射层（数据访问层）之间。它的存在让领域层感觉不到数据访问层的存在，它提供一个类似集合的接口提供给领域层进行领域对象的访问。Repository是仓库管理员，领域层需要什么东西只需告诉仓库管理员，由仓库管理员把东西拿给它，并不需要知道东西实际放在哪。
  此处照搬了dudu同学对仓储模式的理解。
  仓储模式的好处：领域依赖接口与DB进行交互，解除了二者之间的耦合，如果更换orm,DB层，采用这种模式，更换的代价最低。

graph LR
    A-->B

前端技术

整体上SPA 结构

• Vue:

  渐进式 JavaScript 框架.
  三大特点：易用，灵活, 高效。
  详细信息见 https://cn.vuejs.org/

• VueRouter

  vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

• axios

  axios 开始崛起， 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。

• ElementUI

  网站快速成型工具
  Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
  详细信息见 http://element-cn.eleme.io/#/zh-CN