前言：
上面我們已經(jīng)實(shí)現(xiàn)了框架的整合和利用插件來(lái)生產(chǎn)對(duì)應(yīng)的Mybatis數(shù)據(jù)查詢所需要的代碼和利用PageHelper插件來(lái)實(shí)現(xiàn)分頁(yè)统锤。下面進(jìn)行的是：
1.商品類目的選擇
2.圖片上傳：
a） 圖片服務(wù)器FastDFS
b） 圖片上傳功能的實(shí)現(xiàn)
3.富文本編輯器KindEditor
4.商品添加功能的完成

1.商品類目的選擇

先來(lái)看看要實(shí)現(xiàn)的效果：

image.png

1.1 功能分析

來(lái)看看前端的代碼:

image.png

image.png

對(duì)應(yīng)所實(shí)現(xiàn)的綁定事件在common.js里面可以看到。
展示商品分類列表使用EasyUI的tree控件實(shí)現(xiàn)炭庙。那么我們返回的數(shù)據(jù)格式是什么樣的呢饲窿？下面做分析：
初始化tree請(qǐng)求的url:/item/cat/list
參數(shù)：
初始化tree的時(shí)候只需要把第一級(jí)的節(jié)點(diǎn)展示，子節(jié)點(diǎn)異步加載

long id（父節(jié)點(diǎn)id）
返回值：json焕蹄。數(shù)據(jù)格式
[{    
    "id": 1,    
    "text": "Node 1",    
    "state": "closed"
},{    
    "id": 2,    
    "text": "Node 2",    
    "state": "closed"   
}] 

state:如果節(jié)點(diǎn)下面還有節(jié)點(diǎn)則值為“closed”,否則為“open”逾雄。
我們看到返回的數(shù)據(jù)格式了。我們最好的做法是創(chuàng)建一個(gè)專門(mén)的類來(lái)存儲(chǔ)這些數(shù)據(jù);將類放在common-utils包中

image.png

具體代碼:

package com.taotao.common.pojo;

import java.io.Serializable;

/**
 * 商品分類返回?cái)?shù)據(jù)的實(shí)體
 */
public class EasyUITreeNode implements Serializable{
    private long id;
    private String text;
    private String state;

    public long getId() {
        return id;
    }

    public void setId(long id) {
        this.id = id;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public String getState() {
        return state;
    }

    public void setState(String state) {
        this.state = state;
    }
}

其中id:父節(jié)點(diǎn)的id腻脏；text:內(nèi)容鸦泳；state:是否有子節(jié)點(diǎn)

1.2 Dao層

數(shù)據(jù)庫(kù)要查詢的表為tb_item_cat；查詢的列為id,name,isparent永品；
我們可以用上一篇中逆向工程生產(chǎn)的代碼

1.3Service層

參數(shù)：long parentId
業(yè)務(wù)邏輯：
1.根據(jù)parentid查詢節(jié)點(diǎn)列表
2.將數(shù)據(jù)封裝成EasyUITreeNode的格式
3.返回值：List<EasyUITreeNode>
代碼如下：
interface

public interface ItemCatService {
    List<EasyUITreeNode> getItemCatList(long parentId);
}

impl:

@Service
public class ItemCatServiceImpl implements ItemCatService {
    @Autowired
    private TbItemCatMapper tbItemCatMapper;
    @Override
    public List<EasyUITreeNode> getItemCatList(long parentId) {
        //1.根據(jù)父id查詢做鹰，創(chuàng)建一個(gè)對(duì)應(yīng)的Excample
        TbItemCatExample example = new TbItemCatExample();
        //2.設(shè)置查詢條件
        Criteria criteria = example.createCriteria();
        //設(shè)置parentid
        criteria.andParentIdEqualTo(parentId);
        //3.執(zhí)行查詢,返回?cái)?shù)據(jù)庫(kù)的數(shù)據(jù)
        List<TbItemCat> list = tbItemCatMapper.selectByExample(example);
        //4.封裝數(shù)據(jù)
        List<EasyUITreeNode> result = new ArrayList<>();
        //轉(zhuǎn)換成EasyUITreeNode列表
        for (TbItemCat tbItemCat:
             list) {
            EasyUITreeNode node = new EasyUITreeNode();
            node.setId(tbItemCat.getId());
            node.setText(tbItemCat.getName());
            //getIsParent是否父節(jié)點(diǎn)，是的話closed不是的話open
            node.setState(tbItemCat.getIsParent()? "closed":"open");
            result.add(node);
        }
        return result;
    }
}

1.4 在applicatonContext-service中發(fā)布服務(wù)

image.png

1.5表現(xiàn)層

接收服務(wù)

image.png

@Controller
public class ItemCatController {
    @SuppressWarnings("SpringJavaInjectionPointsAutowiringInspection")
    @Autowired
    private ItemCatService itemCatService;
    @RequestMapping("/item/cat/list")
    @ResponseBody
    public List<EasyUITreeNode> getItemCatList(@RequestParam(name = "id",defaultValue = "0") long parentId) {
        List<EasyUITreeNode> result = itemCatService.getItemCatList(parentId);
        return result;
    }

}

效果：

image.png

我們可以通過(guò)查看請(qǐng)求頭看到id

2.圖片上傳服務(wù)器

我們先來(lái)看看傳統(tǒng)的上傳方式：

image.png

image.png

image.png

2.1 圖片服務(wù)器的搭建

在這里我們使用的單機(jī)版的FastDFS。FastDFS推薦在linux情況下搭建铲敛。褐澎。。 所以筆者就跑去搭建Linux環(huán)境去了（花了一天伐蒋，-_-||工三。。流下了沒(méi)有技術(shù)的流水o(╥﹏╥)o）先鱼。在搭建的時(shí)候參考的博文是：https://blog.csdn.net/u012453843/article/details/69951920

2.2 測(cè)試FastDFS

在我們進(jìn)行測(cè)試的時(shí)候要先準(zhǔn)備兩點(diǎn)：
1.將fastdfs-client（可以從github中下載源碼）轉(zhuǎn)化成maven工程俭正；在idea中先導(dǎo)入工程，然后

image.png

焙畔，然后在taotao-manager-web中添加響應(yīng)的依賴
2.創(chuàng)建一個(gè)client.conf文件保存我們的trackserver地址：

image.png

//1.向工程中添加jar包
//2.創(chuàng)建一個(gè)配置文件、配置tracker的服務(wù)器地址
//3.加載配置文件
//4.創(chuàng)建一個(gè)TrackerCilent對(duì)象
//5.使用TrackerClient對(duì)象獲得TrackerServer對(duì)象
//6.創(chuàng)建一個(gè)StorageServer的null
//7.創(chuàng)建一個(gè)StorageClient對(duì)象、TrackerServer儿惫，StorageServer兩個(gè)參數(shù)
//8/使用StorageClient對(duì)象上傳文件
下面是代碼：

public class TestUploadFile {
    @Test
    public void uploadFile() throws IOException, MyException {
        //1.向工程中添加jar包
        //2.創(chuàng)建一個(gè)配置文件澡罚、配置tracker的服務(wù)器地址
        //3.加載配置文件
        //4.創(chuàng)建一個(gè)TrackerCilent對(duì)象
        //5.使用TrackerClient對(duì)象獲得TrackerServer對(duì)象
        //6.創(chuàng)建一個(gè)StorageServer的null
        //7.創(chuàng)建一個(gè)StorageClient對(duì)象、TrackerServer肾请，StorageServer兩個(gè)參數(shù)
        //8/使用StorageClient對(duì)象上傳文件
        ClientGlobal.init("S:/develop/IdeaProjests/shopping/taotao-manager-web/src/main/resources/resource/client.conf");
        TrackerClient trackerClient = new TrackerClient();
        TrackerServer trackerServer = trackerClient.getConnection();
        StorageServer storageServer = null;
        StorageClient storageClient = new StorageClient(trackerServer,storageServer);
        String[] filePath = storageClient.upload_file("F:/pictures/1.jpg","jpg",null);
        for (String str:
             filePath) {
            System.out.println(str);
        }

    }

我們可以利用返回中的字符串去訪問(wèn)我們上傳的圖片留搔，效果如下

image.png

我們看到上面的代碼十分繁瑣。上傳圖片的功能在以后的功能中也可能使用铛铁。所以我們考慮把他抽取出來(lái)封裝一下隔显，讓其變成工具類：

image.png

/**
 * 上傳圖片工具類
 */
public class FastDFSClient {

    private TrackerClient trackerClient = null;
    private TrackerServer trackerServer = null;
    private StorageServer storageServer = null;
    private StorageClient1 storageClient = null;
    
    public FastDFSClient(String conf) throws Exception {
        if (conf.contains("classpath:")) {
            conf = conf.replace("classpath:", this.getClass().getResource("/").getPath());
        }
        ClientGlobal.init(conf);
        trackerClient = new TrackerClient();
        trackerServer = trackerClient.getConnection();
        storageServer = null;
        storageClient = new StorageClient1(trackerServer, storageServer);
    }
    
    /**
     * 上傳文件方法
     * <p>Title: uploadFile</p>
     * <p>Description: </p>
     * @param fileName 文件全路徑
     * @param extName 文件擴(kuò)展名，不包含（.）
     * @param metas 文件擴(kuò)展信息
     * @return
     * @throws Exception
     */
    public String uploadFile(String fileName, String extName, NameValuePair[] metas) throws Exception {
        String result = storageClient.upload_file1(fileName, extName, metas);
        return result;
    }
    
    public String uploadFile(String fileName) throws Exception {
        return uploadFile(fileName, null, null);
    }
    
    public String uploadFile(String fileName, String extName) throws Exception {
        return uploadFile(fileName, extName, null);
    }
    
    /**
     * 上傳文件方法
     * <p>Title: uploadFile</p>
     * <p>Description: </p>
     * @param fileContent 文件的內(nèi)容饵逐，字節(jié)數(shù)組
     * @param extName 文件擴(kuò)展名
     * @param metas 文件擴(kuò)展信息
     * @return
     * @throws Exception
     */
    public String uploadFile(byte[] fileContent, String extName, NameValuePair[] metas) throws Exception {
        
        String result = storageClient.upload_file1(fileContent, extName, metas);
        return result;
    }
    
    public String uploadFile(byte[] fileContent) throws Exception {
        return uploadFile(fileContent, null, null);
    }
    
    public String uploadFile(byte[] fileContent, String extName) throws Exception {
        return uploadFile(fileContent, extName, null);
    }
}

2.3 圖片上傳功能實(shí)現(xiàn)

功能分析：

image.png

我們看下list-add.jsp頁(yè)面括眠，可以看到上傳圖片觸發(fā)方法picFileUpload是通過(guò)class來(lái)處理的，在<a>標(biāo)簽的下方是一個(gè)隱藏域倍权，是用來(lái)接收上傳到圖片服務(wù)器的回顯地址的掷豺，當(dāng)我們提交表單的時(shí)候，可以把這些圖片地址保存到數(shù)據(jù)庫(kù)中账锹。

image.png

image.png

image.png

image.png

TAOTAO在common.js中定義坷襟。我們可以到請(qǐng)求的地址和請(qǐng)求的參數(shù)和一些相關(guān)的配置奸柬。作為后臺(tái)開(kāi)發(fā)的話關(guān)注點(diǎn)在于請(qǐng)求的地址和參數(shù)就OK啦~
下面進(jìn)行具體的開(kāi)發(fā)：
1.導(dǎo)入jar包。和文件上傳相關(guān)的commons-io和commons-fileupload開(kāi)發(fā)包
在taotao-manager-web中的pom.xml中添加

<dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-io</artifactId>
        </dependency>

2.在taotao-manager-web工程的springmvc.xml文件當(dāng)中配置一下文件上傳解析器婴程。如下所示廓奕。

<!-- 配置文件上傳解析器 -->  
    <bean id="multipartResolver"  
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
        <!-- 設(shè)定默認(rèn)編碼 -->  
        <property name="defaultEncoding" value="UTF-8"></property>  
        <!-- 設(shè)定文件上傳的最大值5MB，5*1024*1024 -->  
        <property name="maxUploadSize" value="5242880"></property>  
    </bean> 

3.配置訪問(wèn)圖片前綴
我們?cè)L問(wèn)圖片是以http方式訪問(wèn)的档叔。例如：http://192.168.208.50:8080/group1/M00/00/00/wKjQMlsux8WAKmnxAAF9oSwPz9g765.jpg桌粉。在配置文件中配置的話可以使我們的代碼更加靈活。至于這一塊在哪會(huì)用到可以看一下的代碼

image.png

image.png

image.png

@Controller
public class PicController {
    //獲得配置文件的值
    @Value("${IMAGE_SERVER_URL}")
    private  String IMAGE_SERVER_URL;
    @RequestMapping("/pic/upload")
    @ResponseBody
    public String fileUpload(MultipartFile uploadFile) {
        try {
            //獲得文件的擴(kuò)展名
            String originalFilename = uploadFile.getOriginalFilename();
            String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
            //創(chuàng)建一個(gè)FastDFS客戶端
            FastDFSClient fastDFSClient = new FastDFSClient("classpath:resource/client.conf");
            //執(zhí)行上傳處理,返回一個(gè)路徑
            String path = fastDFSClient.uploadFile(uploadFile.getBytes(),extName);
            String url = IMAGE_SERVER_URL + path;
            Map result = new HashMap<>();
            result.put("error",0);
            result.put("url",url);
            String json = JsonUtils.objectToJson(result);
            return json;
        }catch (Exception e) {
            e.printStackTrace();
            Map result = new HashMap<>();
            result.put("error",1);
            result.put("message","上傳圖片失敗");
            String json = JsonUtils.objectToJson(result);
            return json;
        }
    }
}

我們可以看到上面我們用到了一個(gè)json的工具類

/**
 * 淘淘商城自定義響應(yīng)結(jié)構(gòu)
 */
public class JsonUtils {

    // 定義jackson對(duì)象
    private static final ObjectMapper MAPPER = new ObjectMapper();

    /**
     * 將對(duì)象轉(zhuǎn)換成json字符串立润。
     * <p>Title: pojoToJson</p>
     * <p>Description: </p>
     * @param data
     * @return
     */
    public static String objectToJson(Object data) {
        try {
            String string = MAPPER.writeValueAsString(data);
            return string;
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return null;
    }
    
    /**
     * 將json結(jié)果集轉(zhuǎn)化為對(duì)象
     * 
     * @param jsonData json數(shù)據(jù)
     * @param clazz 對(duì)象中的object類型
     * @return
     */
    public static <T> T jsonToPojo(String jsonData, Class<T> beanType) {
        try {
            T t = MAPPER.readValue(jsonData, beanType);
            return t;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
    
    /**
     * 將json數(shù)據(jù)轉(zhuǎn)換成pojo對(duì)象list
     * <p>Title: jsonToList</p>
     * <p>Description: </p>
     * @param jsonData
     * @param beanType
     * @return
     */
    public static <T>List<T> jsonToList(String jsonData, Class<T> beanType) {
        JavaType javaType = MAPPER.getTypeFactory().constructParametricType(List.class, beanType);
        try {
            List<T> list = MAPPER.readValue(jsonData, javaType);
            return list;
        } catch (Exception e) {
            e.printStackTrace();
        }
        
        return null;
    }
    
}

為什么要這樣用呢？
這是因?yàn)镵indEditor的圖片上傳插件士骤，對(duì)瀏覽器兼容性不好范删。使用火狐瀏覽器瀏覽的時(shí)候無(wú)法使用這個(gè)功能（，因?yàn)镸ap類型的返回值在火狐瀏覽器無(wú)法識(shí)別）拷肌。因此采用json串的方式來(lái)解決~（大家可以自己去測(cè)試一下到旦，在不使用String返回類型的時(shí)候）。

2.4測(cè)試結(jié)果：

記得我們?cè)谠黾恿私涌诘臅r(shí)候和工具類的時(shí)候記得重新將包導(dǎo)入到本地倉(cāng)庫(kù)中

image.png

image.png

image.png

點(diǎn)一張進(jìn)去瞧瞧：

image.png

3.KindEditor

富文本編輯器是什么?如圖

image.png

3.1使用方法

1.在jsp中引入KindEditor的css和js代碼

image.png

2.在表單中添加一個(gè)textarea控件添忘。是一個(gè)富文本編輯器的載體。類似數(shù)據(jù)源

image.png

image.png

image.png

4.取富文本編輯器的內(nèi)容搁骑。表單提交之前，把富文本編輯器的內(nèi)容同步到textarea控件中

image.png

3.2 商品添加功能的實(shí)現(xiàn)

請(qǐng)求的url：/item/save
參數(shù)：表單的數(shù)據(jù)又固≈倨鳎可以使用pojo接收表單的數(shù)據(jù)，要求pojo的屬性和input的name屬性要一致仰冠。
使用TbItem對(duì)象接收表單的數(shù)據(jù)乏冀。
TbItem item,String desc
返回值：
Json數(shù)據(jù)。應(yīng)該包含一個(gè)status的屬性洋只。
這里我們用一個(gè)類來(lái)封裝數(shù)據(jù)：

/**
 * 淘淘商城自定義響應(yīng)結(jié)構(gòu)
 */
public class TaotaoResult implements Serializable{

    // 定義jackson對(duì)象
    private static final ObjectMapper MAPPER = new ObjectMapper();

    // 響應(yīng)業(yè)務(wù)狀態(tài)
    private Integer status;

    // 響應(yīng)消息
    private String msg;

    // 響應(yīng)中的數(shù)據(jù)
    private Object data;

    public static TaotaoResult build(Integer status, String msg, Object data) {
        return new TaotaoResult(status, msg, data);
    }

    public static TaotaoResult ok(Object data) {
        return new TaotaoResult(data);
    }

    public static TaotaoResult ok() {
        return new TaotaoResult(null);
    }

    public TaotaoResult() {

    }

    public static TaotaoResult build(Integer status, String msg) {
        return new TaotaoResult(status, msg, null);
    }

    public TaotaoResult(Integer status, String msg, Object data) {
        this.status = status;
        this.msg = msg;
        this.data = data;
    }

    public TaotaoResult(Object data) {
        this.status = 200;
        this.msg = "OK";
        this.data = data;
    }

//    public Boolean isOK() {
//        return this.status == 200;
//    }

    public Integer getStatus() {
        return status;
    }

    public void setStatus(Integer status) {
        this.status = status;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }

    /**
     * 將json結(jié)果集轉(zhuǎn)化為T(mén)aotaoResult對(duì)象
     * 
     * @param jsonData json數(shù)據(jù)
     * @param clazz TaotaoResult中的object類型
     * @return
     */
    public static TaotaoResult formatToPojo(String jsonData, Class<?> clazz) {
        try {
            if (clazz == null) {
                return MAPPER.readValue(jsonData, TaotaoResult.class);
            }
            JsonNode jsonNode = MAPPER.readTree(jsonData);
            JsonNode data = jsonNode.get("data");
            Object obj = null;
            if (clazz != null) {
                if (data.isObject()) {
                    obj = MAPPER.readValue(data.traverse(), clazz);
                } else if (data.isTextual()) {
                    obj = MAPPER.readValue(data.asText(), clazz);
                }
            }
            return build(jsonNode.get("status").intValue(), jsonNode.get("msg").asText(), obj);
        } catch (Exception e) {
            return null;
        }
    }

    /**
     * 沒(méi)有object對(duì)象的轉(zhuǎn)化
     * 
     * @param json
     * @return
     */
    public static TaotaoResult format(String json) {
        try {
            return MAPPER.readValue(json, TaotaoResult.class);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
     * Object是集合轉(zhuǎn)化
     * 
     * @param jsonData json數(shù)據(jù)
     * @param clazz 集合中的類型
     * @return
     */
    public static TaotaoResult formatToList(String jsonData, Class<?> clazz) {
        try {
            JsonNode jsonNode = MAPPER.readTree(jsonData);
            JsonNode data = jsonNode.get("data");
            Object obj = null;
            if (data.isArray() && data.size() > 0) {
                obj = MAPPER.readValue(data.traverse(),
                        MAPPER.getTypeFactory().constructCollectionType(List.class, clazz));
            }
            return build(jsonNode.get("status").intValue(), jsonNode.get("msg").asText(), obj);
        } catch (Exception e) {
            return null;
        }
    }

}

業(yè)務(wù)邏輯：
1.生成商品的id（采用毫秒值加隨機(jī)數(shù)）

**
 * 各種id生成策略
 * <p>Title: IDUtils</p>
 * <p>Description: </p>
 * <p>Company: www.itcast.com</p> 
 * @author  入云龍
 * @date    2015年7月22日下午2:32:10
 * @version 1.0
 */
public class IDUtils {

    /**
     * 圖片名生成
     */
    public static String genImageName() {
        //取當(dāng)前時(shí)間的長(zhǎng)整形值包含毫秒
        long millis = System.currentTimeMillis();
        //long millis = System.nanoTime();
        //加上三位隨機(jī)數(shù)
        Random random = new Random();
        int end3 = random.nextInt(999);
        //如果不足三位前面補(bǔ)0
        String str = millis + String.format("%03d", end3);
        
        return str;
    }
    
    /**
     * 商品id生成
     */
    public static long genItemId() {
        //取當(dāng)前時(shí)間的長(zhǎng)整形值包含毫秒
        long millis = System.currentTimeMillis();
        //long millis = System.nanoTime();
        //加上兩位隨機(jī)數(shù)
        Random random = new Random();
        int end2 = random.nextInt(99);
        //如果不足兩位前面補(bǔ)0
        String str = millis + String.format("%02d", end2);
        long id = new Long(str);
        return id;
    }
    
    public static void main(String[] args) {
        for(int i=0;i< 100;i++)
        System.out.println(genItemId());
    }
}

2.補(bǔ)全TbItem對(duì)象的屬性
3.插入商品表
4.創(chuàng)建一個(gè)TbItemDesc對(duì)象
5.補(bǔ)全TbItemDesc對(duì)象的屬性
6.向商品描述表中插入數(shù)據(jù)
7.TaotaoRestful.ok();

Dao層

向tb_item, tb_item_desc表中插入數(shù)據(jù)
可以使用逆向工程

Service層

參數(shù)：TbItem item,String desc
業(yè)務(wù)邏輯：略辆沦，參加上面
返回值：TaotaoResult
在interface中添加：

image.png

在ItemServiceImpl中

  @Override
    public TaotaoResult addItem(TbItem item, String desc) {
        long id = IDUtils.genItemId();
        item.setId(id);
        item.setCreated(new Date());
        item.setUpdated(new Date());
        item.setStatus((byte) 1);
        tbItemMapper.insert(item);
        TbItemDesc itemDesc = new TbItemDesc();
        itemDesc.setItemDesc(desc);
        itemDesc.setCreated(new Date());
        itemDesc.setUpdated(new Date());
        itemDescMapper.insert(itemDesc);
        return TaotaoResult.ok();
    }

發(fā)布服務(wù)、接收服務(wù)

由于我們這個(gè)不是新的服務(wù)识虚，所以配置文件不用做修改肢扯。

表現(xiàn)層

請(qǐng)求的url：/item/save
參數(shù)：TbItem item,String desc
返回值：TaotaoResult

 @RequestMapping("/item/save")
    @ResponseBody
    public TaotaoResult addItem(TbItem item,String desc) {
        return  itemService.addItem(item,desc);
    }