Node.js+express message board function implementation example

Message Board
Required libraries
Open Source Projects
Project Structure

Message Board

Message board function based on nodejs+express+art-template. Contains list interface, add interface and send message function.

Required libraries

Simply copy the following package.json and then npm install or yarn install .

The required contents of package.json are as follows.

{
  "name": "nodejs_message_board",
  "version": "2021.09",
  "private": true,
  "scripts": {
    "start": "node app"
  },
  "dependencies": {
    "art-template": "^4.13.2",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "express-art-template": "^1.0.1"
  }
}

Open Source Projects

This project is included in express_message_board in the [Node.js Study] nodejs open source learning project. Welcome everyone to study and download.

Running effect localhost, message home page

insert image description here localhost/post ,

Add message page

insert image description here localhost/say?

name=xxx&message=xxx, send a message and redirect to the home page

insert image description here

Project Structure

index.html

This is the message list and also the home page. Renders a list based on the values passed in.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Message Board</title>
  <link rel="stylesheet" href="/public/css/bootstrap4.css" rel="external nofollow" rel="external nofollow" >
</head>
<body>
<div class="header container">
  <div class="page-header">
    <h1>Message Board<small>Message List</small></h1>
    <a class="btn btn-success" href="/post" rel="external nofollow" >Leave a message</a>
  </div>
</div>
<div class="comments container">
  <ul class="list-group">
    {{each comments}}
    <li class="list-group-item">
      {{$value.name}} says: {{$value.message}}
      {{$value.datetime}}
    </li>
    {{/each}}
  </ul>
</div>
</body>
</html>

post.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Message Board</title>
    <link rel="stylesheet" href="/public/css/bootstrap4.css" rel="external nofollow" rel="external nofollow" >
</head>
<body>
<div class="header container">
    <div class="page-header">
        <h1><a href="/" rel="external nofollow" >Message Board<small>Add a message</small></a></h1>
    </div>
</div>
<div class="comments container">
    <form action="/say" method="GET">
        <div class="form-group">
            <label for="name">Your name</label>
            <input type="text" id="name" name="name" class="form-control" placeholder="Please enter your name" required minlength="2" maxlength="10">
        </div>
        <div class="form-group">
            <label for="message">Message content</label>
            <textarea id="message" name="message" class="form-control" placeholder="Please enter your message" cols='30' rows='10' required minlength="5" maxlength="20"></textarea>
        </div>
        <button type="submit" class="btn btn-default">Publish</button>
    </form>
</div>
</body>
</html>

route/index.js

Here is the router

const express = require('express');
const router = express.Router();


//Simulate the homepage message list data var comments= {"comments":[
    {name:"AAA",message:"What editor do you use? WebStorem or VSCODE",datetime:"2021-1-1"},
    {name:"BBB",message:"What a nice weather today? Fishing or code",datetime:"2021-1-1"},
    {name:"Moshow",message:"zhengkai.blog.csdn.net",datetime:"2021-1-1"},
    {name:"DDD",message:"The difference between ha, haha and hahaha",datetime:"2021-1-1"},
    {name:"EEE",message:"Wang Shouyi Thirteen Spices or iPhone Thirteen Spices",datetime:"2021-1-1"}
]}

/* by zhengkai.blog.csdn.net - Static routing hosting*/
router.get('/', function(req, res, next) {
    res.render('index', comments);
});
router.get('/post', function(req, res, next) {
    res.render('post', comments);
});
router.get('/say', function(req, res, next) {
    console.log(req.query)
    console.log(req.url)
    const comment = req.query;
    comment.datetime='2021-10-01';
    comments.comments.unshift(comment);
    // Redirect to the home page, without the URL suffix localhost
    res.redirect('/');
    // Render the home page directly, with the URL suffix localhost/say?xxxx=xxx
    //res.render('index', comments);
});

module.exports = router;

app.js

Here as the overall control

//Load module const http=require('http');
const fs = require('fs');
const url = require('url');
const template = require('art-template');
const path = require('path');
const express = require('express');
const router = express.Router();
const app = express();


//view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
app.engine('html',require('express-art-template'));

app.use('/public',express.static(path.join(__dirname, 'public')));

const indexRouter = require('./routes/index');
app.use('/', indexRouter);


//Create a monitoring object app.listen(80,function(){
  console.log('zhengkai.blog.csdn.net project started successfully http://localhost')
})

This is the end of this article about the implementation example of the node.js + express message board function. For more related node.js express message board content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

JS realizes message board function
jsp message board source code three: for jsp beginners.
Foldable message board implemented by js (with source code download)
Code example of writing a message board using ReactJS and Python's Flask framework
JS implements a simple message board (node operation)
JavaScript to implement web message board function
JavaScript to achieve message board function

<<: docker compose idea CreateProcess error=2 The system cannot find the specified file

>>: Use of Linux stat command