不完全node实践教程-第七发

来源：互联网发布：淘宝天下传媒诈骗编辑：程序博客网时间：2024/04/29 09:58

今天是是教程的第七发.也是最后一发了. 博客的完整度并不是很高, 也就是停留在能看的阶段, 但是作为一个入门教程, 我觉得是够了.大家如果能对前后端的关系, 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, 点击之前, 我们看到是这样滴:

before-click-user

点击任意一个用户名, 都会看到类似于这样的界面.(我点击了用户名zhuhaihao…不要以为是我删掉了最上面那一条记录…)

after-click-user

这样, 我们就添加了用户博客集锦的界面. 今天的代码在day07

(今天的逼就装到这里)

0 0