JT-day06

一、商品後臺管理

1.1 商品新增

1.1.1 頁面的分析

一、url分析
image.png
二、參數分析
image.png
三、頁面JS編輯前端

function submitForm(){
        //表單校驗
        if(!$('#itemAddForm').form('validate')){
            $.messager.alert('提示','表單還未填寫完成!');
            return ;
        }
        //轉化價格單位,將元轉化爲分
        //$("#price").val(); 取值    $("#price").val(100);
        //eval()  專門作算數計算的  1+1  "1"+1
        $("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100);
        itemAddEditor.sync();//將輸入的內容同步到多行文本中
        
        $.post("/item/save",$("#itemAddForm").serialize(), function(data){
            if(data.status == 200){
                $.messager.alert('提示','新增商品成功!');
            }else{
                $.messager.alert("提示","新增商品失敗!");
            }
        });
    }

<input id="price" type="text" name="id" value="333" />
$("input[name='id']")java

eval()專門作算術計算的
屬性選擇器web

1.1.2 封裝SysResult

說明:在jt-common中添加系統返回值VO對象spring

package com.jt.vo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;
import javax.swing.*;
//做用:指定系統返回值VO對象,與前端進行交互
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class SysResult {
 private Integer status;         //200成功 201失敗
 private String msg;             //服務器返回的提示信息
 private Object data;            //服務器數據
 //一、編輯失敗方法
 public SysResult fail(){
        return new SysResult(201,"服務器調用失敗!!!",null);
    }
    //二、重載成功方法
 public static SysResult success(){
        return new SysResult(200,"服務器執行成功!!!",null);
    }
    public static SysResult success(Object data){
        return new SysResult(200,"服務器執行成功!!!",data);
    }
    public static SysResult success(String msg,Object data){
        return new SysResult(200,msg,data);
    }
}

1.1.3 編輯ItemControlller

/*
 業務需求:
 完成商品入庫操做 注意事項:
 一、防止出錯添加try-catch
 二、新增商品的狀態信息 爲1
 三、入庫操做時    完成時間的記錄
 請求參數:
 一、url地址:/item/save
 二、請求參數:from表單  對象接收
 三、返回值:系統級別的VO對象
 知識複習:
 input name="name" value=18 */ @RequestMapping("/save")
   public SysResult saveItem(Item item){
      itemService.saveItem(item);
      int a=1/0;
      return SysResult.success();
//    try {
//       itemService.saveItem(item);
//       return  SysResult.success();
//    }catch (Exception e){
//       e.printStackTrace();
//       return SysResult.fail();
//    }
 }

1.1.4 ItemServiceImpl

@Override
public void saveItem(Item item) {
   item.setStatus(1).setCreated(new Date()).setUpdated(item.getCreated());
   itemMapper.insert(item);
}

1.2 全局異常處理機制說明

說明:在jt-common中 添加全局異常處理機制.sql

package com.jt.aop;
import com.jt.vo.SysResult;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;
@RestControllerAdvice //定義全局異常處理
public class SystemException {
    //遇到運行時異常時方法執行
 @ExceptionHandler(RuntimeException.class)
    public Object fail(Exception e){
        e.printStackTrace();    //輸出異常信息
 return SysResult.fail();
    }
}

1.3 自動填充功能

1.3.1 業務需求

例如更新時間/建立時間,每一個業務操做時都須要更新相關數據,可否將數據進行優化,簡化程序調用數據庫

@Override
public void saveItem(Item item) {
   item.setStatus(1);
   //.setCreated(new Date()).
   // setUpdated(item.getCreated()); 
   itemMapper.insert(item);
}

1.3.2 編輯BasePOJO指定填充屬性

package com.jt.pojo;
import java.io.Serializable;
import java.util.Date;
import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.TableField;
import lombok.Data;
import lombok.experimental.Accessors;
//pojo基類,完成2個任務,2個日期,實現序列化
@Data
@Accessors(chain=true)
public class BasePojo implements Serializable{
   @TableField(fill = FieldFill.INSERT)
   private Date created;
   @TableField(fill = FieldFill.INSERT_UPDATE)
   private Date updated;
}

1.3.3 編輯配置類

package com.jt.handler;

import com.baomidou.mybatisplus.core.handlers.MetaObjectHandler;
import org.apache.ibatis.reflection.MetaObject;
import org.springframework.stereotype.Component;

import java.util.Date;

@Component  //將對象交給spring容器管理
public class MyMetaObjectHandler implements MetaObjectHandler {

    //完成入庫操做自動賦值
    @Override
    public void insertFill(MetaObject metaObject) {
        Date date = new Date();
        this.setFieldValByName("created",date,metaObject);
        this.setFieldValByName("updated",date,metaObject);
    }

    //完成更新操做自動賦值
    @Override
    public void updateFill(MetaObject metaObject) {

        this.setFieldValByName("updated",new Date(),metaObject);
    }
}

1.4 商品修改的邏輯

1.4.1 頁面分析

{
        text:'編輯',
        iconCls:'icon-edit',
        handler:function(){
            //獲取用戶選中的數據
            var ids = getSelectionsIds();
            if(ids.length == 0){
                $.messager.alert('提示','必須選擇一個商品才能編輯!');
                return ;
            }
            if(ids.indexOf(',') > 0){
                $.messager.alert('提示','只能選擇一個商品!');
                return ;
            }
            //須要找到一個空的div以後展示窗口
            $("#itemEditWindow").window({
                onLoad :function(){
                    //回顯數據
                    var data = $("#itemList").datagrid("getSelections")[0];
                    data.priceView = KindEditorUtil.formatPrice(data.price);
                    //將data的數據回顯到修改頁面中.
                    $("#itemeEditForm").form("load",data);
                    .....
                    }

1.4.2 實現修改頁面分類信息回顯

image.png

知識回顧:
    說明:能夠經過商品分類id,動態獲取商品分類的名稱,請求路徑按照圖中標識

image.png
編輯頁面JSapache

/**
 * 根據商品分類id,獲取分類名稱
 * 思考:數據如何回顯?
 */
var itemCatId=data.cid;
$.get("/item/cat/queryItemName",{itemCatId:itemCatId},function (data) {
    //alert("獲取的商品分類名稱爲:"+data)
 //一、選中cid的input標籤
 //兄弟元素
 //$("#itemeEditForm input[name='cid']").siblings("span").text(data)
 //前一個元素 text獲取文本信息 val獲取value屬性信息
 $("#itemeEditForm input[name='cid']").prev().text(data);
})

1.4.3 商品修改的Ajax

image.png

1.4.4 編輯ItemController

/*
 實現商品修改操做
 一、url地址:/item/update
 二、請求參數:form表單提交
 三、返回值:SysResult對象
 */@RequestMapping("/update")
public SysResult updateItem(Item item){
   itemService.updateItem(item);
   return SysResult.success();
}

1.4.5 編輯ItemServiceImpl

//通常更新的操做都是根據主鍵更新
//update tb_item set title=#{} where id=#{xxx}
@Override
public void updateItem(Item item) {
   //根據對象中不爲null的元素充當set條件
 itemMapper.updateById(item);
}

1.5 商品輸出操做

1.5.1 頁面URL分析

image.png
一、參數提交
image.png數組

二、頁面JS分析
image.png服務器

1.5.2 編輯ItemController

/*
 業務需求:刪除商品信息
 一、url地址: /item/delete 二、參數:{"ids":ids}      serlvet(result) 同名提交問題
 三、返回值:SysResult
 springMVC規則:若是傳遞的數據是由,號分隔的字符串則可使用數組接收
 */@RequestMapping("/delete")
//public SysResult deleteItems(Integer[] ids){
public SysResult deleteItems(Long[] ids){
   //一、將ids字符串按照,號拆分
 itemService.deleteItems(ids);
   return SysResult.success();
}

1.5.3 編輯ItemServiceImpl

//批量刪除操做
 @Override
 public void deleteItems(Long[] ids) {
//    List<Long> list=Arrays.asList(ids);
//    itemMapper.deleteBatchIds(list);
 //手動刪除數據
 itemMapper.deleteItems(ids);
   }

1.5.4 編輯ItemMapper

package com.jt.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.jt.pojo.Item;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import java.util.List;
public interface ItemMapper extends BaseMapper<Item>{
    //注意事項:之後寫sql語句時 字段名稱/表名注意大小寫問題
 @Select("SELECT * FROM tb_item ORDER BY updated DESC LIMIT #{startNum},#{rows}")
    List<Item> findItemByPage(int startNum, int rows);
    
    void deleteItems(@Param("ids") Long[] ids);
}

由於註釋的SQL語句沒法作遍歷數組,因此須要XML文件寫SQL語句
XML文件作SQL刪除語句mybatis

<delete id="deleteItems">
   delete from tb_item
   where id in (
   <foreach collection="ids" item="id" separator=",">
      #{id}
   </foreach>
   )
</delete>
<!--
 Mybatis數據傳參的原理:
 規則:Mybatis只能接收單值傳參
 若是有多個數據須要傳值,則須要將多值封裝爲單值
 方式:
 一、利用對象傳參
 二、利用數組傳參
 三、利用Map集合傳參
 集合的寫法: 數據類型是數組 collection="array" 數據類型是list集合 collection="list" 數據類型是Map集合 collection="map的key"
 collection:獲取傳遞集合的key
 open="集合遍歷前綴"
 close="集合遍歷後綴"
 separator="分隔符"
 item="當前遍歷的對象"
-->

1.6 實現商品上架/下架操做

1.6.1 業務需求

說明:若是修改商品的狀態信息. 上架=1 下架=2. 只須要修改數據庫記錄便可
image.png

url分析:
URL: http://localhost/item/instock 下架操做 status=2
URL: http://localhost/item/reshelf 上架操做 status=1
需求:可否利用一個方法實現上架/下架操做???
需求: 可否利用一個方法實現上架/下架操做???
http://localhost:8091/item/updateStatus/2 下架操做 status=2
http://localhost:8091/item/updateStatus/1 上架操做 status=1

1.6.2 修改頁面JS

說明:將頁面上架/下架操做 按照上述分析進行修改
image.png

1.6.3 編輯ItemController

/*
 業務:實現商品的上架/下架
 url地址:/updateStatus/2
 參數:狀態碼信息/ids
 返回值:SysResult對象
 */@RequestMapping("updateStatus/{status}")
public SysResult updateStatus(@PathVariable Integer status,Long...ids){
   itemService.updateStatus(ids,status);
   return SysResult.success();
}

1.6.3 編輯ItemServiceImpl

//做業:SQL手動完成
//參數說明:entity:修改數據的值 wraper@Override
public void updateStatus(Long[] ids, Integer status) {
   Item item=new Item();
   item.setStatus(status);
   //where id in (1,2,3,4)
 UpdateWrapper<Item> updateWrapper=new UpdateWrapper();
   updateWrapper.in("id",Arrays.asList(ids));
   itemMapper.update(item,updateWrapper);
}
相關文章
相關標籤/搜索
本站公眾號
   歡迎關注本站公眾號,獲取更多信息