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

柔情只为你懂 2022-12-04 01:15 12阅读 0赞

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

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

### 本文的目录 ###

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

# 一，管理员界面 #

## 1，模板介绍 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 2]  
这里就是这个后台管理界面模板的部分截图，使用起来特别简单，使用jquery就可以了。至于这个模板怎么下载，大家自行在百度搜索“qadmin”就行了，开源下载。

## 2，分析代码，编写接口 ##

### （1）markdown ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 3]  
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里面路径要写对）

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 4]

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

![在这里插入图片描述][20200819195904573.png_pic_center]

**你们的赞就是对我最大的鼓励。谢谢~**

![在这里插入图片描述][20200902155530706.jpg_pic_center]

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

![在这里插入图片描述][20200825125805528.png_pic_center]  
![node后台][node]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/93efc2a25f534219ba7447e10afe15e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/613ef53be4564857bd9bf0c3e8ffe428.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/91af5aee201b45c2945f14510c599ff5.png
[https_github.com_pandao_editor.md]: https://github.com/pandao/editor.md
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/163c7da6fd1348369eaf433130cd851d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/6aae515df9ec4cbda2c4fd4e3ac92a0f.png
[20200819195904573.png_pic_center]: /images/20221123/0ad814d64d6c4e8095b2f25c4ffb28a5.png
[20200902155530706.jpg_pic_center]: /images/20221123/c875be8cb9a44ff3be261da8415ecdf6.png
[20200825125805528.png_pic_center]: /images/20221123/711abb1d66954bef9217895496e37e85.png
[node]: /images/20221123/7a52cd56638542468e9ee0092e14bd80.png