前台代码 brand.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>品牌管理</title>
  7. <meta
  8.     content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
  9.     name="viewport">
  10. <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
  11. <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
  12. <link rel="stylesheet"
  13.     href="../plugins/adminLTE/css/skins/_all-skins.min.css">
  14. <link rel="stylesheet" href="../css/style.css">
  15. <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
  16. <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
  17. <!-- 引入angularJS -->
  18. <script src="../plugins/angularjs/angular.min.js"></script>
  19.  
  20. <!-- 分页插件使用 -->
  21. <script src="../plugins/angularjs/pagination.js"></script>
  22. <link rel="stylesheet" href="../plugins/angularjs/pagination.css">
  23.  
  24. <script type="text/javascript">
  25.     var app = angular.module("pingyougou", [ "pagination" ]);
  26.     app.controller("brandController", function($scope, $http) {
  27.         //分页查询品牌列表
  28.         //【其实在分页插件内部就有当页面一加载就执行一遍请求的方法调用，所以我们在这块代码中不用再显示的写一遍$scope.reloadList()】
  29.  
  30.         //分页控件配置
  31.         /*
  32.          currentPage: 当前页
  33.          totalItems: 总记录数
  34.          itemsPerPage: 每页记录数
  35.          perPageOptions: [10, 20, 30, 40, 50], 分页选项【就是每页显示几条记录的备选下拉】
  36.          onChange: 当页面变更后自动触发的方法
  37.  
  38.          */
  39.         $scope.paginationConf = {
  40.             currentPage : 1,
  41.             totalItems : 10,
  42.             itemsPerPage : 10,
  43.             perPageOptions : [ 10, 20, 30, 40, 50 ],
  44.             onChange : function() {
  45.                 $scope.reloadList();//重新加载
  46.             }
  47.         };
  48.  
  49.         //刷新列表【因为要频繁使用，避免写很长代码，这里封装成一个方法】
  50.         $scope.reloadList = function() {
  51.             //调用分页请求方法
  52.             $scope.findPage($scope.paginationConf.currentPage,
  53.                     $scope.paginationConf.itemsPerPage);
  54.         }
  55.  
  56.         //分页请求方法
  57.         $scope.findPage = function(page, size) {
  58.             $http.get("../brand/findPage.do?page=" + page + "&size=" + size)
  59.                     .success(function(response) {
  60.                         $scope.list = response.rows; //显示当前页数据
  61.                         $scope.paginationConf.totalItems = response.total;//更新总记录数
  62.                     });
  63.         }
  64.  
  65.         //新增方法
  66.         $scope.add = function(){ //entity是我们在$scope中自定义的一个ang变量
  67.             $http.post("../brand/add.do?",$scope.entity).success(
  68.                     function(response){
  69.                         if(response.success){
  70.                             $scope.reloadList();//刷新
  71.                         }else{
  72.                             alert(response.message);
  73.                     }
  74.             });
  76.         }
  77.  
  78.     });
  79. </script>
  80.  
  81. </head>
  82. <body class="hold-transition skin-red sidebar-mini" ng-app="pingyougou"
  83.     ng-controller="brandController">
  84.     <!-- .box-body -->
  85.     <div class="box-header with-border">
  86.         <h3 class="box-title">品牌管理</h3>
  87.     </div>
  88.  
  89.     <div class="box-body">
  90.  
  91.         <!-- 数据表格 -->
  92.         <div class="table-box">
  93.  
  94.             <!--工具栏-->
  95.             <div class="pull-left">
  96.                 <div class="form-group form-inline">
  97.                     <div class="btn-group">
  98.                     <!-- ng-click="entity={}" 用于清空上次数据使每次点新建打开的都是干净的表单；因为逻辑简单所以不用封装方法，若逻辑复杂可以封装方法-->
  99.                         <button type="button" class="btn btn-default" title="新建"
  100.                             data-toggle="modal" data-target="#editModal" ng-click="entity={}">
  101.                             <i class="fa fa-file-o"></i> 新建
  102.                         </button>
  103.                         <button type="button" class="btn btn-default" title="删除">
  104.                             <i class="fa fa-trash-o"></i> 删除
  105.                         </button>
  106.                         <button type="button" class="btn btn-default" title="刷新"
  107.                             onclick="window.location.reload();">
  108.                             <i class="fa fa-refresh"></i> 刷新
  109.                         </button>
  110.                     </div>
  111.                 </div>
  112.             </div>
  113.             <div class="box-tools pull-right">
  114.                 <div class="has-feedback"></div>
  115.             </div>
  116.             <!--工具栏/-->
  117.  
  118.             <!--数据列表-->
  119.             <table id="dataList"
  120.                 class="table table-bordered table-striped table-hover dataTable">
  121.                 <thead>
  122.                     <tr>
  123.                         <th class="" style="padding-right: 0px">
  124.                             <input id="selall" type="checkbox" class="icheckbox_square-blue">
  125.                         </th>
  126.                         <th class="sorting_asc">品牌ID</th>
  127.                         <th class="sorting">品牌名称</th>
  128.                         <th class="sorting">品牌首字母</th>
  129.                         <th class="text-center">操作</th>
  130.                     </tr>
  131.                 </thead>
  132.                 <tbody>
  133.                     <tr ng-repeat="entity in list">
  134.                         <td><input type="checkbox"></td>
  135.                         <td>{{entity.id}}</td>
  136.                         <td>{{entity.name}}</td>
  137.                         <td>{{entity.firstChar}}</td>
  138.                         <td class="text-center">
  139.                             <button type="button" class="btn bg-olive btn-xs"
  140.                                 data-toggle="modal" data-target="#editModal">修改</button>
  141.                         </td>
  142.                     </tr>
  143.  
  144.                 </tbody>
  145.             </table>
  146.             <!-- 分页 -->
  147.             <tm-pagination conf="paginationConf"></tm-pagination>
  148.  
  149.         </div>
  150.         <!-- 数据表格 /-->
  151.  
  152.     </div>
  153.     <!-- /.box-body -->
  154.  
  155.     <!-- 编辑窗口 -->
  156.     <div class="modal fade" id="editModal" tabindex="-1" role="dialog"
  157.         aria-labelledby="myModalLabel" aria-hidden="true">
  158.         <div class="modal-dialog">
  159.             <div class="modal-content">
  160.                 <div class="modal-header">
  161.                     <button type="button" class="close" data-dismiss="modal"
  162.                         aria-hidden="true">×</button>
  163.                     <h3 id="myModalLabel">品牌编辑</h3>
  164.                 </div>
  165.                 <div class="modal-body">
  166.                     <table class="table table-bordered table-striped" width="800px">
  167.                         <tr><!-- 只要你在当前文本框中填值，那么它就会自动封装到entity变量中的name属性中，这样entity变量就自动产生了 -->
  168.                             <td>品牌名称</td>
  169.                             <td><input class="form-control" placeholder="品牌名称" ng-model="entity.name">
  170.                             </td>
  171.                         </tr>
  172.                         <tr>
  173.                             <td>首字母</td>
  174.                             <td><input class="form-control" placeholder="首字母" ng-model="entity.firstChar"></td>
  175.                         </tr>
  176.                     </table>
  177.                 </div>
  178.                 <div class="modal-footer"><!-- 用ng-click指令绑定点击时执行ang中定义的方法 -->
  179.                     <button class="btn btn-success" data-dismiss="modal"
  180.                         aria-hidden="true" ng-click="add()">保存</button>
  181.                     <button class="btn btn-default" data-dismiss="modal"
  182.                         aria-hidden="true">关闭</button>
  183.                 </div>
  184.             </div>
  185.         </div>
  186.     </div>
  187.  
  188. </body>
  189. </html>

Controller方法：

  1.     @RequestMapping("/add")
  2.     public Result add(@RequestBody TbBrand brand){
  3.         try {
  4.             brandService.add(brand);
  5.             return new Result(true, "增加成功");
  6.         } catch (Exception e) {
  7.             e.printStackTrace();
  8.             return new Result(false, "增加失败");
  9.         }
  10.     }

需要注意的就是用上面的 add方法中的 $http.post请求的参数是json对象，所以在Controller中要加入 @RequestBody注解

angularJS新增 品优购新增品牌的更多相关文章

  1. angularJS修改 品优购修改品牌（新增和修改用同一个方法）

    前端代码 brand.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  2. angularJS批量删除 品优购删除品牌（通用复选框批量选中删除解决思路）

    思路: 一步:在点击复选框时维护变量数组 在js中定义一个数组变量, 给复选框添加点击动作, 在动作中判断当前复选框是否为选中状态(即点击后复选框的是否选中状态), 若为选中状态,则向数组中添加选中的 ...

  3. 项目二:品优购 第二天 AngularJS使用 brand商品页面的增删改查

    品优购电商系统开发 第2章 品牌管理 传智播客.黑马程序员 1.前端框架AngularJS入门 1.1 AngularJS简介 AngularJS  诞生于2009年,由Misko Hevery 等人 ...

  4. 品优购商城项目（二）AngularJS、自动代码生成器、select2下拉多选框

    品优购商城想项目第二阶段 AngularJS.自动代码生成器.select2下拉多选框 完成了课程第三天.第四天的的任务. 1.学习了AngularJs前端的mvc分层思想,js部分分成control ...

  5. 品优购(IDEA版)-第二天

    品优购-第2天 学习目标 目标1:运用AngularJS前端框架的常用指令 目标2:完成品牌管理的列表功能 目标3:完成品牌管理的分页列表功能 目标4:完成品牌管理的增加功能 目标5:完成品牌管理的修 ...

  6. 品优购(IDEA版)-第一天

    # 品优购(IDEA版)-第一天 品优购IDEA版应该是2019年的新项目.目前只有视频.资料其他都还是旧的. ## 1.学习目标 1:了解电商行业特点以及理解电商的模式 2:了解整体品优购的架构特点 ...

  7. 品优购商城项目（二）mybatis分页插件

    品优购商城项目第二天,使用mybatis分页插件实现分页.主要实现的是 SSM整合mybatis分页. 一.引用mybatis分页插件 SqlMapConfig.xml <?xml versio ...

  8. 品优购商城项目（六）CAS客户端与SpringSecurity集成

    cas单点登录旨在解决传统登录模式session在分布式项目中共享登录信息的问题. 本文cas服务器使用 4.0版本,仅供学习参考.把 cas.war 直接部署在tomcat即可,这里有个固定的用户名 ...

  9. 品优购商城项目（三）安全框架SpringSecurity

    品优购商城项目第三阶段 1.springSecurity的基本用法与shiro类似. 2.BCrypt加密算法比MD5更加智能和安全,能自动加盐再加密,生成的密码是60位比md5的32位更占空间(可以 ...

随机推荐

  1. 使用InstallShield-Limited-Edition制作安装包

    1.打开此网站,进行注册,获取序列码以及下载InstallShield-Limited-Edition 2.安装完成之后,打开VisualStudio,新建项目 3.填写基本应用信息 4.配置相关信息 ...

  2. SVG Sprite 使用Symbol元素制作ICON

    介绍 SVG是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法.之前写过两篇关于CSS icon在页面显示的博客,后来了解到现在大多数前端团队和项目都在使用SVG Sprite这种方 ...

  3. 剑指offer-整数中1出现的次数27

    题目描述 求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没辙了. ...

  4. phantomjs抛出IOException

    使用phantomjs对网页进行截图遇到的问题 问题描述: 使用的phantomjs版本:phantomjs-2.1.1-windows 使用的截图js文件,\phantomjs-2.1.1-wind ...

  5. 11.24Daily Scrum（3）

    人员 任务分配完成情况 明天任务分配 王皓南 实现网页上视频浏览的功能.研究相关的代码和功能.1002 数据库测试 申开亮 实现网页上视频浏览的功能.研究相关的代码和功能.1003 实现视频浏览的功能 ...

  6. 总结get和post区别

    参考博文: 浅谈HTTP中Get与Post的区别 1. 数据传递方向: Get是向服务器发索取数据的一种请求,Post是向服务器提交数据的一种请求 (都是请求,并不是一个取一个发) Get:①用于获取 ...

  7. java的参数传递

    1按值传递:传递的是原始值的副本,而不是原始值的内存地址 基本数据类型是传原始值的副本 class Test02 { public static void main(String[] args) { ...

  8. python学习第一天-语法学习

    1.python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,Guido开始写能够解释Python语言语法的解释器.Python这个名字,来自 ...

  9. eclipse 创建并运行maven web项目

    这两天想在eclipse上运行maven web项目,折腾了许久,总算success啦. 1,利用eclipse创建dynamic web project(eclipse需要安装m2eclipse). ...

  10. Python的压缩文件处理 zipfile & tarfile

    本文从以下两个方面, 阐述Python的压缩文件处理方式: 一. zipfile 二. tarfile 一. zipfile 虽然叫zipfile,但是除了zip之外,rar,war,jar这些压缩( ...