前后端分离技术探究PPT课件.pptx

1、前后端分离技术探究,刘明 科技发展部 2018.4.26.,1,前后端分离技术探究,Web技术演进 什么是前后端分离 为什么要做前后端分离 怎样做前后端分离 Vue.js vue-router 诺博前端开发框架 答疑,2,Web技术演进,早期阶段,3,Web技术演进,后端为主的MVC阶段,4,Web技术演进,SPA阶段,5,Web技术演进,MVVM阶段,6,Web技术演进,全栈阶段,7,什么是前后端分离,前端：负责展现 后端：负责数据,8,为什么要做前后端分离,现有模式不满足需求 明确前后端职责 提高开发效率 加速前端发展,9,怎样做前后端分离,前端：负责View和Controller层 后端

2、：负责Model层,10,Vue.js,调试工具 Vue Devtools 全局安装 ,11,Vue.js,声明式渲染 HTML message JS var app = new Vue( el: #app, data: message: Hello world! );,12,Vue.js,条件渲染 HTML 现在你看到我了 JS var app = new Vue( el: #app, data: seen: true );,13,Vue.js,列表渲染 HTML item.text ,14,Vue.js,列表渲染 JS var app = new Vue( el: #app, data:

3、items: text: 诺博教育 , text: 海马幼评 );,15,Vue.js,列表渲染 输出结果 1. 诺博教育 2. 海马幼评,16,Vue.js,事件处理 HTML message 逆转消息 ,17,Vue.js,事件处理 JS var app = new Vue( el: #app, data: message: Hello world! , methods: reverseMessage: function () this.message = this.message.split().reverse().join(); );,18,Vue.js,双向绑定 HTML messa

4、ge JS var app = new Vue( el: #app, data: message: Hello world! );,19,Vue.js,Vue实例 var vm = new Vue(/传入一个选项对象 options ); 实例属性 $data $el 实例方法 $watch,20,Vue.js,全局API Vue.extend(options) 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。data选项必须是函数。 Vponent(id, definition) 注册或获取全局组件。注册还会自动使用给定的id设置组件的名称。,21,Vue.js,组

5、件 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。 所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。,22,Vue.js,使用组件 ,23,Vue.js,使用组件 全局注册 1. 注册 Vponent(my-component, template: Hello world! ); 2. 创建根实例 new Vue( el: #app );,24,Vue.js,使用组件 全局注册

6、 渲染结果 Hello world! ,25,Vue.js,使用组件 局部注册 new Vue( el: #app, components: my-component: template: Hello world! );,26,vue-router,Vue.js的官方路由插件 全局安装 ,27,vue-router,核心思路 将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。,28,vue-router,组件映射到路由 创建router实例 var router = new VueRouter( routes: path: /helloworld, component: template: Hello world );,29,vue-router,组件映