导语：
暑假在家闲着无事，就琢磨着做一个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全栈工程师，我们下期再见！
