[记录十二] Vue(全家桶)+node+koa2+mysql+nginx+redis，博客全栈项目之管理员界面的编写

导语：
暑假在家闲着无事，就琢磨着作一个web博客练练手，如今已经作完了，把过程分享出来给你们看看，分享一下学习经验。这是第十二篇，前面已经把客户端的界面和功能都作完了，如今写一下管理员界面。

微信搜索 【web小馆】，回复 ”全栈博客项目“，便可获取 项目源码和后续的实战文章教程。

本文的目录

• 一，管理员界面
• 1，模板介绍
• 2，分析代码，编写接口
• （1）markdown
• （2）如何使用
• (3)编写上传接口
• （4）获取文章列表接口

一，管理员界面

1，模板介绍

这里咱们考虑到开发的速度，我就再网上找了一个开源的后台管理员界面的模板，qadmin，这是一个功能界面都特别丰富的模板。

这里就是这个后台管理界面模板的部分截图，使用起来特别简单，使用jquery就能够了。至于这个模板怎么下载，你们自行在百度搜索“qadmin”就好了，开源下载。

2，分析代码，编写接口

（1）markdown

这里主要是有一个建立文章的markdown编辑器，我就上网搜索下载了一个markdown的编辑器。这个就是它的官网，下载到电脑，接下来教你怎么使用。https://github.com/pandao/editor.md

Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。

主要特性

• 支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown)

• 风格的语法，也可变身为代码编辑器；

• 支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、跳转到行、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；

• 支持 ToC（Table of Contents）、Emoji表情、Task lists、@连接等 Markdown 扩展语法； 支持TeX 科学公式（基于 KaTeX）、流程图 Flowchart 和 时序图 Sequence Diagram;

• 支持识别和解析 HTML标签，而且支持自定义过滤标签及属性解析，具备可靠的安全性和几乎无限的扩展性；

• 支持 AMD / CMD 模块化加载（支持 Require.js & Sea.js），而且支持自定义扩展插件；

• 兼容主流的浏览器（IE8+）和 Zepto.js，且支持 iPad 等平板设备；

（2）如何使用

下载后，把文件放在static/markdown中，而后引用便可（注意html里面路径要写对）

这个是编辑页面的编辑栏。

<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<div id="editor">
    <!-- Tips: Editor.md can auto append a `<textarea>` tag -->
    <textarea style="display:none;">### Hello Editor.md !</textarea>
</div>
<script src="jquery.min.js"></script>
<script src="../static/markdown/editor.md/editormd.min.js"></script>
<script type="text/javascript">
    $(function() {
        var editor = editormd("editor", {
            // width: "100%",
            // height: "100%",
            // markdown: "xxxx", // dynamic set Markdown text
            path : "../static/markdown/editor.md/lib/"  // Autoload modules mode, codemirror, marked... dependents libs path
        });
    });
</script>

这是把提交的文件显示出来

<link rel="stylesheet" href="editormd/css/editormd.preview.css" />
<div id="test-markdown-view">
    <!-- Server-side output Markdown text -->
    <textarea style="display:none;">### Hello world!</textarea>             
</div>
<script src="jquery.min.js"></script>
<script src="../static/markdown/editormd/editormd.js"></script>
<script src="../static/markdown/editormd/lib/marked.min.js"></script>
<script src="../static/markdown/editormd/lib/prettify.min.js"></script>
<script type="text/javascript">
    $(function() {
	    var testView = editormd.markdownToHTML("test-markdown-view", {
            // markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown text
            // htmlDecode : true, // Enable / disable HTML tag encode.
            // htmlDecode : "style,script,iframe", // Note: If enabled, you should filter some dangerous HTML tags for website security.
        });
    });
</script>

(3)编写上传接口

这个模板里面基本都已经把代码写好了，你只须要把一些接口地址给改一下就好了

//文章缩略图左侧显示图片
upload.render({
    elem: '#pic' //绑定元素
    , url: "/api/admin/updata/pic" //上传接口 
    , done: function (res) {
        //上传完毕回调
        if (res.errno == 0) {
            $("#pic_url").val(res.data.avatar_url);
            $(".pic_url").attr("src", res.data.avatar_url);
        } else {
            layer.msg(res.info, function () { })
        }
    }, error: function () {
        layer.msg("上传异常");
    }
});
//文章内容提交
form.on('submit(submit)', function (data) {
    let config = {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
    
    $.post(data.form.action, data.field, config, function (e) {
          layer.closeAll('loading');
        if (e.errno == 0) {
             layer.msg(e.msg, { icon: 1, shade: 0.5, });
             setTimeout(function () { window.location.href = "/qadmin-1.2/article_index.html"; }, 1000);
        } else {
            layer.msg(e.msg, { icon: 2, shade: 0.5, time: 2000, shadeClose: true });
        }
    })
    return false;
});

（4）获取文章列表接口

ajax获取以前写的文章列表接口，而后循环dom操做，写到页面上。

$(function() {
    $.ajax({
       url: '/api/article/list',
       type: 'GET',
       success: function (arg) {
           // console.log(arg.data[0]);
           for (let i in arg.data) {
               $(".layui-table tbody").append(`<tr class="id71"> <td>`+arg.data[i].id+`</td> <td><img src="`+arg.data[i].pic+`" height="50px"/></td> <td>17</td> <td>`+arg.data[i].title+`</td> <td>`+arg.data[i].hits+`</td> <td><input data-id="71" lay-filter="state" type="checkbox" checked lay-text="开启|关闭" lay-skin="switch"></td> <td><input data-id="71" lay-filter="top" type="checkbox" checked lay-text="开启|关闭" lay-skin="switch"></td> <td><input data-id="71" lay-filter="experiment" type="checkbox" lay-text="开启|关闭" lay-skin="switch"></td> <td><input data-id="71" lay-filter="works" type="checkbox" lay-text="开启|关闭" lay-skin="switch"></td> <td>`+createTime(arg.data[i].createtime)+`</td> <td><a href="/qadmin-1.2/article_updata.html?id=`+arg.data[i].id+`">修改</a> | <a class="del" data-id=".id71" href="/admin/article/del/id/71.html">删除</a></td> </tr>`);
           }  
       }
   })
});

大家的赞就是对我最大的鼓励。谢谢~

微信搜索【web小馆】，回复全栈博客项目，便可获取项目源码和后续的实战文章教程。天天用最简单朴实的语言，潜移默化的提高你的计算机基础知识和前端技术。小米粥，一个专一的web全栈工程师，咱们下期再见！