extjs 前后端分离_基于Vue.js的前后端分离Demo

基于Vue.js的前后端分离Demo

1. 技术栈：

前端：

vue全家桶(vue.js, vueRouter, vue-loader, vue-cli, proxyTable),

ElementUI(Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。)

axios(基于 Promise 的 HTTP 请求客户端)

vodal(动画的vue模态)

toastr(是非阻塞通知的JavaScript库),

后端:

基于.Net的WebAPI

Csla(数据访问层)

Linq to json(构造json数据)

初步了解vue.js

vue基础概念介绍

2.为什么要前后端分离：

技术演进

静态网站 html+css+js --> 动态网站 --> asp + js/vbs --> asp.net (分层结构, 简单三层， Extjs) --> mvc (ORM + Bootstrap + Jquery) --> vue.js + webAPI(mvvm数据双向绑定,前端分层，模块化)

前后端代码分离，提高代码复用

前端结构(HTML)、样式(CSS)、行为(JS)分离

请求响应,客户端发送请求，服务端响应请求

一套 Service 可以支持多个客户端的业务体系

彻底解放前端(前端不再需要向后台提供模板或是后台在前端html中嵌入后台代码)

code1

提高工作效率，分工更加明确

前后端分离的工作流程可以使前端只关注前端的事，后台只关心后台的活，两者开发可以同时进行，在后台还没有时间提供接口的时候，前端可以先将数据写死或者调用本地的json文件即可，页面的增加和路由的修改也不必再去麻烦后台，开发更加灵活。

局部性能提升

通过前端路由的配置，我们可以实现页面的按需加载，无需一开始加载首页便加载网站的所有的资源，服务器也不再需要解析前端页面，在页面交互及用户体验上有所提升。

降低维护成本

通过目前主流的前端MVC框架，我们可以非常快速的定位及发现问题的所在，客户端的问题不再需要后台人员参与及调试，代码重构及可维护性增强。

我们不应该有前端后端之分，我们可以有专精之处，但是对于 web 开发这回事该懂的都应该要懂，否则你怎么可能打得赢？

架构演进

简单明快的早期时代

后端为主的 MVC 时代

Ajax 带来的 SPA 时代

前端为主的 MV* 时代

Node 带来的全栈时代

3.如何进行前后端分离：

后台只需提供API接口，前端调用AJAX实现数据呈现。

vue开发环境搭建

ElementUI Demo

参考文档：