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();
});
});
}
至此,我们的博客就建成了。