Summary of message board case based on Node.js

Completed modules:

1. Register and log in 2. Change your profile picture 3. Log out

1. Registration and login

1.1 registered

Only registered users can log in this system and complete the functions. Registration process:

Graph TD Enter user name --> enter password --> enter password again --> click Register --> send data validation to server --> Server returns registration success or registration failure

Verification process: 1. After clicking the register button, the front desk checks whether the two passwords are consistent. Consistent Go to the next step. Inconsistent A message is displayed indicating that the two passwords are inconsistent. The code is as follows:

        var userName=document.getElementById('userName').value;// Get the user name
        var userPsw=document.getElementById('userPsw').value;// Get the password
        var againPsw=document.getElementById('againPsw').value;// Get the second password
        if(userPsw! =againPsw){// If the two passwords are different
            alert('Two different passwords')
            return
        }
Copy the code

2. If the two passwords are the same, submit the user name and password to the server for verification. Server authentication If the account has not been registered, the user information and default profile picture are saved to the server, and the login page is displayed. If the account is registered, return to the foreground that the account is registered. (Request method: POST, interface: regist)

web.post('/regist'.function (req, res) {
    for (var index = 0; index < userList.length; index++) {
        if (userList[index].userName == req.body.userName) {
            res.send('Username registered');
            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('Registration successful')}); })Copy the code

Effect:

1.2 the login

Registered users log in the system to use functions:

Graph TD Enter user name --> enter password --> click Login --> send data to server for authentication --> Server returns login success or login failure

Verification process: The server receives the user name and password data from the front end. The server compares the user name information in the database. If the user name does not exist, the server sends the information that the user name is not registered. If the userName exists, verify whether the password of the user in the database is consistent with the password sent by the foreground. If the password is consistent, the login succeeds, and add a cookie whose name is’ userName ‘and value is the name of the current login user to the browser. If they are inconsistent, incorrect passwords are returned. Request method: POST, interface:

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('Successful landing')}else {
                res.send('Password error')}return
        }
    } res.send('This user does not exist')})Copy the code

Effect:

2. Main page of the message board

1: The main interface needs to be preloaded to determine whether the user has logged in. If the user has not logged in, all functions are prohibited. 2: The home screen preloads published messages and comments. 3: The home screen supports the following functions: changing the profile picture, Posting a message, and replying to a message. Main interface display:

Main server code display:

// Query all information
web.get('/allMessage'.function (req, res) {
    fs.readFile('allMessage.txt'.'utf-8'.function (err, data) {
        allMessage = JSON.parse(data);
        res.send(allMessage)
    })
})
Copy the code

Add message display:

Main server code display:

// Add a message
web.post('/addMessage'.function (req, res) {
    var date = new Date(a); 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('Submitted successfully')})})Copy the code

Reply message display:

Main server code display:

// Reply to a message
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(a); 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('Reply successful')})})Copy the code

conclusion

Function basic realization, but the overall interface layout is too disorderly, not neat.

feeling

1. Use the Bootstrap framework for page layout, and try to avoid writing your own page layout (ugly, messy and bad). 2. Write comments on the code as much as possible, so as not to find where the code is written or not to know what the code is written before (always assume that they remember, understand).