nodejs实战笔记之nodejs+mongodb搭建个人博客(一)

原创 xiaoyu7 随笔 nodejs 11504阅读 2016-01-13 21:17:05 举报

第一章、使用Express+MongoDB搭建多人博客

花了一个多星期终于简单的搭建了一个nodejs+express+MongoDB的博客,木有美化,只是纯实现了功能。过段时间完善了会挂在网上,文章最后有自己的源码
边写代码边做的笔记,可能比较枯燥,但是是汗水的结晶

1.1 一个简单的博客

1.1.1 学习环境
Node.js: v4.2.1
Express: 4.13.1
MongoDB: 3.0.7

1.1.2 开始
    1、安装Express
        npm install express -gd
        npm install -gd express-generator
    2、新建工程
        express -e blog
        cd blog && npm install
    3、运行
        SET DEBUG=blog:* & npm start

1.1.3 路由控制
    1、工作原理

    2、添加路由规则、
        app.get('/show', function(req, res) {
            res.send('hello world!');
        })

1.1.4 模板引擎
    express中的方法相当于控制器,模板引擎相当于MVC中的视图
    ejs是模板引擎的一种
    <% code %>:javascript代码
    <%= code %>:显示替换过HTML特殊字符的内容
    <%- code %>:显示原始HTML内容

           [code=javascript,javascript 代码片段] app.get('/', function(req, res, next) {
        res.render('index', {
            title: 'Express',
            supplies: ['mop', 'broom', 'duster']
        });
    });[/code]

    <ul>
    <% for(var i=0 ;i<supplies.length;i++) {%>
        <li><%= supplies[i] %></li>
    <% } %>
    </ul>

    调用其他ejs文件
        <%- include a %>
        hello world
        <%- include b %>
        a.ejs
        this is a.ejs

1.1.5 搭建多人博客
    1、功能分析
        多人注册,登录,发表文章,登出功能的博客

    2、设计目标
        未登录:主页左侧导航显示home,login,reigster,右侧显示已发表的文章,发表日期以及作者
        登陆后:主页左侧导航显示home,post,logout,右侧显示已发表的文章、发表日期以及作者
        用户登录、注册、发表成功以及登出后都返回主页

    3、路由规划(控制器规划)
        /:首页
        /login: 用户登录
        /reg:   用户注册
        /post:  发表文章
        /logout:    登出

1.1.6 使用mongDB
    1、安装mongoDB
        安装完成设置数据库在bin目录下
        mongod --dbpath ../blog

    2、连接数据库
        1)添加mongdb模块
            "mongodb": "1.4.15"
        2)设置settings.js

[code=javascript,javascript 代码片段] module.exports = {
cookieSecret: 'myblog',
db: 'blog',
host: 'localhost',
port: 27017
}[/code]
3)在model下设置db.js
javascript 代码片段

        4)在app.js下设置require
            var settings = require('./settings');

    3、session会话
        1)添加session模块
            "express-session": "~1.9.1",
            "connect-mongo": "~0.4.1"
        2)在app.js里加载模块添加session

    4、通过淘宝镜像安装
        npm install supervisor --save -d --registry=https://registry.npm.taobao.org
        npm install mongodb --save -d --registry=https://registry.npm.taobao.org
        npm install express-session --save -d --registry=https://registry.npm.taobao.org
        npm install connect-mongo --save -d --registry=https://registry.npm.taobao.org
        npm install bson --save -d --registry=https://registry.npm.taobao.org
        npm install connect-flash --save -d --registry=https://registry.npm.taobao.org
        npm install markdown --save -d --registry=https://registry.npm.taobao.org

1.1.7 注册和登录
    1、页面设计
        分割模板
            header.ejs
            footer.ejs
            index.ejs
            login.ejs
            reg.ejs
        添加supervisor模块

    2、页面通知
        使用flash模块

    3、注册响应
        1)新建user.js
            //存储用户信息
            //读取用户信息
        2)在index.js里通过require加载
        3)修改index.js里的app.post('/reg');
        4)添加flash页面的通知功能
            修改header.ejs/index.ejs
            修改inde.js中app.get('/')
            修改inde.js中app.get('reg')

    4、登录与登出响应
        修改app.post('/login')实现登入响应
            生成密码的md5值
            检查用户是否存在
                检查密码是否一致
                用户名和密码都匹配后,将用户信息存入session
        修改app.get('/logout')实现登出响应

    5、页面权限控制
        checkNotLogin
        checkLogin
        两个函数检测是否登录,如果未登录则跳转到登录页,如果登录跳转到前一个页面

1.1.8 发表文章
    1、页面设计
    2、文章模型
    3、发表响应

1.2 使用markdown

1.3 添加文件上传功能

1、使用multer文件上传功能
2、添加upload.ejs页面
3、添加get和post控制

1.4 实现用户页面和文章页面

用户页面:点击某个用户名时跳转到自己的位置列出所有文章
文章页面:点击某个文章的时候跳转到详情页面

1.5 添加编辑与删除的功能
当一个用户在线的时候,只允许他在自己发表的文章页进行编辑或者删除,编辑只能编辑文章内容

一、编辑
    1、添加样式,修改aiticle.ejs
    2、注册两个链接的单击事件的响应
    3、修改index.js,添加app.get('/u/:name/:day/:title', checkLogin);添加app.get('/u/:name/:day/:title', function(req,res){});
    4、新建edit.js
    5、修改post.js添加Post.update实现文章提交到数据库
    6、在app.get('/edit/:name/day:/:title')后添加app.post(...);

二、删除
    1、修改post.js,添加Post.remove
    2、修改index.js添加app.get('/remove/:name/:day/:title', checkLogin),添加app.get('/remove/:name/:day/:title', function(req, res){});

三、添加判断
    修改aritcle.ejs通过检测session中的用户名是否存在,若存在且和当前文章页面的作者名相同,则显示编辑和删除按钮。否则不显示

1.6 实现留言功能

1、修改Post.protptype.save和Post.getOne添加comments数组
2、新建comment.js文件,使用$push将留言添加到comments数组中去
3、修改index.js,引入comment.js
4、新建comment.ejs
5、修改index.js,注册留言的Post响应

1.7 实现分页功能

设定:主页和用户页面每页最多显示10篇文章
1、使用mongodb的skip和limit操作
2、修改getAll为getTen
3、修改app.get('/')
4、修改app.get('/u:/:name');
5、新建paging.ejs

1.8 添加存档页面

当进入存档页面时按照年份和日期的降序列出所有的文章
1、在主页左侧添加存档页链接
2、修改post添加Post.getArchive
3、在index.js中添加/archive的路由规则
3、在view中添加archive.ejs文件

1.9 增加标签和标签页面

设定每篇文章最多有三个标签,单击主页标签页的时候跳转到标签页并列出所有已存在的标签,
单击标签的时候列出所有含有标签的文章
1、添加标签
    修改index.js和post.js添加标签
    修改index.ejs,user.ejs,article.ejs
    在style.css中添加样式
2、添加标签页
    修改header.ejs
    修改index.js添加app.get('/tags', function(req, res){});
    修改post.js添加Post.getTags
    在views文件夹下新建tags.ejs
3、添加特定标签的页面
    修改post.js添加Post.getTag
    修改index.js添加app.get('/tags/tag', function(req, res) {});
    在view文件夹下添加tag.ejs
    修改edit.ejs

1.10 增加pv统计和留言统计

设定:在主页、用户页和文章页显示pv统计和留言统计
修改post.js中getOne()和post集合
在index.ejs,user.ejs,article.ejs中添加阅读和评论

1.11 添加文章检索功能

设定根据关键字模糊查询文章标题且字母不区分大小写
1、修改header.ejs和style.css
2、修改post.js和index.js添加app.get('/u/:name')
3、添加搜索结果页在views文件夹下新建search.ejs

1.12 添加友情链接

1、修改header.ejs
2、修改index.js添加app.get('/links' function(req, res){})
3、新建links.ejs

1.13 添加404页面

当访问的路径不匹配的时候,跳转到404页面
修改index.js
新建404.ejs

1.14 增加用户头像

注册的用户根据注册的邮箱获取gravatar头像,未注册的用户根据留言填的邮箱获取gravatar头像,
在主页和用户页的文章标题右侧显示作者头像,在文章页面留言人的头像显示在留言板左侧
1、使用crypto模块
2、修改index.js中的app.post('/post')
3、修改post中的Post(),Post,
4、修改index.ejs和user.ejs
5、修改index.js中app.post('/u:name/:day/:title')
6、修改comment.ejs
7、添加style样式

1.15 增加转载功能和转载统计

当在线用户满足特定条件的时候,文章页面才会显示转载链接字样,当用户单击转载后,复制一份当前文章所在
的文档,修改后以新文档的形式存入数据库,而不是单纯的添加一条指向被转载的文档的引用。
1、修改post.js
2、添加Post.reprint
3、修改index.js添加路由响应 app.get('/reprint/:name/:day:/title:' function(req, res){});
4、在article.ejs中添加转载链接
5、添加原文链接修改index.ejs,user.ejs,article.ejs
6、删除转载的文章,修改post.js里的Post.remove

1.16 添加日志功能

1、使用app.use(logger({stream: accessLog}));
2、引用fs模块

javascript 代码片段

3、当错误发生的时候放到error.log里

javascript 代码片段

博客源码github地址(自己)

评论 ( 4 )
最新评论
zoutong123 2017-03-19 21:15:57 4F

注册拼写错了,ctrl+f ‘reigfter’

loloooo 2016-01-22 11:10:57 3F

morgan deprecated default format: use combined format app.js:35:9
D:\node.js\blog\node_modules\connect-mongo\lib\connect-mongo.js:186
throw err;
^

loloooo 2016-01-22 11:10:19 2F

D:\node.js\blog>npm start

blog@0.0.0 start D:\node.js\blog
node ./bin/www

▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
morgan deprecated morgan(options): use morgan("default", options) instead app
:35:9

loloooo 2016-01-22 11:09:53 1F

D:\node.js\blog>npm start

blog@0.0.0 start D:\node.js\blog
node ./bin/www

▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
morgan deprecated morgan(options): use morgan("default", options) instead app
:35:9
morgan deprecated default format: use combined format app.js:35:9
D:\node.js\blog\node_modules\connect-mongo\lib\connect-mongo.js:186
throw err;
^

Error: Error connecting to database: failed to connect to [localhost:270