开发者社区> 科技小先锋> 正文

初学Node.js之Markdown建站

简介:
+关注继续查看

 平时做项目中的Web应用都是用Asp.Net或者Java,但有时候需要快速做一些小Web的时候,感觉用Asp.Net或者Java都有点重。一开始想学学PHP,但实在不喜欢PHP的语法,所只用PHP写了两个简单的Demo之后就写不下去了。了解到最近Node.js有点热,前景也不错,而且JavaScript平时也都在用,所以决定学习下Node.js。


  准备入门,习惯做两件事,一件是在Google上搜索相关的入门教程,参考等;二是去官方网站找找Guide或者Manual。最后花了一两天浏览了些资料,这两个够了:



  当然还有其它一些资料,比如博客、论坛之类。不过官方网站上只找到API文档,适合参考不适合入门。所有这些资料主要是浏览一遍,认识下Node.js,然后还是要在实践中学习。

  官方下载,安装都很顺利。不过虽然安装时修改了PATH,但是安装好之后命令行不能直接运行“node”,想起Windows有个老毛病——经常安装程序修改了PATH之后不会生效,所以自己又去系统环境变量设置里重新配置了一下PATH,node命令就可用了。


  “Helloworld”还是很简单的,把各种教程上的示例都试了下,然后准备写个小Web。Web Helloworld也很简单,不过要想写功能完整的Web,还是得花些精神,所以还是找框架吧。Google出来Express评价不错,也比较主流,所以决定用Express。仍然是Google+官方文档,这两个资料都不错:



  简单实践之后准备构思自己的第一个Node.js Web应用。因为懒得写HTML,最近又正好经常写Markdown的文档,所以准备用Markdown来建个站。Markdown解析当然想自己写,所以仍然是老办法,Google。Node.js的Markdown包找到两个,都是Github上:



  也不知道哪个好,所以随便选一个,就选了第一个。当然在建站之前还是需要实验下的,基本满足要求,能支持标准的Markdown语法,但有一些小BUG。因为这次目的是熟悉Node.js和Express,所以不纠结这个问题了,以后有空再找更好的Markdown解析包,实在找不到自己写个也不是很麻烦的事情。


  一切准备就绪,开始建站,这里记录下建站的详细过程,一步步说明,入门级的。老实说我比较懒,不想自己去准备Express的结构,所以用了传说中最好的Node.js IDE - JetBrain WebStrom。WebStorm新建项目时有“Node.js Express App”模板


wKiom1MkEJ_iVx_iAAE84auSzqQ395.jpg


  然后在Node.js Express App的选项中,选择使用EJS模板引擎和LESS样式引擎。虽然很多人推荐Jade模板引擎,但是这是个新语法,而且也是我不喜欢的那种。还是EJS更贴近ASP和JSP的语法,所以选择它了。至于LESS,写起来肯定要比直接写CSS轻松得多,这个早就有经验了。


  Express应用信息和依赖包在package.json中配置。先得把markdown加进来,所以修改WebStorm生成的package.json:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
    "name""application-name",
    "version""0.0.1",
    "private"true,
    "scripts": {
        "start""node app.js"
    },
    "dependencies": {
        "express""3.5.0",
        "ejs""*",
        "less-middleware""*",
        "markdown""*"
    }
}


  最后那句 "markdown": "*" 就是新加的内容。package.json是JSON格式,需要使用双引号把属性名和字符串值包起来。虽然Node.js规范推荐大家在编程时使用单引号表示字符串,但这里,单引号是不行的。


  Express App的入口是app.js,这个也在package.json中配置:"start""node app.js"。WebStorm生成的app.js中是通过3000端口监听服务,因为我的机器上没有安装Web服务器,80端口空着,所以我把端口号改成了80。然后,看app.js的源码,在启动HTTP服务之前配置了两行URL Route。考虑到以后的应用中URL路由配置可能会很长,再加上我有点洁癖,所以我决定尝试把URL路由放在一个独立的脚本中配置,于是在根目录下创建了一个app-routes.js,专们用来配置路由:


1
2
3
4
5
6
var routes = require('./routes');
var user = require('./routes/user');
exports.route = function (app) {
    app.get('/', routes.index);
    app.get('/users', user.list);
};


  然后在app.js中引入app-routes,并调用导出的route方法,顺便把上面没用的require都删了:


1
2
3
// app.get('/', routes.index);
// app.get('/users', user.list);
require('./app-routes').route(app);


  运行了下,效果不错,路由没问题。剩下的就是解析Markdown的问题了。Markdown文件我准备专门建个目录来保存,所有文件都用其它编辑器(比如Sublime Text)写好放在里面,然后通过在url中直接输入“/文件名”的方式来打开解析后的HTML页面。


  然后在routes目录下添加了一个markdown.js,这个脚本根据URL参数,在md目录下选择对应的文件,解析后,通过views目录下新添加的md.ejs模板显示成HTML,所以目录结构就像这个


wKioL1MkEHiBxrYwAADqw3rRoqk097.jpg


  接着添加路由,将访问请求交给markdown.js来处理


1
2
3
4
5
var routes = require('./routes');
var markdown = require('./routes/markdown');
exports.route = function (app) {
    app.get('/(:md)?', markdown.show);
};


  还有md.ejs模板,需要在<body>标准中显示由Markdown文件转换而来的HTML,所以使用<%- %>标记。


1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body>
<%- content %>
</body>
</html>


  markdown.js中的处理过程是获取路由参数,再根据参数在md目录下去找对应的文件,如果没找到直接返回404错误。如果找到了就将这个文件的内容读出来,解析成HTML,传递给md.ejs输出到浏览器。同时考虑如果URL不带参数,则说明是访问首页,markdown.js应该直接去解析md/index.md。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var fs = require("fs");
var path = require("path");
var markdown = require("markdown").markdown;
exports.show = function (req, res) {
    // 获取参数并将参数转换成
    var mdName = req.params.md || "index";
    if (!mdName.match(/\.md$/i)) {
        mdName += ".md";
    }
    // 根据当前目录和相对目录找到参数对应的md文件
    var filename = path.resolve(path.join(__dirname, "../md", mdName));
    // render函数定义符合readFile和callback标准
    // 如果md文件读取错误或者没有内容,向浏览器返回404
    // 有内容则调用md.ejs渲染HTML页面
    var render = function (err, md) {
        if (err || !md) {
            res.status(404).send("Error");
            return;
        }
        var html = markdown.toHTML(md);
        res.render("md", {
            title: "Markdown Content",
            content: html
        });
    };
    // 从md文件读取内容,并将读到的内容交能render函数处理
    fs.readFile(filename, { encoding: "utf8" }, render);
};



  完工,使用node app.js启动服务,再在浏览器中访问,一切正常,只是——页面太丑了,因为没加样式。修改public/stylesheets/style.less,加入样式


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
body {
    margin24px;
    font14px "微软雅黑""Lucida Grande"HelveticaArialsans-serif;
}
.h {
    font-weightnormal;
}
h1 {
    .h();
    font-size32px;
}
h2 {
    .h();
    font-size24px;
}
h3 {
    .h();
    font-size18px;
}
.quote {
    background-color#e8e8e8;
    border-left5px solid #cacaca;
    padding3px 0 3px 24px;
    border-radius: 3px;
    margin0;
    p {
        margin1px 0;
    }
}
code {
    .quote();
    font-family: Consolas, Monaco, "Lucida Console"monospace;
    padding0 5px;
    margin-left2px;
    margin-right2px;
    border1px solid #cacaca;
}
pre {
    .quote();
    border-left-width32px;
    padding-left12px;
    code {
        border0;
        padding0;
        margin0;
    }
}
blockquote {
    .quote();
    code {
        background-color#f8f8f8;
    }
}
a {
    color#666;
    text-decorationunderline;
    &:visited {
        color#999;
    }
    &:hover {
        color#000;
    }
}
ul, ol {
    margin0;
    padding0;
    li {
        margin-left1.2em;
        padding0;
    }
}
ul li {
    list-style-typesquare;
}
hr {
    height1px;
    border0;
    background-color#999;
}


  这回才是真正的完工了,看看效果:


wKioL1MkEHnSGqJvAAL_f5pnYvk875.jpg


本文转自边城__ 51CTO博客,原文链接:http://blog.51cto.com/jamesfancy/1377256,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
19631 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
16998 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
11733 0
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
34540 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
17941 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
24750 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
13391 0
6967
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载