beeblog/views/newblog.html

{{template "header" .}}
<meta name="keywords" content="码农随笔,个人随笔,博客,个人博客,个人笔记,技术博客,免费云笔记,云笔记,随笔,IT博客,谷歌地图,码农笔录,www.aiprose.com,aiprose.com,aiprose">
<title>发布博客 - 码农随笔</title>
<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>
<body>
<div class="root-container" id="vue-app">
    <div class="blog-title">
        <el-input v-model="blog.Title"  placeholder="请输入文章标题"></el-input>
    </div>
    <mavon-editor :externalLink="externalLink" :toolbars="toolbars" v-model="blog.BlogValue" @imgAdd="$imgAdd"
                  @save="saveHandler" @change="changeHandler" ref=md></mavon-editor>
    <el-dialog title="发布文章" :visible.sync="showModal" width="500px">
        <div class="modal_form">
            <span class="span-lable">文章分类：</span>
            <el-select v-model="blog.CategoryId" placeholder="请选择文章分类" style="width: 310px">
                <el-option v-for="item in cats" :key="item.Id" :label="item.Title" :value="item.Id"/>
            </el-select>
        </div>
        <div class="modal_form">
            <span class="span-lable">文章标签：</span>
            <el-tag v-for="item,index in lables" :key="index" closable @close="delLabel(index)" style="margin-right: 3px">
                ${item.Title}
            </el-tag>
        </div>
        <div class="modal_form">
            <span class="span-lable">添加标签：</span>
            <div style="display: inline-block;width: 241px">
                <el-input v-model="lableTitle" placeholder="请输入标签名称"/>
            </div>
            <el-button type="primary" plain @click="addLable">添加</el-button>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="showModal = false">取 消</el-button>
            <el-button type="primary" :loading="loading" @click="okHandler">保存</el-button>
        </span>
    </el-dialog>
</div>
</body>
<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: '',
                CategoryId: ''
            },
            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: {
                katex_css: function () {
                    // 这是你的katex配色方案路径路径
                    return '/katex/katex.min.css';
                },
                katex_js: function () {
                    return '/katex/katex.min.js';
                },
            },
        },
        created() {
            let item = window.localStorage.getItem("blogValue");
            if(item){
                this.blog.BlogValue = item
            }
            let itemTitle = window.localStorage.getItem("blogTilte");
            if(itemTitle){
                this.blog.Title = itemTitle
            }
            this.getCatas()
            
        },
        mounted: function () {
            var _this = this
            this.$refs.md.$on("imgAdd",(pos, $file)=>{
                _this.$imgAdd(pos, $file)
            })
        },
        methods: {
            okHandler (){
                const _this =this
                if(!this.blog.CategoryId || this.blog.CategoryId==0){
                    this.$message.error('文章分类必须选择')
                    return
                }
                this.loading = true
                var tobj = {}
                tobj.title = this.blog.Title
                window.localStorage.setItem("blogTilte",this.blog.Title);
                tobj.blogHtml = this.blog.BlogHtml
                var regex = /(<([^>]+)>)/ig
                tobj.blogDesc = tobj.blogHtml.replace(regex,"").substring(0,200)
                tobj.catory = this.blog.CategoryId
                tobj.blogValue = this.blog.BlogValue
                tobj.labels = []
                this.lables.forEach(el=>{
                    tobj.labels.push(el.Title)
                })
                $.post('/api/blog/new', tobj,
                    function (data) {
                        _this.loading = false
                        if (data.Status == 0) {
                            window.localStorage.removeItem("blogValue");
                            window.localStorage.removeItem("blogTilte");
                            _this.$message.success('保存成功')
                            window.location.href = "/blog/"+ data.Data
                        } else if (data.Status == 401) {
                            window.location.href = "/login"
                        } else if (data.Status == 500) {
                            _this.$message.error('保存失败')
                        }
                    }, 'json')
            },
            addLable(){
                if(!this.lableTitle){
                    this.$message.error('请先输入标签名称')
                    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
                window.localStorage.setItem("blogValue",value);
            },
            saveHandler(value, render) {
                if (this.blog.Title.trim().length < 3) {
                    this.$message.error('文章标题最少三个字')
                    return
                }
                if (this.blog.BlogValue.trim().length == 0) {
                    this.$message.error('文章内容不能为空哦')
                    return
                }
                this.showModal = true
            },
        }
    })
</script>
</html>
seo优化 6 lat temu			`{{template "header" .}}`
layui 版本 6 lat temu			`<meta name="keywords" content="码农随笔,个人随笔,博客,个人博客,个人笔记,技术博客,免费云笔记,云笔记,随笔,IT博客,谷歌地图,码农笔录,www.aiprose.com,aiprose.com,aiprose">`
			`<title>发布博客 - 码农随笔</title>`
markdown 4 lat temu			`<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>`
sui3 6 lat temu			`</head>`
			`<body>`
markdown 4 lat temu			`<div class="root-container" id="vue-app">`
sui3 6 lat temu			`<div class="blog-title">`
iviewelementui ，登录界面修改 3 lat temu			`<el-input v-model="blog.Title" placeholder="请输入文章标题"></el-input>`
sui3 6 lat temu			`</div>`
markdown 4 lat temu			`<mavon-editor :externalLink="externalLink" :toolbars="toolbars" v-model="blog.BlogValue" @imgAdd="$imgAdd"`
			`@save="saveHandler" @change="changeHandler" ref=md></mavon-editor>`
删除无用资源 & 代码高亮修改 3 lat temu			`<el-dialog title="发布文章" :visible.sync="showModal" width="500px">`
markdown 4 lat temu			`<div class="modal_form">`
			`<span class="span-lable">文章分类：</span>`
iviewelementui ，登录界面修改 3 lat temu			`<el-select v-model="blog.CategoryId" placeholder="请选择文章分类" style="width: 310px">`
			`<el-option v-for="item in cats" :key="item.Id" :label="item.Title" :value="item.Id"/>`
			`</el-select>`
markdown 4 lat temu			`</div>`
			`<div class="modal_form">`
			`<span class="span-lable">文章标签：</span>`
iviewelementui ，登录界面修改 3 lat temu			`<el-tag v-for="item,index in lables" :key="index" closable @close="delLabel(index)" style="margin-right: 3px">`
			`${item.Title}`
			`</el-tag>`
markdown 4 lat temu			`</div>`
			`<div class="modal_form">`
			`<span class="span-lable">添加标签：</span>`
			`<div style="display: inline-block;width: 241px">`
iviewelementui ，登录界面修改 3 lat temu			`<el-input v-model="lableTitle" placeholder="请输入标签名称"/>`
markdown 4 lat temu			`</div>`
iviewelementui ，登录界面修改 3 lat temu			`<el-button type="primary" plain @click="addLable">添加</el-button>`
markdown 4 lat temu			`</div>`
iviewelementui ，登录界面修改 3 lat temu			`<span slot="footer" class="dialog-footer">`
			`<el-button @click="showModal = false">取消</el-button>`
删除无用资源 & 代码高亮修改 3 lat temu			`<el-button type="primary" :loading="loading" @click="okHandler">保存</el-button>`
iviewelementui ，登录界面修改 3 lat temu			`</span>`
			`</el-dialog>`
sui3 6 lat temu			`</div>`
			`</body>`
			`<script>`
markdown 4 lat temu			`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: '',`
iviewelementui ，登录界面修改 3 lat temu			`CategoryId: ''`
markdown 4 lat temu			`},`
			`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: {`
			`katex_css: function () {`
			`// 这是你的katex配色方案路径路径`
			`return '/katex/katex.min.css';`
			`},`
			`katex_js: function () {`
			`return '/katex/katex.min.js';`
			`},`
			`},`
			`},`
			`created() {`
			`let item = window.localStorage.getItem("blogValue");`
			`if(item){`
			`this.blog.BlogValue = item`
			`}`
			`let itemTitle = window.localStorage.getItem("blogTilte");`
			`if(itemTitle){`
			`this.blog.Title = itemTitle`
			`}`
			`this.getCatas()`
更新 'views/newblog.html' 4 lat temu
			`},`
			`mounted: function () {`
			`var _this = this`
更新 'views/newblog.html' 4 lat temu			`this.$refs.md.$on("imgAdd",(pos, $file)=>{`
			`_this.$imgAdd(pos, $file)`
			`})`
markdown 4 lat temu			`},`
			`methods: {`
			`okHandler (){`
iviewelementui ，登录界面修改 3 lat temu			`const _this =this`
markdown 4 lat temu			`if(!this.blog.CategoryId \|\| this.blog.CategoryId==0){`
iviewelementui ，登录界面修改 3 lat temu			`this.$message.error('文章分类必须选择')`
markdown 4 lat temu			`return`
			`}`
			`this.loading = true`
			`var tobj = {}`
			`tobj.title = this.blog.Title`
			`window.localStorage.setItem("blogTilte",this.blog.Title);`
			`tobj.blogHtml = this.blog.BlogHtml`
			`var regex = /(<([^>]+)>)/ig`
			`tobj.blogDesc = tobj.blogHtml.replace(regex,"").substring(0,200)`
			`tobj.catory = this.blog.CategoryId`
			`tobj.blogValue = this.blog.BlogValue`
			`tobj.labels = []`
			`this.lables.forEach(el=>{`
			`tobj.labels.push(el.Title)`
			`})`
			`$.post('/api/blog/new', tobj,`
			`function (data) {`
			`_this.loading = false`
			`if (data.Status == 0) {`
			`window.localStorage.removeItem("blogValue");`
			`window.localStorage.removeItem("blogTilte");`
iviewelementui ，登录界面修改 3 lat temu			`_this.$message.success('保存成功')`
markdown 4 lat temu			`window.location.href = "/blog/"+ data.Data`
			`} else if (data.Status == 401) {`
			`window.location.href = "/login"`
			`} else if (data.Status == 500) {`
iviewelementui ，登录界面修改 3 lat temu			`_this.$message.error('保存失败')`
markdown 4 lat temu			`}`
			`}, 'json')`
			`},`
			`addLable(){`
			`if(!this.lableTitle){`
iviewelementui ，登录界面修改 3 lat temu			`this.$message.error('请先输入标签名称')`
markdown 4 lat temu			`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) {`
fix:文章分类无法加载 3 lat temu			`_this.cats = data.Data`
markdown 4 lat temu			`} 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`
			`window.localStorage.setItem("blogValue",value);`
			`},`
			`saveHandler(value, render) {`
			`if (this.blog.Title.trim().length < 3) {`
iviewelementui ，登录界面修改 3 lat temu			`this.$message.error('文章标题最少三个字')`
markdown 4 lat temu			`return`
			`}`
			`if (this.blog.BlogValue.trim().length == 0) {`
iviewelementui ，登录界面修改 3 lat temu			`this.$message.error('文章内容不能为空哦')`
markdown 4 lat temu			`return`
			`}`
			`this.showModal = true`
			`},`
部署文件上传 6 lat temu			`}`
sui3 6 lat temu			`})`
			`</script>`
			`</html>`