1.添加品牌和修改品牌使用同一个表格,怎么实现点击保存实现不同的功能?

分析:
在添加商品和修改商品的时候有什么不同.
在添加的时候对象中没有id属性,在修改的时候有id属性.
实现:
根据有无id进行判断,有id访问修改路径,没有id访问添加路径

细节:
每次点击添加品牌之前需要清空前台页面上保存品牌信息对象的内容,否则会影响效果

image.pngimage.pngimage.png2.标签不生效常见原因

ng-app ng-controller—>作用范围,关键字名称
关键字是否写错—>比对
是否添加了相应的方法 —>到controller中查找
方法是否被调用—>在方法中添加alter(),查看是否执行
方法是否添加括号—>看
是否写错了标签位置—>点击事件触发的方法要写对位置
用到的变量是否定义—>看控制台报错
插件引入—>仔细比对
服务注入—>服务注入错误或者忘记注入
变量名称—>变量名称是否是关键子导致

3.angularJs实现checkbox多选并存储对应行的id

3.1点击复选框触触发函数对复选框对象id进行增删

$event:源 将触发事件的属性源传给该对象
$event.target: 当前属性源的标签对象(此处是input)
可以使用$event.target.属性 获取所有该标签拥有的所有属性值
entity.id 该行的id值

  1. <input  type="checkbox"  ng-click="selectDeleteBrand($event,entity.id)">

3.2定义复选框的操作方法

$scope.selectDeleteBrand: 删除行id数组

  1.  // 初始化数组
  2.        $scope.deleteIds = [];
  4.  // 对删除数组新型增删操作
  5.     $scope.selectDeleteBrand = function ($event, id) {
  6.         // 如果是被选中的状态,添加
  7.         if ($event.target.checked) {
  8.             $scope.deleteIds.push(id);
  9.         } else {
  10.             // 未被选中的状态
  11.             var index = $scope.deleteIds.indexOf(id);
  12.             $scope.deleteIds.splice(index, 1)    // 删除
  13.         }
  14.     };

3.3定义删除方法

  1.  //批量删除
  2.     $scope.dele = function () {
  3.         //获取选中的复选框
  4.         typeTemplateService.dele($scope.selectDeleteBrand).success(
  5.             function (response) {
  6.                 if (response.success) {
  7.                     $scope.reloadList();//刷新列表
  8.                 }
  9.             }
  10.         );
  11.     }

3.4服务层方法

ids: 被选中行的id集合

  1. this.dele=function(ids){
  2.         return $http.get('../specification/delete.do?ids='+ids);
  3.     }

3.5后台接收id数组进行删除

4.anjularJs点击按钮添加一行

4.1定义空数组

4.2每点击一次往数组中添加一个对象

$scope.数组.pusu(对象)

4.3页面使用ng-repeat=”x in 数组”

每添加一个对象就会添加一行

5.点击按钮删除一行

5.1在删除按钮上绑定删除方法

删除方法($index)
$index会将该行的index传到方法中

5.1定义删除方法

$scope.数组.splice(index,1)
在数组中将index索引对应的行删除

6.对象的key是字符串时怎么取值

var obj = {“key”:”value”}

obj[key]

该方法[括号内]只能是字符串

obj.key

7.怎么将json字符串转换成对象

7.1 eval

var jsonObj = eval(‘(‘+ json字符串 +’)’);
注意:
使用该方法的时候代转的对象必须被(小括号)包裹,如果没有手动添加

7.2 JSON.parse()

var jsonObj = JSON.parse(json字符串)

8.angularjs中怎么声明对象

$scope.entity={}; //初始化空对象
$scope.entity[‘specificationOptionList’] = []; //为entity对象创建specificationOptionList属性并赋值-空集合
$scope.entity.specification = {}; //为entity对象创建specification并赋值-空对象

9.json对象的key是传过来的变量时怎么取值

对象[变量]

10.表单没有提交按钮时怎么提交

1.给表单添加id

2.在任意按钮上添加onclick事件

onclick=”document:id.submit()”;
image.png

11. / 和 / 和 /* 的区别

/ 只拦截路径,不拦截页面
/ 拦截当前目录下的所有路径和页面
/* 拦截当前目录及子目录下所有路径和页面

12.在分页+搜索的前提下,实现查询满足条件的数据

在分页+搜索同时实现的前提下,如果想查询某一状态的数据,可以在初始化数据时给后台传一个条件
image.png
searchEntity对象是搜索条件对象,statius是查询的条件信息
此时返回的结果集都是状态为0的数据

13json mdn技术网站

主要是对json进行讲解
image.png

14iframe实现网页的嵌套

项目问题和实现 - 图12
如果要实现网页的嵌套只需要使用iframe标签

  1.   <!-- 内容区域 -->
  2.     <div class="content-wrapper">
  3.         <iframe width="100%" id="iframe" name="iframe" onload="SetIFrameHeight()" frameborder="0" src="home.html"></iframe>
  4.     </div>

image.png

设置页面高度

  1.  <script type="text/javascript">
  2.         function SetIFrameHeight() {
  3.             var iframeid = document.getElementById("iframe"); //iframe id
  4.             if (document.getElementById) {
  5.                 iframeid.height = document.documentElement.clientHeight;
  6.             }
  7.         }
  8.     </script>

image.png

除去上边的方式,也可以直接在页面中定义
image.png

15页面按钮显示小手

如果需要按钮显示小手形状

  1. <a href="javascript:void(0)"></a>

16.面包屑实现(三级联动)

效果展示
image.png

面包屑实现

image.png
image.png
代码:

  1. 前端控制层
  3. // 根据父id进行数据查询
  4.         $scope.findByParentId = function (parentId) {
  5.             itemCatService.findByParentId(parentId).success(function (response) {
  6.                 $scope.list = response;
  7.             });
  8.         };
  10.         // 初始化级别
  11.         $scope.grand = 1;
  12.         // 定义设置级别的菜单
  13.         $scope.setGrand = function (value) {
  14.             $scope.grand = value;
  15.         };
  17.         $scope.flagId = 0;
  18.         // 定义更新级别的方法
  19.         $scope.checkGrand = function (p_entity) {
  21.             if ($scope.grand == 1) {
  23.                 $scope.entity_2 = null;
  24.                 $scope.entity_3 = null;
  25.                 $scope.flagId = 0;
  26.             }
  27.             if ($scope.grand == 2) {
  29.                 $scope.entity_2 = p_entity;
  30.                 $scope.entity_3 = null;
  31.                 $scope.flagId = p_entity.id;
  32.             }
  33.             if ($scope.grand == 3) {
  35.                 $scope.entity_3 = p_entity;
  36.                 $scope.flagId = p_entity.id;
  37.             }
  39.             // 调用方法查询下级数据
  40.             $scope.findByParentId(p_entity.id);
  41.         };
  44. 前端页面
  46. <body class="hold-transition skin-red sidebar-mini"
  47.       ng-app="myApp" ng-controller="itemCatController"
  48.       ng-init="findByParentId(0);findIdAndName(); ">
  49. <!-- .box-body -->
  50. <div class="box-header with-border">
  53.   <ol class="breadcrumb">
  54.         <li>
  55.             <a href="#" ng-click="grand=1;checkGrand({id:0})">顶级分类</a>
  56.         </li>
  57.         <li>
  58.             <a href="#" ng-click="grand=2;checkGrand(entity_2)">{{entity_2.name}}</a>
  59.         </li>
  60.         <li>
  61.             <a href="#" ng-click="grand=3">{{entity_3.name}}</a>
  62.         </li>
  63.     </ol>
  65.     <!-- 数据表格 -->
  66.     <div class="table-box">
  67.         <!--工具栏-->
  68.         <div class="pull-left">
  69.             <div class="form-group form-inline">
  70.                 <div class="btn-group">
  71.                     <button type="button" class="btn btn-default" title="新建" data-toggle="modal"
  72.                             data-target="#editModal"><i class="fa fa-file-o" ng-click="pojo={}"></i> 新建
  73.                     </button>
  74.                     <button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button>
  75.                     <button type="button" class="btn btn-default" title="刷新"><i class="fa fa-check"></i> 刷新</button>
  77.                 </div>
  78.             </div>
  79.         </div>
  80.         <!--数据列表-->
  81.         <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
  82.             <thead>
  83.             <tr>
  84.                 <th class="" style="padding-right:0px">
  85.                     <input type="checkbox" class="icheckbox_square-blue">
  86.                 </th>
  87.                 <th class="sorting_asc">分类ID</th>
  88.                 <th class="sorting">分类名称</th>
  89.                 <th class="sorting">类型模板ID</th>
  91.                 <th class="text-center">操作</th>
  92.             </tr>
  93.             </thead>
  94.             <tbody>
  95.             <tr ng-repeat="entity in list">
  96.                 <td><input type="checkbox"></td>
  97.                 <td>{{entity.id}}</td>
  98.                 <td>{{entity.name}}</td>
  99.                 <td>
  100.                     {{entity.parentId}}
  101.                 </td>
  102.                 <td class="text-center">
  103.                     <button ng-if="grand != 3" type="button" class="btn bg-olive btn-xs"
  104.                             ng-click="setGrand(grand+1);checkGrand(entity)">查询下级
  105.                     </button>
  107.                     <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal">修改
  108.                     </button>
  109.                 </td>
  110.             </tr>
  112.             </tbody>
  113.         </table>
  114.         <!--数据列表/-->
  116.     </div>

17.规格多选框实现数据封装

image.png
存入数据库中的样式:
[{“attributeName”:”规格名称”,”attributeValue”:[“规格选项 1”,“规格选项 2”…. ] } , …. ]
image.png
1.定义方法进行判断

  1.     // 定义方法,查看列表中的对象是否有该键
  2.     // list 目标集合
  3.     // key attributeName
  4.     // keyvalue: 规格名称
  5.     $scope.searchObjectByKey=function(list,key,keyValue){
  6.         // 循环列表
  7.         for(var i=0;i<list.length;i++){
  8.             // 判断该对象的key对应的属性是否是keyValue的内容
  9.             if(list[i][key]==keyValue){
  10.                 // 如果是就将该对象返回
  11.                 return list[i];
  12.             }
  13.         }
  14.         // 没有就返回null
  15.         return null;
  16.     }

2.定义方法对勾选框判断是确认勾选还是取消勾选

  1.  // 声明对象
  2.     $scope.entity = {goodsDesc: {itemImages: [], specificationItems: []}};
  3.     // 定义添加规格列表的方法
  4.     // name : 对象的key
  5.     // value : 对象中value的属性
  6.     $scope.updateSpecAttribute = function ($event, name, value) {
  7.         // 调用查找是否是第一次添加的方法
  8.         var object = $scope.searchObjectByKey(
  9.             $scope.entity.tbGoodsDesc.specificationItems, 'attributeName', name);
  10.         if (object != null) {
  11.             // 判断是否是勾选还是取消勾选
  12.             if ($event.target.checked) {
  13.                 object.attributeValue.push(value);
  14.             } else {//取消勾选
  15.                 object.attributeValue.splice(object.attributeValue.indexOf(value), 1);//移除选项
  16.                 //如果选项该规格选项都取消了，将此条记录移除
  17.                 if (object.attributeValue.length == 0) {
  18.                     $scope.entity.tbGoodsDesc.specificationItems.splice(
  19.                         $scope.entity.tbGoodsDesc.specificationItems.indexOf(object), 1);
  20.                 }
  21.             }
  22.         } else {
  23.             // 如果该属性是第一次添加,往列表中添加该对象
  24.             $scope.entity.tbGoodsDesc.specificationItems.push(
  25.                 {"attributeName": name, "attributeValue": [value]});
  26.         }
  27.     };

3.在checkbox处调用该方法

  1. ng-click="updateSpecAttribute($event,pojo.text,option.optionName)"

image.png

18.规格实现笛卡尔积效果

1.我们先定义一个初始的不带规格名称的集合，只有一条记录。
image.png

image.png
image.png

image.png

  1.  //创建 SKU 列表
  2.     $scope.createTbItems = function () {
  3.         // 初始集合
  4.         $scope.entity.tbItems = [{spec: {}, price: 0, num: 99999, status: '0', isDefault: '0'}];
  5.         //
  6.         var items = $scope.entity.tbGoodsDesc.specificationItems;
  8.         for (var i = 0; i < items.length; i++) {
  9.             $scope.entity.tbItems = addColumn($scope.entity.tbItems, items[i].attributeName, items[i].attributeValue);
  10.         }
  11.     }
  12.     //添加列值
  13.     addColumn = function (list, columnName, conlumnValues) {
  14.         var newList = [];//新的集合
  15.         for (var i = 0; i < list.length; i++) {
  16.             var oldRow = list[i];
  17.             for (var j = 0; j < conlumnValues.length; j++) {
  18.                 var newRow = JSON.parse(JSON.stringify(oldRow));//深克隆
  19.                 newRow.spec[columnName] = conlumnValues[j];
  20.                 newList.push(newRow);
  21.             }
  22.         }
  23.         return newList;
  24.     }

19.监控器

$watch()
image.png

20.$location获取地址栏中的请求参数

请求参数需要使用#?拼接
image.png

调用方法获取请求参数
image.png

21. ng-checked 对checkbox的选中状态进行操作

ng-checked:根据后边方法的返回值来决定勾选不勾选复选框
**
在数据库中查询checkbox的数据进行回显

image.png

image.png

  2.     // 判断是否被勾选
  3.     $scope.checkAttributeValue = function (specName, optionName) {
  4.         var items = $scope.entity.tbGoodsDesc.specificationItems;
  5.         // 判断查询的结果中是否有指定的名称
  6.         var object = $scope.searchObjectByKey(items, 'attributeName', specName);
  7.         if (object == null) {
  8.             return false;
  9.         } else {
  10.             // 判断是否有指定的属性
  11.             if (object.attributeValue.indexOf(optionName) >= 0) {
  12.                 return true;
  13.             } else {
  14.                 return false;
  15.             }
  16.         }
  17.     }
  22.   <div ng-repeat="pojo in specList">
  23.       <div class="col-md-2 title">{{pojo.text}}</div>
  24.       <div class="col-md-10 data">
  25.           <span ng-repeat="spec in pojo.specIdList">
  26.               <input type="checkbox"
  27.                      ng-click="updateSpecAttribute($event,pojo.text,spec.optionName);createTbItems()"
  28.                      ng-checked="checkAttributeValue(pojo.text,spec.optionName)">{{spec.optionName}}
  29.           </span>
  30.       </div>
  31. </div>

注意:

angularJs代码分层后,如果要注入其他模块或者服务,要先注入,并且在对应的页面上引入才可以使用

22.怎么判断一个集合中的对象中有没有指定的字段

var list = [{‘key’:’网络’,’value’:[‘移动’,’联通’]},{‘key’:内存,’value’:[‘8G’,’4G’]}]

  1. // key: 要查找的key值            key
  2. // keyvalue: 该键对应的值        '网络' '内存'
  3. // list集合                        list
  4. // 判断集合中有没有网络对应的对象
  6. $scope.searchObjectByKey=function(list,key,keyValue){
  7.         // 循环列表
  8.         for(var i=0;i<list.length;i++){
  9.             // 判断该对象的key对应的属性是否是keyValue的内容
  10.             if(list[i][key]==keyValue){
  11.                 // 如果是就将该对象返回
  12.                 return list[i];
  13.             }
  14.         }
  15.         // 没有就返回null
  16.         return null;
  17.     }

23.前端对象删除指定的key和值

delete关键字删除指定的key即可实现
image.png

24 静态页面根据选择的规格不同标题和价格等信息跟着变化

实现思路:
1.将默认的sku信息赋值给页面存储规格属性的集合
注意:此处要使用深拷贝,不能单纯的使用”=” 赋值
2.每点击一次规格属性,更新一次存储页面规格信息的对象
3.同时调用方法对存储规格的信息和每一条sku中规格信息进行比对
4.如果某一次点击之后返回true,将对应的该sku信息赋值给页面上的对象

实现步骤:
1.首先将默认的规格属性赋值给页面存储集合
image.png

2.定义两个对象比较的方法
image.png

3.每次点击规格属性,对修改之后的specificationItems集合和每个sku的属性列表对比
image.png

4.每次点击属性调用方法修改存储规格属性的对象,并调用修改方法
image.png
5.将对sku对应的属性值绑定到页面上
**

  1.     //[id:12,spec:{机身内存:'36G',容量:"4G"},...]
  2.     //加载默认 SKU
  3.     $scope.loadSku = function () {
  4.         // 将默认的sku赋值给页面存储信息的集合
  5.         $scope.sku = skuList[0];
  6.         // 将存储规格属性的对象深拷贝
  7.         $scope.specificationItems = JSON.parse(JSON.stringify($scope.sku.spec));
  8.     }
  1. //匹配两个对象(此处可以使用 for in 方法简化写法)
  2.     matchObject = function (map1, map2) {
  3.         for (var k in map1) {
  4.             if (map1[k] != map2[k]) {
  5.                 return false;
  6.             }
  7.         }
  8.         for (var k in map2) {
  9.             if (map2[k] != map1[k]) {
  10.                 return false;
  11.             }
  12.         }
  13.         return true;
  14.     }
  15. }
  1. //查询 SKU
  2.     searchSku = function () {
  3.         for (var i = 0; i < skuList.length; i++) {
  4.             if (matchObject(skuList[i].spec, $scope.specificationItems)) {
  5.                 $scope.sku = skuList[i];
  6.                 return;
  7.             }
  8.         }
  9.         $scope.sku = {id: 0, title: '该商品暂未上架', price: 0};//如果没有匹配的
  10.     }
  1.     //用户选择规
  2.     $scope.selectSpecification = function (name, value) {
  3.         $scope.specificationItems[name] = value;
  4.         searchSku();//读取 sku
  5.     }

25. 雪花算法实现购物车id

图片.png
雪花算法的工具类IdWorker.7z
1.将公工具类拷贝到项目中
2.调用方法产生id

  1. IdWorker.nextId()

26.淘宝的大秒系统

讲解1
**

27. 自动生成get,set和tostring方法

image.png

  1.         <dependency>
  2.             <groupId>org.projectlombok</groupId>
  3.             <artifactId>lombok</artifactId>
  4.         </dependency>

在bean上添加注解,在编译时期即可生成对应的方法
image.png

为了Idea能识别到该注解需要下载Lombok的插件