diff --git a/controllers/NoteController.go b/controllers/NoteController.go
index ac0cf58..3fd582a 100644
--- a/controllers/NoteController.go
+++ b/controllers/NoteController.go
@@ -206,3 +206,27 @@ func (this *NoteController) Note() {
 	this.Data["NoteColls"] = noteColls
 	this.TplName = "note.html"
 }
+
+func (this *NoteController) NoteApi() {
+	noteService := service.NoteService{}
+	uid := this.GetSession("userid")
+	if uid == nil {
+		this.Redirect("/login", 302)
+		return
+	}
+	noteColls, err := noteService.GetNoteColl(uid.(int64))
+	if err == nil {
+		if len(noteColls) > 0 {
+			for i := 0; i < len(noteColls); i++ {
+				notes, err1 := noteService.GetNoteByPid(noteColls[i].Id)
+				if err1 == nil {
+					noteColls[i].Notes = notes
+				}
+			}
+		}
+	} else {
+		noteColls = make([]*models.NoteColl, 0)
+	}
+	this.Data["json"] = noteColls
+	this.ServeJSON()
+}
\ No newline at end of file
diff --git a/models/Note.go b/models/Note.go
index 0556d9a..63fdbb2 100644
--- a/models/Note.go
+++ b/models/Note.go
@@ -10,6 +10,7 @@ type Note struct {
 	UserId   int64
 	Title    string
 	NoteHtml string    `orm:"type(text)"`
+	NoteVal string    `orm:"type(text)"`
 	Pid      int64
 	Utime    time.Time `orm:"auto_now_add;type(datetime)"`
 }
diff --git a/routers/NoteRouter.go b/routers/NoteRouter.go
index 5797dc0..231056b 100644
--- a/routers/NoteRouter.go
+++ b/routers/NoteRouter.go
@@ -8,6 +8,7 @@ import (
 func init() {
 	beego.Router("/api/note/:id([0-9]+)", &controllers.NoteController{}, "get:Get")
 	beego.Router("/note", &controllers.NoteController{}, "get:Note")
+	beego.Router("/note/api", &controllers.NoteController{}, "get:NoteApi")
 	beego.Router("/api/notecoll/save", &controllers.NoteController{}, "post:SaveNoteColl")
 	beego.Router("/api/notecoll/edit", &controllers.NoteController{}, "post:EditNoteColl")
 	beego.Router("/api/note/save", &controllers.NoteController{}, "post:Save")
diff --git a/views/note.html b/views/note.html
index 7bd2712..a443fc6 100644
--- a/views/note.html
+++ b/views/note.html
@@ -3,28 +3,16 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <meta name="description" content="码农随笔,个人随笔是一个面向IT技术人员,提供个人平时工作总结和在线记录学习笔记,个人技术博客,在线云笔记,码农笔录,最新的技术博客,www.aiprose.com">
+    <meta name="description"
+          content="码农随笔,个人随笔是一个面向IT技术人员,提供个人平时工作总结和在线记录学习笔记,个人技术博客,在线云笔记,码农笔录,最新的技术博客,www.aiprose.com">
     <meta name="keywords" content="码农随笔,个人随笔,博客,个人博客,个人笔记,技术博客,免费云笔记,云笔记,随笔,IT博客,谷歌地图,码农笔录,aiprose">
     <title>我的笔记 - 码农随笔</title>
-    <!--Material Design Iconic Font-->
-    <link rel="stylesheet" href="/static/material-design/css/material-design-iconic-font.css"/>
-    <!--jSide Menu CSS-->
-    <link rel="stylesheet" href="/static/css/jslide/jside-menu.css"/>
-    <!--jSide Skins-->
-    <link rel="stylesheet" href="/static/css/jslide/jside-skins.css"/>
-    <link rel="stylesheet" href="/static/css/jslide/demo-only.css"/>
-
-    <script type="text/javascript" src="/static/js/checkm.js"></script>
-    <link type="text/css" rel="styleSheet" href="/static/css/menu-reset.css"/>
-    <link type="text/css" rel="styleSheet" href="/static/css/menunav.css"/>
-
+    <script type="text/javascript" src="/static/js/vue.min.js"></script>
+    <link rel="stylesheet" href="/static/css/iview.css">
+    <script src="/static/js/iview.min.js"></script>
     <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
-    <script type="text/javascript" src="/static/js/layer.js"></script>
-    <link rel="stylesheet" href="/static/layui/css/layui.css">
-    <script type="text/javascript" src="/static/layui/layui.js"></script>
-    <script src="/static/js/wangEditor.min.js"></script>
-    <!--<link href="https://cdn.bootcss.com/highlight.js/9.15.6/styles/school-book.min.css" rel="stylesheet">-->
-    <link href="https://cdn.bootcss.com/highlight.js/9.15.6/styles/atelier-dune-light.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="/static/editor/css/index.css">
+    <script src="/static/editor/mavon-editor.js"></script>
     <style>
         html, body {
             height: 100%;
@@ -37,186 +25,143 @@
             background-color: #f5f4e9;
         }
 
-        .current-title {
-            color: #ddd;
-            z-index: 5;
-            padding: 4px 30px;
-        }
-
-        .skin-container {
-            position: absolute;
-            right: 5px;
-            top: 0;
+        #vue-app {
+            height: 100%;
         }
 
-        .skin-container select {
-            height: 40px;
-            color: #fff;
-            border: none;
-            background-color: rgba(0, 0, 0, 0);
-        }
-        .skin-container select option{
-            color: #222;
-        }
-        .w-e-toolbar {
-            height: 40px;
-            line-height: 30px;
+        .v-note-wrapper {
+            height: 100%;
+            z-index: 99 !important;
         }
 
-        .w-e-text-container {
-            z-index: 5 !important;
+        .v-note-wrapper .v-note-op {
+            padding-left: 40px !important;
         }
 
-        .w-e-menu {
-            z-index: 6 !important;
+        .ivu-menu-png {
+            z-index: 1000;
+            position: fixed;
+            left: 10px;
+            top: 5px;
         }
 
-        .w-e-menu i {
-            color: #ddd !important;
+        .ivu-drawer-body {
+            scrollbar-width: none; /* firefox */
+            -ms-overflow-style: none; /* IE 10+ */
+            overflow-x: hidden;
+            overflow-y: auto;
         }
 
         ::-webkit-scrollbar {
-            width: 1px;
-            height: 5px;
-        }
-
-        ::-webkit-scrollbar-track-piece {
-            background-color: rgba(0, 0, 0, 0.1);
-            -webkit-border-radius: 6px;
+            display: none; /* Chrome Safari */
         }
     </style>
 </head>
 <body>
-<menu class="menubar">
-    <menuitem>
-        <button class="menu-trigger"></button>
-    </menuitem>
-</menu>
-
-<div class="menu-head">
-	   <span class="layer">
-            <div class="col">
-              <div class="row for-pic">
-               <div class="profile-pic"> <img src="{{.HeadImg}}" alt="Asif Mughal"/></div>
-              </div>
-                 <div class="row for-name">
-                    <h3 title="User Name"> {{.NickName}}</h3>
-                    <span class="tagline"> 私密笔记,别人无法看到 </span>
-                 </div>
-            </div> <!--//col-->
-	  </span>
-</div> <!--//menu-head-->
-
-<nav class="menu-container">
-
-    <ul class="menu-items">
-        <!--{{if eq 0 (.NoteColls|len)}}-->
-        <!--{{end}}-->
-        <li><a href="javascript:void(0)" id="nullNoteColl">新增文件夹</a></li>
-        <li><a href="javascript:void(0)" id="nullNote">新增笔记</a></li>
-        {{range .NoteColls}}
-        <li class="has-sub"><span class="item-icon"> <i class="zmdi zmdi-windows"></i> </span>
-            <span class="dropdown-heading">{{.Title}}</span>
-            <ul value="{{.Id}}" class="sub-menu">
-                {{range .Notes}}
-                <li>
-                    <a href="javascript:void(0)" onclick="noteClick({{.Id}})" value="{{.Id}}">{{.Title}}</a>
-                </li>
-                {{end}}
-            </ul>
-        </li>
-        {{end}}
-    </ul>
-</nav>
-
-<div class="dim-overlay"></div>
-
-<main>
-    <div id="editor" class="editor"></div>
-    <nav class="note-nav">
-        <input type="checkbox" id="joacims-menu"/>
-        <label for="joacims-menu"><span><img src="/static/img/menu.png"
-                                             style="width: 23px;height: 23px;"> </span></label>
-        <nav>
-            <a href="javascript:void(0)" id="saveNote">保存笔记</a>
-            <a href="/" target="_blank">首页</a>
-            <a href="javascript:void(0)" id="newNote">新增笔记</a>
-            <a href="javascript:void(0)" id="newNoteColl">新增文件夹</a>
-            <a href="javascript:void(0)" id="delNote">删除笔记</a>
-            <a href="/me/info" target="_blank">个人中心</a>
-            <a href="/logout">安全退出</a>
-        </nav>
-    </nav>
-
-    <div class="skin-container">
-        <select name="skin-select" class="skin-select">
-            <option value="between-clouds">默认皮肤</option>
-            <option value="red">红色</option>
-            <option value="green">绿色</option>
-            <option value="blue">天空蓝</option>
-            <option value="bnp">紫色</option>
-            <option value="orange">橘色</option>
-            <option value="greenish">墨绿</option>
-            <option value="wood">木材色</option>
-            <option value="flickr">渐变红</option>
-            <option value="fb-messenger">渐变蓝</option>
-            <option value="moonlit">渐变墨绿</option>
-            <option value="park-life">渐变绿</option>
-            <option value="d2f">橙红渐变</option>
-            <option value="steel-man">蓝红渐变</option>
-            <option value="crazy-orange">紫橙渐变</option>
-            <option value="endless-river">水蓝渐变</option>
-        </select>
+<div id="vue-app">
+    <div class="ivu-menu-png" @click="drawer = true">
+        <img src="/static/img/imenu.png" alt="" width="30" height="30">
     </div>
-</main>
-
+    <mavon-editor :externalLink="externalLink" :toolbars="toolbars" v-model="meval"></mavon-editor>
+    <Drawer title="目录选择" placement="left" :closable="false" v-model="drawer" width="400">
+        <i-button type="primary" ghost long>添加文件夹</i-button>
+        <i-button type="success" ghost long style="margin-top: 5px">添加笔记</i-button>
+        <i-menu theme="light" accordion="true" width="380" @on-select="noteSelectHandler">
+            <Submenu :name="item.Id" v-for="(item,key) in notes" :key="key">
+                <template slot="title">
+                    <i class="ivu-icon ivu-icon-ios-paper"></i>
+                    ${item.Title}
+                </template>
+                <menu-item :name="note.Id" v-for="(note,nkey) in item.Notes" :key="nkey">${note.Title}</menu-item>
+            </Submenu>
+        </i-menu>
+    </Drawer>
+</div>
 
 </body>
-<script src="/static/js/jslide/jquery.jside.menu.js"></script>
-<!--<script src="/static/js/jslide/demo-only.js"></script>-->
-<script src="https://cdn.bootcss.com/highlight.js/9.15.6/highlight.min.js"></script>
 <script>
-    var storage=window.localStorage
-    $(document).ready(function () {
-        var skin = storage.getItem("skin");
-        if(skin){
-            $(".skin-select").val(skin);
+    var app = new Vue({
+        delimiters: ['${', '}'],
+        el: '#vue-app',
+        components: {
+            'mavon-editor': MavonEditor.mavonEditor
+        },
+        data: {
+            drawer: true,
+            externalLink: {
+                // markdown_css: function() {
+                //     // 这是你的markdown css文件路径
+                //     return '/markdown/github-markdown.min.css';
+                // },
+                katex_css: function () {
+                    // 这是你的katex配色方案路径路径
+                    return '/katex/katex.min.css';
+                },
+                katex_js: function () {
+                    // 这是你的katex.js路径
+                    return '/katex/katex.min.js';
+                },
+            },
+            toolbars: {
+                bold: true, // 粗体
+                italic: true, // 斜体
+                header: true, // 标题
+                underline: true, // 下划线
+                strikethrough: true, // 中划线
+                mark: true, // 标记
+                superscript: true, // 上角标
+                subscript: true, // 下角标
+                quote: true, // 引用
+                ol: true, // 有序列表
+                ul: true, // 无序列表
+                link: true, // 链接
+                imagelink: true, // 图片链接
+                code: true, // code
+                table: true, // 表格
+                //fullscreen: true, // 全屏编辑
+                readmodel: true, // 沉浸式阅读
+                htmlcode: true, // 展示html源码
+                help: true, // 帮助
+                /* 1.3.5 */
+                undo: true, // 上一步
+                //redo: true, // 下一步
+                //trash: true, // 清空
+                save: true, // 保存（触发events中的save事件）
+                /* 1.4.2 */
+                navigation: true, // 导航目录
+                /* 2.1.8 */
+                alignleft: true, // 左对齐
+                aligncenter: true, // 居中
+                alignright: true, // 右对齐
+                /* 2.2.1 */
+                subfield: true, // 单双栏模式
+                preview: true, // 预览
+                menu: true, // 预览
+            },
+            notes: [],
+            meval: ''
+        },
+        mounted() {
+            var _this = this
+            $.get("/note/api", function (data, status) {
+                _this.notes = data
+            })
+        },
+        methods: {
+            noteSelectHandler(id) {
+                var _this = this
+                this.notes.forEach((item) => {
+                    item.Notes.forEach((note) => {
+                        if (id == note.Id) {
+                            _this.meval = note.NoteVal ? note.NoteVal : note.NoteHtml
+                        }
+                    })
+                })
+            }
         }
-        $.mjSideMenu = $(".menu-container").jSideMenu({
-            jSidePosition: "position-left", //possible options position-left or position-right
-
-            jSideSticky: true, // menubar will be fixed on top, false to set static
-            jSideSkin: skin ? skin : "between-clouds", // to apply custom skin, just put its name in this string
-        });
-
-        $(".skin-select").on('change', function () {
-            var skin = $(".skin-select").val();
-            storage.setItem("skin",skin);
-            $(".menubar").attr('class', skin).addClass("menubar sticky");
-            $(".menu-container").attr('class', skin).addClass("menu-container position-left");
-            $(".menu-head").attr('class', skin).addClass("menu-head position-left");
-        });
-
-    });
+    })
 </script>
 <script>
-    hljs.initHighlightingOnLoad();
-    var E = window.wangEditor
-    var editor = new E('#editor')
-    var note = null
-    editor.customConfig.uploadImgServer = '/file/upload'
-    // 或者 var editor = new E( document.getElementById('editor') )
-    editor.customConfig.uploadImgHooks = {
-        customInsert: function (insertImg, result, editor) {
-            insertImg(result.Data);
-
-        }
-    }
-    editor.create()
-    editor.txt.html("<p>点击右上角菜单新建或者选择笔记</p><p>点击左上角菜单进行新建笔记或者导航</p><span>一定要记得先新建笔记然后在编辑,ctrl+s 快捷键可以快速保存哦</span>");
-    $(".w-e-toolbar").append("<span class='current-title'>新增笔记</span>")
-    document.onkeydown = keyDown;
-
     function keyDown(e) {
         // e.preventDefault();
         var currKey = 0, e = e || event || window.event;
@@ -294,89 +239,6 @@
     }
 
     $(function () {
-        var height = document.documentElement.clientHeight
-        $(".w-e-text-container").height(height - 40 - 3);
-
-        layer.tips('文章列表点我', '#slide-container', {
-            tips: [3, '#78BA32']
-        });
-        $("#saveNote").click(function () {
-            saveNote()
-        })
-
-        $("#newNote").click(function () {
-            layer.open({
-                type: 2,
-                title: '新增笔记',
-                shadeClose: true,
-                shade: 0.8,
-                area: ['360px', '280px'],
-                content: '/iframe/note.html' //iframe的url
-            });
-        })
-        $("#nullNote").click(function () {
-            layer.open({
-                type: 2,
-                title: '新增笔记',
-                shadeClose: true,
-                shade: 0.8,
-                area: ['360px', '280px'],
-                content: '/iframe/note.html' //iframe的url
-            });
-        })
-        function newNoteColl(){
-            layer.prompt({title: '请输入文件夹名称'}, function (val, index) {
-                if (val.trim().length < 3) {
-                    layer.msg('文件夹名称最低三个字哦', function () {
-                    });
-                    layer.close(index);
-                    return
-                }
-                $.post('/api/notecoll/save', {
-                        title: val.trim()
-                    },
-                    function (data) {
-                        if (data.Status == 0) {
-                            layer.close(index);
-                            parent.layer.msg("保存成功", {icon: 6});
-
-                            var thtml = '<li class="has-sub"><span class="item-icon"> <i class="zmdi zmdi-windows"></i> </span>\n' +
-                                '            <span class="dropdown-heading dropdown-heading' + data.Data.Id + '">' + data.Data.Title + '' +
-                                '               <i class="zmdi zmdi-chevron-down arrow"></i></span>\n' +
-                                '            <ul value="' + data.Data.Id + '" class="sub-menu">\n' +
-                                '            </ul>\n' +
-                                '        </li>'
-                            $(".menu-items").append(thtml)
-                            $(".dropdown-heading" + data.Data.Id).click(function () {
-
-                                var n = $(".has-sub").find("span:hover + ul li").length;
-                                var h = $(".has-sub").find("span:hover + ul li").outerHeight();
-                                var dropdown = h * n;
-                                var todrop = $(".has-sub").find("span:hover + ul");
-                                var nodrop = $(".has-sub ul");
-
-                                $(todrop).animate({"height": dropdown}, 100);
-                                $(this).find("i").toggleClass("arrowdown");
-                                if ($(todrop).height() == dropdown) {
-                                    $(todrop).animate({"height": 0}, 100);
-                                }
-
-                                if ($(nodrop).height(dropdown)) {
-                                    $(nodrop).not(todrop).height(0);
-                                    $(".dropdown-heading").not(this).find("i").removeClass("arrowdown");
-                                }
-                            });
-                        }
-                    }, 'json')
-            });
-        }
-        $("#newNoteColl").click(function () {
-            newNoteColl();
-        })
-
-        $("#nullNoteColl").click(function () {
-            newNoteColl();
-        })
 
         $("#delNote").click(function () {
             if (!note || !note.Id) {
