zoukankan      html  css  js  c++  java
  • 02

    加载笔记列表

    发送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="100%;height:400px;">
      </script>
      
    • 常用的方法

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

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

    作业:

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

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

  • 相关阅读:
    TensorFlow简易学习[3]:实现神经网络
    TensorFlow简易学习[2]:实现线性回归
    TensorFlow简易学习[1]:基本概念和操作示例
    [转]概念:结构化数据、半结构化数据、非结构数据
    SIP简介
    Flask
    vue项目中的常见问题
    为什么java中用枚举实现单例模式会更好
    20道Java面试必考题
    Java面试题(二)
  • 原文地址:https://www.cnblogs.com/tangshengwei/p/6582804.html
Copyright © 2011-2022 走看看