Skip to content

fuyunzhishang/VueAdmin

Repository files navigation

基于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

http://www.jianshu.com/p/02b4369e3177

vue基础概念介绍

http://www.jianshu.com/p/0dda680939ec

##2.为什么要前后端分离:

技术演进

  1. 静态网站 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开发环境搭建

http://www.jianshu.com/p/0038ef97ee56

ElementUI Demo

http://www.jianshu.com/p/320609733a44

参考文档: