02 - Unit05：加载笔记列表

加载笔记列表

发送Ajax请求

• 绑定发送事件

• 获取参数: bookId

• 发送请求: /note/list.do

事件绑定

    $(function(){
    Ajax请求发送-->服务器处理-->回调处理
    $("#book_ul li").click(fn())
    父元素.on("事件名","元素",function(){});
    })

服务器处理

• NoteController.listNotes(bookId)

• NoteService.listNotes(bookId)

• NoteDao.List<Map<String,Object>> findByBookId(bookId)

• Mapper: resultType="Map"

  select cn_note_id as id,cn_note_title as title
  from cn_note
  where cn_note_status_id='1' and cn_notebook_id=#{bookId}
  

Ajax回调处理

• success:

遍历集合数据,将li元素加载到笔记ul中

• error:

提示:笔记列表加载失败

UEdit 富文本编辑器

如何使用

• 引入JS脚本

  <!-- Ueditor编辑器JS -->
  <script type="text/javascript" charset="utf-8" src="scripts/ue/umeditor.config.js"></script>
  <script type="text/javascript" charset="utf-8" src="scripts/ue/umeditor.min.js"></script>
  <script type="text/javascript" src="scripts/ue/lang/zh-cn.js"></script>
  

• 实例化UE

  //实例化Ueditor编辑器
  var um = UM.getEditor('myEditor');
  

• 通过实例ID,确认控件位置

  <script type="text/plain" id="myEditor" style="width:100%;height:400px;">
  </script>
  

• 常用的方法

  1. um.setContent(); 将数据显示在编辑区域

  2. um.getContent(); 获取编辑区域显示的数据

作业:

1. 重写笔记加载需求(重点)

2. 加载笔记数据的需求(扩展)