From 9604c23a6bec54f070191aa4e30425df38652469 Mon Sep 17 00:00:00 2001
From: "mail_yanpeng@163.com" <yyyq94581017>
Date: Wed, 26 Aug 2020 17:56:57 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8D=9A=E5=AE=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 controllers/CatController.go  |  22 +++
 controllers/PageController.go |  26 ---
 routers/CatRouter.go          |  10 ++
 routers/router.go             |   2 -
 views/T.footer.tpl            |   2 +-
 views/T.header.tpl            |   2 +-
 views/editblog.html           | 291 +++++++++++++++++++++++++---------
 7 files changed, 248 insertions(+), 107 deletions(-)
 create mode 100644 controllers/CatController.go
 create mode 100644 routers/CatRouter.go

diff --git a/controllers/CatController.go b/controllers/CatController.go
new file mode 100644
index 0000000..c6507cd
--- /dev/null
+++ b/controllers/CatController.go
@@ -0,0 +1,22 @@
+package controllers
+
+import (
+	"beeblog/models"
+	"beeblog/service"
+	"github.com/astaxie/beego"
+)
+
+type CatController struct {
+	beego.Controller
+}
+
+func (this *CatController) List() {
+	catService := service.CategoryService{}
+	cats, err := catService.GetCats()
+	if err != nil {
+		this.Data["json"] = models.ReurnError(500, "")
+		this.ServeJSON()
+	}
+	this.Data["json"] = models.ReurnData("ok", cats)
+	this.ServeJSON()
+}
diff --git a/controllers/PageController.go b/controllers/PageController.go
index ea213ae..87f2560 100644
--- a/controllers/PageController.go
+++ b/controllers/PageController.go
@@ -10,16 +10,6 @@ type PageController struct {
 	beego.Controller
 }
 
-func (this *PageController) Blog() {
-	catService := service.CategoryService{}
-	cats, err := catService.GetCats()
-	if err != nil {
-		this.Redirect("/404", 302)
-		return
-	}
-	this.Data["Cats"] = cats
-	this.TplName = "iframe/blog.html"
-}
 
 func (this *PageController) IframeUser() {
 	userService := service.UserService{}
@@ -38,22 +28,6 @@ func (this *PageController) IframeUser() {
 	return
 }
 
-func (this *PageController) IframeNote() {
-	noteService := service.NoteService{}
-	uid := this.GetSession("userid")
-	if uid == nil {
-		this.Data["IsLogin"] =  false
-		this.Data["NoteColl"] = []string{}
-	}else {
-		this.Data["IsLogin"] = true
-		noteColls,err:=noteService.GetNoteColl(uid.(int64))
-		if err== nil {
-			this.Data["NoteColl"] = noteColls
-		}
-	}
-	this.TplName = "iframe/note.html"
-}
-
 func (this *PageController) UsPage() {
 	this.Data["IsUs"] = true
 	this.Data["UserId"] = this.GetSession("userid")
diff --git a/routers/CatRouter.go b/routers/CatRouter.go
new file mode 100644
index 0000000..b6f1675
--- /dev/null
+++ b/routers/CatRouter.go
@@ -0,0 +1,10 @@
+package routers
+
+import (
+	"beeblog/controllers"
+	"github.com/astaxie/beego"
+)
+
+func init() {
+	beego.Router("/api/cats", &controllers.CatController{}, "get:List")
+}
diff --git a/routers/router.go b/routers/router.go
index 36bf7d2..1f5be24 100644
--- a/routers/router.go
+++ b/routers/router.go
@@ -11,9 +11,7 @@ func init() {
 	beego.Router("/500", &controllers.PageController{},"get:ServerError")
 	beego.Router("/map", &controllers.MapController{})
 	beego.Router("/us", &controllers.PageController{},"get:UsPage")
-	beego.Router("/iframe/note", &controllers.PageController{},"get:IframeNote")
 	beego.Router("/iframe/user", &controllers.PageController{},"get:IframeUser")
-	beego.Router("/iframe/blog", &controllers.PageController{},"get:Blog")
 	beego.Router("/file/upload", &controllers.FileController{}, "post:Upload")
 	beego.Router("/himg/upload", &controllers.FileController{}, "post:HeadImgUpload")
 	//beego.Include(&controllers.PageController{})
diff --git a/views/T.footer.tpl b/views/T.footer.tpl
index 811ea00..8a45ff7 100644
--- a/views/T.footer.tpl
+++ b/views/T.footer.tpl
@@ -3,7 +3,7 @@
     <div style="flex: 1">
         <div class="footer-friend">
             <a href="https://gitea.aiprose.com/nelson" target="_blank" style="padding: 0 5px">码农笔录Git仓库</a>
-            <a href="http://pan.aiprose.com/" target="_blank" style="padding: 0 5px">码农笔录网盘</a>
+{{/*            <a href="http://pan.aiprose.com/" target="_blank" style="padding: 0 5px">码农笔录网盘</a>*/}}
             <a href="http://maven.aiprose.com/nexus" target="_blank" style="padding: 0 5px">maven私服</a>
             <a href="https://blog.csdn.net/yp090416" target="_blank" style="padding: 0 5px">码农笔录-CSDN</a>
             <a href="https://www.jianshu.com/u/6baf4cdc7ce1" target="_blank" style="padding: 0 5px">码农笔录-简书</a>
diff --git a/views/T.header.tpl b/views/T.header.tpl
index 1416e9e..d13c483 100644
--- a/views/T.header.tpl
+++ b/views/T.header.tpl
@@ -17,6 +17,6 @@
     <link rel="stylesheet" href="/static/layui/css/layui.css">
     <script type="text/javascript" src="/static/js/checkm.js"></script>
     <script type="text/javascript" src="/static/layui/layui.js"></script>
-    <script type="text/javascript" src="https://tajs.qq.com/stats?sId=66471694" charset="UTF-8"></script>
+{{/*    <script type="text/javascript" src="https://tajs.qq.com/stats?sId=66471694" charset="UTF-8"></script>*/}}
 
 {{end}}
\ No newline at end of file
diff --git a/views/editblog.html b/views/editblog.html
index 5df2b40..386dee2 100644
--- a/views/editblog.html
+++ b/views/editblog.html
@@ -1,63 +1,235 @@
 {{template "header" .}}
 <meta name="keywords" content="{{.Blog.Title}}">
 <title>{{.Blog.Title}} - 码农随笔</title>
-<script src="/static/js/wangEditor.min.js"></script>
+<link rel="stylesheet" href="/static/editor/css/index.css">
+<script src="/static/editor/mavon-editor.js"></script>
+<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
 </head>
+<style>
+    .modal_form{
+        display: flex;
+        margin-bottom: 10px;
+    }
+    .modal_form .span-lable{
+        display: inline-block;
+        width: 100px;
+        height: 30px;
+        line-height: 30px;
+    }
+</style>
 <body>
-<div class="root-container">
+<div class="root-container" id="vue-app">
     <div class="blog-title">
+        <i-input type="text" v-model="blog.Title" placeholder="请输入文章标题"/>
         <input type="text" id="blog-title" placeholder="请输入文章标题" value="{{.Blog.Title}}">
-        <button type="button" id="newBtn"  class="layui-btn layui-btn-radius layui-btn-danger layui-btn-sm " style="border-radius: 12px">
+        <button type="button" id="newBtn" class="layui-btn layui-btn-radius layui-btn-danger layui-btn-sm "
+                style="border-radius: 12px">
             发布文章
         </button>
     </div>
-    <div id="editor" class="editor">
+    <mavon-editor :externalLink="externalLink" :toolbars="toolbars" v-model="blog.BlogValue" @imgAdd="$imgAdd"
+                  @save="saveHandler" @change="changeHandler" ref=md></mavon-editor>
 
-    </div>
+    <Modal
+            v-model="showModal"
+            title="发布文章"
+            :mask-closable="false">
+        <div class="modal_form">
+            <span class="span-lable">开发语言：</span>
+            <i-select v-model="blog.CategoryId" style="width:300px">
+                <i-option v-for="item in cats" :value="item.Id" :key="item.Id">${ item.Title }</i-option>
+            </i-select>
+        </div>
+        <div class="modal_form">
+            <span class="span-lable">文章标签：</span>
+            <i-button type="primary" ghost size="small" v-for="item,index in lables" :key="index" style="margin-left: 5px">${item.Title}
+                <Icon type="ios-close-circle-outline" @click="delLabel(index)"/>
+            </i-button>
+        </div>
+        <div class="modal_form">
+            <span class="span-lable">开发语言：</span>
+            <div style="display: inline-block;width: 241px">
+                <i-input type="text" v-model="lableTitle" placeholder="请输入标签名称"/>
+            </div>
+            <i-button type="primary" ghost @click="addLable">添加</i-button>
+        </div>
+        <div slot="footer">
+            <i-button type="error" size="large" long :loading="loading" @click="okHandler">保存</i-button>
+        </div>
+    </Modal>
 </div>
 </body>
-<script>
-    var tobj = {}
-    var storage = window.localStorage
-    var E = window.wangEditor
-    var editor = new E('#editor')
-    editor.customConfig.uploadImgServer = '/file/upload'
-    // 或者 var editor = new E( document.getElementById('editor') )
-    editor.customConfig.uploadImgHooks = {
-        customInsert: function (insertImg, result, editor) {
-            insertImg(result.Data);
-        }
+<style>
+    .v-note-wrapper {
+        height: 100%;
+        z-index: 99 !important;
     }
-    editor.create()
-    document.onkeydown = keyDown;
+</style>
+<script>
+    var app = new Vue({
+        delimiters: ['${', '}'],
+        el: '#vue-app',
+        components: {
+            'mavon-editor': MavonEditor.mavonEditor
+        },
+        data: {
+            loading: false,
+            lableTitle: '',
+            cats: [],
+            lables: [],
+            showModal: false,
+            blog: {
+                Title: '',
+                BlogValue: '',
+                BlogHtml: ''
+            },
+            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, // 预览
+            },
+            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';
+                },
+            },
+        },
+        created() {
+            this.blog = {{.Blog}}
+            if (!this.blog.BlogValue && this.blog.BlogHtml) {
+                this.blog.BlogValue = this.blog.BlogHtml
+            }
+            this.lables = this.blog.Lables
+            this.getCatas()
+        },
+        methods: {
+            okHandler (){
+                this.loading = true
+                this.loading = false
+                $.post('/api/blog/edit', tobj,
+                    function (data) {
+                        if (data.Status == 0) {
+                            storage.removeItem("blogHtml");
+                            storage.removeItem("blogTitle");
+                            layer.msg("保存成功", {icon: 6});
+                            callback(true)
+                            window.location.href = "/blog/{{.Blog.Id}}"
+                        } else if (data.Status == 401) {
+                            window.location.href = "login"
+                        } else if (data.Status == 500) {
+                            layer.msg("保存失败", {icon: 6});
+                            callback(false)
+                        }
 
-    function keyDown(e) {
-        var currKey = 0, e = e || event || window.event;
-        currKey = e.keyCode || e.which || e.charCode;
-        if (currKey == 83 && (e.ctrlKey || e.metaKey)) {
-            saveBlog()
-            return
-        }
+                    }, 'json')
+            },
+            addLable(){
+                if(!this.lableTitle){
+                    this.$Notice.warning({
+                        title: '请先输入标签名称',
+                    })
+                    return
+                }
+                var tobj = {}
+                tobj.Title = this.lableTitle
+                this.lables.push(tobj)
+                this.lableTitle = ''
+            },
+            delLabel(index){
+                this.lables.splice(index,1)
+            },
+            getCatas(){
+                var _this = this
+                $.get('/api/cats',
+                    function (data) {
+                        if (data.Status == 0) {
+                            _this.cats = data.Data
+                        } else if (data.Status == 401) {
+                            window.location.href = "login"
+                        } else if (data.Status == 500) {
+                        }
 
-    }
+                    }, 'json')
+            },
+            $imgAdd(pos, $file) {
+                var _this = this
+                // 第一步.将图片上传到服务器.
+                var formdata = new FormData();
+                formdata.append('image', $file);
+                axios({
+                    url: '/file/upload',
+                    method: 'post',
+                    data: formdata,
+                    headers: {'Content-Type': 'multipart/form-data'},
+                }).then((resp) => {
+                    _this.$refs.md.$img2Url(pos, resp.data.Data);
+                })
+            },
+            changeHandler(value, render) {
+                this.blog.BlogValue = value
+                this.blog.BlogHtml = render
+                // var jsonStr = JSON.stringify(this.blog);
+                // window.localStorage.setItem("blog", jsonStr)
+            },
+            saveHandler(value, render) {
+                if (this.blog.Title.trim().length < 3) {
+                    this.$Notice.warning({
+                        title: '文章标题最少三个字',
+                    })
+                    return
+                }
+                if (this.blog.BlogValue.trim().length == 0) {
+                    this.$Notice.warning({
+                        title: '文章内容不能为空哦',
+                    })
+                    return
+                }
+                this.showModal = true
+            },
+        }
+    })
 
     function saveBlog() {
-        var title = $("#blog-title").val();
-        if (title.trim().length < 3) {
-            layer.msg('文章标题最少三个字', function () {
-            });
-            return
-        }
-        tobj.title = $("#blog-title").val();
-        if (editor.txt.html().trim().length == 0) {
-            layer.msg('文章内容不能为空哦', function () {
-            });
-            return
-        }
-        tobj.blogHtml = editor.txt.html();
-        tobj.blogDesc = editor.txt.text().substring(0,200)
-        storage.setItem("blogHtml", tobj.blogHtml);
-        storage.setItem("blogTitle", tobj.title);
         layer.open({
             type: 2,
             title: '发布文章',
@@ -67,40 +239,5 @@
             content: '/iframe/blog.html?id={{.Blog.Id}}' //iframe的url
         });
     }
-
-    $(function () {
-        editor.txt.html({{.Blog.BlogHtml}});
-        tobj.id = {{.Blog.Id}};
-        tobj.catory = {{.Blog.CategoryId}};
-        tobj.labels = []
-        console.log({{.Blog.Lables}})
-    {{range .Blog.Lables}}
-        tobj.labels.push({{.Title}})
-    {{end}}
-        var height = document.documentElement.clientHeight
-        $(".w-e-text-container").height(height - 50 - 40 - 1);
-        $("#newBtn").click(function () {
-            saveBlog()
-        })
-    })
-
-    function saveBlogCallback(callback) {
-        $.post('/api/blog/edit', tobj,
-                function (data) {
-                    if (data.Status == 0) {
-                        storage.removeItem("blogHtml");
-                        storage.removeItem("blogTitle");
-                        layer.msg("保存成功", {icon: 6});
-                        callback(true)
-                        window.location.href = "/blog/{{.Blog.Id}}"
-                    } else if (data.Status == 401) {
-                        window.location.href = "login"
-                    } else if (data.Status == 500) {
-                        layer.msg("保存失败", {icon: 6});
-                        callback(false)
-                    }
-
-                }, 'json')
-    }
 </script>
 </html>
\ No newline at end of file