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

Solution to using html2canvas to process Dom elements with Baidu map into images

Problem 1: Baidu Map uses tiled images (the map i...

Detailed explanation of grep and egrep commands in Linux

rep / egrep Syntax: grep [-cinvABC] 'word'...

WePY cloud development practice in Linux command query applet

Hello everyone, today I will share with you the W...

Analysis of the principles of docker containers

Table of contents 01 What is the essence of a con...

Low-version Druid connection pool + MySQL driver 8.0 causes thread blocking and performance limitation

Table of contents Phenomenon Root Cause Analysis ...

Simple example of HTML text formatting (detailed explanation)

1. Text formatting: This example demonstrates how...

JavaScript ES6 Module Detailed Explanation

Table of contents 0. What is Module 1.Module load...

How to encapsulate axios request with vue

In fact, it is very simple to encapsulate axios i...

Vue implements image dragging and sorting

This article example shares the specific code of ...

Code for implementing simple arrow icon using div+CSS in HTML

In web design, we often use arrows as decoration ...

Detailed explanation of MySql automatic truncation example

Detailed explanation of MySql automatic truncatio...

The contents of the table in HTML are displayed horizontally and vertically in the center

Specify in CSS style file #class td /*Set the tab...

The National Day is coming. Use JS to implement a small tool to generate a National Day style avatar. Detailed explanation of the implementation process

Table of contents 1. Page Layout 2. Image upload ...

Detailed explanation of some commonly used font-size font units and line-height in CSS

px(pixel) I believe everyone is familiar with the...

Detailed explanation of Docker daemon security configuration items

Table of contents 1. Test environment 1.1 Install...