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

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

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

本文的目录

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

一,管理员界面

1,模板介绍

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


[记录十二] Vue(全家桶)+node+koa2+mysql+nginx+redis,博客全栈项目之管理员界面的编写_第1张图片
[记录十二] Vue(全家桶)+node+koa2+mysql+nginx+redis,博客全栈项目之管理员界面的编写_第2张图片
这里就是这个后台管理界面模板的部分截图,使用起来特别简单,使用jquery就可以了。至于这个模板怎么下载,大家自行在百度搜索“qadmin”就行了,开源下载。

2,分析代码,编写接口

(1)markdown

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

[记录十二] Vue(全家桶)+node+koa2+mysql+nginx+redis,博客全栈项目之管理员界面的编写_第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里面路径要写对)

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

<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<div id="editor">
    <!-- Tips: Editor.md can auto append a `