前端框架文档 v3.14

1、前端框架说明手册（内部培训材料）1准备1.1基础知识详见vue2官网，1.2环境搭建内网环境Step1:准备已经下载好的Node.js安装包（按照不同的系统，下载不同的安装文件），安装后使用node-v/npm-v查看node和npm的版本，如果npm版本低于3.4建议安装最新版本的node.js运行环境。Step2:解压项目模板文件Step3:进入client文件夹，解压已准备好的node_modules文件到当前目录Step4：npminstallStep5：npmrundev外网环境Step1:下载Node.js安装包（按照不同的系统，下载不同的安装文件），安装后使用node-v/npm

2、-v查看node和npm的版本，如果npm版本低于3.4建议安装最新版本的node.js运行环境。Step2:（1）在cmd中进入项目client文件夹，C:ixUsersAncIi-eloeE:Xcd.nevjE=Miewcd.clent=E=MiewXclient=(2)执行命令：npmconfigsetregistry HYPERLINK E:XnewXclientnpmconfigsetregistryhttps:/registry.npm_taoliao_opg（3）执行命令npmconfiglist观察下载源是否更换为国内镜像源（加快下载速度）E：wylien七npmconFig-

3、lis七；cliconfuser-agent=npm/3.10.9node/u6.2uin32x&4*；userconfigC：JUsepsxfanchaoK.npnii*cFegis七=h七七ps:/r-egis七py-npm.-of鼻(4)执行npminstall等待所有包安装完成(5)如果单个的包需要安装，请执行npminstallpackageName-saveStep3:npmrundev1.2项目结构介绍开发人员主要关注的目录：src、static、services下的moduleServices.js、router.config.js口clientE:neurclient口bui

4、ld匕zmfigTE3src口ass-ets口components&components.ext口mode-ls口modules口servicesBstore口ui口utilfapp.vue|ramainjsrarouter.ccnfig.j&k口static匕test.babelrr目.editorconfig目.e5-lintignoreIeb.es-lintrc.Js目.gitignoreISfaviGon.i&Q慟index.html3packsge.J&onKEADME.mdUhExternaILibraries其中，build:Config:src是开发的主要目录。static是项

5、目静态文件的放置目录、moduleServices.js主要是配置服务,router.config.js配置路由.2入门2.1Helloworld（标题模块没有子模块的情况下）一开始，页面是空的：如图C?DkKulho5t.080以编写helloworld为例，分为以下几个步骤：2.1.1创建当前模块的文件夹在src/modules目录下创建模块文件夹，之后属于该模块的组件文件都在此目录下建立，方便管理，比如我们创建测试模块modiules口d-emo口elernents口manage-ment口organization匕review2.1.2配置模块服务client/src/services

6、/moduleService.js中配置服务，在页面创建测试标题模块，配置模块服务详细请参考（参考2.3），配置服务的时候只需要严格按照格式来增加数据，配置模块在格式如下代码为：v1arstr=functions:function:id:100000010000name:测试,type:folder,description:测试，url:/test页面效果为：洌奋咸臧杵CHEMCSDUSAIWEIXUN爾貝用户*辱O在模块中添加组件在刚才我们创建的test目录下面我们新建一个vue组件文件，取名为hello.vueT口modules口dashbard4口demo4口elements口manag

7、ement口organization-Breview4口ytem2.1.4编写hello.vue组件，代码如下：Hdivcla百沪hoiIohelloword!Aexportdefault(/script.hellowidth:80%;hei吕ht:200px;text-Ligri：cent会r;padding-top:oOpz:72.1.5挂载组件将hello.vue挂载在测试模块下面（参考2.2）第一步：导入组件，如：importVuefromvueimpartueRouterfrom1vu-xouter5VWWWVYVYVYVYVYVYVYVWYVWYVWYVYYYYYYYYYYYYYY

8、VYVYVYVYVYVYVYVYVYVYVYVimportauth.fromT./uti1/authJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/iinportVueResourcefromTvue-resource，(VueRouter)|2222222222ZZZZZZZZZZZZZ2222222222222ZZZF7use7ue.use(YueResource)varhel1o=requireC_/modules/test/hello.vue*)第二步：配置路由常量importVuefromTvueAAA

9、AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAimportVu.eR.ouTerfromTvueTouter7222222ZZZZZZZZZZZZZZZ、ZF2H2H2H2H2H2H25importauth.fromT./util/authT、u卜卜卜-fAZ-z-z-z-z-z-z-MFgj1卜FAj1卜FAj1卜FAj1卜impQXtVueRescurcfromvue-resourice，WXAA/VXAA/VXAA/WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWAAVue.use(VueRouterjVus.use(VueResour

10、ce)varhello=required./jnodules/tEst/hgllovue1)到此，页面效果如图：0ITMiL蹩疋卯4GDllocalhoit&nso/Mt*=側農鬪讯默件UyCHENGDUSAIWEIXUNsA护s*helloword!2.2完整开发流程（标题模块+子模块）开始，页面依然是空的：如图C?DHKinIhmhMlBQCHENGDUSAIWEIXUN仍以编写helloworld为例，分为以下几个步骤：2.2.1创建当前模块的文件夹在src/modules目录下创建模块文件夹，之后属于该模块的组件文件都在此目录下建立，方便管理，比如我们创建测试模块口demo*口elem

11、ents口management匕organization口review亡-test2.2.2创建当前模块的主入口文件index.vue（名字随意）reviewsystemt已mtElhhome.vuehi主入口文件用于展示当前一级模块（即标题模块）下的二级模块、三级模块等等2.2.3编写主入口文件index.vue（名字随意）slider-layoutmount二/testscriptimportSliderLayoutfrom/ui/sliderlayout.vueexportdefaultname:test,components:SliderLayout/scriptstylescoped

12、此处SliderLayout为封装好的一个菜单组件，注意mount属性，后面的取值为挂载的路径。在test目录下创建todolist.vueLJZkCIWUICTtlletthindex.wuehtodolist.vueTodolist即将作为测试模块下的第一个子模块中的内容编写todolist.vueTodolist组件实现了列表渲染的功能，里面的数据都由vue-resource发起http请求获得，对于展示数据的时候实现了分页的功能代码如下：spanclass=title姓名：subdata.UserNamespanclass=title编号：subdata.Ageindexexportd

13、efaultname:todolist,data()returndata:nullmaxPage:nullpageArr:,pageSize:7url: HYPERLINK http:/localhost:8000/api/user http:/localhost:8000/api/user,computed:pageNums:function()vari=1while(i=this.maxPage)this.pageArr.push(i)i=i+1console.log(this.pageArr)returnthis.pageArr,methods:request:function(inde

14、x)this.$http.get(this.url,params:pageSize:this.pageSize,pagelndex:index).then(function(response)this.data=response.data.Usersconsole.log(response)this.maxPage=response.data.TotalPage),mounted()this.$http.get(this.url,params:pageSize:this.pageSize,pageIndex:1).then(function(response)this.data=respons

15、e.data.Usersconsole.log(response)this.maxPage=response.data.TotalPagevari=1while(istylescopedlilist-style:none;display:flex;lispanflex:1ulmargin-bottom:20px;.todolistpadding:20px;border:1pxsolid#ddd;margin:%;.titlefont-weight:bold;margin-right:5px;关于vue-resource请求后台数据的方法以及请求成功后的数据处理请参照2.10章节配置模块服务配置

16、文件为：client/src/services/moduleService.js代码如下：varstr=functions:function:id:100000020000name:测试,type:folder,description:测试，url:/test,functions:function:id:100000020100,name:demo，/将测试模块下的第一个子模块取名为demotype:folder,description:demo,url:/test/todolist/路径必须为该模块对应的组件路径配置路由vartodolist二resolve=require(./module

17、s/test/todolist,resolve)varindex=resolve=require(./modules/test/index.vue,resolve)constroutes=path:/test,component:index子模块的路由配置在children下面children:path:test,component:test每个组件都需要导入之后才能配置在路由常量里面此时只有同时配置好服务和路由之后才能得到最后的效果，如下图：0赛威讯耿件CHENGDUSAIWEIXUNdemofflss姓s姓:PersortU:Penronl5:P色rsortlE:Penroni7:Pers

18、oiilS:PenronlS:PersoD帕st需st114&67B9Dnj2Tc22232.3基本路由在client/src/router.config.js中配置路由，配置路由的目的在于清楚当前模块所在的路径。配置路由分为以下三个步骤：导入所有依赖，如下：ImportVuefromvue;importVueRouter，fromvue-router;导入组件，(此文件中用到的所有组件都需经过导入组件这一步)如下：varhome=resolve=require(./modules/home.vue,resolve)配置路由常量，如下：constroutes=path:/home,compon

19、ent:home在有子模块的情况下，配置路由为：constroutes=path:/test,component:testModule,/*加入children*/children:/*加入oneModule依然需要经过第二步导入才可以被引用*/path:one,component:oneModule,path:/,redirect:one以上三步就表示home.vue这个组件的路由归属于path为/hom的模块注意：路由常量routes中component属性后面的组件，都需要经过第二步的导入组件才能生效2.4模块在client/src/services/moduleService.js中配

20、置服务，配置服务的目的在于渲染出标题模块以及标题模块下面的子模块。配置服务只有一个步骤：添加或删除模块只需操作str中的json数据即可，最好不要改动文件中的其他内容如：varstr=functions:function:id:100000020000name:组织机构,type:folder,description:组织机构，/一级模块url:/organization,functions:function:id:100000020100,name:管理，/二级模块type:folder,description:管理,url:/organization/management,function

21、s:function:id:100000020101,name:管理1-1，/三级模块type:folder,description:管理1-1,url:/organization/management,id:100000020102name:功能2-2,type:folderdescription:功能2-2url:/organization/management,id:100000020200name:功能,type:folderdescription:功能url:/organization/function,json数据中传参的时候规则需要与上面例子中的规则完全一致，否则会导致渲染出错2

22、.5组件开发2.5.1、什么是组件？组件是自定义元素，可以扩展HTML元素，封装可重用代码。2.5.2、使用组件（1）创建一个组件一个Vue组件包含三部分内容：1、组件的html部分，2、组件的逻辑部分3、组件的样式部分2.5.3、使用组件注意事项参考vue.js官方文档2.5.4、组件间的通信（1）父子组件之间的关系可总结为propsdown,eventsup，父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息。EmitEventsPassProps（2）使用props传递数据由于组件实例的作用域是孤立的。所以不应该在子组件的模版内直接引用父组件的数据。可以通过

23、props把数据传递给子组件。JSVueBccmponent;(p匚hiLdL，t/声旦冃propsprops:rmessagepr/就像data样，prop可以用在模板内/同样也可以在vin实例中像this.measage这样使用template:rmessager然后向它传人一个普通字符串：HTML（3）动态Props用v-bind动态绑定props的值到父组件的数据中。每当父组件的数据变化时该变化也会传导给子组件:使用v-bind的缩写语法通常更简单：(4)props是单向数据绑定。只有在父组件属性变化时，才会传导给子组件。不要在子组件内部改变prop。2.5.5、自定义事件(1)子组件

24、通过自定义事件把数据传递回父组件。使用v-on绑定自定义事件。每个Vue实例都实现了事件接口(Eventsinterface)，即：使用$on(eventName)监听事件使用$emit(eventName)触发事件2.5.6、原生事件(1)在组件根元素上监听原生事件，使用.native修饰v-on：my-componentv-on:click.native=doTheThing/my-component2.5.7、非父子组件通信(1)有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的Vue实例作为中央事件总线：varbus=newVue();/触发组件A中的事件bus.$emit

25、(id-selected,1)/在组件B创建的钩子中监听事件bus.$on(id-selected,function(id)/.)2.5.8、动态组件(1)多个组件可以使用同一个挂载点，然后动态地在它们之间切换。使用保留的component元素，动态地绑定到它的is特性：varvm=newVue(jsel:#example,data:currentview:home,components:home:/*.*/,posts:/*.*/,archive:/*.*/)componentv-bind:is=currentViewhtml!-组件在vm.currentview变化时改变！-/compon

26、ent2.5.9、编写可复用组件(1)Vue组件的API来自三部分-props,events和slots：Props允许外部环境传递数据给组件Events允许组件触发外部环境的副作用Slots允许外部环境将额外的内容组合在组件中。2.5.10子组件的索引(1)尽管有props和events，但是有时仍然需要在JavaScript中直接访问子组件。为此可以使用ref为子组件指定一个索引ID。htmlvarparent=newVue(el:#parent)js/访问子组件varchild=parent.$file当ref和v-for一起使用时，&f是一个数组或对象，包含相应的子组件。2.5.11使

27、用Slots发布内容在使用组件时，常常要像这样组合它们：app-footer/app-footer组件不知道它的挂载点会有什么内容。挂载点的内容是由vapp的父组件决定的。组件很可能有它自己的模版。为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发。编译作用域messagemessage是绑定到父组件的数据。父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。如果要绑定子组件内的指令到一个组件的根节点，应当在它的模板内这么做：Vponent(child-component,/有效，因为是在正确的作用域内template:di

28、vv-show=someChildPropertyChild/div，data:function()returnsomeChildProperty:true)、单个Slot除非子组件模板包含至少一个插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的Slot时，父组件整个内容片段将插入到Slot所在的DOM位置，并替换掉slot标签本身。最初在标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容假定my-component组件有下面模板：h2Imthechildtitle/h2如果没有分发内容则显示我。父组件模

29、版：ImtheparenttitlepThisissomeoriginalcontentpThisissomemoreoriginalcontent渲染结果：Imtheparenttitleh2ImthechildtitleThisissomeoriginalcontent/pThisissomemoreoriginalcontent/div/div、具名Slotsslt元素可以用一个特殊的属性name来配置如何分发内容。多个slot可以有不同的名字。具名slot将匹配内容片段中有对应slot特性的元素。仍然可以有一个匿名Slot，它是默认slot，作为找不到匹配的内容片段的备用插槽。如果没有

30、默认的slot，这些找不到匹配的内容片段将被抛弃。使用slot二xxname”进行渲染。如：子组件：headerslotname=header/slot/header父组件：Heremightbeapagetitle渲染结果：Heremightbeapagetitle2.5.12组件命名规范当注册组件（或者props）时，可以使用kebab-case，camelCase，或TitleCase。Vue不关心这个。/在组件定义中components:/使用camelCase形式注册kebab-cased-component:/*.*/,camelCasedComponent:/*.*/,Title

31、CasedComponent:/*.*/在HTML模版中，请使用kebab-case形式：当使用字符串模式时，可以不受HTML的case-insensitive限制。这意味实际上在模版中，你可以使用camelCase、PascalCase或者kebab-case来引用你的组件和prop：如果组件未经slot元素传递内容，你甚至可以在组件名后使用/使其自闭合:vmy-component/当然，这只在字符串模版中有效。因为自闭的自定义元素是无效的HTML，浏览器原生的解析器也无法识别它2.6组件扩展之EventBusEventBus，我们称为事件总线，用于非父子组件之间的通信，我们以实现按钮点击出

32、现弹窗为例6.1在test目录下新建dialog.vue其代码如下：dialog关闭exportdefaultdata()returnshowDialog:false/先设置弹窗不可见stylescopedh1margin-bottom:30px;2.6.2修改hello.vue在hello.vue的基础上，我们做以下改动：divclass二hellohelloworld!dialogscriptimportshowBoxfrom./dialog.vueexportdefaultcomponents:showBoxstylescoped.hellowidth:80%;height:200px;

33、padding-top:50px;text-align:center;h1margin-bottom:50px;.showBoxwidth:100px;height:lOOpx;padding:10px;position:absolute;top:10px;right:1OOpx;border:1pxsolid#ddd;在hello中加入el-button全局组件，再引入上面封装的dialog组件，取名为showBox，此时，el-button和showBox就属于兄弟组件，我们要用EventBus完成这两个组件之间的通信2.6.3hello.vue中的button抛出事件主要代码如下tcnl

34、ate)51divclasg=*hellhellaworld!dLalogshow_boaclass=/，showB口蓋V/ishowr一bon3urLted()ihis.eventBus.onf1show-fInishP)data()returnI用click点击事件去执行showDialog,在showDialog方法中用this.evenrBus.emit去抛出一个名为show-dialog的事件2.6.4dialog.vue中的监听事件主要代码如下：showDialog:falsethis.showDialog=falsedivv-showshowDialogul已dialogelbu

35、ttcmsize=smallclick=/finishShow关闭returnmethods:exportdefaultdata()mounted()this.eventBus.onfshow-dialoK1,()=this.showDialog=true丫一)VvfinishShow()this.eventBus.emit(show-finish在mounted里面用this.eventBus.on来监听事件，监听的事件的名字必须与抛出时间的名字一致，然后在监听中操作数据showDialog为true即可，到此就实现了点击按钮，弹窗出现的效果。如图：点击按钮前：Ohelloworld!疵Ji

36、R鞍件CHENIGDUSAIWEIXUN点击上图中绿色按钮之后：爭込奁威讯IS件&CHENIGDUSAIWEIXUNdeiroasshelloworld!但是，在实际情况中，弹窗不可能被打开之后一直就处于打开状态，所以在弹窗组件dialog.vue中我设置了一个button,来控制弹窗的关闭。所以在dialog.vue中做了进一步的操作：Cdivv-show=showDialogclass=wshowBjs/zdialog关囲/el-birtton一tempiate)exportdefault(data0returnmounted()thiseventBuson7show-dialog1,0-

37、this.showEialog=trueJ)methods:finiEhShow()this.eventBus.emitfshow-finish1)this.showDialog当我点击dialog中的button的时候，出发finishShow方法，方法里面同样用this.eventBus.emit来抛出事件，事件名为show-finish，里面将数据showDialog重置为false另外在hello.vue中，我也添加了监听事件，主要改动如下：console,log厂监听JJchaTF-finish，)Mi)data()return依然用mounted的方式去监听，由于业务不需要，所以在

38、此次监听事件时我没有再做其他的处理。效果对比如下：点击弹窗中的按钮之前：、】,賽威讯软件yCHENGDUSAIWEIXUNdemahelloworld!S3点击弹窗中的按钮之后:慮務威讯软件:CHENGDUS/MWEIXUN八甩戶呼demoIhelloWorld!03E?|0e*wiuConsole皿氏esNsortrtE冋Prare?Rewii到此为止，eventBus的使用说明完毕2.7组件扩展之父子组件下面我将完整地展示一个父子组件的封装以及通信问题创建list.vue子组件代码如下：spanv-if二item.style=textitem.contentscriptexportdefa

39、ultprops:curdatastylescopedatext-decoration:none;ulpadding:。15px20px15px;lilist-style:none;padding:5px10px5px0;border-bottom:1pxsolid#ddd;display:flex;lispanfont-size:14px;flex:1;lispan:last-childtext-align:right;.timecolor:#666;.tooltipcolor:#666;子组件中没有数据，props:curdata则表明它需要外部传入的curdata,而外部怎么传入呢？我们

40、来看看父组件test.vue的代码importlistfrom./list.vueexportdefaultname:test,components:list,data()returncurdata:content:审查逮捕通知书,style:text,content:当前必须办理的文件,style:tooltip,content:2017.2.3,style:time注意template里面，父组件中的子组件用：curdata二curdata绑定了数据，这种方式叫动态绑定，动态绑定子组件props的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件。渲染父组件，效果如下：子组

41、件是怎么传递数据回父组件的呢？在子组件中做修改如下：F1spanv-if=*iteiLstyle=11test;ltenu匚ontentaddscript、exportdefaultcurdataaJJW-props：Ldata()returnnumDer:conttent:content：content：1审査逮播通知书当前必烦办理的文件S=tyle:T2017.2.3VBstyle：*time*methods:add：function)thisrSparent,Semit(3plus3,thia,nunber)J一一在li中添加button，并为其绑定click时触发add事件，在add方

42、法中，用this.$parent.$emit(plus,this.number)去抛出一个叫plus的事件，并把当前组件的number传过去，父组件的接收方式如下：list:curdsimportlistfromw./list,vue1esportdefaultname:tes?components：list,data()(returnnumibeT:null,curdata:(content：1审查逮捕通知书Jstyle：1text11,content：当前必须办理的文件，style：1tooltip1,(content-:12017.2.21,style：1time111,亡:Fwatmd

43、()this.-$on(Tplus,function(msg)this.curdata,push(rnsg)console,logCl)在父组件的created钩子函数中用this.$on监听子组件抛出的plus事件，将得到的数据放进父组件的数据中，父组件的数据据改变了。下面我们看一下效果父组件传值给子组件：2.8静态文件2.8.1css文件在static目录中放着整个项目所需要的静态文件，css文件分类如下1.全局样式index.css（less目录下）口statiice口2eServi匚已毎口themeHTariBtlanother-stv仁云ind&y.c&O四index巴導cssind

44、ex.csFl.gitkeep:her-s1yle.cssstyle提供了很多可选样式，如按钮的几个不同状态：默认状态、成功状态、警告状，态等等。如全局字体,有tiny、small、normal、big等不同的等级，很多复用性比较高的样式都可以在里面添加2.组件样式index.css(theme目录下)T口static&iceLjiceServicesle&cssanoth-er-style.css:l：snoth-er-style0index.cESCLhindexet&fsindex.c&sk此文件中包含了element中的通用组件的样式，可根据需要在里面做修改another-style.

45、css（less目录下）I4-TLilLH-i!II叮士VWYVYYYYYYYYYYV-VrTT口static口ice口iceServicesTtlthem&T口Ie5.sanother-style.cssl|another-styleJess!L!index.less心simdex.cs&0.gitkeep此文件中的样式是做换肤功能。2.9与后端数据交互Http(NoRPC)使用http服务在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时，：的，回调函数，第二个参数是响应失败时的回调函数this$httpget(/someUrl,options)t

46、hen(successCallback,errorCallback);this$http.post(/someUrl,body,options)then(successCallback,errorCallback);.1支持的HTTP方法请求API是按照REST风格设计的，它提供了7种请求APIget(url,options)head(url,options)delete(url,options)jsonp(url,options)post(url,body,options)put(url,body,options)7.patch(url,body,options)客户端请求方法服务端处理方法

47、this.$http.geGetxxxthis.$http.post(.)Postxxxthis.$http.put(.)Putxxxthis.$http.delete(.)Deletexxx除了jsonp以外，另外6种的API名称是标准的HTTP方法。当服务端使用RESTAPI时，客户端的编码风格和服务端的编码风格近乎一致，这可以减少前端和后端开发人员的沟通成本。options对象发送请求时的options选项对象包含以下属性：参数类型描述urlstring请求的URLmethodstring请求的HTTP方法，例如：GET,POST或其他HTTP方法bodyObject,FormDatas

48、tringrequestbodyparamsObject请求的URL参数对象headersObjectrequestheadertimeoutnumber单位为毫秒的请求超时时间（0表示无超时时间）beforefunction(request)请求发送前的处理函数，类似于jQuery的beforeSend函数progressfunction(event)ProgressEvent回调处理函数参数类型描述credientialsboolean表示跨域请求时是否需要使用凭证emulateHTTPboolean发送PUT,PATCH,DELETE请求时以HTTPPOST的方式发送，并设置请求头的X-

49、HTTP-Method-OverrideemulateJSONboolean将requestbody以application/x-www-form-urlencodedcontenttype发送emulateHTTP的作用如果Web服务器无法处理PUT,PATCH和DELETE这种REST风格的请求，你可以启用enulateHTTP选项。启用该选项后，请求会以普通的POST方法发出，并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。Vue. HYPERLINK http:/http.options.emulateHTTP http.options.

50、emulateHTTP=true;emulateJSON的作用如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。启用该选项后，请求会以application/x-www-form-urlencoded作为MIMEtype，就像普通的HTML表单一样。Vue. HYPERLINK http:/http.options.emulateJSON http.options.emulateJSON=true;response对象属性方法类型描述text()string以string形式返回responsebodyjson()Object以JSON

51、对象形式返回responsebodyblob()Blob以二进制形式返回responsebodyokboolean响应的HTTP状态码在200299之间时，该属性为truestatusnumber响应的HTTP状态码statusTextstring响应的状态文本headersObject响应头使用resource服务resource服务包含以下几种默认的action：get:method:GET,save:method:POST,query:method:GET,update:method:PUT,remove:method:DELETE,delete:method:DELETEthis.$r

52、esource可以结合URITemplate起使用，以下示例的apiUrl都设置为/id了:apiUrl:9:8080/api/customers/id使用示例：createCustomer:function()varresource=this$resource(this.apiUrl)vm=thisresource.save(vm.apiUrl,vm.item).then(response)=vm.$set(item,)vm.getCustomers()this.show=falsehttp拦截器拦截器可以在请求发送前和发送请求后做一些处理。基本用法Verceptors.push(request,next)=/./请求发送前的处理逻辑/.next(response)=/./请求发送后的处理逻辑/./根据请求的状态，response参数会返回给successCallback或errorCallbackreturnresponse)ICE(RPC)Stepl引入外