dubbo+angular添加品牌

dubbo+angular添加品牌

---

• 后端controller层方法

  @RequestMapping("/add")
      public Result add(@RequestBody Brand brand) {
  
          try {
              int affectRows = brandService.add( brand );
              if (affectRows > 0) {
                  return new Result( true, "添加成功" );
              }else {
                  return new Result( false, "添加失败" );
              }
          } catch (Exception e) {
              e.printStackTrace();
              return new Result( false, "服务器异常,添加失败" );
          }
  
      }

   

• angular js 代码

  <script>
          var app = angular.module('pinyougou', ['pagination']);//定义模块
          app.controller('brandController', function ($scope, $http) {
              //设置分页插件的参数
              $scope.paginationConf = {
                  currentPage: 1,
                  totalItems: 10,
                  itemsPerPage: 10,
                  perPageOptions: [10, 20, 30, 40, 50],
                  onChange: function () {
                      $scope.reloadList();
                  }
              };
              $scope.reloadList = function () {
                  $scope.findPage($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
              };
  
              $scope.findPage = function (page, rows) {
                  $http.get('../brand/findPage.do?page=' + page + '&rows=' + rows).success(function (response) {
                      $scope.list = response.rows;
                      $scope.paginationConf.totalItems = response.total;
                  })
              };
              $scope.add=function () {
                  $http.post('../brand/add.do', $scope.entity).success(function (response) {
                      if (response.success) {
                          $scope.reloadList();//添加成功后更新list集合的值
                          alert(response.message);
                      }else{
                          alert(response.message);//添加失败后展示message里的内容
                      }
                  })
              };
              $scope.add=function () {
                  $http.post('../brand/add.do',$scope.entity).success(function (response) {
                      if (response.success) {
                         $scope.reloadList();
                          alert(response.message);
                      }else{
                          alert(response.message);
                      }
                  })
              }
          });
      </script>

   

• html代码

  <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  <h3 id="myModalLabel">品牌编辑</h3>
              </div>
              <div class="modal-body">
                  <table class="table table-bordered table-striped" width="800px">
                      <tr>
                          <td>品牌名称</td>
                          <td><input ng-model="entity.name" class="form-control" placeholder="品牌名称"></td>
                      </tr>
                      <tr>
                          <td>首字母</td>
                          <td><input ng-model="entity.firstChar" class="form-control" placeholder="首字母"></td>
                      </tr>
                  </table>
              </div>
              <div class="modal-footer">
                  <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="add()">保存</button>
                  <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
              </div>
          </div>
      </div>
  </div>

   

• 过程分析

  • 前端填写form添加的表单

  • input属性ng-model 当输入框输入数据后会保存到$scope域中的entity对象中

    ng-model="entity.name"

    ng-model="entity.firstChar"

  • 填写完之后点击保存按钮触发函数add()

    ng-click="add()

  • add()函数带着添加的数据到后端controller

    $http.post('../brand/add.do',$scope.entity)...

  • 后端执行保存后将执行结果返回,前端页面再展示结构成功或失败

  • 成功后调用reload()函数重新刷新页面($http为ajax发送),所以时局部刷新,展示添加后的页面