商家後臺-商品錄入【基本功能】

3.1需求分析

在商家後臺實現商品錄入功能。包括商品名稱、副標題、價格、包裝列表、售後服務

3.2後端代碼

3.2.1實體類

創建組合實體類goods

public class Goods implements Serializable {
    //商品SPU基本信息
    private TbGoods tbGoods;
    //商品SPU擴展信息
    private TbGoodsDesc tbGoodsDesc;
    //商品SKU列表
    private List<TbItem> itemList;

    //getter  and setter方法......

數據訪問層

由於我們需要在商品表添加數據後可以得到自增的ID,所以我們需要在TbGoodsMapper.xml中的insert配置中添加如下配置

 /*獲取到新插入數據的id*/
    <selectKey resultType="java.lang.Long" order="AFTER" keyProperty="id">
		SELECT LAST_INSERT_ID() AS id
	</selectKey>

修改pinyougou-sellergoods-interface 的GoodsService接口 add方法

/**
	 * 增加
	*/
	public void add(Goods goods);

3.2.4服務實現層

修改pinyougou-sellergoods-service的GoodsServiceImpl.java

        @Autowired
	private TbGoodsDescMapper goodsDescMapper;
	/**
	 * 增加
	 */
	@Override
	public void add(Goods goods) {
		goods.getGoods().setAuditStatus("0");//設置未申請狀態
		goodsMapper.insert(goods.getGoods());		
		goods.getGoodsDesc().setGoodsId(goods.getGoods().getId());//設置ID
		goodsDescMapper.insert(goods.getGoodsDesc());//插入商品擴展數據
	}

3.2.5控制層

修改pinyougou-shop-web工程的GoodsController的add方法

/**
	 * 增加
	 * @param goods
	 * @return
	 */
	@RequestMapping("/add")
	public Result add(@RequestBody Goods goods){
		//獲取登錄名id（商家的id）
		String sellerId = SecurityContextHolder.getContext ().getAuthentication ().getName ();
		goods.getTbGoods ().setSellerId (sellerId);
		try {
			goodsService.add(goods);
			return new Result(true, "增加成功");
		} catch (Exception e) {
			e.printStackTrace();
			return new Result(false, "增加失敗");
		}
	}

3.3前端代碼

商品錄入【選擇商品分類】

1.1需求分析

在商品錄入界面實現商品分類的選擇（三級分類）效果如下：

準備工作

（1）在pinyougou-shop-web工程中創建ItemCatController.（可拷貝運營商後臺的代碼）

（2）創建item_catService.js （可拷貝運營商後臺的代碼）

（3）修改goodsController.js，引入itemCatService

（4）修改goods_edit.html，添加引用

        <script src="../plugins/angularjs/angular.min.js"></script>
	<script src="../plugins/angularjs/pagination.js"></script>
	<script src="../js/base.js"></script>
	<!--服務Service-->
	<script src="../js/service/goodsService.js"></script>
	<script src="../js/service/itemCatService.js"></script>
	<!--控制Controller-->
	<script src="../js/controller/baseController.js"></script>
	<script src="../js/controller/goodsController.js"></script>

代碼實現

1.3.1一級分類下拉選擇框

 //查詢一級商品分類列表
    $scope.selectItemCatList=function () {
        itemCatService.findByParentId(0).success(function (response) {
            $scope.itemCatList=response;
        })
    }

頁面加載調用該方法

<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="goodsController" ng-init="selectItemCatList()">

修改goods_edit.html一級分類下拉選擇框

<select class="form-control" ng-model="entity.goods.category1Id" ng-options="item.id as item.name for item in itemCat1List"></select>

ng-options屬性可以在表達式中使用數組或對象來自動生成一個select中的option列表。ng-options與ng-repeat很相似，很多時候可以用ng-repeat來代替ng-options。但是ng-options提供了一些好處，例如減少內存提高速度，以及提供選擇框的選項來讓用戶選擇。

二級分類下拉選擇框和三級分類下拉選擇框

在goodsController增加代碼：

//查詢二級分類
    //省市聯動使用監控變量entity.tbGoods.category1Id監控這個變量newValue選中的id值
	$scope.$watch('entity.tbGoods.category1Id',function (newValue,oldValue) {
		//alert(oldValue);
		itemCatService.findByParentId(newValue).success(function (response) {
			$scope.itemCat2List=response;
        })
    })
	//查詢三級分類
	//省市聯動使用監控變量entity.tbGoods.category1Id監控這個變量newValue選中的id值
    $scope.$watch('entity.tbGoods.category2Id',function (newValue,oldValue) {
        //alert(oldValue);
        itemCatService.findByParentId(newValue).success(function (response) {
            $scope.itemCat3List=response;
        })
    })

$watch方法用於監控某個變量的值，當被監控的值發生變化，就自動執行相應的函數。

修改goods_edit.html中二級分類下拉框和三級分類下拉框

<td>
    <select class="form-control select-sm" ng-model="entity.tbGoods.category2Id" ng-options="item.id as item.name for item in itemCat2List" ></select>
</td>
<td>
    <select class="form-control select-sm" ng-model="entity.tbGoods.category3Id" ng-options="item.id as item.name for item in itemCat3List" ></select>
</td>

讀取模板ID

在goodsController增加代碼：

    //讀取模板id
    //省市聯動使用監控變量entity.tbGoods.category1Id監控這個變量newValue選中的id值
    $scope.$watch('entity.tbGoods.category3Id',function (newValue,oldValue) {
        //alert(oldValue);
        itemCatService.findOne(newValue).success(function (response) {
           $scope.entity.tbGoods.typeTemplateId=response.typeId;
        })
    })

在goods_edit.html顯示模板ID

模板ID:{{entity.goods.typeTemplateId}}

商品錄入【品牌選擇】

2.1需求分析

在用戶選擇商品分類後，品牌列表要根據用戶所選擇的分類進行更新。具體的邏輯是根據用戶選擇的三級分類找到對應的商品類型模板，商品類型模板中存儲了品牌的列表json數據。

代碼實現

（1）在pinyougou-shop-web工程創建TypeTemplateController （可從運營商後臺拷貝）

（2）在pinyougou-shop-web工程創建typeTemplateService.js （可從運營商後臺拷貝）

（3）在goodsController引入typeTemplateService 並新增代碼

//讀取模板id後讀取品牌列表，品牌規格列表
    //省市聯動使用監控變量entity.tbGoods.category1Id監控這個變量newValue選中的id值
    $scope.$watch('entity.tbGoods.typeTemplateId',function (newValue,oldValue) {
        //alert(oldValue);
        //查詢品牌列表
        typeTemplateService.findOne(newValue).success(function (response) {
            $scope.typelTemplate=response;//模板對象
            $scope.typelTemplate.brandIds=JSON.parse($scope.typelTemplate.brandIds);//品牌列表類型轉換

        })
    })

在頁面goods_edit.html 引入js

添加品牌選擇框

使用kindeditor完成商品介紹的錄入

4.3.1初始化kindeditor編輯器

在頁面中添加JS代碼，用於初始化kindeditor

var editor;

KindEditor.ready(function(K) {

editor = K.create('textarea[name="content"]', {

allowFileManager : true

});

</script>

allowFileManager 【是否允許瀏覽服務器已上傳文件】默認值是：false

提取kindeditor編輯器的內容

在goodsController.js中的add()方法中添加

$scope.entity.goodsDesc.introduction=editor.html();

4.3.3清空kindeditor編輯器的內容

修改goodsController.js的add方法

function(response){

if(response.success){

alert("保存成功");

$scope.entity={};

editor.html('');//清空富文本編輯器

}else{

alert(response.message);

}

保存按鈕實現保存商品錄入

3.3.1控制層

修改goodsController.js ，在增加成功後彈出提示，並清空實體（因爲編輯頁面無列表）

        //保存 
	$scope.add=function(){
		$scope.entity.tbGoodsDesc.introduction=editor.html();
        goodsService.add( $scope.entity  ).success(
			function(response){
				if(response.success){
					//重新查詢 
		        	//$scope.reloadList();//重新加載
					alert("新增成功！");
					//增加成功後清空
					$scope.entity={};//設置爲空
                    editor.html("");//設置爲空字符串
				}else{
					alert(response.message);
				}
			}		
		);				
	}

頁面

修改goods_edit.html

<script src="../plugins/angularjs/angular.min.js"></script>
	
	<script src="../plugins/angularjs/pagination.js"></script>
	
	<script src="../js/base.js"></script>
	<!--服務Service-->
	<script src="../js/service/goodsService.js"></script>
	
	<script src="../js/service/itemCatService.js"></script>
	<script src="../js/service/typeTemplateService.js"></script>
	<!--控制Controller-->
	<script src="../js/controller/baseController.js"></script>
	<script src="../js/controller/goodsController.js"></script>

表單部分代碼：（略）

<div class="col-md-2 title">商品名稱</div>
                  <div class="col-md-10 data">
                      <input type="text" class="form-control" ng-model="entity.tbGoods.goodsName"    placeholder="商品名稱" value="">
                  </div>
                  
                  <div class="col-md-2 title">品牌</div>
                  <div class="col-md-10 data">
                     <select class="form-control" ng-model="entity.tbGoods.brandId" ng-options="brand.id as brand.text for brand in typelTemplate.brandIds" ></select>
                  </div>

<div class="col-md-2 title">副標題</div>
                  <div class="col-md-10 data">
                      <input type="text" class="form-control"  ng-model="entity.tbGoods.caption"  placeholder="副標題" value="">
                  </div>
                  
                  <div class="col-md-2 title">價格</div>
                  <div class="col-md-10 data">
                      <div class="input-group">
                      <span class="input-group-addon">¥</span>
                       <input type="text" class="form-control"  ng-model="entity.tbGoods.price" placeholder="價格" value="">
                      </div>
                  </div>
                  
                  <div class="col-md-2 title editer">商品介紹</div>
                        <div class="col-md-10 data editer">
                            <textarea name="content" style="width:800px;height:400px;visibility:hidden;" ></textarea>
                        </div>
                  
                  <div class="col-md-2 title rowHeight2x">包裝列表</div>
                  <div class="col-md-10 data rowHeight2x">
                      
                   <textarea rows="4"  class="form-control" ng-model="entity.tbGoodsDesc.packageList"  placeholder="包裝列表"></textarea>
                  </div>
                  
                  <div class="col-md-2 title rowHeight2x">售後服務</div>
                  <div class="col-md-10 data rowHeight2x">
                      <textarea rows="4"  class="form-control" ng-model="entity.tbGoodsDesc.saleService"    placeholder="售後服務"></textarea>
                  </div>                        
                       
                         
                     </div>
                 </div>

保存按鈕

 <button class="btn btn-primary"  ng-click="add()" ><i class="fa fa-save"></i>保存</button>

品優購day05——商家後臺-商品錄入（商品基本信息）

商家後臺-商品錄入【基本功能】

3.1需求分析

3.2後端代碼

3.2.1實體類

數據訪問層

3.2.4服務實現層

3.2.5控制層

3.3前端代碼

商品錄入【選擇商品分類】

1.1需求分析

準備工作

二級分類下拉選擇框和三級分類下拉選擇框

讀取模板ID

商品錄入【品牌選擇】

2.1需求分析

代碼實現

在頁面goods_edit.html 引入js

使用kindeditor完成商品介紹的錄入

4.3.1初始化kindeditor編輯器

提取kindeditor編輯器的內容

4.3.3清空kindeditor編輯器的內容

保存按鈕實現保存商品錄入

3.3.1控制層

頁面

品優購day04-Spring Security框架入門-運營商登錄

Windows--IOmeter測試網絡

Ubuntu-MySQL忘記root用戶密碼解決方法

SpringDataRedis簡介以及入門小demo

品優購day06——商家後臺-商品錄入（規格）

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結