脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → node.js express留言板

node.js+express留言板功能实现示例

 更新时间：2021年09月21日 09:07:24   作者：Moshow郑锴  
本文介绍基于nodejs+express+art-template的留言板功能。包含列表界面、添加界面和发送留言功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

留言板

基于nodejs+express+art-template的留言板功能。包含列表界面、添加界面和发送留言功能。

所需类库

直接copy以下package.json 然后直接 npm install 或者yarn install 即可。

package.json所需内容如下。

{
  "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"
  }
}

开源项目

本项目收录在【Node.js Study】nodejs开源学习项目 中的express_message_board 。欢迎大家学习和下载。

运行效果 localhost ，留言首页

在这里插入图片描述localhost/post ，

添加留言页面

在这里插入图片描述localhost/say?

name=xxx&message=xxx ，发送留言并重定向到首页功能

在这里插入图片描述 

项目结构

index.html

这是留言列表，也是首页。根据传过来的值渲染列表。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>留言板</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>留言板 <small>留言列表</small></h1>
    <a class="btn btn-success" href="/post" rel="external nofollow" >发表留言</a>
  </div>
</div>
<div class="comments container">
  <ul class="list-group">
    {{each comments}}
    <li class="list-group-item">
      {{$value.name}}说:  {{$value.message}}
      <span class="pull-right">{{$value.datetime}}</span>
    </li>
    {{/each}}
  </ul>
</div>
</body>
</html>

post.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</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"  >留言板 <small>添加留言</small></a></h1>
    </div>
</div>
<div class="comments container">
    <form action="/say" method="GET">
        <div class="form-group">
            <label for="name">你的大名</label>
            <input type="text" id="name" name="name" class="form-control" placeholder="请输入姓名" required minlength="2" maxlength="10">
        </div>
        <div class="form-group">
            <label for="message">留言内容</label>
            <textarea id="message" name="message" class="form-control" placeholder="请输入留言内容" cols='30' rows='10' required minlength="5" maxlength="20"></textarea>
        </div>
        <button type="submit" class="btn btn-default">发表</button>
    </form>
</div>
</body>
</html>

route/index.js

这里是路由器

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


// 模拟首页留言列表数据
var comments= {"comments":[
    {name:"AAA",message:"你用什么编辑器？WebStorem or VSCODE",datetime:"2021-1-1"},
    {name:"BBB",message:"今天天气真好?钓鱼or代码",datetime:"2021-1-1"},
    {name:"Moshow",message:"zhengkai.blog.csdn.net",datetime:"2021-1-1"},
    {name:"DDD",message:"哈与哈哈与哈哈哈的区别",datetime:"2021-1-1"},
    {name:"EEE",message:"王守义十三香还是iphone十三香",datetime:"2021-1-1"}
]}

/* by zhengkai.blog.csdn.net - 静态路由托管 */
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);
    //重定向到首页，没有url后缀 localhost
    res.redirect('/');
    //直接渲染首页，有url后缀 localhost/say?xxxx=xxx
    //res.render('index', comments);
});

module.exports = router;

app.js

这里作为总控制

//加载模块
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);


//创建监听对象
app.listen(80,function(){
  console.log('zhengkai.blog.csdn.net 项目启动成功 http://localhost')
})

到此这篇关于node.js+express留言板功能实现示例的文章就介绍到这了,更多相关node.js express留言板内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • VsCode无法识别node问题解决过程

    VsCode无法识别node问题解决过程

    这篇文章主要给大家介绍了关于VsCode无法识别node问题解决的相关资料,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-07-07
  • node使用crypto模块为用户密码加密

    node使用crypto模块为用户密码加密

    本文主要介绍了node使用crypto模块为用户密码加密，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • nodejs连接mysql数据库及基本知识点详解

    nodejs连接mysql数据库及基本知识点详解

    这篇文章主要介绍了nodejs连接mysql数据库,结合实例形式总结分析了nodejs连接与操作mysql数据库的相关模板、配置及mysql数据库查询、添加数据等操作技巧,需要的朋友可以参考下
    2018-03-03
  • 关于express与koa的使用对比详解

    关于express与koa的使用对比详解

    很多人都在问到底该用Koa还是express，所以下面这篇文章就来给大家再次的对比了关于express与koa的相关资料，通过对比大家可以更好的进行选择，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
    2018-01-01
  • node中的Express框架详解

    node中的Express框架详解

    这篇文章主要介绍了node中的Express框架,框架是为了规范开发流程，降低开发难度，提高开发效率而制定的一套共人们使用的功能模块或者是编程的约定,需要的朋友可以参考下
    2023-04-04
  • 基于Node.js实现nodemailer邮件发送

    基于Node.js实现nodemailer邮件发送

    Nodemailer 是一个简单易用的 Node.JS 邮件发送模块（通过 SMTP，sendmail，或者 Amazon SES），支持 unicode，你可以使用任何你喜欢的字符集。Nodemailer是一个简单易用的Node.js邮件发送组件，需要的朋友可以参考下
    2016-01-01
  • node中socket.io的事件使用详解

    node中socket.io的事件使用详解

    这篇文章主要介绍了node中socket.io的事件使用详解,需要的朋友可以参考下
    2014-12-12
  • node.js中get和post接口教程

    node.js中get和post接口教程

    这篇文章主要介绍了node.js中get和post接口学习，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-05-05
  • 浅谈Node 调试工具入门教程

    浅谈Node 调试工具入门教程

    这篇文章主要介绍了浅谈Node 调试工具入门教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • npm安装报错npm ERR! Error: EPERM: operation not permitted解决

    npm安装报错npm ERR! Error: EPERM: operation&

    这篇文章主要为大家介绍了npm安装报错npm ERR! Error: EPERM: operation not permitted解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07

最新评论