文档章节

AngularJs 第一个自定义指令编写

Yemon
 Yemon
发布于 2016/05/17 10:31
字数 2893
阅读 8
收藏 1
点赞 2
评论 0

 公司在做一个OA系统, 包括移动端(从微信企业号进入OA系统),电脑端。 

    电脑端还是用的传统的easyui做界面,asp.net mvc作为服务端。这个技术已经很成熟了配合权限框架很快就能开发出来。但是手机端之前团队也没有什么经验,我之前做过一个jqureymobile的项目,但是这个框架实在是太卡了,直接pass掉。恰好之前有自学一点点angularjs 所以我就推荐手机端的项目使用angularjs来开发,一来团队可以学习一些新技术跟上潮流,二来单页程序很适合我们目前的这个小项目,三是我们以后打算用phonegap直接打包webapp。好吧优点这么多那就开工吧(我们用的是1.5版本,2.0国内还比较少)。

    由于团队之前没有接触过这个框架,所以大概花了3天时间来学习(正常开发任务还是有,相对减少),可想而知以angularjs学习曲线我们的成果不会好到哪里去,项目不等人,

angularjs确实很不错给前端带来很多新的概念:mvc 模块化 单页 依赖注入 指令 等。首先我们遇到的问题是怎么团队开发,不可能大家都读写一个js文件吧,于是采用第三方的oclazyload.js来动态加载js和模板,路由采用angular-ui-router,其次我们需要一款手机端的ui来配合angularjs,我们选用了淘宝的sui。一切准备好了,那就开始吧!

    进入正题,我的第一个angularjs的指令设计,需求如下:

     1.OA填完单之后,需要选择审核人。(这个比较次了,正规的OA是不需要自己选择审核人的,但是我们是简单版的,况且大名鼎鼎的阿里巴巴 钉钉OA也是这么设计的)。

     2.做成通用组件。

    需求就这些了,那么直接上结果看看:

    1.主页面

     

  2.审批页面

3.用车申请

4.选人指令

 

 

  以上顺便介绍了一下我的OA系统,那么下边再看看最终做出来的选审核人的指令:

1.

   

2.

  

3.

5.

好吧这个功能基本是钉钉的翻版。那么我如何来设计这个指令的呢,首先,弹出框这些ui都是来自于sui的ui插件,我做的事情就是用angularjs的指令来封装ui和一些逻辑,最终达到的通用的目标。上代码:

/*
*用于选择部门及用户
*刘功葵 2016-4-9
*
*/
var departUser = angular.module("ktfOA");
     //第一个指令,弹出部门和人员选择框
departUser.directive("departpopup", function ($http) {
    return {
        restrict: 'AECM',//<!-- departpopup -->
        //replace: true,
        transclude: true,
        scope: {
            pop: '@',//部门弹出框的id,为了让同一个页面多吃使用指令时,不出现重复ID
            peng: '@',//人员弹出框id
            selects: '=', //通过=绑定最终的选择结果,并传递到外层的controller
            users: '=',
            dowork: "&" //在选择用户时执行的方法   
        },

        templateUrl: '/Areas/Phone/Directive/DepartUser/DepartUser.html',
        controller: function ($scope) {
            this.open = function () {
                $.popup('#' + $scope.pop);
            }

        },
        link: function (scope) {
            scope.pop = scope.pop || "pop";
            scope.peng = scope.peng || "peng";
            scope.$emit('ngPageFinished'); //$emit 给父scope返回一个值 父scope可以监控这个值 然后执行一些代码 相当于事件传播
            $http.post("/Phone/BusinessTravel/GetApiDepartList").success(function (msg) {
                scope.departList = msg;
            })
            /*选择部门事件*/
            scope.selectDepart = function (departId) {
                $.popup('#' + scope.peng);
                scope.formJson = { 'departId': departId }
                $http.post("/Phone/BusinessTravel/GetAipAdminUserList", scope.formJson).success(function (msg) {
                    scope.adminUserList = msg;
                })
            }
            scope.selects = [];
            /*选择用户事件*/
            scope.selectUser = function () {
              
                scope.noPic = true;
                if (this.itemUsr.AbsoluteImgSrc == "" || this.itemUsr.AbsoluteImgSrc == undefined) {

                    this.itemUsr.AbsoluteImgSrc = "/Images/UserHeadPic/default.jpg";
                }
                for (var i = 0; i < scope.selects.length; i++) {
                    if (scope.selects[i].UserNo == this.itemUsr.UserNo) {
                        $.alert('用户已选过,不能重复!');
                        return;
                    }
                }
                scope.selects.push(this.itemUsr);
                scope.users += this.itemUsr.UserNo + ",";
                $.closeModal('#' + scope.peng);
                $.closeModal('#' + scope.pop);

                if (scope.dowork != undefined) {
                    scope.dowork();
                }

            }
        }

    };


})



//第二个指令,依赖于第一个指令,用于显示最终的选择结果。
departUser.directive("userselect", function ($http) {
    return {
        restrict: 'AECM',//<!-- departpopup -->
        replace: true,
        require: '^?departpopup', //此处是指依赖上面一个指令
        scope: {
            selects: "=",
            users: "="
        },
        template: ' <div> <div ng-click="delUser()" style="float:left;position:relative" ng-repeat="user in selects"><img style="border-radius:50%; height:56px;width:56px; overflow:hidden;" src="{{user.AbsoluteImgSrc}}" /><span style="position:absolute;left:7px;top:19px;font-size:small;color:white;text-align:center;width:40px;height:20px;" >{{user.UserName}}</span><span style="float:right;margin-top:8px;">...</span></div> <div style="float:left;margin-top:8px;"><a ng-click="Open()" class="open-about"><i class="fa fa-plus-circle fa-2x" style="color:#bab7b7"></i></a></div></div>',
        link: function (scope, element, attrs, departpopupController) {
            //$(".datetime-pickerStart").datetimePicker({});
            //$(".datetime-pickerEnd").datetimePicker({}); 
            scope.Open = function () {
                departpopupController.open();

            }

            //删除选择的用户
            scope.delUser = function () {

                var userNo = this.user.UserNo;

                for (var i = 0; i < scope.selects.length; i++) {
                    if (scope.selects[i].UserNo == userNo) {
                        scope.selects.splice(i, 1);
                        break;
                    }
                }
                scope.users = "";
                for (var i = 0; i < scope.selects.length; i++) {
                    scope.users += scope.selects[i].UserNo + ",";
                }

            }
        }

    };


})

2.模版页面

<div> 
    <div class="popup" id="{{pop}}">
        <header  class="bar bar-nav">
            <a class="icon icon-left pull-left close-popup"></a>
        </header>
        <div class="bar bar-header-secondary" style="position:relative">
            <div class="searchbar">
                <a ng-click="abc()" class="searchbar-cancel">取消</a>
                <div class="search-input">
                    <label class="icon icon-search" for="search"></label>
                    <input type="search"  id='search' placeholder='输入关键字...' />
                </div>
            </div>
        </div>
        <div class="list-block contacts-block">
            <div class="list-group">
                <ul>
                    <li ng-repeat="item in departList track by $index" class="open-services" ng-click="selectDepart(item.DepartID)" departid="{{item.DepartID}}">
                        <div class="item-content item-link">
                            <div class="item-inner">
                                <div class="item-title">
                                    <span style="color:#c6c4c4">{{item.TreeText}}</span>  {{item.DepartName}}
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
        <div class="popup" id="{{peng}}">
            <header class="bar bar-nav">
                <a class="icon icon-left pull-left close-popup"></a>
            </header>
            <div class="bar bar-header-secondary" style="position:relative">
                <div class="searchbar">
                    <a class="searchbar-cancel">取消</a>
                    <div class="search-input">
                        <label class="icon icon-search" for="search"></label>
                        <input type="search" id='search' placeholder='输入关键字...' />
                    </div>
                </div>
            </div>
            <div class="list-block contacts-block">
                <div class="list-group">
                    <ul ng-repeat="itemUsr in adminUserList track by $index">
                        <li ng-click="selectUser()" userno="{{itemUsr.UserNo}}" username="{{itemUsr.UserName}}">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">
                                        <span style="color:#c6c4c4">{{itemUsr.UserNo}}</span>  {{itemUsr.UserName}}
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    <div ng-transclude></div>
    </div>

 

DepartUser.html
3.在车辆申请页面的使用

<!--
/************************************************************************/
/*
 * 创建人:向高
 * 创建日期:2016-04-01
 * 文件描述:车辆申请表单页面
 */
/************************************************************************/
-->
<div ng-controller="CarApply">

    <header class="bar bar-nav">
        <a class="button button-link button-nav pull-left" ui-sref="Index">
            <span class="icon icon-left"></span>
            返回
        </a>
        <h1 class='title'>用车申请</h1>
    </header>
    <departpopup selects="selects" users="users" pop="pop" peng="peng1">

        <div class="content" style="top:0.9rem">

            <div class="list-block">
                <ng-form name="CarForm" novalidate>
                    <!--ng-submit="save(CarForm.$valid)"-->
                    <ul>
                        <!-- Text inputs -->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-name"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label inputSize">用车事由</div>
                                    <div class="item-input">
                                        <textarea required name="AskReason" ng-model='Apply.AskReason' style="font-size:14px;" placeholder="请输入(必填)"></textarea>
                                        <!--<input type="text">-->
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-email"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label inputSize">始发地点</div>
                                    <div class="item-input">
                                        <input type="text" required  name="LevelPlace" ng-model="Apply.LevelPlace" style="font-size:14px;" placeholder="请输入(必填)">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-gender"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label inputSize">返回地点</div>
                                    <div class="item-input">
                                        <input type="text" required name="EndPlace" ng-model="Apply.EndPlace" style="font-size:14px;" placeholder="请输入(必填)">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-gender"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label inputSize">用车时间</div>
                                    <div class="item-input">
                                        <input type="text" name="LeaveTimeFrom" required ng-model="Apply.LeaveTimeFrom" id="datetime-pickerStart" style="font-size:14px;" placeholder="请输入(必填)">
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-gender"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label inputSize">返程时间</div>
                                    <div class="item-input">
                                        <input type="text" name="LeaveTimeTo" required ng-model="Apply.LeaveTimeTo" id="datetime-pickerEnd" style="font-size:14px;" placeholder="请输入(必填)">
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li ng-repeat="cars in cars" on-finish-render-filters>
                            <div class="item-content" style="top:0.7rem;padding-left:20px;background:#f3f2f2;line-height:55px;font-size:14px;height:40px">
                                <div style="width:85px;float:left"> <span>车辆明细({{$index+1}})</span></div>
                                <div style="width:70px;float:right;padding-right:15px;" ng-if="$index+1>1"><span><a href="javascript:void(0)" ng-click="deleteCar()">删除</a></span></div>
                            </div>
                            <!--<div class="content-block-title xingcheng" style="margin-left:30px;font-size:small">车辆明细({{$index+1}})</div>-->
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-gender"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label inputSize">车辆选择</div>
                                    <div class="item-input">
                                        <input type="text" class='picker' required name="BusInfo" ng-model="cars.BusInfo" style="font-size:14px;" placeholder="请选择(必选)">
                                    </div>
                                </div>
                            </div>

                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-gender"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label inputSize">数量</div>
                                    <div class="item-input">
                                        <input type="text" ng-change="getCarNum()" required name="AskNum" ng-model="cars.AskNum" required style="font-size:14px;" placeholder="请输入(必填)">
                                    </div>
                                </div>
                            </div>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-gender"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label inputSize">其他要求</div>
                                    <div class="item-input">
                                        <input type="text" name="Remark" ng-model="cars.Remark" style="font-size:14px;" placeholder="请输入">
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li><div class="content-block-title xingcheng" style="margin-left:30px;font-size:small">如需多种车型,请点击“添加车辆”</div></li>
                        <li style="text-align:center;"><a style="cursor:pointer" ng-click="AddMore()"><i class="fa fa-plus" style="color:blue"></i>添加车辆</a></li>
                        <li><div class="item-title label inputSize" style="margin-left:30px;">总数量(辆):{{carnum}}</div></li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-gender"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label inputSize">备注</div>
                                    <div class="item-input">
                                        <textarea  name="Remark" ng-model='Apply.Remark' style="font-size:14px;" placeholder="请输入"></textarea>

                                    </div>
                                </div>
                            </div>
                        </li>

                        <li style="padding-left:30px; height:110px;">
                            <div><span>审批人</span><span style="font-size:small;color:#999999">(点击头像可删除)</span></div>
                            <userselect selects="selects" users="users"></userselect>
                        </li>
                    </ul>
                </ng-form>
            </div>
            <div class="content-block">
                <div class="row">
                    <div class="col-50"><a href="#" class="button button-big button-fill button-danger">取消</a></div>
                    <div class="col-50"><a ng-class="{true:'button button-big button-fill button-success',false:'button button-big button-fill button-success disabled'}[CarForm.$valid]" ng-click="save(CarForm.$valid)" >提交</a></div>
                    <!--<a ng-class="{true:'button button-big button-fill button-success',false:'button button-big button-fill button-success disabled'}[CarForm.$valid]"  ng-click="save(CarForm.$valid)" class="button button-big button-fill button-success">提交</a>-->
                </div>
            </div>
        </div>
    </departpopup>
</div>

CarApply.html

4.车辆申请页面的Controller

//var CarApplyModule = angular.module("CarApplyModule", ['ngAnimate']);

/************************************************************************/
/*
 * 创建人:向高
 * 创建日期:2016-04-01
 * 文件描述:车辆申请控制器
 */
/************************************************************************/

 
var CarApplyModule = angular.module("ktfOA");
CarApplyModule.controller("CarApply", function ($scope, $http, CalcService, $state, $stateParams) {
    
    var selectCars = []; //保存根据用车时间 获取可选车辆
    $scope.cars = [{ BusInfo: "", AskNum: 1, Remark: "" }]; //用于初始化repeater
    $scope.carnum = parseInt($scope.cars[0].AskNum);
    $scope.users = "";//审核人
    $scope.selects = []; //选人控件 传回来的选择用户集合
    //$scope.selectCars = []; //保存根据用车时间 获取可选车辆
    $scope.Apply = {
        AskReason: "", LevelPlace: "", EndPlace: "",
        LeaveTimeFrom: "", LeaveTimeTo: "", Remark: "",
        Detail: $scope.cars, users: ""

    };


    $scope.getCarNum = function () {
        var num = 0;
        for (var i = 0; i < $scope.cars.length; i++) {

            if ($scope.cars[i].AskNum != undefined) {
                num += parseInt($scope.cars[i].AskNum);
            }
        }
        $scope.carnum = num;
    }


    //提交表单数据
    $scope.save = function () {
        if ($scope.selects.length <= 0)
        {
            $.alert("请选择审核人!");
            return;
        }
        //获取审核人
        var users = "";
        for (var i = 0; i < $scope.selects.length; i++) {
            users += $scope.selects[i].UserNo + ",";
        }
       
        $scope.Apply.users = users;
        $http({ method: 'POST', url: '/phone/CarApply/SaveCarApply', data: JSON.stringify($scope.Apply) }).
         success(function (response) {
             if (response.status == 2) {

                 $.alert(response.msg);
             }
             else if (response.status == 1) {
                 $.alert(response.msg, function () { $state.go("AuditHome"); }); 
             }
         });
    }

    //添加车辆
    $scope.AddMore = function () {
        $scope.cars.push({ BusInfo: "", AskNum: "", Remark: "" });
    }

    //删除车
    $scope.deleteCar = function () {
        var index = this.$index;
        $scope.cars.splice(index,1);
    }

    //选取用车时间时 获取车辆信息
    $scope.GetCars = function () {

        if ($scope.Apply.LeaveTimeFrom != "") {
            $http({ method: 'POST', url: '/phone/CarApply/GetCars', data: { Stime: $scope.Apply.LeaveTimeFrom } }).success(function (data) {

                //var selects = [];
                if (selectCars.length > 0) {
                    selectCars.splice(0, selectCars.length);
                }
                for (var i = 0; i < data.length; i++) {
                    selectCars.push(data[i].BusName + data[i].BusType + "(" + data[i].BusSiteCount + "座)" + "  可用数量" + data[i].CarNum);
                }

                $(".picker").picker("setValue", selectCars);

            })
        }
    }

    $scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {

        //初始化sui的选择器控件
        $(".picker").picker({
            toolbarTemplate: '<header class="bar bar-nav">\<button class="button button-link pull-left">按钮</button>\<button class="button button-link pull-right close-picker">确定</button>\<h1 class="title">车辆信息</h1>\</header>',
            cols: [
              {
                  textAlign: 'center',
                  values: selectCars
                  //values: ['奥迪A6L(5座)', '丰田商务车(7座)', '丰田卡罗拉(5座)', '大众帕萨特(5座)', '宇通大巴(47座)', '宇通中巴(24座)', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
              }
            ]

        });

    });

    $scope.$on('ngPageFinished', function (ngPageFinishedEvent) {
        $("#datetime-pickerStart").datetimePicker({
            onClose: function () {
                $scope.GetCars();
            }
        });
        $("#datetime-pickerEnd").datetimePicker({});
    })


    $scope.getNum = function () {
        var num = 0;
        for (var i = 0; i < $scope.cars.length; i++) {
            num += $scope.cars[i].AskNum;
        }
        return num;
    }


})


CarApplyModule.directive('onFinishRenderFilters', function ($timeout) {
    return {
        restrict: 'A', //匹配模式:A(属性方式)E(元素)M(注释  <!-- directive:xx -->)C(class方式 class = xx),angular 默认使用A
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    };
});

CarApplyController


简单的使用方式:

    <departpopup selects="selects" users="users" pop="pop" peng="peng1">

    <userselect selects="selects" users="users"></userselect>

    </departpopup>

  注意两个指令是嵌套的关系。selects和users等就是外部controller和指令之间的绑定,用于传递数据。

 以上就是我的第一个angularjs指令。下边谈谈遇到的坑:

  首先我只用一个指令来搞定,但是不行,因为sui必须将弹出框放在body元素里边,不能放在li元素,否则就弹不出来。我想到这是样式的问题,于是手动来更改sui弹出框的定位样式,但是这不是一个好办法,电脑上还可以,但是手机上会出现兼容问题。最后我想到可以用两个指令来写这个插件,外层的<departpopup>负责弹出框(放在body标签里边),内部的<userselect>用于显示最终的结果。这会有涉及两个指令之间的数据传递,和相互调用。

   大概就这些,我也是刚开始学习,路过的请不惜赐教。感谢!


© 著作权归作者所有

共有 人打赏支持
Yemon
粉丝 10
博文 320
码字总数 22799
作品 0
广州
架构师
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878 ⋅ 05/19 ⋅ 0

JavaScript MVW 框架 - AngularJS

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,...

匿名 ⋅ 2011/01/20 ⋅ 44

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

Angular 的数据绑定采用什么机制,详述原理? 脏检查机制。阐释脏检查机制,必须先了解如下问题。 单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别? ng-bind 单向数据绑定($scope ->...

634117608 ⋅ 04/19 ⋅ 0

Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh ⋅ 05/05 ⋅ 0

Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区 ⋅ 05/08 ⋅ 0

[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World

今天我们将开始正式迈入Angular Material的世界,要学习使用Angular Material打造高品质及高质感的网页,当然要从安装Angular Material套件开始,本篇文章就来介绍基本的Angular Material安装...

readilen ⋅ 05/21 ⋅ 0

Angular 的 Material Design 风格框架 - Angular Material

Material Design for Angular 是 Angular 官方团队开发的基于最新版本 Angular 的 Material Design 风格的框架,可和 Nest.js 搭配使用做全栈开发。 针对 Angular 1 版本的实现 https://www....

匿名 ⋅ 05/15 ⋅ 0

源码分析 @angular/cdk 之 Portal

Portal 是什么 最近在学习 React 时,发现 React 提供了 Portals 技术,该技术主要用来把子节点动态的显示到父节点外的 DOM 节点上,该技术的一个经典用例应该就是 Dialog 了。设想一下在设计...

lx1036 ⋅ 05/29 ⋅ 0

[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen ⋅ 05/21 ⋅ 0

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊?

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊? angular2和现在官网的angular6 就是 angular js 只是版本不同...

Jordan裔 ⋅ 05/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Centos7重置Mysql 8.0.1 root 密码

问题产生背景: 安装完 最新版的 mysql8.0.1后忘记了密码,向重置root密码;找了网上好多资料都不尽相同,根据自己的问题总结如下: 第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1...

豆花饭烧土豆 ⋅ 今天 ⋅ 0

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 今天 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 2

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部