Node.js+express message board function implementation example

Node.js+express message board function implementation example

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

Recommend

A brief discussion on the pitfalls of react useEffect closure

Problem code Look at a closure problem code cause...

Sliding menu implemented with CSS3

Result:Implementation code: <!DOCTYPE html>...

PHP-HTMLhtml important knowledge points notes (must read)

1. Use frameset, frame and iframe to realize mult...

Detailed explanation of Mysql communication protocol

1.Mysql connection method To understand the MySQL...

Vue Element-ui implements tree control node adding icon detailed explanation

Table of contents 1. Rendering 2. Bind data and a...

Tips for data statistics in MySQL

As a commonly used database, MySQL requires a lot...

Difference between HTML4 and HTML5: How to add focus implementation code to an input

html4: Copy code The code is as follows: <form...

Detailed steps for installing, configuring and uninstalling QT5 in Ubuntu 14.04

1. I downloaded QT5.13 version before, but after ...

Analysis of Linux kernel scheduler source code initialization

Table of contents 1. Introduction 2. Basic Concep...

WeChat applet development form validation WxValidate usage

I personally feel that the development framework ...

CSS code to control the background color of the web page

I think everyone often worries about finding pict...

CSS3 flip card number sample code

I received a task from the company today, and the...

Page Refactoring Skills - Content

Enough of small talk <br />Based on the lar...

Example code for css flex layout with automatic line wrapping

To create a flex container, simply add a display:...

Detailed tutorial for installing nginx on centos8 (picture and text)

Nginx, pronounced "engine x," is an ope...