今天是是教程的第七发.也是最后一发了. 博客的完整度并不是很高, 也就是停留在能看的阶段, 但是作为一个入门教程, 我觉得是够了.大家如果能对前后端的关系, node在web开发的特点(快速)新增feature的流程能够有一个更深的理解那么教程的目的就达到了.
(说这么严肃的话真是有点不习惯)
好了, 不说废话了, 今天我们做两件事情,
- 实现简单的搜索功能. 也就是根据用户的输入的查询字段进行模糊查询
- 点击用户名, 能够看到所有他发布的博客.
首先做第一个–搜索.
搜索
首先我们在content.ejs添加搜索框, 也就是如下代码:
<div class="search-box">
<form class="search" action="search" method="get">
<input type="text" name="search_keyword" value="" placeholder="search blog" class="search-field">
<span class="search-submit"><i class="fa fa-search"></i></span>
</form>
</div>
//some other code
<script type="text/javascript">
var submitIcon = document.getElementsByClassName('search-submit')[0],
searchForm = document.getElementsByClassName('search')[0];
submitIcon.onclick = function(e) {
searchForm.submit();
}
</script>
我添加了一段js, 当用户点击搜索图标的时候, 就提交表单. 我这里用到了font-awesome的图标, 我的做法是在public新建一个lib文件夹, 然后把font-awesome文件放在里面. css实现, 没有美工自己又懒得用ps的时候还是很好的.
然后, 在index.js文件添加路由.
app.use('/search', search);
然后, 打开post.js, 给它添加一个search方法.
Post.search = function(keyword, page, callback) {
db.get().collection('posts', function(err, collection) {
if (err) {
return callback(err);
}
var pattern = new RegExp(keyword, "i");
collection.count({"title": pattern}, function(err, total) {
collection.find(
{"title": pattern}
).sort({time: -1}).toArray(function(err, posts) {
if (err) {
mongodb.close();
return callback(err);
}
callback(err, posts, total);
});
});
});
};
然后新建routes/search.js, 添加如下代码;
var express = require('express');
var router = express.Router();
var Post = require('../model/post');
router.get('/', function(req, res) {
Post.search(req.query.search_keyword, page, function(err, posts, total) {
if (err) {
return req.redirect('/');
}
res.render('search', {
posts: posts,
user: req.session.user,
title: "search: " + req.query.search_keyword,
})
})
})
module.exports = router;
最后, 我们在views文件夹新建一个search.ejs, 添加如下代码, 其实和index.ejs一样.
<html>
<head>
<title><%= title %></title>
</head>
<body>
<%- include header %>
<%- include content %>
<%- include footer %>
</body>
</html>
如果一切都没错的话.那么重新运行app, 添加几个测试用例, title要有不一样的和一样的, 那么搜索之前是这样子的.
这样, 模糊搜索就完成了.
用户文章集锦
首先在凡是出现用户名的地方都添上一个链接. 比如: 在content.ejs里面:
<a class="link info-tag" href="/u/<%= post.author%>"><%= post.author %></a> |
header.ejs里面:
<li class="user"><a class='link' href='/u/<%= user.name%>'><%= user.name %></a ></li>
article.ejs:
<a class="author link info-tag" href="/u/<% post.author%>"><%= post.author %></a> //文章信息那里
<a href="/u/<%= user.name%>" class="link comment-post-user"><%= comment.userName%></a> //评论信息那里
然后, 在index.js添加一个路由.
app.use('/u', user);
在routes文件夹新建user.js, 然后添加如下代码
var Post = require('../model/post');
var express = require('express');
var router = express.Router();
router.get('/u/:name', function(req, res) {
User.getByName(req.params.name, function(err, user) {
if (!user) {
return res.redirect('/');
}
Post.getAll(req.params.name, function(err, posts) {
res.render('user', {
title: "user all post",
user: req.session.user,
posts: posts,
});
});
});
});
module.exports = router
然后新建/views/user.ejs, 实际上也是和index.ejs是一样的.
如果一切没错的话, 重新运行app, 点击之前, 我们看到是这样滴:
点击任意一个用户名, 都会看到类似于这样的界面.(我点击了用户名zhuhaihao…不要以为是我删掉了最上面那一条记录…)
这样, 我们就添加了用户博客集锦的界面. 今天的代码在day07
(今天的逼就装到这里)