導語：
暑假在家閑著無事，就琢磨著做一個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 >
                   <td>`+arg.data[i].id+`</td>
                   <td><img src="https://blog.csdn.net/gitchatxiaomi/article/details/`+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="https://blog.csdn.net/qadmin-1.2/article_updata.html?id=`+arg.data[i].id+`">修改</a> | <a  data-id=".id71"  href="https://blog.csdn.net/admin/article/del/id/71.html">洗掉</a></td>
               </tr>`);
           }  
       }
   })
});