1. Commodity background business operation

1.1 Toolbar Implementation

1.1.1 Toolbar Introduction

/* Define toolbar */
			toolbar: [{  		
				  iconCls: 'icon-edit'.// The icon style
				  handler: function(){alert("Click toolbar")}  	// A pop-up window for the output
				  },The '-',{  		
				  iconCls: 'icon-help'.// The icon style
				  handler: function(){alert('Help Toolbar')}},The '-',{
					  iconCls: 'icon-save'.// The icon style
					  handler: function(){alert('Save toolbar')}}],Copy the code

1.2 The Product Category Name is displayed

Product analysis output:

 function getSelectionsIds(a){
        // Select all table data
    	var itemList = $("#itemList");// Catalog
        // Get the user-selected element
    	var sels = itemList.datagrid("getSelections");
    	//console.log(sels);
    	var ids = [];
    	//in I index index of objects
    	for(var i in sels){
    	    // Encapsulate the user-acquired ID into a new array
    		ids.push(sels[i].id);
    	}
        // set the concatenation string [1,2,3,4,5] => 1,2,3,4,5
        // 1,2, and 3 can be packaged to be passed back, but arrays cannot
    	ids = ids.join(",");
    	return ids;
    }
Copy the code

Edit page JS

item-list.jsp

// Dynamically get the category name by id
					var cid = data.cid;
					// Retrieve user data dynamically through ajax requesters
					$.get("/itemCat/findItemCatById",{id: cid},function(data){
						var name = data.name
						// How to bind the name attribute to the classification table?
						Val (" XXXX ") value Attribute value. Text (" XXXXX ") The text value in the middle of the label
						$("#itemeEditForm input[name='cid']").prev().text(name)
					})
Copy the code

Page effect:

1.3 Commodity update operation

1.3.1 Page Analysis

1.3.2 Page JS analysis

$("#itemeEditForm [name=itemParams]").val(paramJson);
		// Data callback function
		$.post("/item/update", $("#itemeEditForm").serialize(), function(data){
			if(data.status == 200) {// If the callback function =200
				$.messager.alert('tip'.'Modified product successfully! '.'info',function(){// A message is displayed indicating successful modification of the product
					$("#itemEditWindow").window('close'); // Close the popover
					$("#itemList").datagrid("reload"); / / refresh
				});
			}else{
				$.message.alert("Tip",data.msg); }});Copy the code

1.3.3 editor ItemController

/ finish goods modification operations * * * * url: http://localhost:8091/item/update * parameters: the form form * return value: * / SysResult object
	@RequestMapping("/update")
	public SysResult updateItem(Item item){

		itemService.updateItem(item);
		return SysResult.success();
	}
Copy the code

1.3.4 editor ItemServiceImpl

	@Override
	@Transactional
	public void updateItem(Item item) {

		itemMapper.updateById(item);
	}
Copy the code

1.4 Commodity Deletion

1.4.1 Page URL Analysis

1.4.2 Page Parameters

1.4.3 page JS

        	$.messager.confirm('confirm'.'Make sure to delete ID as'+ids+'merchandise? ',function(r){
        	    if (r){
        	    	var params = {"ids":ids};
                	$.post("/item/delete",params, function(data){
            			if(data.status == 200){
            				$.messager.alert('tip'.'Deleted item succeeded! ',undefined,function(){
            					$("#itemList").datagrid("reload");
            				});
            			}else{
            				$.messager.alert("Tip",data.msg); }}); }});Copy the code

1.4.4 editor ItemController

/ batch delete items * * * * url: http://localhost:8091/item/delete * parameters: ids = 100101102 * return values: SysResult object * simplify operation: When parameters are separated by, they are automatically converted to arrays
	@RequestMapping("/delete")
	public SysResult deleteItems(Long... ids){

		itemService.deleteItems(ids);
		return SysResult.success();
	}
Copy the code

1.4.5 editor ItemService

	@Transactional
	@Override
	public void deleteItems(Long[] ids) {

		itemMapper.deleteIds(ids);
	}
Copy the code

1.4.6 Editing an XML Mapping File


      
<! DOCTYPEmapper
  PUBLIC "- / / mybatis.org//DTD Mapper / 3.0 / EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jt.mapper.ItemMapper">

	<! Void deleteIds(Long[] ids); Principle: 1.Mybatis natively supports single-value parameter passing 2. If it encounters multi-value parameter passing, Mybatis will encapsulate multi-value as single value. 3.Mybatis will automatically encapsulate data after upgrade. Mybatis: collection="array" list: collection="list" Map: collection=" key in Map "-->
	<delete id="deleteIds">
		delete from tb_item where id in 
		<foreach collection="array" open="(" close=")"
				 			separator="," item="id">
			#{id}
		</foreach>
	</delete>
</mapper>
Copy the code

1.5 Shelves/shelves removal operation

1.5.1 Page URL Analysis

Requirement: can use a method to achieve a common mount/remove operation. 12). Shelf operation3). Parameter analysis4). Page JS analysis

$.messager.confirm('confirm'.'Confirm takedown ID is'+ids+'merchandise? ',function(r){
        	    if (r){
        	    	var params = {"ids":ids};
                	$.post("/item/instock",params, function(data){
            			if(data.status == 200){
            				$.messager.alert('tip'.'Successful removal! ',undefined,function(){
            					$("#itemList").datagrid("reload"); }); }});Copy the code

1.5.2 restFul Style Optimization

Encapsulate the page URL path as restFul style, and then dynamically obtain parameters to achieve status update.

/item/updateStatus/1

$.messager.confirm('confirm'.'Make sure the shelf ID is'+ids+'merchandise? ',function(r){
        	    if (r){
        	    	var params = {"ids":ids};
                	$.post("/item/updateStatus/1",params, function(data){
            			if(data.status == 200){
            				$.messager.alert('tip'.'Shelves successful! ',undefined,function(){
            					$("#itemList").datagrid("reload"); }); }});Copy the code

1.5.3 editor ItemController

Url: /item/reshelf Status =1 url: /item/ Instock Status =2 Url optimization: url: /item/updateStatus/2 */
	@RequestMapping("/updateStatus/{status}")
	public SysResult updateStatus(@PathVariable Integer status,Long... ids){

		itemService.updateStatus(status,ids);
		return SysResult.success();
	}
Copy the code

1.5.4 editor ItemService

/**
	 * Sql: update tb_item set updated = #{updated},status = #{status}
	 * 		where id in (xx,xx,xx,xx)
	 * @param status
	 * @param ids
	 */
	@Override
	public void updateStatus(Integer status, Long[] ids) {
		// Parameter 1: Data encapsulation of the entity object to be modified
		Item item = new Item();
		item.setStatus(status);

		// Parameter 2: Condition constructor dynamically concatenates WHERE conditions
		UpdateWrapper updateWrapper = new UpdateWrapper();
		List<Long> idList = Arrays.asList(ids);
		updateWrapper.in("id", idList);
		itemMapper.update(item,updateWrapper);
	}
Copy the code

1.6 rich text editor implementation

1.6.1 Commodities and structure of commodity Classification table

1.6.2 Getting Started

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<! DOCTYPEhtml PUBLIC "- / / / / W3C DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="/ js/kindeditor - 4.1.10 / themes/default/default CSS" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="/ js/kindeditor - 4.1.10 / kindeditor - all - min. Js." "></script>
<script type="text/javascript" charset="utf-8" src="/ js/kindeditor - 4.1.10 / lang/zh_CN. Js." "></script>
<script type="text/javascript" charset="utf-8" src="/ js/jquery easyui - 1.4.1 / jquery. Min. Js." "></script>

<script type="text/javascript">
	$(function(){
		KindEditor.ready(function(){
			KindEditor.create("#editor")})})</script>
</head>
<body>
<h1>Rich text editor</h1>
<textarea style="width:700px; height:350px" id="editor"></textarea>
</body>
</html>
Copy the code

1.6.3 Encapsulate commodity details

@TableName("tb_item_desc")
@Data
@Accessors(chain = true)
public class ItemDesc extends BasePojo{

    @TableId
    private Long itemId;        //itemId is the same as the Id value of the item table.
    private String itemDesc;    // Product details

}
Copy the code

1.6.4 editor ItemDescMapper

package com.jt.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.jt.pojo.ItemDesc;

public interface ItemDescMapper extends BaseMapper<ItemDesc> {}Copy the code

1.7 Reconstructing Products Added operations

1.7.1 Parameter Analysis

1.7.2 editor ItemController

	New * / * * * business description: commodity URL: http://localhost:8091/item/save * request parameters: form form item objects receive * return value: * / SysResult object
	@RequestMapping("/save")
	public SysResult saveItem(Item item, ItemDesc itemDesc){
		try {
			itemService.saveItem(item,itemDesc);
			return SysResult.success();
		}catch (Exception e){
			e.printStackTrace();
			returnSysResult.fail(); }}Copy the code

1.7.3 editor ItemService

	/** *
      
        * * 
       */
Copy the code

	@Transactional    // The markup uses transaction control
	@Override
	public void saveItem(Item item, ItemDesc itemDesc) {
		// The primary key is added to the library before the primary key is added.
		// Use mybatis primary key auto-echo function to achieve...
		item.setStatus(1);	// Set the startup state
				//.setCreated(new Date())
				//.setUpdated(item.getCreated());
		itemMapper.insert(item);

		// The primary key in the commodity details table should be the same as that in the commodity details table
		itemDesc.setItemId(null);
		itemDescMapper.insert(itemDesc);
	}
Copy the code

1.8 Reconstructing Product Management Delete the operation

1.8.1 Service Description

The relationship between a product and its details is one-to-one. Therefore, when deleting a product, the details of the product should be deleted.

1.8.2 Deleting Associated Goods

	@Override
	@Transactional// Transaction control
	public void deleteItems(Long[] ids) {
		// Delete the product information
		itemMapper.deleteIds(ids);
		// Delete product details
		List<Long> idList= Arrays.asList(ids);
		itemDescMapper.deleteBatchIds(idList);
	}
Copy the code

1.9 Display of Product Details

1.9.1 Service Description

When clicking the Edit item button, the item details should be queried based on the Id. After that, HTML code fragments are presented to the user in the form of HTML presentation.

1.9.2 Editing page JS