Express 是 Node.js 上最流行的 Web 开发框架,使用它我们可以快速的开发一个 Web 应用。
上一篇介绍了如何创建一个简单的Express 应用, 以及目录结构和模板引擎。
本篇文章将介绍 如何搭建一个简单的bolg网站
搭建一个简单的具有发表文章功能的博客。
路由规划是整个网站的骨架部分,因为它处于整个架构的枢纽位置,相当于各个接口之间的粘合剂,所以应该优先考虑。
因为我们现在搭建的仅仅是一个具有发表功能的博客,并不具有注册登录,所以会简单很多
GET / :首页
GET /posts :文章列表
POST /posts :创建文章
GET /posts/new :填写文章
我们要求 /posts 能看到文章并且发布文章。
涉及到文章储存以及访问,所以我们需要一个数据库,这里我们介绍的是 MySQL
MySQL 环境。这里不多做描述,可自行GoogleNode 的 MySQL 驱动在 package.json 文件中添加 "mysql": "latest"
"dependencies": {
  "body-parser": "~1.15.1",
  "cookie-parser": "~1.4.3",
  "debug": "~2.2.0",
  "ejs": "~2.4.1",
  "express": "~4.13.4",
  "morgan": "~1.7.0",
  "serve-favicon": "~2.3.0",
  "mysql": "latest"
}
并执行 npm install 安装依赖包
首先,我们先建几个目录
在根目录新增三个文件夹:
util – 工具方法
conf – 配置
mutual – 与数据库交互
在 util文件夹中新建 util.js 文件,加入如下代码
// 提升性能
module.exports = {
  extend: function(target, source, flag) {
    for(var key in source) {
      if(source.hasOwnProperty(key)){
        flag ? (target[key] = source[key]) : (target[key] === void 0 && (target[key] = source[key]));
      }
    }
    return target;
  }
};
在 conf 文件夹中新建 db.js 文件,加入如下代码
// conf/db.js
// MySQL数据库联接配置
module.exports = {
  mysql: {
    host: '127.0.0.1',
    user: 'root',
    password: '',
    database:'test', // 前面建的post表位于这个数据库中
    port: 3306
  }
};
在 mutual 文件夹中新建 post.js 和 postSqlMapping.js 文件,加入如下代码
// mutual/postSqlMapping.js
// SQL语句
var post = {
  insert:'INSERT INTO post(id, title, content) VALUES(0,?,?)',
  update:'update post set title=?, content=? where id=?',
  delete: 'delete from post where id=?',
  queryById: 'select * from post where id=?',
  queryAll: 'select * from post'
};
module.exports = post;
// mutual/post.js
// 实现与MySQL交互
var mysql = require('mysql');
var $conf = require('../conf/db');
var $util = require('../util/util');
var $sql = require('./postSqlMapping');
// 使用连接池,提升性能
var pool  = mysql.createPool($util.extend({}, $conf.mysql));
// 向前台返回JSON方法的简单封装
var jsonWrite = function (res, ret) {
  if(typeof ret === 'undefined') {
    res.json({
      code:'1',
      msg: '操作失败'
    });
  } else {
    res.json(ret);
  }
};
module.exports = {
  add: function (req, res, next) {
    pool.getConnection(function(err, connection) {
      // 获取前台页面传过来的参数
      var param = req.query || req.params;
      // 建立连接,向表中插入值
      // 'INSERT INTO post(id, title, content) VALUES(0,?,?)',
      connection.query($sql.insert, [param.title, param.content], function(err, result) {
        if(result) {
          result = {
            code: 200,
            msg:'创建成功'
          };
        }
        // 以json形式,把操作结果返回给前台页面
        jsonWrite(res, result);
        // 释放连接
        connection.release();
      });
    });
  }
};
MySQL部分代码已经添加好了,现在需要在 /routes 中新建 posts.js 文件,添加如下代码
var express = require('express');
var post = require('../mutual/post');
var router = express.Router();
// create
router.post('/posts', function(req, res, next) {
  post.add(req, res, next);
});
// new
router.get('/posts/new', function(req, res, next) {
  res.render('posts_new');
});
module.exports = router;
到这里后台部分已经新建完成了。
我们需要一个页面来填写文章内容
在 views 文件夹下新建 posts_new.ejs ,添加如下代码:
<%- include title %>
<form method="post" action="/posts">
  标题:<br />
  <input type="text" name="title" /><br />
  正文:<br />
  <textarea name="content" rows="20" cols="100"></textarea><br />
  <input type="submit" value="发表" />
</form>
<%- include footer %>
我们之前已经写好了路由,现在只要访问 /posts/new 就可以创建文章了
最后,我们修改 posts.ejs ,让页面显示发表过的文章及其相关信息, 代码如下
<%- include title %>
<% posts.forEach(function (post, index) { %>
  <p><h2><a href="#"><%= post.title %></a></h2></p>
  <p><%- post.content %></p>
<% }) %>
<%- include footer %>
我们还需要在/routes/posts.js 中添加 index 的路由
// index
router.get('/posts', function(req, res, next) {
  post.queryAll((req, res, next), function (err, posts) {
    if (err) {
      posts = [];
    }
    res.render('post_index', {
      title: '文章',
      posts: posts
    });
  });
});
同时还需要在 /mutual/post.js 中添加 queryAll 方法
// index
queryAll: function (req, res, next) {
  pool.getConnection(function(err, connection) {
    connection.query($sql.queryAll, function(err, result) {
      jsonWrite(res, result);
      connection.release();
    });
  });
}
至此,我们的博客就建成了。