Clean Blog by Node && React 3

December 16, 2016

前言

开始实战

后端路由规划

上一次记录提到了路由规划，在这里回顾一下。简单定义了如下路由。

// /routes/index.js
module.exports = function(app) {
    app.get("/", function(req, res) {
        res.render("index", {
            title: "Article"
        });
    });


    app.get("/about", function(req, res) {
        res.render("index", {
            title: "About"
        });
    });


    app.get("/contact", function(req, res) {
        res.render("index", {
            title: "Contact"
        });
    });


    app.get("/article/:id", function(req, res) {
        res.render("index", {
            title: "Article Detail"
        });
    });
};

以上代码段，是对于前端页面请求服务器时的路由定义，可以看到所有的路由都指向了index。之所谓单页面应用（SPA）,特点就体现在这里。具体内部的实现，还是要依靠react-router。但是，如果没有服务器对应路由，刷新页面或者输入url请求页面时，就会出现404的效果。所以，前端页面的路由必须和服务器路由相匹配，才能得到正确的相应（200 ok）。

API路由

按照惯例，我统一将后端路由前面添加了一个api，便于与前端区分。凡是涉及到后端路由的，均在URL中添加/api作为区分。如下代码分别定义了文章列表，文章详情，添加文章三个接口。

// /routes/index.js


//API    文章列表
app.get('/api/post', function(req, res) {
    res.send()
})


//API    文章详情
app.get('/api/post/:id', function(req, res) {
    res.send()
})


//API    添加文章
app.post('/api/post', function(req, res) {
    res.send()
})

连接MongoDB

添加mongoose库的添加

切换到根目录下，执行命令。

npm install --save mongoose

连接数据库

根目录下新建文件mongo.js。引入mongoose模块，创建连接。

/mongo.js
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/article');
module.exports = mongoose;

这样做的原因，一是因为随时要用到这两句话，将其独立出来，直接引用暴露出来的模块更为方便；更加重要的原因是，如果每次请求都去创建连接，会造成去open一个已经open的连接，造成异常的情况出现（如下错误提示），与其每次要关闭连接，不如每次去复用。

<h1>Trying to open unclosed connection.</h1>
<h2></h2>
<div>Error: Trying to open unclosed connection.
    at NativeConnection.Connection.open (/Users/beace/Documents/beace/react-blog/express-react/node_modules/mongoose/lib/connection.js:237:15)
.........
</div>

数据库查询

上述步骤已经连接到了数据库，但是，还要去请求数据，按照mongoose的官方文档，我们先来定义一个Schema。

新建/src/models/schema.js，加入如下代码。

var mongoose = require('../../mongo.js');
var Schema = mongoose.Schema;
var articleSchema = new Schema({
    author: {
        type: String,
        default: 'beace'
    },
    title: {
        type: String
    },
    abstract: {
        type: String
    },
    content: {
        type: String
    },
    date: {
        type: Date,
        default: Date.now
    }
}, {
    collection: "articles"
});


module.exports = articleSchema;

这里，创建了一个Schema实例，并且添加了一些默认值。将来的数据库也大概具有这些字段。在文章列表里，书写请求的代码。

app.get('/articles', function(req, res) {
    var db = mongoose.createConnection('localhost', 'article'); //名为article的数据库
    db.once('open', function() {
        var Article = mongoose.model('articles', articleSchema); // 名为articles的collection
        Article.find({
            author: "Beace"
        }, function(err, docs) {
            if (err) console.log(err);
            else {
                res.send(docs);
            }
        })
    });
})

在这里，我们进行了数据库连接的创建，并且查询了一次数据库。大可不必在乎这些写法，我最初在学习的时候就使用的最基本的查询方式，当然，在这里我使用了mongoose，遵照它的写法去查询数据库。最终返回给前端json的数据格式。

进行到这里，好像任务就已经结束了。但是好像有个事情遗漏掉了，我们好像没有创建数据库。因此需要对数据库进行创建、添加字段等操作。

数据库的创建

在这里，为了操作简单。我使用了Robomongo这个软件来进行可视化的操作。如下图，我创建了一个名为article的数据库，并且有一个名为articles的collection，在上段代码注释中有所体现。

robomongo

到这里，数据库的创建已经完毕了。可以到测试工具postman中测试下代码的正确性。这里请求到了一个对象数组的数据，如下部分截图。

robomongo

总结

这一篇内容，大概记录了从后端路由开始，到API的书写，再到数据库的连接和创建。其中，多少会有坑的存在。例如，把连接数据库这个操作放在每个API请求里。下一篇的内容，将着重从前端渲染，包括markdown形式如何处理，以及开源markdown编辑器的引入等方面进行记录。

暂且先预览一下最终效果。

列表页

robomongo

详情页

robomongo

发表页

robomongo