前后端分离技术探究

前后端分离技术探究刘明科技发展部2018.4.26.前后端分离技术探究•Web技术演进•什么是前后端分离•为什么要做前后端分离•怎样做前后端分离•Vue.js•vue-router•诺博前端开发框架•答疑Web技术演进•早期阶段Web技术演进•后端为主的MVC阶段Web技术演进•SPA阶段Web技术演进•MVVM阶段Web技术演进•全栈阶段什么是前后端分离•前端：负责展现•后端：负责数据为什么要做前后端分离•现有模式不满足需求•明确前后端职责•提高开发效率•加速前端发展怎样做前后端分离•前端：负责View和Controller层•后端：负责Model层Vue.js•调试工具VueDevtools•全局安装scripttype=text/javascriptsrc=../../bower_components/vue/dist/vue.js/scriptVue.js•声明式渲染HTMLdivid=“app”{{message}}/divJSvarapp=newVue({el:‘#app’,data:{message:‘Helloworld!’}});Vue.js•条件渲染HTMLdivid=“app”pv-if=“seen”现在你看到我了/p/divJSvarapp=newVue({el:‘#app’,data:{seen:true}});Vue.js•列表渲染HTMLdivid=“app”olliv-for=“iteminitems”{{item.text}}/li/ol/divVue.js•列表渲染JSvarapp=newVue({el:‘#app’,data:{items:[{text:‘诺博教育’},{text:‘海马幼评’}]}});Vue.js•列表渲染输出结果1.诺博教育2.海马幼评Vue.js•事件处理HTMLdivid=“app”p{{message}}/pbuttonv-on:click=“reverseMessage”逆转消息/button/divVue.js•事件处理JSvarapp=newVue({el:‘#app’,data:{message:‘Helloworld!’},methods:{reverseMessage:function(){this.message=this.message.split(‘’).reverse().join(‘’);}}});Vue.js•双向绑定HTMLdivid=“app”p{{message}}/pinputv-model=“message”/divJSvarapp=newVue({el:‘#app’,data:{message:‘Helloworld!’}});Vue.js•Vue实例varvm=newVue({//传入一个选项对象options});实例属性$data$el实例方法$watchVue.js•全局APIVue.extend(options)使用基础Vue构造器，创建一个“子类”。参数是一个包含组件选项的对象。data选项必须是函数。Vue.component(id,[definition])注册或获取全局组件。注册还会自动使用给定的id设置组件的名称。Vue.js•组件组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。所有的Vue组件同时也都是Vue的实例，所以可接受相同的选项对象(除了一些根级特有的选项)并提供相同的生命周期钩子。Vue.js•使用组件divid=“app”my-component/my-component/divVue.js•使用组件全局注册1.注册Vue.component(‘my-component’,{template:‘divHelloworld!/div’});2.创建根实例newVue({el:‘#app’});Vue.js•使用组件全局注册渲染结果divid=“app”divHelloworld!/div/divVue.js•使用组件局部注册newVue({el:‘#app’,components:{‘my-component’:{template:‘divHelloworld!/div’}}});vue-router•Vue.js的官方路由插件•全局安装scripttype=text/javascriptsrc=../../bower_components/vue-router/dist/vue-router.js/scriptvue-router•核心思路将组件(components)映射到路由(routes)，然后告诉vue-router在哪里渲染它们。vue-router•组件映射到路由创建router实例varrouter=newVueRouter({routes:[{path:‘/helloworld’,component:{template:‘divHelloworld/div’}}]});vue-router•组件映射到路由注入路由newVue({router}).$mount(‘#app’);vue-router•组件渲染divid=“app”router-view/router-view/div诺博前端开发框架•代码讲解答疑•问题清单谢谢