12月16, 2016

Clean Blog by Node && React 3

前言

开始实战

后端路由规划

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

// /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的数据库,并且有一个名为articlescollection,在上段代码注释中有所体现。

robomongo

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

robomongo

总结

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

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

列表页

robomongo

详情页

robomongo

发表页

robomongo

本文链接:https://beacelee.com/post/clean-blog-react-node-3.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。