NodeJS搭建博客系统(二)构建一个markdown页面

来源:互联网 发布:交通仿真软件怎么用 编辑:程序博客网 时间:2024/05/17 22:21
1. 为项目添加markdown-js依赖,加入markdown解析能力:

     express 并不直接支持markdown语法,需要为项目添加markdown-js模块的依赖.


这里我们要修改package.json文件,添加相关依赖:


原package.json文件


{  "name": "blog",  "version": "0.0.0",  "private": true,  "scripts": {    "start": "node ./bin/www"  },  "dependencies": {    "body-parser": "~1.15.2",    "cookie-parser": "~1.4.3",    "debug": "~2.2.0",    "ejs": "~2.5.2",    "express": "~4.14.0",    "morgan": "~1.7.0",    "serve-favicon": "~2.3.0"  }}

修改成:


{  "name": "blog",  "version": "0.0.0",  "private": true,  "scripts": {    "start": "node ./bin/www"  },  "dependencies": {    "body-parser": "~1.15.2",    "cookie-parser": "~1.4.3",    "debug": "~2.2.0",    "ejs": "~2.5.2",    "express": "~4.14.0",    "morgan": "~1.7.0",    "serve-favicon": "~2.3.0",    "markdown-js": ">= 0.0.1"  }}

在最下面加入: "markdown-js": ">= 0.0.1"


name:                指定我们app的名称,
dependesies: nodejs中定义依赖库,这里添加了对markdown-js的依赖,
private:                 制定是否将程序发布到npm全局仓库中


使用npm安装依赖:
$ npm install


安装成功后,在 ./node_modules 目录下会多出一个 mardown-js 目录




2. 让Express支持Markdown:


打开index.js开始编写node.js代码, 在没写任何代码前的index.js大致如下: 


var express = require('express');var router = express.Router();/* GET home page. */router.get('/', function(req, res, next) {  res.render('index', { title: 'Express' });});router.get('/fendo', function (req, res) {  res.send('hello,world!');});module.exports = router;

第一行导入 express 模块, 可以理解成java中的 import [packagename]。一会需要用这个语法来导入markdown-js模块模块


在里面加入: 


var markdown = require('markdown-js');


首先我们设计一个url

 URL地址
描述/markdown
当用户从浏览器访问这个页面的时候,输出一个指向JavaEye的超链接:
markdown 字符串:

Markdown代码

[fendo](http://blog.csdn.net/u011781521?viewmode=contents "Click")

生成的html代码: 
<a href="http://blog.csdn.net/u011781521?viewmode=contents" title="Click">fendo</a>


markdown.markHtml(); 是将markdown格式的字符转换成Html


在index.js添加如下代码:


app.get('/markdown', function(req, res) {      var html = markdown.makeHtml("[fendo](http://blog.csdn.net/u011781521?viewmode=contents \"Click\") ");      res.send(html)      res.end();  })

访问: http://localhost:3000/markdown 点击fendo就进入了我的博客。




3.  让Express渲染markdown文件 


在app.js中引入

var fs = require('fs');var markdown = require('markdown-js');


然后给Express注册Markdown渲染器

app.engine('md', function(path, options, fn){    fs.readFile(path, 'utf8', function(err, str){      if (err) return fn(err);      str = markdown.parse(str).toString();      fn(null, str);    });  });  


完整的代码:

var express = require('express');var path = require('path');var favicon = require('serve-favicon');var logger = require('morgan');var cookieParser = require('cookie-parser');var bodyParser = require('body-parser');var index = require('./routes/index');var users = require('./routes/users');var fs = require('fs');var markdown = require('markdown-js');var app = express();// view engine setupapp.set('views', path.join(__dirname, 'views'));app.set('view engine', 'ejs');// uncomment after placing your favicon in /public//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));app.use(logger('dev'));app.use(bodyParser.json());app.use(bodyParser.urlencoded({ extended: false }));app.use(cookieParser());app.use(express.static(path.join(__dirname, 'public')));app.use('/', index);app.use('/users', users);// catch 404 and forward to error handlerapp.use(function(req, res, next) {  var err = new Error('Not Found');  err.status = 404;  next(err);});// error handlerapp.use(function(err, req, res, next) {  // set locals, only providing error in development  res.locals.message = err.message;  res.locals.error = req.app.get('env') === 'development' ? err : {};  // render the error page  res.status(err.status || 500);  res.render('error');});app.engine('md', function(path, options, fn){    fs.readFile(path, 'utf8', function(err, str){      if (err) return fn(err);      str = markdown.parse(str).toString();      fn(null, str);    });  });  module.exports = app;


修改 "/markdown" url的处理程序


router.get('/markdown', function(req, res) {     res.render('index.md',{layout:false});})  

在views/目录下创建一个 index.md 文件
内容如下 


his is a demo page===================[fendo](http://blog.csdn.net/u011781521?viewmode=contents \"Click\")

重新运行项目: npm start


访问 http://localhost:3000/markdown



已经成功构建了第一个markdown页面。

0 0
原创粉丝点击