1小时编写一个支持七牛上传的 markdown 客户端1（技术实现篇）

摘要: 一个小时如何编写一个支持七牛上传的 markdown 编辑器的客户端。如何能从零快速学习 nodejs，并付诸实践。

<!--more-->

介绍

说是一个小时，前先后后加上代码重构，优化代码，也用了一两天得时间，但在写初版代码的时候，的确用了很短的时候。

https://github.com/zhaopengme/ndpediter

技术点

在作这个的时候，出发点是由于 hexo 编辑的时候，我须要使用七牛的图片外链，可是没有一个好用的支持七牛图片外链的工具。就有了本身动手作一个念头，在技术选择的时候，我最熟悉的是后台 java，前端 javascript 的搭配，由于要写一个客户端，首先想到的时候用纯 java 来实现，以前我也用 java 写过一个支持 markdown 的笔记软件 jnote ,或者作一个 web 网站，再加一个浏览器的壳，在几年以前，我写过这样的一个 demo https://github.com/zhaopengme/jbrower-demo，就是用 Mozilla 内核的浏览器框架，嵌入 web 网站的方式。可目前已经有了 node-webkit 这样的技术，就不须要的我以前的想法。用了node-webkit，搭配最好的就是 nodejs 了，我就放弃了用 java 来实现的方式，虽然我不会 nodejs，但这也给了我一个学习的 nodejs 的机会了。那就开始上手了。

在内嵌 web 系统和纯 nodejs 的选择

在开始设计的时候，依照我原来的想法，是采用内嵌一个 web 系统，经过 node-webkit 来打开内嵌的 web 系统来实现的，全部我开始学习 express 的文档。看了 http://www.expressjs.com.cn/ 文档后，我尝试着使用纯 nodejs 的方式来实现个人须要，读写文件，图片保存，图片上传，发现也是能够的，其实开头想一想也是能够的，只是本身一个惯性思惟致使的。

技术干货列表

1. nodejs

2. node-webkit

3. qiniu-nodejs-sdk

4. yeoman

5. generator-node-webkit

6. layer

7. editormd

1. nodejs

主要用来实现文件的读写，图片的上传。

2. node-webkit

基于node.js和chromium的应用程序实时运行环境，可运行经过HTML(5)、CSS(3)、Javascript来编写的本地应用程序。从网上扒的介绍，为了占位。

3. qiniu-nodejs-sdk

https://github.com/qiniu/nodejs-sdk.v6

七牛的 nodejs 的 api。

4. yeoman

http://yeoman.io/

Yeoman 是 Google 的团队和外部贡献者团队合做开发的，他的目标是经过Grunt（一个用于开发任务自动化的命令行工具）和Bower（一个HTML、CSS、Javascript和图片等前端资源的包管理器）的包装为开发者建立一个易用的工做流。

Yeoman 的目的不只是要为新项目创建工做流，同时仍是为了解决前端开发所面临的诸多严重问题，例如零散的依赖关系。

也是从网上扒的介绍，也是为了占位。Yeoman 能够说是对已经成为体系的流程工具的封装，更简单说是"一键开发，一键部署"等等。是 generator-node-webkit 使用的前提。

5. generator-node-webkit

https://github.com/Dica-Developer/generator-node-webkit

generator-node-webkit 是基于 Yeoman 的工具，能够"一键"建立 node-webkit 的开发环境，"一键"打包环境。

6. layer

http://layer.layui.com/

一个 jquery 的弹出框插件，我以为它好用，就单独拉出来了，好东西，值得推荐。好比我得图片上传 配置 关于 保存提醒等都是使用它的。

7. editormd

https://github.com/pandao/editor.md

编辑器实现的核心，实现编辑器最为主要的组成部分，在各类 markdown 实现的各类版本中，最优秀的编辑器之一，10分推荐。

在开始实现以前，最好先看一下以上的几种技术的说明，方便咱们理解。

技术实现篇

环境准备

nodejs 环境

做为 hexo 的使用者，nodejs 确定会有的，即便没有，那本身安装吧，这个很容易。https://nodejs.org/。我装得 mac 版，不会告诉你用 mac 装不少东西都是用 brew 能够一键安装的。

yeoman 安装

npm install -g yo 这是官方的安装，有可能安装成功了，以后 node-webkit 安装会出现问题，最好用这个 npm i -g yo generator-karma。

generator-node-webkit 安装

npm install generator-node-webkit -g 用 npm 都是一行命令搞定，很容易吧！用 mac 的童鞋，有没有装 brew 呢？装个 brew 吧！不管是装13仍是为了本身开发方便。

生成开发环境

以上 yeoman 和 generator-node-webkit 咱们采用的都是安装全局的办法。

1. 自动建立目录结构

yo node-webkit 就能生成好咱们须要的环境目录了,好吧！这里录个 gif 给你们看看。

注意

1. mac 如今基本都是64位的了，不要选择32位的。

2. 这个要下载 对应平台的资源，比较慢，我就中止录了。

当前建立完成后，就会有下面这样的界面了。

2. 下载依赖

npm install & bower install 按照提醒，就能够把相关的依赖所有安装了。若是提醒没有 bower，那就 npm install bower -g，bower 也是个经常使用工具，也做为全局安装吧。

3. 下载项目依赖

前几个步骤，能够叫作工程依赖，就是每个这样的工程，都须要这样的步骤的，这个步骤是说，咱们项目须要的依赖。好比 qiniu-nodejs-sdk 就是咱们项目须要的，能够经过 npm install qiniu来安装，若是咱们须要 bootstrap，那么就能够用 bower install bootstrap或者npm install bootstrap 来安装。我是手动安装我须要的 js 插件之类的。

npm install qiniu --save 下载七牛的 sdk。

npm install path-extra --save 一个获取系统目录，临时目录的。

npm install fs-utils --save 一个文件工具，能够很方便的同步、异步读取文件，还能够读写 json。

咱们带上--save，这样就说明是咱们项目中使用的，在package.json就添加了项目的依赖。

咱们的项目结构就是这样的了。

原本是打算把代码说明也放到本篇的，写到这里，发现内容会很长，那就放到下一篇文章吧！下一篇文章包含代码讲解和代码优化，以及如何进行模块化分割。

github 上面有代码，结合本篇步骤，再加上源码，也是能够看懂的，源码真得很简单。

https://github.com/zhaopengme/ndpediter

这个文件是我初版写的未通过优化的 demo 版本，下一篇会讲解如何将这个文件进行模块化分割。
https://github.com/zhaopengme/ndpediter/blob/master/demo.js