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

2020-09-27 17:50 538人阅读评论(0)

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

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

本文的目录

一，管理员界面

一，管理员界面

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>`);
           }  
       }
   })
});