クラウドノートの技術ドキュメント

クラウドノートの技術ドキュメント

ユーザー

エンティティを定義する

public class User implements Serializable {
    
    
    
    private String cn_user_id;
    private String cn_user_name;
    private String cn_user_password;
    private String cn_user_token;
    private String cn_user_nick;
	
    ...
}

データベース内のユーザー関連データに対する操作を定義する

ユーザーマッパー.xml

更新パスワードの定義、ID によるユーザーの検索、名前によるユーザーの検索、ユーザー操作の追加

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.cloudnote.dao.UserDao">
    <!--public User findByName(String name);-->

    <update id="updatePassword" parameterType="string" >
        update cn_user set cn_user_password=#{new_password} where cn_user_id=#{userId}
    </update>

    <select id="findById" parameterType="string" resultType="org.cloudnote.entity.User">
        select * from  cn_user where cn_user_id=#{userId} and cn_user_password=#{last_password}
    </select>
    <select id="findByName" parameterType="string"
            resultType="org.cloudnote.entity.User">
        select * from cn_user where cn_user_name=#{name}
    </select>
    <!-- public void save(User user);-->
    <insert id="save" parameterType="org.cloudnote.entity.User">
        insert  into cn_user
        (cn_user_id,
         cn_user_name,
         cn_user_password,
         cn_user_token,
         cn_user_nick)
         values
         (
         #{cn_user_id},
         #{cn_user_name},
        #{cn_user_password},
        #{cn_user_token},
         #{cn_user_nick}
         )
    </insert>
</mapper>

上記の操作を接続するための Dao レイヤー インターフェイスを作成します

public interface UserDao {
    
    

    public User findByName(String name);

    public void save(User user);
    
    User findById(@Param("userId") String userId, @Param("last_password")String last_password);

    void updatePassword(@Param("userId") String userId, @Param("new_password")String new_password);
}

サービス層に特定の機能を実装する

サービス層では、パスワード変更、ログイン、登録などの機能を実現します。

インターフェース: UserService.java

public interface UserService {
    
    
    public NoteResult checkLogin(String name, String password);

    NoteResult changepassword(String last_password, String new_password,String userId);
    
    public NoteResult regist(String name, String password, String nick);
}

実装: UserServicelmpl.java

@Service("userService")
public class UserServiceImpl implements UserService {
    
    

    @Autowired
    private UserDao userDao;


    @Override
    public NoteResult changepassword(String last_password, String new_password,String userId) {
    
    
        NoteResult result = new NoteResult();
        String last_password_md5 = NoteUtil.md5(last_password);
        String new_password_md5 = NoteUtil.md5(new_password);

        User user = userDao.findById(userId,last_password_md5);
        if(user == null){
    
    
            result.setStatus(1);
            result.setMsg("原始密码错误");
            return result;
        }

        userDao.updatePassword(userId,new_password_md5);
        result.setStatus(0);
        result.setMsg("密码修改成功");
        return result;
    }


    @Override
    public NoteResult checkLogin(String name, String password) {
    
    
        NoteResult result = new NoteResult();
        //根据用户名获取用户
        User user = userDao.findByName(name);
        if(user == null){
    
    
            result.setStatus(1);
            result.setMsg("用户名不存在");
            return result;
        }
        //查验密码
        String md5_password = NoteUtil.md5(password);
        if(!user.getCn_user_password().equals(md5_password)){
    
    
            result.setStatus(2);
            result.setMsg("密码错误");
            return result;
        }
        //用户名密码正确
        result.setStatus(0);
        result.setMsg("用户名密码正确");
        result.setData(user.getCn_user_id());//返回userId
        return result;
    }

    @Override
    public NoteResult regist(String name, String password, String nick) {
    
    
        NoteResult result = new NoteResult();
        //数据检测
        User has_user = userDao.findByName(name);
        if(has_user != null){
    
    
            result.setStatus(1);
            result.setMsg("用户名被占用");
            return result;
        }
        //将参数封装成user对象保存
        User user = new User();
        user.setCn_user_name(name);
        user.setCn_user_nick(nick);
        String md5_password = NoteUtil.md5(password);
        user.setCn_user_password(md5_password);
        user.setCn_user_token(null);
        String userId = NoteUtil.createId();
        user.setCn_user_id(userId);
        userDao.save(user);
        result.setStatus(0);
        result.setMsg("注册成功");
        return result;
    }
}

コントローラー層でメソッドを呼び出し、特定の関数の URL インターフェイスを指定します。

UserLoginController.java

次の URL が定義されています。

/user/changepassword.do: パスワードを変更します

/user/login.do: ログイン

/user/regist.do: 登録します

@Controller
@RequestMapping("/user")
public class UserLoginController {
    
    

    @Autowired
    private UserService userService;

    @RequestMapping("/changepassword.do")
    @ResponseBody
    public NoteResult changepassword(String last_password,String new_password,String userId){
    
    
        NoteResult noteResult = userService.changepassword(last_password, new_password,userId);
        System.out.println("noteResult = " + noteResult);
        return noteResult;
    }

    @RequestMapping("/login.do")
    @ResponseBody
    public NoteResult execute(String name,String password){
    
    
        NoteResult noteResult = userService.checkLogin(name, password);
        System.out.println("noteResult = " + noteResult);
        return noteResult;
    }

    @ResponseBody
    @RequestMapping("/regist.do")
    public NoteResult register(String name,String nick,String password){
    
    
        NoteResult noteResult = userService.regist(name, password,nick);
        return noteResult;
    }
}

ノート

エンティティを定義する

public class NoteBook implements Serializable{
    
    
    
    private String cn_notebook_id;
    private String cn_user_id;
    private String cn_notebook_type_id;
    private String cn_notebook_name;
    private String cn_notebook_desc;
    private Timestamp cn_notebook_createtime;
	
    ...
}

データベース内の NoteBook 関連データに対する操作を定義する

NoteBookMapper.xml

User_id で Notebook を検索して、Notebook を追加する操作を定義します。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.cloudnote.dao.BookDao">
    <insert id="save" parameterType="org.cloudnote.entity.NoteBook">
        insert into cn_notebook
        (cn_notebook_id,
        cn_user_id,
        cn_notebook_type_id,
        cn_notebook_name,
        cn_notebook_desc,
        cn_notebook_createtime)
        values
        (
        #{cn_notebook_id},
        #{cn_user_id},
        #{cn_notebook_type_id},
        #{cn_notebook_name},
        #{cn_notebook_desc},
        #{cn_notebook_createtime}
        )
    </insert>
     <select id="findByUserId" parameterType="string"
             resultType="org.cloudnote.entity.NoteBook">
         select  * from cn_notebook where cn_user_id=#{userId}
     </select>
</mapper>

上記の操作を接続するための Dao レイヤー インターフェイスを作成します

public interface BookDao {
    
    
    public void save(NoteBook noteBook);
    public List<NoteBook> findByUserId(String userId);
}

サービス層に特定の機能を実装する

Service層では、ノートブックの追加とノートブックのロード機能が実装されます。

インターフェース: UserService.java

public interface BookService {
    
    
    public NoteResult addBook(String userId, String bookName);
    public NoteResult loadUserBooks(String userId);
}

実装: UserServicelmpl.java

@Service
public class BookServiceImpl implements BookService {
    
    

    @Autowired
    private BookDao bookDao;

    @Override
    public NoteResult addBook(String userId, String bookName) {
    
    
        NoteResult result = new NoteResult();
        //TODO 检测是否重名
        NoteBook book = new NoteBook();
        book.setCn_user_id(userId);
        book.setCn_notebook_name(bookName);
        String bookId = NoteUtil.createId();
        book.setCn_notebook_id(bookId);
        book.setCn_notebook_type_id("5");//normal
        book.setCn_notebook_desc("");
        Timestamp time = new Timestamp(System.currentTimeMillis());
        book.setCn_notebook_createtime(time);

        bookDao.save(book);//保存笔记本

        result.setStatus(0);
        result.setData(bookId);
        result.setMsg("创建笔记本成功");
        return result;
    }

    @Override
    public NoteResult loadUserBooks(String userId) {
    
    
        NoteResult result = new NoteResult();
        List<NoteBook> books = bookDao.findByUserId(userId);

        result.setStatus(0);
        result.setMsg("加载用户笔记本成功");
        result.setData(books);
        return result;
    }
}

コントローラー層でメソッドを呼び出し、特定の関数の URL インターフェイスを指定します。

UserLoginController.java

次の URL が定義されています。

/notebook/add.do: ノートブックを追加します

/notebook/loadbooks.do: ノートブックをロードします

@Controller
@RequestMapping("notebook")
public class BookController {
    
    

    @Autowired
    private BookService bookService;

    @RequestMapping("/add.do")
    @ResponseBody
    public NoteResult addBook(String userId,String bookName){
    
    
        NoteResult result = bookService.addBook(userId, bookName);
        return result;
    }

    @RequestMapping("loadbooks.do")
    @ResponseBody
    public NoteResult loadBooks(String userId){
    
    
        NoteResult result = bookService.loadUserBooks(userId);
        return result;
    }
}

ノート

エンティティを定義する

public class Note implements Serializable {
    
    
    
    private String cn_note_id;
    private String cn_notebook_id;
    private String cn_user_id;
    private String cn_note_status_id;
    private String cn_note_type_id;
    private String cn_note_title;
    private String cn_note_body;
    private Long cn_note_create_time;
    private Long cn_note_last_modify_time;
	
    ...
}

データベース内の Note 関連データに対する操作を定義する

NoteMapper.xml

Note_id によるノートの更新、ノートの削除、ノートの更新、ID によるノートの検索、Note_id によるノートの検索、ノートの追加操作を定義します。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.cloudnote.dao.NoteDao">
<!-- public int recycle(String id);-->

    <update id="updateByBookId" parameterType="map">
        update cn_note set cn_notebook_id=#{book_id} where cn_note_id=#{note_id}
    </update>


    <update id="recycle" parameterType="string">
        update cn_note
        set
        cn_note_status_id = '2'
        where cn_note_id=#{id}
    </update>

    <update id="update" parameterType="org.cloudnote.entity.Note">
        update cn_note
        set
          cn_note_title = #{cn_note_title},
           cn_note_body = #{cn_note_body},
         cn_note_last_modify_time = #{cn_note_last_modify_time}
         where
         cn_note_id = #{cn_note_id}
    </update>

     <select id="findByBookId" parameterType="string"
             resultType="org.cloudnote.entity.Note">
         select  * from cn_note
         where cn_notebook_id=#{bookId} and  cn_note_status_id='1'
     </select>
<!--Note findById(String id);-->
    <select id="findById" parameterType="string"
            resultType="org.cloudnote.entity.Note">
        select * from cn_note where cn_note_id = #{id}
    </select>
    <insert id="save" parameterType="org.cloudnote.entity.Note">
        insert into cn_note
        (cn_note_id,
         cn_notebook_id,
         cn_user_id,
         cn_note_status_id,
         cn_note_type_id,
         cn_note_title,
         cn_note_body,
         cn_note_create_time,
         cn_note_last_modify_time)
        values
        (#{cn_note_id},
         #{cn_notebook_id},
         #{cn_user_id},
         #{cn_note_status_id},
         #{cn_note_type_id},
         #{cn_note_title},
         #{cn_note_body},
         #{cn_note_create_time},
         #{cn_note_last_modify_time})
    </insert>
</mapper>

上記の操作を接続するための Dao レイヤー インターフェイスを作成します

public interface NoteDao {
    
    

    public int recycle(String id);

    public int update(Note note);

    public List<Note> findByBookId(String bookId);

    Note findById(String id);

    void save(Note note);

    void updateByBookId(Map<String, Object> params);

}

サービス層に特定の機能を実装する

サービス層では、メモの移動、メモの検索、メモの共有、メモの更新、メモの読み込み、メモ内容の読み込み、メモの追加の機能が実現されます。

インターフェース: UserService.java

public interface NoteService {
    
    
    NoteResult moveNote(String noteId, String bookId);

    NoteResult loadShare(String shareId);

    NoteResult searchShare(String keyword);

    NoteResult shareNote(String noteId);

    NoteResult updateNote(String noteId, String noteTitle, String noteBody);

    NoteResult loadBookNotes(String bookId);

    NoteResult loadNoteDetail(String id);

    NoteResult addNote(String bookId, String noteTitle, String userId);
}

実装: UserServicelmpl.java

@Service
public class NoteServiceImpl implements NoteService {
    
    

    @Autowired
    private NoteDao noteDao;

    @Autowired
    private ShareDao shareDao;

    @Override
    public NoteResult moveNote(String noteId, String bookId) {
    
    
        NoteResult result = new NoteResult();
        Map<String,Object> params = new HashMap<>();
        params.put("note_id",noteId);
        params.put("book_id",bookId);
        noteDao.updateByBookId(params);

        result.setStatus(0);
        result.setMsg("转移笔记成功");
        return result;
    }

    @Override
    public NoteResult loadShare(String shareId) {
    
    
        NoteResult result = new NoteResult();
        Share share = shareDao.findById(shareId);
        if(share == null){
    
    
            result.setStatus(1);
            result.setMsg("查询失败");
            return result;
        }
        result.setStatus(0);
        result.setMsg("查询成功");
        result.setData(share);
        return result;
    }

    @Override
    public NoteResult searchShare(String keyword) {
    
    
        NoteResult result = new NoteResult();
        String title = "";
        if(!"".equals(keyword) && keyword != null){
    
    
            title = "%" + keyword + "%";
        }else {
    
    
            title = "%";
        }
        List<Share> list = shareDao.findLikeTitle(title);

        result.setStatus(0);
        result.setMsg("检索成功");
        result.setData(list);
        return result;
    }

    @Override
    public NoteResult shareNote(String noteId) {
    
    
        NoteResult result = new NoteResult();
        //检查笔记是否分享过
        Share has_share = shareDao.findByNoteId(noteId);
        if(has_share != null){
    
    
            result.setStatus(1);
            result.setMsg("该笔记分享过");
            return result;
        }
        //未分享过
        Note note = noteDao.findById(noteId);
        if(note == null){
    
    
            result.setStatus(2);
            result.setMsg("该笔记不存在");
            return result;
        }
        Share share = new Share();
        String shareId = NoteUtil.createId();
        share.setCn_share_id(shareId);
        share.setCn_share_title(note.getCn_note_title());
        share.setCn_share_body(note.getCn_note_body());
        share.setCn_note_id(note.getCn_note_id());
        //将share插入分享表
        shareDao.save(share);
        result.setStatus(0);
        result.setMsg("分享笔记成功");
        return result;
    }

    @Override
    public NoteResult updateNote(String noteId, String noteTitle, String noteBody) {
    
    
        NoteResult result = new NoteResult();
        Note note = new Note();
        note.setCn_note_id(noteId);
        note.setCn_note_title(noteTitle);
        note.setCn_note_body(noteBody);
        note.setCn_note_last_modify_time(System.currentTimeMillis());

        noteDao.update(note);
        result.setStatus(0);
        result.setMsg("保存笔记成功");
        return result;
    }

    @Override
    public NoteResult loadBookNotes(String bookId) {
    
    
        NoteResult result = new NoteResult();
        List<Note> list = noteDao.findByBookId(bookId);
        result.setData(list);
        result.setStatus(0);
        result.setMsg("加载笔记列表成功");
        return result;
    }

    @Override
    public NoteResult loadNoteDetail(String id) {
    
    
        NoteResult result = new NoteResult();
        Note note = noteDao.findById(id);
        if(note == null){
    
    
            result.setStatus(1);
            result.setMsg("找不到笔记信息");

        }
        result.setData(note);
        result.setMsg("查找笔记成功");
        result.setStatus(0);
        return result;
    }
    @Override
    public NoteResult addNote(String bookId, String noteTitle, String userId) {
    
    
        NoteResult result = new NoteResult();
        Note note = new Note();
        note.setCn_notebook_id(bookId);
        note.setCn_user_id(userId);
        note.setCn_note_title(noteTitle);
        note.setCn_note_body("空空如也");
        note.setCn_note_status_id("1");//添加笔记状态
        String noteid = NoteUtil.createId();
        note.setCn_note_id(noteid);
        noteDao.save(note);
        result.setStatus(0);
        result.setMsg("笔记添加成功");
        result.setData(noteid);
        return result;
    }
}

コントローラー層でメソッドを呼び出し、特定の関数の URL インターフェイスを指定します。

UserLoginController.java

次の URL が定義されています。

/note/move.do: ノートを移動します

/note/loadShare.do: 共有メモをロードします

/note//share.do: メモを共有する

/note/update.do: メモを更新します

/note/load.do: メモのコンテンツをロードします

/note/loadnotes.do: メモリストをロードします

/note/add.do: メモを追加します

/note/search.do: メモを検索する

@Controller
@RequestMapping("/note")
public class NoteController {
    
    

    @Autowired
    private NoteService noteService;

    @ResponseBody
    @RequestMapping("/move.do")
    public NoteResult moveNoteCotroller(String noteId,String bookId){
    
    
        NoteResult result = noteService.moveNote(noteId,bookId);
        return result;
    }

    @ResponseBody
    @RequestMapping("loadShare.do")
    public NoteResult loadShareController(String shareId){
    
    
        NoteResult result = noteService.loadShare(shareId);
        return result;
    }

    @ResponseBody
    @RequestMapping("/search.do")
    public NoteResult searchShareCotroller(String keyword){
    
    
        NoteResult result = noteService.searchShare(keyword);
        return result;
    }

    @ResponseBody
    @RequestMapping("/share.do")
    public NoteResult shareNote(String noteId){
    
    
        NoteResult result = noteService.shareNote(noteId);
        return result;
    }

    @ResponseBody
    @RequestMapping("/update.do")
    public NoteResult updateNote(String noteId,String noteTitle,String noteBody){
    
    
        NoteResult result = noteService.updateNote(noteId,noteTitle,noteBody);
        return result;
    }

    @ResponseBody
    @RequestMapping("/load.do")
    public NoteResult loadNoteDetail(String id){
    
    
        NoteResult result = noteService.loadNoteDetail(id);
        return result;
    }

    @ResponseBody
    @RequestMapping("/loadnotes.do")
    public NoteResult loadNotes(String bookId){
    
    
        NoteResult result = noteService.loadBookNotes(bookId);
        return result;
    }
    @RequestMapping("/add.do")
    @ResponseBody
    public NoteResult addNote(String bookId,String noteTitle,String userId){
    
    
        NoteResult result = noteService.addNote(bookId,noteTitle,userId);


        return result;
    }
}

共有

エンティティを定義する

public class Share implements Serializable {
    
    
    
    private String cn_share_id;
    private String cn_share_title;
    private String cn_share_body;
    private String cn_note_id;
	
    ...
}

データベース内の共有関連データに対する操作を定義する

ShareMapper.xml

IDによるクエリの定義、あいまい検索、共有操作の追加

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.cloudnote.dao.ShareDao">
 <!--  public List<Share> findLikeTitle(String title);-->


    <select id="findById" parameterType="string" resultType="org.cloudnote.entity.Share">
        select * from  cn_share where cn_share_id=#{id}
    </select>


    <select id="findLikeTitle" parameterType="string"
            resultType="org.cloudnote.entity.Share">
        select * from cn_share where cn_share_title like #{title}
    </select>

    <insert id="save" parameterType="org.cloudnote.entity.Share">
        insert into cn_share (
        cn_share_id,
        cn_share_title,
        cn_share_body,
        cn_note_id
        )values (
        #{cn_share_id},
        #{cn_share_title},
        #{cn_share_body},
        #{cn_note_id}
        )
    </insert>

    <select id="findByNoteId" parameterType="string" resultType="org.cloudnote.entity.Share">
        select  cn_share_id,  cn_share_title, cn_share_body, cn_note_id from cn_share where cn_note_id=#{cn_note_id}
    </select>

</mapper>

上記の操作を接続するための Dao レイヤー インターフェイスを作成します

public interface ShareDao {
    
    
    public Share findById(String id);

    public List<Share> findLikeTitle(String title);

    public Share findByNoteId(String noteId);

    public void save(Share share);
}

共有などの操作はNote上で実装されます

機能フロー

ユーザー関数

登録

フロントエンド

ログイン.html

regist.jsをインポートする

<script type="text/javascript" src="scripts/regist.js"></script>

登録イベントをコントロールにバインドする

<input type="button" name="" id="regist_button" value='&nbsp注&nbsp册&nbsp' tabindex='9'/>

レジスト.js

log_in.html 内の対応するコントロールのパラメータを取得し、形式を確認し、正しい場合は Ajax リクエストを送信します。

$(function(){
    
    
    $("#regist_button").click(function(){
    
    
        //清除提示信息
        $("#warning_1").hide()
        $("#warning_2").hide()
        $("#warning_3").hide()
        $("#warning_4").hide()

        //1.获取请求参数
        var name = $("#regist_username").val().trim();
        var nick = $("#nickname").val().trim();
        var password = $("#regist_password").val().trim();
        var final_password = $("#final_password").val().trim();
        //console.log(name,nickname,password,final_password)
        //2.检查格式
        //两次密码一致 所有属性非空
        var ok = true
        if(name == ""){
    
    
            ok = false
            //console.log("111111111111")
            $("#warning_1 span").html("用户名为空");
            $("#warning_1").show()
        }
        if(nick == ""){
    
    
            ok = false
            $("#warning_4 span").html("昵称为空");
            $("#warning_4").show()
        }
        if(password == ""){
    
    
            ok = false
            $("#warning_2 span").html("密码为空");
            $("#warning_2").show()
        }else{
    
    
            if(password.length<6){
    
    
                ok = false
                $("#warning_2 span").html("密码需要六位以上");
                $("#warning_2").show()
            }
        }
        if(final_password != password){
    
    
            ok = false
            $("#warning_3 span").html("与密码不一致");
            $("#warning_3").show()
        }
        //3.发送请求
        if(ok){
    
    
            $.ajax({
    
    
                url: "http://localhost:80/user/regist.do",
                type: "post",
                data: {
    
    "name":name,"nick":nick,"password":password},
                dataType: "json",
                success: function(result){
    
    
                    console.log(result)
                    if(result.status == 0){
    
    //注册成功
                        alert(result.msg) //提示
                        $("#back").click() //切换到登录页
                    }else if(result.status == 1){
    
     //用户名已被占用
                        $("#warning_1 span").html(result.msg);
                        $("#warning_1").show()
                    }
                },
                error: function(){
    
    
                    alert("注册失败")
                }

            })
        }


    })
})

後部

バックエンドで受信したAjaxリクエストの登録と処理が行われますが、処理内容はUserに示されているため詳細な説明は省略します。

    @ResponseBody
    @RequestMapping("/regist.do")
    public NoteResult register(String name,String nick,String password){
    
    
        NoteResult noteResult = userService.regist(name, password,nick);
        return noteResult;
    }

ログイン

フロントエンド

ログイン.html

ログイン.jsをインポートする

<script type="text/javascript" src="scripts/login.js"></script>

登録イベントをコントロールにバインドする

<input type="button" name="" id="login" value='&nbsp登&nbsp录&nbsp' tabindex='3'/>

ログイン.js

log_in.html 内の対応するコントロールのパラメータを取得し、形式を確認し、正しい場合は Ajax リクエストを送信します。

$(function () {
    
    
    $("#login").click(function(){
    
    
        //清除提示
        $("#count_span").html("");
        $("#password_span").html("");

        //获取请求参数
        var name = $("#count").val().trim();
        var password = $("#password").val().trim();
        //检查参数格式
        var ok = true;
        if(name == ""){
    
    
            ok = false;
            $("#count_span").html("用户名为空");
        }
        if(password == ""){
    
    
            ok = false;
            $("#password_span").html("密码为空");
        }
        //发送ajax请求
        if(ok){
    
    
            $.ajax({
    
    
                url: "http://localhost:80/user/login.do",
                type: "post",
                data: {
    
    "name":name,"password":password},
                dataType: "json",
                success:function(result){
    
    
                    console.log(result);
                    if(result.status == 0){
    
    //登陆成功
                        var userId = result.data;//获取用户id存入cookie
                        addCookie("userId",userId,0.5);
                        window.location.href = "edit.html";
                    }else if(result.status == 1){
    
    
                        $("#count_span").html(result.msg);

                    }else if(result.status == 2){
    
    
                        $("#password_span").html(result.msg);
                    }
                },
                error:function(XMLHttpRequest,textStatus,errorThrown){
    
    
                    //console.log(XMLHttpRequest.status);
                    //console.log(textStatus.readyState);
                    //console.log(errorThrown);
                    alert("登陆失败，请重试")
                }
            })
        }
    });
})

後部

バックエンドで受信したAjaxリクエストはログイン処理を行いますが、その処理内容はUserに記載されているため詳細は省略します

    @RequestMapping("/login.do")
    @ResponseBody
    public NoteResult execute(String name,String password){
    
    
        NoteResult noteResult = userService.checkLogin(name, password);
        System.out.println("noteResult = " + noteResult);
        return noteResult;
    }

ノートパソコン関連の機能

フロントエンド

編集.html

note.js ファイルをインポートする

<script type="text/javascript" src="scripts/note.js"></script>

登録イベントをコントロールにバインドする

<script type="text/javascript">
			var userId = getCookie("userId");
			if(userId == null){
    
    //用户未登录
				window.location.href = "log_in.html";
			}else {
    
    
				//其他操作
				$(function(){
    
    
					//实例化Ueditor编辑器
					var um = UM.getEditor('myEditor');
					$("#note_list").on("click","li",loadNoteDetail);
					//关闭对话框
					$("#can").on("click",".cancle,.close",closeWindow);
					//添加笔记弹窗
					$("#add_note").click(showAddNoteWindow)
					//确认添加笔记
					$("#can").on("click","#sure_addnote",sureAddNote);
					//保存笔记
					$("#save_note").click(sureUpdateNote)
					//显示笔记菜单
					showNoteMenu();
					//弹出笔记对话框
					$("#note_list").on("click",".btn_delete",showRecycleNoteWindow)
					//确认笔记放入回收站
					$("#can").on("click","#sure_recyclenote",sureRecycleNote)
					//分享笔记  .btn_share
					$("#note_list").on("click",".btn_share",sureShareNote)
					//搜索笔记
					$("#search_note").keydown(sureSearchShare)
  					//返回笔记列表
					$(".return_notelist").click(backNoteList)
					//预览分享笔记内容
					$("#search_list").on("click","li",viewShareNote)
					$("#logout").click(logOut);
					//移动笔记
					$("#note_list").on("click",".btn_move",showMoveNoteWindow);
					//确定移动笔记
					$("#can").on("click","#sure_movenote",function(){
    
    
						//请求参数
						var $noteLi = $("#note_list a.checked").parent();
						var noteId = $noteLi.data("noteId");
						var bookId = $("#moveSelect").val();
						console.log(noteId)
						console.log(bookId)
						//发送ajax
						$.ajax({
    
    
							url:base_url + '/note/move.do',
							type:'post',
							data:{
    
    'noteId':noteId,'bookId':bookId},
							dataType: 'json',
							success: function(result){
    
    
								closeWindow();
								$noteLi.remove();
								alert("移动笔记成功");
							},
							error: function(){
    
    
								alert("移动笔记失败");
							}
						})
					})
					})
			}
		</script>

note.js

上記機能の実装

function viewShareNote(){
    
    

    //将笔记设置为选中状态
    $("#search_list li a").removeClass("checked");
    $(this).find("a").addClass("checked");
    //获取shareId
    var shareId = $(this).data("shareId");
    //发送ajax请求
    $.ajax({
    
    
        url: base_url + "/note/loadShare.do",
        type: 'post',
        dataType: 'json',
        data: {
    
    "shareId":shareId},
        success:function(result){
    
    
            //console.log(result)
            //切换笔记详情页
            checkNoteDetailPage(5)
            var title = result.data.cn_share_title;
            var body = result.data.cn_share_body;
            $("#noput_note_title").html(title);
            $("#noput_note_body").html(body)
        },
        error:function(){
    
    
            alert("加载笔记信息失败")
        }
    })

}

function backNoteList(){
    
    
    showNoteList(2);
    checkNoteDetailPage(3)
}

//切换显示笔记详情页
function checkNoteDetailPage(index){
    
    
    //隐藏所有列表
    $(".col-sm-7:not('#save_button_div')").hide();
    //指定显示列表
    $("#pc_part_"+index).show();
}

//切换列表显示
function showNoteList(index){
    
    
    //隐藏所有列表
    $(".col-xs-3:not('#save_button_div')").hide();
    //指定显示列表
    $("#pc_part_"+index).show();
}

function sureSearchShare(event) {
    
    
    var code = event.keyCode;
    //console.log(code); // enter 13
    if(code == 13){
    
    
        //获取搜索的关键字
        var keyword = $("#search_note").val().trim();
        //发送 ajax  /note/search.do  >> List<Note>
        $.ajax({
    
    
            url: base_url + "/note/search.do",
            type: 'post',
            dataType: 'json',
            data: {
    
    'keyword':keyword},
            success: function(result){
    
    
                //console.log(result);
                //切换显示区
                showNoteList(6)
                //清空该区域
                $("#search_list").empty();
                //循环生成笔记列表
                var notes = result.data;
                for (var i=0;i<notes.length;i++){
    
    
                    var noteTitle = notes[i].cn_share_title;
                    var shareId = notes[i].cn_share_id
                    //拼一个li
                    var s_li = '<li class="online">'
                    s_li += '<a>'
                    s_li += '<i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>'+noteTitle
                    s_li += '</a>'
                    s_li += '</li>';
                    var $li = $(s_li);
                    //绑定shareId
                    $li.data("shareId",shareId);
                    //将li追加到ul中
                    $('#search_list').append($li)
                }
            },
            error: function(){
    
    
                alert("检索笔记失败")
            }
        })
    }
}


function sureShareNote(){
    
    
    var $li = $("#note_list a.checked").parent();
    var noteId = $li.data("noteId");
    //发送ajax请求
    $.ajax({
    
    
        url: base_url + "/note/share.do",
        type: 'post',
        data: {
    
    "noteId":noteId},
        dataType: "json",
        success: function(result){
    
    
            alert(result.msg);
        },
        error: function(){
    
    }
    })

}

function sureRecycleNote(){
    
    

    //获取笔记id
    var $li = $("#note_list a.checked").parent();
    var noteId = $li.data("noteId");
    $.ajax({
    
    
        url: base_url + "/recycle/recycle.do",
        type: "post",
        data: {
    
    "noteId":noteId},
        dataType: "json",
        success: function(result){
    
    
            //console.log(result);
            if(result.status == 0){
    
    
                $li.remove();
                alert(result.msg);
            }
        },
        error: function(){
    
    
            alert("将笔记本放入回收站失败")
        }
    });



}

function showNoteMenu(){
    
    
    $("#note_list").on("click",".btn_slide_down",function(){
    
    
        //alert("11111111111111111")
        //将所有的笔记菜单隐藏
        $("#note_list .note_menu").hide()
        //点击当前的按钮显示菜单
        var $li = $(this).parents("li")
        var $menu = $li.find(".note_menu");
        $menu.slideDown(1000)
    });
    //追加鼠标对笔记菜单的控制
    $("#note_list").on("mouseover",".note_menu",function(){
    
    
        $(this).show();//显示状态
    })
    $("#note_list").on("mouseout",".note_menu",function(){
    
    
        $(this).hide();//隐藏状态
    })
}

function sureUpdateNote(){
    
    
    //检查是否选中笔记
    var $li = $("#note_list li a.checked").parent();
    if($li.length == 0){
    
    
        alert("请选择要保存的笔记")
    }else {
    
    
        //获取请求参数
        var noteId = $li.data("noteId");
        var noteTitle = $("#input_note_title").val().trim();
        var noteBody = um.getContent();
        //发送ajax请求
        $.ajax({
    
    
            url: base_url + "/note/update.do",
            dataType: "json",
            data: {
    
    "noteId":noteId,"noteTitle":noteTitle,"noteBody":noteBody},
            type: "post",
            success: function(result){
    
    
                console.log(result)
                if(result.status == 0){
    
    
                    //更新笔记li的名称
                    var str  = '<i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>'+ noteTitle +
                        '<button type="button" class="btn btn-default btn-xs btn_position btn_slide_down">' +
                        '<i class="fa fa-chevron-down"></i></button>'
                    $li.find("a").html(str);
                    //提示成功
                    alert(result.msg);
                }
            },
            error:function(){
    
    
                alert("保存笔记失败");
            }
        })
    }
}

function sureAddNote(){
    
    

    //console.log("111111111111");
    var noteTitle = $("#input_note").val().trim();
    //笔记本id
    var $li = $("#book_list li a.checked").parent();
    var bookId = $li.data("bookId");
    //console.log(noteTitle,bookId);
    //发送ajax
    $.ajax({
    
    
        url: base_url + "/note/add.do",
        type: "post",
        data: {
    
    "bookId":bookId,"noteTitle":noteTitle,"userId":userId},
        dataType: "json",
        success: function(result){
    
    
            if(result.status == 0){
    
    
                closeWindow();
                createNoteLi(noteTitle,result.data);
                alert(result.msg);
            }
        },
        error:function(){
    
    
            alert("笔记添加失败")
        }
    })

}

function loadNoteDetail(){
    
    

    //将笔记设置为选中状态
    $("#note_list li a").removeClass("checked");
    $(this).find("a").addClass("checked");

    //获取请求参数
    var noteId = $(this).data("noteId");
    //发送ajax
    $.ajax({
    
    
        url: base_url + "/note/load.do",
        type: "post",
        data: {
    
    "id": noteId},
        dataType: "json",
        success:function(result){
    
    
            //console.log(result);
            if(result.status == 0){
    
    
                var noteTitle = result.data.cn_note_title;
                var noteBody = result.data.cn_note_body;
                //设置标题
                $("#input_note_title").val(noteTitle);
                //设置内容
                um.setContent(noteBody);
            }
        },
        error: function(){
    
    
            alert("显示笔记详情失败")

        }
    });

}
//添加笔记li
function createNoteLi(noteTitle,noteId){
    
    
    var s_li = '<li class="online">'
    s_li += '<a>'
    s_li += '<i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>'+noteTitle
    s_li += '<button type="button" class="btn btn-default btn-xs btn_position btn_slide_down"><i class="fa fa-chevron-down"></i></button>'
    s_li += '</a>'
    s_li += '<div class="note_menu" tabindex="-1">'
    s_li += '<dl>'
    s_li += '<dt><button type="button" class="btn btn-default btn-xs btn_move" title="移动至..."><i class="fa fa-random"></i></button></dt>'
    s_li += '<dt><button type="button" class="btn btn-default btn-xs btn_share" title="分享"><i class="fa fa-sitemap"></i></button></dt>'
    s_li += '<dt><button type="button" class="btn btn-default btn-xs btn_delete" title="删除"><i class="fa fa-times"></i></button></dt>'
    s_li += '</dl>'
    s_li += '</div>'
    s_li += '</li>';
    //将noteId绑定到li上
    var $li = $(s_li);
    $li.data("noteId",noteId);
    //将li追加到ul中
    $("#note_list").append($li);
}

function loadBookNotes(){
    
    
    //将点击的笔记本li设置为选中状态
    $("#book_list li a").removeClass("checked");
    $(this).find("a").addClass("checked");
    //获取请求参数 bookId
    var bookId = $(this).data("bookId");
    //console.log(bookId);
    //发送ajax请求
    $.ajax({
    
    
        url: base_url + "/note/loadnotes.do",
        type: "post",
        data: {
    
    "bookId":bookId},
        dataType: "json",
        success:function(result){
    
    
            //console.log(result);
            if(result.status == 0){
    
    
                var notes = result.data;//获取笔记数组
                //清除原有笔记列表
                $("#note_list").empty();
                for(var i=0;i<notes.length;i++){
    
    
                    var noteTitle = notes[i].cn_note_title;
                    var noteId = notes[i].cn_note_id;
                    //拼接成笔记li
                    createNoteLi(noteTitle,noteId)
                }
            }
        },
        error:function(){
    
    
            alert("添加笔记列表失败")

        }
    });
}

後部

フロントエンドに対応するURLに従って対応する処理を実行

    @RequestMapping("/add.do")
    @ResponseBody
    public NoteResult addBook(String userId,String bookName){
    
    
        NoteResult result = bookService.addBook(userId, bookName);
        return result;
    }

    @RequestMapping("loadbooks.do")
    @ResponseBody
    public NoteResult loadBooks(String userId){
    
    
        NoteResult result = bookService.loadUserBooks(userId);
        return result;
    }

ノート関連機能

フロントエンド

編集.html

notebook.js ファイルをインポートする

		<script type="text/javascript" src="scripts/notebook.js"></script>

登録イベントをコントロールにバインドする

<script type="text/javascript">
			var userId = getCookie("userId");
			if(userId == null){
    
    //用户未登录
				window.location.href = "log_in.html";
			}else {
    
    
				//其他操作
				$(function(){
    
    
					//实例化Ueditor编辑器
					var um = UM.getEditor('myEditor');
					//发送ajax 请求加载笔记本列表
					loadUserBooks();
					//点击笔记本添加笔记列表
					$("#book_list").on("click","li",loadBookNotes);
					//弹出添加笔记本对话框
					$("#add_notebook").click(showAddBookWindow);
					//关闭对话框
					$("#can").on("click",".cancle,.close",closeWindow);
					//确认添加笔记本
					$("#can").on("click","#sure_addbook",sureAddBook);})
			}</script>

ノートブック.js

上記機能の実装

function sureAddBook(){
    
    
    var bookName = $("#input_notebook").val().trim();
    //console.log(bookName);
    if(bookName == ""){
    
    
        alert("笔记本名称不能为空")
        return;
    }
    //发送ajax请求
    $.ajax({
    
    
        url: base_url + "/notebook/add.do",
        type: "post",
        data: {
    
    "userId":userId,"bookName":bookName},
        dataType: "json",
        success: function(result){
    
    
            //console.log(result);
            if(result.status == 0){
    
    
                closeWindow();
                //添加一个笔记本li
                var bookId = result.data;
                createBookLi(bookName,bookId)
                alert(result.msg);
            }
        },
        error:function(){
    
    
            alert("添加笔记本失败");
        }
    })
}

//追加一个笔记本li
function createBookLi(bookName,bookId){
    
    
    var s_li = '<li class="online">'
    s_li += '<a>'
    s_li += '<i class="fa fa-book" title="online" rel="tooltip-bottom">'
    s_li += '</i>' + bookName
    s_li += '</a>'
    s_li += '</li>';
    //将bookId绑定
    var $li = $(s_li);
    $li.data("bookId",bookId);
    //将bookId追加到ul
    $("#book_list").append($li);
}

function loadUserBooks(){
    
    
    $.ajax({
    
    
        url: base_url + "/notebook/loadbooks.do",
        type: "post",
        data: {
    
    "userId":userId},
        dataType: "json",
        success: function(result){
    
    
            var books = result.data;
            //console.log(result)
            for(var i=0;i<books.length;i++){
    
    
                bookName = books[i].cn_notebook_name;
                bookId = books[i].cn_notebook_id;
                //拼接一个li
                createBookLi(bookName,bookId)
            }
        },
        error: function(){
    
    
            alert("加载笔记列表失败");
        }
    });
}

後部

フロントエンドに対応するURLに従って対応する処理を実行

@ResponseBody
    @RequestMapping("/move.do")
    public NoteResult moveNoteCotroller(String noteId,String bookId){
    
    
        NoteResult result = noteService.moveNote(noteId,bookId);
        return result;
    }

    @ResponseBody
    @RequestMapping("loadShare.do")
    public NoteResult loadShareController(String shareId){
    
    
        NoteResult result = noteService.loadShare(shareId);
        return result;
    }

    @ResponseBody
    @RequestMapping("/search.do")
    public NoteResult searchShareCotroller(String keyword){
    
    
        NoteResult result = noteService.searchShare(keyword);
        return result;
    }

    @ResponseBody
    @RequestMapping("/share.do")
    public NoteResult shareNote(String noteId){
    
    
        NoteResult result = noteService.shareNote(noteId);
        return result;
    }

    @ResponseBody
    @RequestMapping("/update.do")
    public NoteResult updateNote(String noteId,String noteTitle,String noteBody){
    
    
        NoteResult result = noteService.updateNote(noteId,noteTitle,noteBody);
        return result;
    }

    @ResponseBody
    @RequestMapping("/load.do")
    public NoteResult loadNoteDetail(String id){
    
    
        NoteResult result = noteService.loadNoteDetail(id);
        return result;
    }

    @ResponseBody
    @RequestMapping("/loadnotes.do")
    public NoteResult loadNotes(String bookId){
    
    
        NoteResult result = noteService.loadBookNotes(bookId);
        return result;
    }
    @RequestMapping("/add.do")
    @ResponseBody
    public NoteResult addNote(String bookId,String noteTitle,String userId){
    
    
        NoteResult result = noteService.addNote(bookId,noteTitle,userId);


        return result;
    }