Project 4 product purchase

1: Merchant background - commodity management [commodity list] (in the merchant background, display the commodity list information of the merchant)

The service layer code cannot be modified because it will affect the operator and merchant background
Therefore, only the Controller in the background of the merchant can modify the code
In the service layer, the fuzzy query is changed to the precise query

@RequestMapping("/search")
public PageResult search(@RequestBody TbGoods goods, int page, int rows  ){
	//Get merchant ID
	String sellerId=SecurityContextHolder.getContext().getAuthentication().getName();
	//Add query criteria 
	goods.setSellerId(sellerId);
	return goodsService.findPage(goods, page, rows);		
}

criteria.andSellerIdEqualTo(goods.getSellerId());

//Introducing js
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<!-- Paging component start -->
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!-- Paging component end -->
<script type="text/javascript" src="../js/base_pagination.js"></script>	
<script type="text/javascript" src="../js/service/goodsService.js"></script>
<script type="text/javascript" src="../js/service/itemCatService.js"></script>
<script type="text/javascript" src="../js/service/uploadService.js"></script>
<script type="text/javascript" src="../js/service/typeTemplateService.js"></script>
<script type="text/javascript" src="../js/controller/baseController.js"></script>
<script type="text/javascript" src="../js/controller/goodsController.js"></script>


<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="goodsController">
//Place paging controls on the page
<tm-pagination conf="paginationConf"></tm-pagination>
//loop
<tr ng-repeat="entity in list">
    <td><input  type="checkbox"></td>			                              
   	<td>{{entity.id}}</td>
    <td>{{entity.goodsName}}</td>
    <td>{{entity.price}}</td>
    <td>{{entity.category1Id}}</td>
    <td>{{entity.category2Id}}</td>
    <td>{{entity.category3Id}}</td>
    <td>
    	{{entity.auditStatus}}
    </td>		                                  
    <td class="text-center">                                          
   	  <button type="button" class="btn bg-olive btn-xs">modify</button>                  
    </td>
</tr>

2: Display status

Method 1: judge by ng if on the page, but you need to write 4
Mode 2: write an array subscript in the front end and the value corresponding to the database is equal

$scope.status=['Unaudited','Audited','Audit failed','Close'];
{{status[entity.auditStatus]}}

3: Show categories

Scheme 1: write the associated query statement in the back-end code, and the returned data directly contains the classification name.

Scheme 2: query the backend with ID in the front-end code, and asynchronously return the commodity classification name.

Mode 2:

ID as subscript, name as value,
It is the same as the just status, but the status is write dead and the classification is queried from the database

$scope.itemCatList=[];//Commodity classification list
	//Load item classification list
$scope.findItemCatList=function(){
	itemCatService.findAll().success(
		function(response){
			for(var i=0;i<response.length;i++){
				$scope.itemCatList[response[i].id]=response[i].name;
			}
		}
	);
}

ng-init="findItemCatList()"

<td>{{itemCatList[entity.category1Id]}}</td>
<td>{{itemCatList[entity.category2Id]}}</td>
<td>{{itemCatList[entity.category3Id]}}</td>

4: Condition query

<div class="has-feedback">
    	//Status: < select ng model = "searchentity. Auditstatus" >
      	      <option value="">whole</option>      
               <option value="0">Unaudited</option>    
               <option value="1">Audited</option>    
               <option value="2">Audit failed</option>    
               <option value="3">Close</option>                                     
           </select>
		//Product Name: < input ng model = "searchentity. Goodsname" >						
		<button class="btn btn-default" ng-click="reloadList()">query</button>                                    
</div>

5: Merchant background - commodity management [commodity modification]

1) Basic information reading

public Goods findOne(Long id);
public Goods findOne(Long id){
	Goods goods=new Goods();
    //Basic list of commodities	
    TbGoods tbGoods = goodsMapper.selectByPrimaryKey(id);
	goods.setGoods(tbGoods);
     //Product extension table		
    TbGoodsDesc tbGoodsDesc =goodsDescMapper.selectByPrimaryKey(id);
	goods.setGoodsDesc(tbGoodsDesc);
	return goods;
}
//Change backend Controller to Goods

$location.search()['id ']; / / get the parameter value

Note: if you want to add "X" before "X", it is the written form of address routing of angularJS

//Introduce $location service into goodsController
app.controller('goodsController',function($scope,$controller,
$location,goodsService,uploadService,item_catService,type_templateService){}

//Query entity 
$scope.findOne=function(){			
	var id= $location.search()['id'];//Get parameter value
	if(id==null){
		return ;
	}
	goodsService.findOne(id).success(
		function(response){
			$scope.entity= response;					
		}
	);				
}
//Add instructions on the goods? Edit.html page
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" 
ng-controller="goodsController" ng-init="selectItemCat1List();findOne()">

2) Read product description (rich text editor)

//Add product introduction to rich text editor
editor.html($scope.entity.goodsDesc.introduction);

3) Show product picture list

 //Show picture list
$scope.entity.goodsDesc.itemImages=JSON.parse($scope.entity.goodsDesc.itemImages);

4) Read product extension properties

//Show extended properties
$scope.entity.goodsDesc.customAttributeItems=JSON.parse($scope.entity.goodsDesc.customAttributeItems);

//If there is no ID, the extended data in the template is loaded
if($location.search()['id']==null){
//Extended attribute
  $scope.entity.goodsDesc.customAttributeItems = JSON.parse($scope.typeTemplate.customAttributeItems);
}

5) Read product specification properties

//Specifications
$scope.entity.goodsDesc.specificationItems=JSON.parse($scope.entity.goodsDesc.specificationItems);
//Return whether to be checked according to specification name and option name
$scope.checkAttributeValue=function(specName,optionName){
  var items=$scope.entity.goodsDesc.specificationItems;
  var object= $scope.searchObjectByKey(items,'attributeName',specName);
  if(object !=null){
	  if(object.attributeValue.indexOf(optionName)>=0){
		  return true;
	  }else{
		  return false;
	  }
  }else{
	  return false;
  }
}

ng-checked="checkAttributeValue(pojo.text,option.optionName)"

The ng checked instruction controls the check status of the check box. If it is selected, it returns true. If it is not selected, it returns false

6) Read SKU data

public class Goods implements Serializable{
private TbGoods goods;  //Commodity SPU
private TbGoodsDesc goodsDesc; //Commodity expansion
private List<TbItem> itemList; //Product SKU list
}

// Get entity by ID
public Goods findOne(Long id){
	Goods goods=new Goods();
	TbGoods tbGoods = goodsMapper.selectByPrimaryKey(id);
	goods.setGoods(tbGoods);
	TbGoodsDesc tbGoodsDesc =goodsDescMapper.selectByPrimaryKey(id);
	goods.setGoodsDesc(tbGoodsDesc);
	//Query SKU product list
	TbItemExample example=new TbItemExample();
	com.pinyougou.pojo.TbItemExample.Criteria criteria = example.createCriteria();
	criteria.andGoodsIdEqualTo(id);//Query criteria: Commodity ID
	List<TbItem> itemList=itemMapper.selectByExample(example);
	goods.setItemList(itemList);
	return goods;
}

//SKU list specification column conversion	
for(var i=0;i<$scope.entity.itemList.length;i++){
	$scope.entity.itemList[i].spec=JSON.parse($scope.entity.itemList[i].spec);
}

7) Save data

public void update(Goods goods);

//Write a method to insert the list data of SKU
private void saveItemList(Goods goods){
	//Enable specification
	if("1".equals(goods.getGoods().getIsEnableSpec())){
		System.out.println("111"+"Checklist");
		for(TbItem item:goods.getItemList()){
			//Build Title SPU name + specification option value
			String title=goods.getGoods().getGoodsName();//SPU name
			//{"body memory": "16G", "network": "Unicom 2G"}
			Map<String,Object> map=JSON.parseObject(item.getSpec());
			for (String key : map.keySet()) {
				title+=" "+map.get(key);
			}
			item.setTitle(title);	
			setItemValus(goods,item);		
			itemMapper.insert(item);
		}
	}else{
		System.out.println("000"+"Unchecked");
		//Do not enable specifications
		TbItem item=new TbItem();
		item.setTitle(goods.getGoods().getGoodsName());//Product KPU + specification string as SKU name
		item.setPrice( goods.getGoods().getPrice() );//Price			
		item.setStatus("1");//state
		item.setIsDefault("1");//Is it the default?			
		item.setNum(99999);//Inventory quantity
		item.setSpec("{}");			
		setItemValus(goods,item);		
		itemMapper.insert(item);
	}
}

// modify
public void update(Goods goods){
goods.getGoods().setAuditStatus("0");//Set not applied status: if it is a modified product, you need to reset the status
	//Update basic table data
	goodsMapper.updateByPrimaryKey(goods.getGoods());
	//Update extended table data
	goodsDescMapper.updateByPrimaryKey(goods.getGoodsDesc());
	
	//Delete the original SKU list data
	TbItemExample example=new TbItemExample();
	com.pinyougou.pojo.TbItemExample.Criteria criteria = example.createCriteria();
	criteria.andGoodsIdEqualTo(goods.getGoods().getId());
	itemMapper.deleteByExample(example);
	//Insert new SKU list data
	saveItemList(goods);
}


// modify
//For the sake of security, the submitted goods must be verified as belonging to the merchant when modifying the goods in the background of the merchant
@RequestMapping("/update")
public Result update(@RequestBody Goods goods){
	//Verify whether it is the id of the current merchant		
	Goods goods2 = goodsService.findOne(goods.getGoods().getId());
	//Get the currently logged in merchant ID
	String sellerId = SecurityContextHolder.getContext().getAuthentication().getName();
	//If the passed merchant ID is not the ID of the currently logged in user, it is illegal
	if(!goods2.getGoods().getSellerId().equals(sellerId) || 
	   !goods.getGoods().getSellerId().equals(sellerId) ){
		return new Result(false, "Illegal operation");		
	}		
	try {
		goodsService.update(goods);
		return new Result(true, "Modified success");
	} catch (Exception e) {
		e.printStackTrace();
		return new Result(false, "Modification failed");
	}
}
//Preservation 
$scope.save=function(){	
	//Get content in rich text editor
	$scope.entity.goodsDesc.introduction=editor.html();
	var serviceObject;//Service layer object  				
	if($scope.entity.goods.id!=null){//If there is ID
		serviceObject=goodsService.update( $scope.entity ); //modify  
	}else{
		serviceObject=goodsService.add( $scope.entity  );//increase 
	}				
	serviceObject.success(
		function(response){
			if(response.success){
				alert("Save successfully");
				$scope.entity={}; //After adding successfully, clear
				editor.html(''); //Empty rich text editor
			}else{
				alert(response.message);
			}
		}		
	);				
}

 ng-click="save()"

8) Page Jump

//modify
<a href="goods_edit.html#? id = {entity. ID}} "class =" BTN BG olive BTN XS "> Modify</a> 
//Return list
 <a href="goods.html" class="btn btn-default" >Return list</a>
//Save successfully, jump to the goods.html page
alert("Save successfully");
location.href="goods.html";
//Newly build
<a href="goods_edit.html" class="btn btn-default">Newly build</a>

6: Operator background - commodity management [commodity audit]

1) List of goods to be approved

//Remember to inject itemCatService into goodsController.js
$scope.status=['Unaudited','Audited','Audit failed','Close'];//Commodity status
$scope.itemCatList=[];//Commodity classification list
//Query commodity classification
$scope.findItemCatList=function(){
	itemCatService.findAll().success(
		function(response){
			for(var i=0;i<response.length;i++){
				$scope.itemCatList[response[i].id ]=response[i].name;		
			}					
		}		
	);		
}

<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<!-- Paging component start -->
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!-- Paging component end -->
<script type="text/javascript" src="../js/base_pagination.js"></script>	
<script type="text/javascript" src="../js/service/goodsService.js"></script>
<script type="text/javascript" src="../js/service/itemCatService.js"></script>
<script type="text/javascript" src="../js/controller/baseController.js"></script>
<script type="text/javascript" src="../js/controller/goodsController.js"></script>


<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="goodsController" 
ng-init="searchEntity={auditStatus:'0'};findItemCatList()">


<tbody>
  <tr ng-repeat="entity in list">
	<td><input  type="checkbox"></td>			                              
	<td>{{entity.id}}</td>
	<td>{{entity.goodsName}}</td>
	<td>{{entity.price}}</td>
	<td>{{itemCatList[entity.category1Id]}}</td>
	<td>{{itemCatList[entity.category2Id]}}</td>
	<td>{{itemCatList[entity.category3Id]}}</td>
	<td>{{status[entity.auditStatus]}}</td>		                                  
	<td class="text-center"> </td>
  </tr>
</tbody>

 <tm-pagination conf="paginationConf"></tm-pagination>

2) Commodity review and rejection
Demand: the status value of goods approval is 1, and the status value of rejection is 2. After the user selects the ID in the list, click approve or reject to modify the product status and refresh the list.

//Batch modify status
public void updateStatus(Long [] ids,String status);

public void updateStatus(Long[] ids, String status) {
 for (Long id : ids) {
   TbGoods goods=goodsMapper.selectByPrimaryKey(id);
   goods.setAuditStatus(status);
   goodsMapper.updateByPrimaryKey(goods);
}

//Update state
@RequestMapping("/updateStatus")
public Result updateStatus(Long[] ids, String status) {
	try {
		goodsService.updateStatus(ids, status);
		return new Result(true, "Success");
	} catch (Exception e) {
		e.printStackTrace();
		return  new Result(false, "fail");
	}
}

this.updateStatus=function(ids,status){
	return $http.get('../goods/updateStatus.do?ids='+ids+"&status="+status);
}

$scope.updateStatus=function(status){
goodsService.updateStatus($scope.selectIds,status).success(
	function(response){
		if(response.success){//Success
			$scope.reloadList();//Refresh List
			$scope.selectIds=[];//Empty ID set
		}else{
			alert(response.message);
		}
	}
);
}

<input  type="checkbox" ng-click="updateSelected($event,entity.id)" >
<button type="button"  title="Audit pass" ng-click="updateStatus('1')"> Audit pass</button>
<button type="button"  title="Reject" ng-click="updateStatus('2')"> Reject</button>     

7: Operator background - commodity management [commodity deletion] (implementation of logical deletion)

// Batch deletion
public void delete(Long[] ids) {
	for(Long id:ids){
		TbGoods goods=goodsMapper.selectByPrimaryKey(id);
		goods.setIsDelete("1");//1 for logical deletion
		goodsMapper.updateByPrimaryKey(goods);
	}		
}
//Specify that a field is null
criteria.andIsDeleteIsNull();//Non delete status

ng-click="dele()"

8: Annotated transaction configuration (add @ transactional to the required serviceImpl method)

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
		http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
    <!-- Transaction manager  -->  
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">  
        <property name="dataSource" ref="dataSource" />  
    </bean>  
    <!-- Enable annotation support for transaction control -->  
    <tx:annotation-driven transaction-manager="transactionManager"/>
</beans>

 

75 original articles published, 7 praised, 10000 visitors+
Private letter follow

Tags: Javascript AngularJS JSON Spring

Posted on Sun, 19 Jan 2020 04:35:14 -0500 by van__