這款只有 3.6M 的 APP，既是便籤，記事本，備忘錄，又是 Markdown、富文本編輯器
「可樂記」是一款非常簡約卻絲毫不簡陋的記事本類型的應用。您可以建立不同的文件夾來保存不同類型的記事（如工作、購物清單、娛樂等），切換時操作簡單，瀏覽記事內...
1富文本編輯器KindEditor
新增商品中的[商品描述]的實現需要使用KindEditor富文本編輯器，界面如下：
1.1KindEditor使用
第一步：將KindEditor下載下來並放到項目中
第二步：在頁面中添加KindEditor的js和css的引用
第三步：定義textarea控件，富文本編輯器都是基於textarea控件實現的
注意：textarea要設置不可見、給定name值
第四步：使用KindEditor創建富文本編輯器
1.2獲取富文本編輯器的內容
1.3回顯富文本編輯器內容
富文本編輯器對象.html（要回顯的內容）。
2新增商品功能實現
2.1需求
將新增頁面中的信息（商品類目、商品圖片、商品描述等），添加到數據庫中。
2.2頁面原型
2.3表結構
2.4功能分析
1、新增商品需要添加幾張表?
2、表中的數據，是否都可以由頁面傳入？
item-add.jsp：
表現層分析：
請求URL：/item/save
請求參數：TbItem item
$("#itemAddForm").serialize()將表單序列化為key-value形式的字符串，以post 的形式將表單的內容提交。
請求返回值：json格式數據：{status:200}
其中status為200表示成功。需要創建一個pojo對應該json格式數據，教案資料裡面有個TSRJResult對象就可以。
業務邏輯：
1、補全商品ID屬性，需要使用IDUtils工具類
2、補全商品日期屬性。
3、補全商品上下架狀態，默認為1（1：正常 2：下架）。
4、添加到數據庫
5、返回TSRJResult.ok()。
2.5TSRJResult和IdUtils
將TSRJResult.java類拷貝到tsrj-common工程中的cn.tsrjmall.common.po包中。
將IdUtils.java類拷貝到tsrj-common工程中的cn.tsrjmall.common.utils包中。
2.6Dao
將數據添加到tb_item表中，使用逆向工程的代碼
2.7Service
2.7.1代碼
方法參數：TbItem item
方法返回值：TSRJResult
@Override public TSRJResult save(TbItem item) { //設置商品ID item.setId(IDUtils.genItemId()); //設置上下架狀態1-正常，2-下架，3-刪除 item.setStatus((byte) 1); //設置商品日期 Date date = new Date(); item.setCreated(date); item.setUpdated(date); //添加商品信息 mapper.insert(item); //返回結果對象 return TSRJResult.ok(); } |
2.7.2發佈服務
<!-- 商品管理服務接口 --> <dubbo:service interface="cn.tsrjmall.manager.service.ItemService" ref="itemServiceImpl" /> |
2.8Controller
2.8.1引用接口
<!-- 商品服務接口 --> <dubbo:reference interface="cn.tsrjmall.manager.service.ItemService" id="itemService" /> |
2.8.2代碼
請求URL：/item/save
請求參數：TbItem item
$("#itemAddForm").serialize()將表單序列化為key-value形式的字符串，以post 的形式將表單的內容提交。
請求返回值：json格式數據：{status:200}
其中status為200表示成功。需要創建一個pojo對應該json格式數據，教案資料裡面有個TSRJResult對象就可以。
@RequestMapping("/save") @ResponseBody public TSRJResult save(TbItem item) { return service.save(item); } |
2.9部署啟動
1、將tsrj-common和tsrj-manager-interface工程安裝到本地倉庫
2、啟動服務和表現層
相關推薦
好用開源的富文本編輯器WangEditor
純javascript和css開發的 Web富文本編輯器， 輕量、簡潔、易用、開源免費。wangeditor默認效果創建編輯器<!-- 注意， 只需...
推薦中...