基于node.js的留言板案例总结

完成模块：

1.注册与登陆
2.更改头像
3.用户留言功能与用户评论功能
4.退出登录

1.注册与登陆

1.1注册

只有注册了的用户才可以登录本系统和完成各项功能。
注册流程：

graph TD
输入用户名--> 输入密码-->再次输入密码-->点击注册-->向服务器发送数据验证-->服务器返回注册成功or注册失败

验证流程：
1.点击注册后，前台检测两次密码是否一致。一致进入下一步，不一致提示两次密码输入不一致，重新输入。代码如下：

        var userName=document.getElementById('userName').value;//获取用户名
        var userPsw=document.getElementById('userPsw').value;//获取密码
        var againPsw=document.getElementById('againPsw').value;//获取第二次密码
        if(userPsw!=againPsw){//如果两次密码不一致
            alert('两次密码不一致')
            return
        }

2.两次密码一致则将用户提交的用户名和密码提交至服务器进行验证。服务器验证如果该账号尚未被注册，则将用户信息以及默认头像保存至服务器，并返回前台注册成功，跳转至登录界面。如果该账号已被注册，则返回前台该账号已被注册。(请求方法：POST，接口：regist)代码如下：

web.post('/regist', function (req, res) {
    for (var index = 0; index < userList.length; index++) {
        if (userList[index].userName == req.body.userName) {
            res.send('用户名已注册');
            return
        }
    }
    req.body.headerIMG = './headerIMG/auto.jpg'
    var userRegist = {
        userName: req.body.userName,
        userPsw: req.body.userPsw,
        headerIMG: req.body.headerIMG
    }
    userList.push(userRegist)
    fs.writeFile('allUser.txt', JSON.stringify(userList), function (err) {
        res.send('注册成功')
    });
})

效果图：

1.2登录

已注册用户通过登陆本系统使用功能
登录流程：

graph TD
输入用户名 -->输入密码-->点击登录-->向服务器发送数据验证-->服务器返回登陆成功or登陆失败

验证流程：服务器接收前台发来的用户名和密码数据，服务器通过对比数据库中的用户名信息，如果不存在该用户名，则发送用户名尚未被注册的信息。如果存在该用户名，则验证数据库中该用户的密码和前台发送的密码是否一致，一致则返回登陆成功,并向浏览器添加一个name为‘userName’，value为当前登录的用户名的cookie。不一致则返回密码错误。代码如下(请求方法：post，接口：)：

web.post('/login', function (req, res) {
    for (var index = 0; index < userList.length; index++) {
        if (userList[index].userName == req.body.userName) {
            if (userList[index].userPsw == req.body.userPsw) {
                res.cookie('userName', req.body.userName)
                res.send('登陆成功')
            } else {
                res.send('密码错误')
            }
            return
        }
    } res.send('该用户不存在')
})

效果图：

2.留言板主界面

思路：
1：主界面需要预先加载判断用户是否登陆，未登录禁止使用各项功能。
2:主界面预加载已发布的留言与评论
3：主界面需实现更换头像、发布留言、回复留言三个功能。
主界面展示：

主要服务器代码展示：

//查询所有信息
web.get('/allMessage', function (req, res) {
    fs.readFile('allMessage.txt', 'utf-8', function (err, data) {
        allMessage = JSON.parse(data);
        res.send(allMessage)
    })
})

添加留言展示：

主要服务器代码展示：

//添加留言
web.post('/addMessage', function (req, res) {
    var date = new Date();
    date = date.toLocaleString()
    var headerUrl;
    for (var index = 0; index < userList.length; index++) {
        if (userList[index].userName == req.body.userName) {
            headerUrl = userList[index].headerIMG;
            break
        }
    }
    var addMessage = {
        userName: req.body.userName,
        message: req.body.message,
        date: date,
        hearderUrl: headerUrl,
        returnMessage:[]

    }
    allMessage.unshift(addMessage);
    fs.writeFile('allMessage.txt', JSON.stringify(allMessage), function (err) {
        res.send('提交成功')
    })
})

回复留言展示：

主要服务器代码展示：

//回复留言
web.post('/returnMessage',function(req,res){
    var returnMessage=allMessage[req.body.index].returnMessage;
    var header=userList.filter(function(el){
        return el.userName==req.body.userName
    })
    var date=new Date();
    date=date.toLocaleString();
    var returnMessageArrey={
        name:req.body.userName,
        message:req.body.message,
        date:date,
        header:header[0].headerIMG
    }
    returnMessage.unshift(returnMessageArrey);
    fs.writeFile('allMessage.txt',JSON.stringify(allMessage),function(err){
        res.send('回复成功')
    })

})

总结

功能基本实现，但是整体界面排版太乱，不规整。

感悟

1.多使用Bootstrap框架进行页面布局，尽量避免自己写页面布局（丑、乱、差）。
2.代码尽量写上注释，避免代码写多后找不到前面写的在哪或者不知道前面写的啥（总自以为是自己记得住，看得懂）。