AZUKI七--十一月问题总结

AngularJS

①angular中的事件广播  PS:地址

在angular中存在作用域的继承，继承作用域符合 JavaScript 的原型继承机制，在 AngularJS 中，作用域原型链的顶端是$rootScope，AnguarJS 将会寻找到$rootScope 为止，如果还是找不到，则会返回 undefined。

$on(name,handler) 注册一个事件处理函数，该函数在特定的事件被当前作用域收到（从父级或者子级作用域）时将被调用。

②控制器之间通信

$emit(name,args) 向当前父作用域发送一个事件，直至根作用域。           子传父

$broadcast(name,args) 向当前作用域下的子作用域发送一个事件。         父传子

name表示事件名称，args表示事件传播的数据，handler表示在接受到传递时要执行的回调，该回调中有event参数，表示事件，有如下方法：

            event.targetScope  //获取传播事件的作用域
            event.currentScope //获取接收事件的作用域
            event.name //传播的事件的名称
            event.stopPropagation() //阻止事件进行冒泡传播,仅在$emit事件中有效
            event.preventDefault() //阻止传播事件的发生  
            event.defaultPrevented //如果调用了preventDefault事件则返回true

注意：参数name相同时，父子控制器之间才可以传值

这种方式不可实现兄弟级传值，不过可以使用父级控制器作为中介，先由子控制器传值给父控制器，然后再由父控制器传递给另外的子控制器。

在angular中服务是一个单例，所以在服务中生成一个对象，该对象就可以利用依赖注入的方式在所有的控制器中共享。例：

 var app=angular.module("app",[]);
    app.controller('myCtrl', ['$scope','appService',function ($scope,appService) {
        appService.name="hi!!"
    }]);
    app.controller('myCtrl1', ['$scope', 'appService',function ($scope,appService) {
        $scope.name=appService.name;
    }]);
    app.service("appService", [function(){
        this.name="hello";
    }]);

通过在appService这个服务中添加对象，然后在需要用到的控制器中，通过依赖注入的方式导入该服务，在myCtrl控制器中修改这个对象，在myCtrl1中也会得到修改过后的值。

这个方法我尝试并没有效果，可能我的打开方式不正确。。。。

③angular中循环的小问题

ng-repeat  相当于 vue v-for

$index 可以充当下标  v-for="(item,index) in items" ,一个从零开始的计数器。

④依赖注入

⑤路由

（1）在使用angular-ui-router的时候，必须先引入angular-ui-router.js模块

（2）在自己的项目中注入“ui-router”

（3）ui-view 模板的容器 

⑥formdata文件上传

无论我怎么改，上传的都是{}，都是空的，一开始我以为是formdata的使用问题，可就这点东西排查几圈我肯定这里没问题。

然后去排查接口，接口也是正常的额，我尼玛。。。难道是angular使用的时候有特殊方式，百度了下得到

关于日历的使用

这个问题出现在 AngularJS + gulp 的项目中，因为用的东西很老版本很低，angular中带的那个date插件无法满足更多需求，我这里是需要一个diy自定义日月的日期选项，所以在使用日期插件的时候我选择了兼容性更好的，不需要安装依赖的 My97DatePicker 。

代码写好了，没问题，gulp build 打包们问题，上线，炸了，报css文件丢失，界面排版混乱。各种方法都无效，最后我灵机一动，使用了 input 原生的 type='month'  ，完全满足年月的选项需求。在赋值回显还出了一点点小问题，一开始我是转换为时间戳，因为直接赋值日期失败了，但是时间戳也失败了，后来我发现是我最开始赋值的日期格式和 input 获得的不统一，太马虎了。

关于文件导出

①LAY-EXCEL 的 Excel.js  文档链接：click

个人支持这种，非常好上手，操作简单，支持直接引入js，但是还是要依赖JQ，最新版本不支持IE9，最大的优势在我看来是可以修改样式。

号称一句话导出真不是盖的：

如果只是导出直接，直接调取 LAY_EXCEL.exportExcel（数据，名字，格式）,如果有样式需求只需要调取 LAY_EXCEL.setExportCellStyle   

②XLSX

提到XLSX我想骂娘，不建议新手使用，而且无法修改样式，XLSX-style据说可以修改style，但是我在使用的时候发现，XLSX的方法好多都没有，如果是DIY一个固定的复杂表格还好，但是涉及字段需要状态判断等不固定数据，我研究了下还做不了，不知道网上那些都怎么做的，，获取每个单元格的函数XLSX中没有，而且XLSX和XLSX-style，export的方法都叫做XLSX，在一起还会冲突，XLSX本身具有修改style的功能，但是需要付费的更高版本，免费版的里面 单元格.s 样式设置是无效的，没有对应方法。可能是我打开方式不对，不知道那些人都是怎么搞得。

这是百度来的，根据我自己的需求改了改，使用的时候调用 json2Excel() 方法就行，这三个函数其实固定的，直接拿过去就可以。

 VUE 

①报错 "TypeError: Cannot read property 'matched' of undefined"

 原因：我之前写的是 Router ，事实上这里是固定的，new Vue实例的时候，必须按照规范要求书写。太久没写了，都忘记了这些格式要求没什么好说的。

 注意：

1.使用 router-view 标签，必须要配置路由。

2.配置路由不要留下空的括号，会引起报错。

②关于swiper的使用

记得上次用swiper写轮播，大概用了两分钟，本着省事的态度，再次找到，结果裂了。出现各种问题，分页器不显示，不自动轮播，网上找了不少方法，配置项改了N遍，没用。

最终解决方案，swiper6 换 4.4.1，这回没问题了。真的是太懒了，光是想想轮播都懒得去想= =

③"export 'default' (imported as 'getWorkerList') was not found in '@/api/researchWorker'

 import 导入项必须带大括号

④handlers[i].call is not a function

原因：使用相关的生命周期钩子函数引起的错误

使用 Vue-element-admin 遇见的问题：

①类似这种报的格式和代码规范类的错误？

1、找到build下面的webpack.base.conf.js， 注释后重启项目。

2、或者打开config文件下的index.js,里useEslint改为false，重启项目。

 方法是百度来的，亲测有效。