node.js+mongDB创建简单博客

技术栈

node.js
express
mongoDB
Ajax
art-template
bootstrap
jquery
实现登陆，注册，退出，分页，修改个人资料等功能
源代码在这里 https://dev.tencent.com/u/Lucky7190/p/blog/git
实现步骤

• 创建目录结构
  models 中分别为文章模型和用户模型，用于对数据库的操作
  router.js为所有的路由控制，实现页面之间的交互逻辑和业务逻辑
  views里存放页面模板
  
• 整合前端页面（include，block,extend）
  设计路由（登陆，注册，退出，修改，发帖，分页）

路径	方法	get 参数	post 参数	是否需要登录	备注
/	GET				渲染首页
/register	GET				渲染注册页面
/register	POST		email nickname password		处理注册请求
/login	GET				渲染登录页面
/login	POST		email password		处理登录请求
/logout	GET			是	处理退出请求
/publish	GET			是	渲染发布主题页面
/publish	POST		title content nickname	是	处理发布主题请求
/userInfo	GET			是	渲染个人资料页面
/userInfo	POET		email nickname gender	是	处理修改资料请求
/page	GET				渲染分页页面

• 连接数据库
• 实现功能
  登陆，注册，退出，修改，发帖
  先处理好客户端页面内容 （name,收集表单数据，发起请求）
  操作数据库
  有错的话发送500告诉客户端服务端错了
  其他的根据你的业务发送不同的响应数据

首页整体布局

一.app.js
主要职责：做一些服务相关配置，模板引擎，body-parser解析表单post请求体，提供静态资源服务，挂载路由，监听端口启动服务
值得注意的地方是：配置表单post请求体插件和session一定要在挂载路由之前

const express = require('express');
const app = express();
const router = require('./router');
const bodyParser = require('body-parser');
const path = require('path');
const port = 3000;
const session = require('express-session');
app.use(session({
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: false
}))
app.use('/public', express.static(path.join(__dirname, './public/')));
app.use('/node_modules', express.static(path.join(__dirname, './node_modules/')));
app.engine('html', require('express-art-template'));
app.set('views', path.join(__dirname, './views')) ;
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded());
app.use(router);
app.listen(port, () => console.log('now you kan listening to localhost:3000'));

二.路由设计（router.js）
简单列举两个值得我注意的地方

1.先说一个简单的注册功能
获取表单提交的数据（req.body）
操作数据库，判断用户或者用户名是否存在，存在就不允许注册，不存在注册新用户，发送响应，注册成功即显示登陆，通过session插件，把通过注册表单获取到的数据user传到session的user里面，

注册后或登陆状态
退出或未登录状态
注册时使用md5对密码重复加密
导包方式

const md5 = require('blueimp-md5');

加密后在之后登陆验证的时候，也要记得加密
另外mongDB的 或 操作方式，例

db.users.find({ '$or' : [{'name' : 'hurry'}, {'age' : 18}] },{'name' : 1, 'age' : 1, 'skills' : 1});

router.post('/register', (req, res) => {
    console.log(req.body)；
    User.findOne({
        $or: [{
                email: req.body.email
            },
            {
                nickname: req.body.nickname
            }
        ]
    }, (err, data) => {
        if (err) {
            return res.status(500).json({
                code: 500,
                message: '服务端错误'
            })
        }
        if (data) {
            return res.status(200).json({
                code: 1,
                message: '已存在'
            })
        }
        req.body.password = md5(md5(req.body.password)) //此处使用md5对密码重复加密
        new User(req.body).save((err, user) => {
            if (err) {
                return res.status(500).json({
                    code: 500,
                    message: '服务端错误'
                })
            }
            req.session.user = user；
           res.status(200).json({
                code: 0,；
                message: 'ok'
            })
        })
    })
})

根据处理结果发送出不同的响应数据(code)，接收后做判断

   $.ajax({
                type: 'POST',
                url: '/register',
                data: formData,
                dataType: 'json',
                success: function (data) {
                    console.log(data)
                    if (data.code === 0) {
                        // window.alert('注册成功，即将跳转')
                        window.location.href = "/"
                    } else if (data.code === 1) {
                        // window.alert('邮箱或者昵称已存在')
                    } else if (data.code === 500) {
                        // window.alert('服务端错误')
                    }
                }
            })

2.最值得说的就是分页了
渲染首页时服务端先从数据库拿数据，获取发帖数量，计算页码数，将页码数存放在数组中，客户端遍历显示页码数
点击前后页码按钮的时候，需要通过记录当前被按下具有active样式的index值
然后将index值转化成前一页或者后一页的索引值来确定页码数，发送到服务端，很长时间没用过这两个方法了，学啥记不住啥，写的时候头都大了

$(selector).index()

他用于获得第一个匹配元素相对于其同胞元素的 index 位置。

而eq() 方法返回带有被选元素的指定索引号的元素。
索引号从 0 开头，所以第一个元素的索引号是 0（不是 1）。

JS代码如下：

      $('.previous-button').click(() => {
            var index = $('.active').index()-2;
            console.log(index);
            if(index >= 0 ){
                $('.pagination').children('.pageCode').eq(index).click();
            }
        })
        $('.next-botton').click(() => {
            var index = $('.active').index();
            console.log(index);
            if(index < $('.pageCode').length ){
                $('.pagination').children('.pageCode').eq(index).click();
            }
        })
        $('.pageCode').click(function(e) {
            // e.preventDefault();
            e.preventDefault;
            $(this).addClass('active').siblings('.active').removeClass('active');
            $.ajax({
                type: 'GET',
                url: '/page',
                data:`num=${$(this).children('a').html()}`,
                dataType: 'json',
                success: function (data) {
                    $('.inner').html('');
                    console.log(data)
                    for (let i = 0; i < data.topic.length; i  ) {
                        let datas = data.topic[i]
                        $('.inner').append(
                            `

                                     

                                       
                                        
                                       
                                     
                                     


                                       
${datas.content}
                                       

                                       
${datas.nickname} 原创 	        				                ${datas.createTime}
                                       
                                     
                                   
`)
                    }
                }
            })

        })

接收当前页码数据，计算在该页显示的数据然后响应
这里当时让我困惑的是我用req.body获取数据，结果获取的出来的都是NaN
我就纳闷了，后来搜了才知道body 不是 nodejs 默认提供的，需要载入 body-parser 中间件才可以使用 req.body，他通常用于处理post请求
而query由nodejs默认提供，无需载入中间件，第一次用node写东西，知道的少，不熟练，还忘得快

router.get('/page', (req, res) => {
    const num = parseInt(req.query.num,10);
    console.log(num);
    const startNum = (num - 1) * 6;
    const endNum = startNum   6 ;
    Invitation.find((err,data) => {
        if(err){
            return res.end('Server Err');
        }
        data = data.slice(startNum,endNum);
        res.json({topic: data});
    })
})

其他功能相对简单，具体代码在这https://dev.tencent.com/u/Lucky7190/p/blog/git
菜鸟博主，代码有问题的话欢迎指正，共同进步！