麦壳前端技术分享

作者: 麦壳儿UIandFE2 | 来源:发表于2017-11-28 17:08 被阅读19次

麦壳前端技术分享

标签（空格分隔）：技术分享 ng+bs+插件

简介

技术栈：nodeJS4+ + AngularJs1.4 + +Bootstrap3.3
其中：nodeJs4+(npm包（gulp+第三方）)

npm? 一台服务器，别人编写的第三方。
cnpm? 财大气粗的阿里巴巴，copy的一份npm。
为什么要有它？
1：前端开发，应用更广。
2：前端应用更大，富应用时代。所以搭建的基础不可能都从底层走。
3：没人管。没靠山。所以杂、乱。所以学习前端-给新人的感觉更新换代频繁。

跑起来

1：安装包。
2：启动命令

项目目录

    ---app
    ---components  //存放上边栏和左边栏组件
    ---images  //存放图片
    ---scripts  //存放controllers、directives、filters、services
        ---app.js
        ---config.js 接口存放，全局常量的存放，例如：正则，页码，全局工具类等定义。
        ---.....
    ---styles  //样式（sass生产的）
    ---views  //视图
    ---dist  //生成目录
    ---assets //第三方SDK or 其他特殊引用
    ---bower_components  //通过bower安装的包依赖
    ---node_modules  //node安装的包
    ---.gitignore  //git管理时候默认忽略的文件or文件夹
    ---bower.json  //bower管理文件
    ---favicon.ico  //网站的ico
    ---index.html  //入口页面
    ---package.json  //node管理文件
    ---.gulpfile.js  //gulp配置文件

    说明：
    本项目目录结构：
    fileManage-档案管理
    diagnoseManage-诊断管理
    preManage-处方管理
    ...

外壳：

html:

<article ng-controller="控制器name" class="lookAllbodyTesResults container-fluid">
哪些是必要的，哪些可以去除。
</article>

js:

App.controller('sportPreManController', ['$scope', '$rootScope', '$http', 'restful', '$uibModal', 'ngProgressFactory', 'toastr', 'rootCheck', function ($scope, $rootScope, $http, restful, $uibModal, ngProgressFactory, toastr, rootCheck) {
注入：要注意的。
$scope:

}]);

内容：

基本2类：
1:用户输入的：表单-form.
例如：搜索、新增、编辑。
示例代码：bs里的。这里有html5中增强的表单功能。省去自己写校验。

<form>
    <div class="form-group col-md-12">
        <label class="col-md-2 control-label text-right">名称：</label>
        <div class="col-md-10">
            <input type="text" class="form-control" name="text" placeholder="text">
        </div>
    </div>
    <div class="form-group col-md-12">
        <label class="col-md-2 control-label text-right">密码：</label>
        <div class="col-md-10">
            <input type="password" class="form-control" name="password" placeholder="password">
        </div>
    </div>
    <div class="form-group col-md-12">
        <label class="col-md-2 control-label text-right">日期：</label>
        <div class="col-md-10">
            <input type="datetime-local" class="form-control" name="datetime" placeholder="datetime-local">
        </div>
    </div>
    <div class="form-group col-md-12">
        <label class="col-md-2 control-label text-right">数字：</label>
        <div class="col-md-10">
            <input type="number" class="form-control" name="number" placeholder="number">
        </div>
    </div>
    <div class="form-group col-md-12">
        <label class="col-md-2 control-label text-right">颜色：</label>
        <div class="col-md-10">
            <input type="color" class="form-control" name="color" placeholder="color">
        </div>
    </div>
    <div class="form-group col-md-12">
        <label class="col-md-2 control-label text-right">文本域：</label>
        <div class="col-md-10">
            <textarea class="form-control" rows="3"></textarea>
        </div>
    </div>
    <div class="col-md-offset-3 col-md-2">
        <button type="submit" class="btn btn-success">提交</button>
    </div>
  </form>

2:展示给用户的:目前系统中：只有列表-table.
例如：列表。
示例代码：bs里的，鼠标悬停，表格变灰色。

<table class="table table-hover">
    <thead>
        <tr>
            <th>#</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Mark</td>
        </tr>
     
    </tbody>
</table>

会分离才会合成

学会找到标签+样式+js
容器层
装饰层
数据+逻辑层。
例如：

<input type="text" class="form-control" ng-model="data.name" name="name" maxlength="20">

设计思想

1：数据驱动思想，而不是dom驱动，所有的元素变化，转换成数据变化。
2：双向绑定思想，用户和后台的数据自动同步。省去set页面数据。
3：

常用组件

toastr

对话框，适合弱提示
常见主题：
success
error
应用：截取一段网络请求

    .then(function (res) {
            if (res.data.code == 2000) {
                toastr.success("新增成功")
                $uibModalInstance.close();
            } else {
                console.info("新增失败");
            }
        }, function (rej) {
            toastr.error(rej);
    });

[图片上传中...(image.png-fe5ef-1519116539067-0)]

$uibModal

模态窗
注意：
写法：id与模板url一致。
跨控制器传值
关闭和消失的回调。
应用：

//父级控制器-新增弹窗
    $scope.add = function (data) {
        var item;
        var modalInstance = $uibModal.open({
            templateUrl: 'SportPreViewAdd.html',
            controller: 'SportPreViewAddController',
            size: 'md',
            resolve: {
                item: function () {
                    return data;
                }
            },
        });
        modalInstance.result.then(function () {
            //close
            $scope.query();
        }, function () {
            //dismissed
            $scope.query();
        })
    };
    
<!--新增弹窗的html-->
<script type="text/ng-template" id="SportPreViewAdd.html">
    <div class="modal-header">
        <h4>头</h4>
    </div>
    <div class="modal-body">
        <h4>体</h4>
    </div
</script>

/*新增弹窗的控制器*/
App.controller("SportPreViewAddController", ['$scope', '$http', '$uibModalInstance', '$state', '$rootScope', '$uibModal', 'item', 'toastr', function ($scope, $http, $uibModalInstance, $state, $rootScope, $uibModal, item, toastr) {
    //变量声明
    $scope.data = {};
    //下拉多选
    $scope.unitIdAll = [];
    $scope.unitNameAll = [];

    //关闭弹窗
    $scope.close = function () {
        $uibModalInstance.close();
    };

    //save-add
    $scope.save = function () {
        $scope.savePromise = $http({//网络请求遮罩
            url: $rootScope.api.addPre,
            method: 'post',
            headers: {
                'Content-Type': 'application/json'
            },
            data: {
                "name": $scope.data.name,
                "introduction": $scope.data.introduction,
                "periodFrequency": $scope.data.periodFrequency,
                "periodDays": $scope.data.periodDays,
                "symptomIds": $scope.unitIdAll.join(','),
                "symptomNames": $scope.unitNameAll.join(',')
            }
        }).then(function (res) {
            if (res.data.code == 2000) {
                toastr.success("新增成功")
                $uibModalInstance.close();
            } else {
                console.info("新增失败");
            }
        }, function (rej) {
            toastr.error(rej);
        });
    };
}]);

image.png

ngProgressFactory

进度条。
用户体验好，用于耗时操作-网络请求。

image.png

应用：
3步走

  //变量声明
    $scope.data = {};
    //进度条
    $scope.progressbar = ngProgressFactory.createInstance();
    //查询
    $scope.query = function () {
        $scope.progressbar.start(); //进度条
        $scope.ListPromise = $http({//网络请求遮罩
            url: $rootScope.api.getPreList,
            method: 'post',
            headers: {
                'Content-Type': 'application/json'
            },
            data: {
                "count": parseInt($scope.PageSize) ? parseInt($scope.PageSize) : 20,
                "page": parseInt($scope.PageIndex) - 1 ? parseInt($scope.PageIndex) - 1 : 0,
                "name": $scope.data.name,
                "symptomId": $scope.data.symptomId,
                "startTime": $scope.data.startTime,
                "endTime": $scope.data.endTime
            }
        }).then(function (res) {
            if (res.data.code == 2000) {
                $scope.dataArr = res.data.data;
                $scope.totalCount = res.data.page_info ? res.data.page_info.total : 0;
                $scope.progressbar.complete();

                $scope.toPageNum = $scope.PageIndex;
            }
        });
    };

uib-pagination

分页


    //所在页码
    $scope.PageIndex = $rootScope.PAGINATION_CONFIG.PAGEINDEX;
    //每页显示多少条
    $scope.PageSize = $rootScope.PAGINATION_CONFIG.PAGESIZE;
    //最多显示多少可翻页长度
    $scope.maxSize = $rootScope.PAGINATION_CONFIG.MAXSIZE;
    //数据量总数
    $scope.total = 600;
    
        $scope.setPage = function () {
        $scope.PageIndex = $scope.toPageNum > Math.ceil($scope.DevListDataCount / $scope.PageSize) ? Math.ceil($scope.DevListDataCount / $scope.PageSize) : $scope.toPageNum;
        $scope.query();
    };
    
    html:
    
    <div class="col-md-9">
                        <select class="page-size" ng-model="PageSize" ng-change="pageChanged()">
                            <option value="20" ng-selected="true">每页显示20条</option>
                            <option value="40">每页显示40条</option>
                            <option value="60">每页显示60条</option>
                            <option value="80">每页显示80条</option>
                            <option value="100">每页显示100条</option>
                        </select>
                        <uib-pagination ng-model="PageIndex" ng-change="pageChanged()" total-items="DevListDataCount"
                                        max-size="maxSize" items-per-page="PageSize" class="pagination-sm"
                                        boundary-link-numbers="true" rotate="false" previous-text="上一页"
                                        next-text="下一页"></uib-pagination>
                    </div>

api

//属性名   默认值 备注
previous-text   Previous    上一页的按钮名字
next-text   Next    下一页的按钮名字
total-items     总共有多少条数据
ng-model        当前页数
items-per-page  10  每页显示的数量.设置值小于1表示显示所有项
max-size    null    可选择的页数范围
rotate  true    是否保持当前在可视范围的中间
ng-change       页数变化时调用的函数
boundary-links  false   是否显示第一页和最后一页的按钮
boundary-link-numbers   false   是否显示第一页和最后一页的页数,并在页数过多时用…表示被隐藏的页数
//以上是目前项目中使用的。

direction-links true    是否显示上一页和下一页的按钮
first-text  first   第一页的按钮的名字
last-text   last    最后一页的按钮名字
force-ellipses  false   是否在rotate被设置为true并且页数过多时显示为"…"
ng-disabled false   是否禁用
num-pages   angular.noop    只读属性，表示总页数
page-label  angular.identity    设置页数标签的表达式
template-url    uib/template/pagination/pagination.html

ui-select

下拉
下拉选择器，其中下拉可选的数据可以是自己定义的数组也可以使从后台返回的数组。选择的后，可以选择返回单个字段，也可以返回一个对象。
应用:
处方状态

//html代码
<div class="form-group col-md-3">
     <label class="col-md-3 text-right control-label">处方状态：</label>
     <div class="col-md-8">
         <ui-select ng-model="data.preStatus" theme="bootstrap" name="preStatus">
              <ui-select-match allow-clear="true"placeholder="处方状态">  {{$select.selected.name}}
                </ui-select-match>
                <ui-select-choices repeat="item.id as item in preArr | orderBy:'id' | filter: $select.search.id">这里要注意：item.id就是去处这个数字里每个对象中的一个属性id，如果是item直接去遍历arr取出来的就是一项即对象。
                     <span ng-bind-html="item.name | highlight: $select.search"></span>
                </ui-select-choices>
              </ui-select>
     </div>
</div>
    
//js:

    $scope.preArr = [
        {
            id: 0,
            name: "进行中"
        }, {
            id: 1,
            name: "未完成"
        }, {
            id: 2,
            name: "已完成"
        }
    ];

dateTimePicker

日期选择器时间控制
应用：

<div class="form-group col-md-6">
    <label class="col-md-4 control-label">选择时间：</label>
    <div class="col-md-8">
        <div class="dropdown dropdown-begin-time">
            <input type="text" name="start_time" class="form-control" ng-model="data.Begintime" datetime-transform format="yyyy-MM-dd HH:mm:ss" readonly="readonly">
            <i class="glyphicon glyphicon-calendar rili-icon dropdown-toggle" id="Begintime" role="button" data-toggle="dropdown" data-target=".dropdown-begin-time"></i>
            <ul class="dropdown-menu" role="menu" aria-labelledby="Begintime">
                <datetimepicker ng-model="data.Begintime" data-datetimepicker-config="{dropdownSelector: '#Begintime',renderOn: 'end-date-changed','minView':'second','minuteStep':1,'secondStep':1}" data-on-set-time="startDateOnSetTime()" data-before-render="startDateBeforeRender($view,$dates)"></datetimepicker>
            </ul>
        </div>
    </div>
</div>
<div class="form-group col-md-6">
    <label class="col-md-4 control-label">到</label>
    <div class="col-md-8">
        <div class="dropdown dropdown-end-time">
            <input type="text" name="end_time" class="form-control" ng-model="data.Endtime" datetime-transform format="yyyy-MM-dd HH:mm:ss" readonly="readonly">
            <i class="glyphicon glyphicon-calendar rili-icon dropdown-toggle" id="Endtime" role="button" data-toggle="dropdown" data-target=".dropdown-end-time"></i>
            <ul class="dropdown-menu" role="menu" aria-labelledby="Endtime">
                <datetimepicker ng-model="data.Endtime" data-datetimepicker-config="{dropdownSelector: '#Endtime',renderOn: 'start-date-changed','minView':'second','minuteStep':1,'secondStep':1}" data-on-set-time="endDateOnSetTime()" data-before-render="endDateBeforeRender($view, $dates, $leftDate, $upDate, $rightDate)"></datetimepicker>
            </ul>
        </div>
    </div>
</div>

注意这里的是id：不能写class,否则选完，日期面板不收起来。页面中有多个日期控件时候注意，多个id会报错。

常用表单验证

大概分3类：
1：必填性。-required
2：逻辑校验。-自己写js
3：合法性。例如：类型约束-利用type属性+正则。项目里configJS里有配置常用的正则。

Angular 的表单属性

 $valid, $invalid, $pristine, $dirty

Angular 提供了有关表单的属性来帮助我们验证表单. 
属性类 
描述
$valid  ng-valid    Boolean 告诉我们这一项当前基于你设定的规则是否验证通过
$invalid    ng-invalid  Boolean 告诉我们这一项当前基于你设定的规则是否验证未通过
$pristine   ng-pristine Boolean 如果表单或者输入框没有使用则为True
$dirty  ng-dirty    Boolean 如果表单或者输入框有使用到则为True

应用：

<button class="btn withripple btn-raised btn-primary" type="button" ng-click="save()"  ng-disabled="!SportPreViewAddForm.$valid">确定 </button>

麦壳前端技术分享

麦壳前端技术分享

简介

跑起来

项目目录

外壳：

内容：

会分离才会合成

设计思想

常用组件

toastr

$uibModal

ngProgressFactory

uib-pagination

ui-select

dateTimePicker

常用表单验证

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

实用前端

前端实际项目

Web前端之路