Skip to content

fuyunzhishang/VueAdmin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

dea0d1d · May 16, 2017

History

16 Commits
May 12, 2017
May 5, 2017
May 16, 2017
May 16, 2017
Apr 16, 2017
May 16, 2017
Apr 28, 2017
Apr 26, 2017
Apr 16, 2017
Apr 16, 2017
Apr 18, 2017
Apr 17, 2017
Apr 16, 2017
Apr 16, 2017
May 16, 2017

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

参考文档:

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published