基于angularjs的发送短信功能

基于angularjs的发送短信功能

需求：由于业务的需要，需要为游戏后台管理系统添加一个一键发送短信的功能，（需要接入第三方平台来发送短信，）前端的工作有将输入的电话号码和短信内容传送给后台，与后台约定接口。

’模块‘是由视图（view）服务（service） 控制器（controller）三部分组成，

在创建模态框时候

{

view 用来显示模态框

服务用来创建一个实例（将view显示出来）

控制器（controller）用来提供逻辑（用来提供点击模态框中的发送按钮）

}

 

点击后需要弹出一个模态框   需要做一个服务来提供弹出模态框的方法  ，点击模态框的发送按钮触发一个方法（这个方法定义在控制器中）

第一步  在合适的位置添加一个点击按钮，

这次将功能添加到了  玩家管理-->玩家列表中最后一列添加了点击按钮

第二步   点击后弹出一个模态框、

在players.client.view.html中添加一个按钮

 <button type="button" 
class="btn btn-danger btn-xs" 
data-toggle="modal" 
ngclick="$SendToPlayerMessageService.open('modules/theme/client/views/components/modals/sendToPlayerMessage-components.client.view.html', 'md', {infoData} )">
发送短信</button>

在按钮中添加点击事件，点击后就会调用SendToPlayerMessageService里面的open（）方法 。这个方法中需要传入一个弹出的模态框的路径、模态框的大小、一个属性infoData、

infoData这个方法是在players.client.controller.js中定义的被$scope修饰的可以被访问到的属性这个属性

$scope.infoData = {
   sendMassage : $scope.sendMassage,
};

 第三步  模态框的编写

项目中很多地方都用到弹出模态框这个功能

模态框我将它放在了单独的一个模块写

modules/theme/client/views/components/modals/sendToPlayerMessage-components.client.view.html    就在这个页面中写模态框

<div class="modal-content" style="background: #eeeeee">
    <div class="modal-header">
        <!-- 关闭小叉号 -->
        <button type="button" class="close" ng-click="$dismiss()" aria-label="Close">
        <em class="ion-ios-close-empty sn-link-close"></em>
        </button>
        <!-- 发送短信这四个字的显示 -->
        <h4 class="modal-title">{{vm.name}}</h4>
    </div>
    <!-- 添加活动需要填写的一些内容 -->
    <div class="modal-body text-center">
        <div class="col-md-12">
            <div class="form-group row clearfix ">
                <div class="col-sm-2">电话号码</div>
                <div class="col-sm-8 text-align">
                    <span editable-text="vm.allInfo.phone" blur="cancel">{{ vm.allInfo.phone|| 'empty'}}</span>

                    <!-- <span editable-text="vm.info" blur="cancel">{{绑定电话号码 || 'empty'}}</span> -->
                </div>
            </div>

            <div class="form-group row clearfix ">
                <div class="col-sm-2">短信内容</div>
                <div class="col-sm-8 text-align">
                    <span editable-text="vm.allInfo.info" blur="cancel">{{ vm.allInfo.info|| 'empty'}}</span>
                </div>
            </div>
                

        </div>
        <div class="text-center form-group">
            <!-- 点击发送 触发sendMassageModel()方法  方法写在modules/theme/client/controllers/components/modals/sendToPlayerMassageModal.component.client.controller.js控制器中-->
        <button type="submit" class="btn btn-primary" ng-click="vm.sendMessageModal($dismiss)">发送</button>
        </div>
    </div>
</div>
      

点击  发送  按钮会触发sendMessageModal方法  此方法在下面的路径下

modules/theme/client/controllers/components/modals/sendToPlayerMassageModal.component.client.controller.js

(function () {
    'use strict';
  
    angular
      .module('theme.components')
      .controller('SendToPlayerMassageModalCtrl', SendToPlayerMassageModalCtrl);

    /** @ngInject */
    function SendToPlayerMassageModalCtrl(infoData) {
  
      var vm = this;
      vm.sendMassage = infoData.infoData.sendMassage;
      // vm.telNo = getMsgInitData.telNo;
      // 这是弹出页面的标题的内容
      vm.name='发送短信';
      // vm.phone="111111"
      // vm.info="欢迎你"
      vm.allInfo ={
        // 两个信息：1、电话号码（电话号码后期获取）。2、短信内容
        phone:'',
        info:'输入要发送的内容'
      };
      vm.sendMessageModal = function (closeModel) {     
        //1/先将数据传递 发送短信内容、发送电话号码
        // 方法如果不能执行，程序就蹦了
        console.log("点击被触发了")
        console.log('----------------')
        console.log(vm.allInfo)
        vm.sendMassage(vm.allInfo);
        //2/关闭弹出框
        closeModel();
      };
  
    }
  
  }());

这个方法执行后会触发一个方法叫做sendMassage（）方法，其中传入需要传递给后端的值，本次穿输传送的是电话号码、短信内容。

服务将模态框创建显示出来，在这期间服务做了一件事，就是将一些需要的数据等预加载了，（预加载了infoData），sendMassage（）方法类似于声明在在infoData中（具体怎么形容，我也不知道看着代码就知道了，大就是将已经定义好的sendMassage方法标记成别的地方可以访问的）

infoData定义在玩家列表这个模块中，

modules/players/client/controllers/players.client.controller.js

$scope.infoData = {
      sendMassage : $scope.sendMassage,
    };

sendMassage（）方法也写在玩家列表的controller中

 $scope.sendMassage = function (allInfo) {
      _sendMassage(allInfo, '短信发送'  );
    };

 // 发送短信要调用的方法开始 （就在本页面调用）

    // allInfo用来传递需要传递给后台的参数（短信内容，电话号码等）
    // isReloadPage一个用于判断是否刷新页面（$window.location.reload()用于刷新页面）
    var _sendMassage = function (allInfo ) {
      //将发过来等参数保存到后台数据库，并返回一个成功与否等结果。
        console.log(allInfo)
        console.log(msg)
        // console.log(currentState)


        PlayersService.sendToPlayerMassage(allInfo)
        // 希望返回过来的状态码有两个
       
        //  此处根据服务端返回的状态  来控制逻辑  
        // successCallback()
        // if( currentState.m ){
        //   successCallback()
        // }else if( currentState.n ){
        //   errorCallback()
        // }

      function successCallback() {
       
        Notification.success({ message: '<i class="glyphicon glyphicon-ok"></i>' + '短信发送成功！' });
      }

      function errorCallback() {
        Notification.error({ message: '<i class="glyphicon glyphicon-remove"></i>' + '短信发送失败' });
      }
    };
    // 发送短信要调用的结束

在玩家列表的服务模块中，实现前端接口的定义，

modules/players/client/services/players.client.service.js

定义在$resource(）中

在$resource()中定义sendToPlayerMassage这个‘函数‘  在 $resouerce中，看起来是规定了一些属性，但是实际上创建了一个名为sendToPlayMassage的函数，这个函数中使用POST方法，与后台传递数据，规定的数据接口是api/players/sendToPlayerMassage   

 // 发送短信的接口   
      sendToPlayerMassage: {
        method: 'POST',
      // url是与后台约定好的接口
        url: 'api/players/sendToPlayerMassage',
      }
      // 发送短信接口结束

还是在服务模块中通过angular.extend(dst ,src)方法，将$resouerce（）生成的还是那函数处理一下 ，加一个$promise方法，重新起名为名字叫做sendToPlayerMassage，

dst：被拓展对象

src：源对象

    // 发送短信

    angular.extend(players.prototype, {
      sendToPlayerMassage: function (massage) {
        return this.sendToPlayerMassage(massage).$promise;
      }
    });
    // 发送短信结束

在玩家列表的控制器中调用处理过的sendToPlayerMassage函数，

var _sendMassage = function (allInfo ) {
      //将发过来等参数保存到后台数据库，并返回一个成功与否等结果。
        console.log(allInfo)
        console.log(msg)
        // console.log(currentState)
        PlayersService.sendToPlayerMassage(allInfo)
        // 希望返回过来的状态码有两个
        //  此处根据服务端返回的状态  来控制逻辑     
      function successCallback() {
       
        Notification.success({ message: '<i class="glyphicon glyphicon-ok"></i>' + '短信发送成功！' });
      }

      function errorCallback() {
        Notification.error({ message: '<i class="glyphicon glyphicon-remove"></i>' + '短信发送失败' });
      }
    };
    // 发送短信要调用的结束

 PlayersService.sendToPlayerMassage(allInfo)将allInfo传递给angular.extend(dst ,src)中的sendToPlayerMassage（），

sendToPlayermassages将值传递给后台服务器，

服务器根据第三方平台的发送短信的具体结果返回状态（是否成功发送），

服务器端

module/players/server/controllers/players.server.controller.js

exports.sendToPlayerMassage = function (req, res) {
  // var telNo = req.body.telNo;
  // var message = req.body.message;
  //TODO:向第三方平台请求发短信
  //log pro
  console.log(req.body);
  res.json({});
};

modules/players/server/routes/players.server.route.js

// 发送短信
  app.route('/api/players/sendToPlayerMassage').post(players.sendToPlayerMassage);
  // 发送短信结束

基本逻辑代码等记录完毕，仅供个人熟悉代码业务流程使用。