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

SQL serial number acquisition code example

This article mainly introduces the sql serial num...

MySQL index leftmost principle example code

Preface I was recently reading about MySQL indexe...

Detailed explanation of data transmission between React parent components and child components

Table of contents 1. Parent component passes data...

Basic principles of MySQL scalable design

Table of contents Preface 1. What is scalability?...

Canvas draws scratch card effect

This article shares the specific code for drawing...

Detailed explanation of Svn one-click installation shell script under linxu

#!/bin/bash #Download SVN yum -y install subversi...

How to get the dynamic number of remaining words in textarea

I encountered a case at work that I had never wri...

Summary of commonly used tool functions in Vue projects

Table of contents Preface 1. Custom focus command...

Understanding MySQL deadlock routines through unique index S lock and X lock

In Beginners' Understanding MySQL Deadlock Pr...

Calling Baidu Map to obtain longitude and latitude in Vue

In the project, it is necessary to obtain the lat...

Introduction to the use of html base tag target=_parent

The <base> tag specifies the default address...

Detailed explanation of the idea of ​​implementing dynamic columns in angularjs loop object properties

Angularjs loop object properties to achieve dynam...

Use Shell scripts to batch start and stop Docker services

Table of contents Start Docker Stop Docker Python...

Example code for CSS columns to achieve two-end alignment layout

1. Going around in circles After going around in ...

MySQL installation diagram summary

MySQL 5.5 installation and configuration method g...