node.js+express留言板功能实现示例
目录
- 留言板
- 所需类库
- 开源项目
- 项目结构
留言板
基于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留言板内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JS实现留言板功能
每天一个JS 小demo之留言板.主要知识点:DOM方法的理解和运用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .wrap { width: 400px; margin: 30px au
-
js 实现的可折叠留言板(附源码下载)
javaScript 代码如下: $(document).ready(function(){ $(".message_list .message_body:gt(0)").hide(); $(".message_list li:gt(4)").hide(); $(".message_head").click(function(){ $(this).next(".message_body").slideToggle(500) r
-
jsp留言板源代码三: 给jsp初学者.
作 者: precom (皮蛋) 2000.12.10reply.jsp ==================================== <html><head> <META content="text/html; charset=gb2312 " http-equiv=Content-Type> <title>张家界电话黄页(网上114)</title></head> <style type=&q
-
JavaScript实现网页留言板功能
JavaScript(JS)网页–留言板,供大家参考,具体内容如下 在使用网页进行冲浪时,经常会发表自己的留言.发布留言的留言板是怎么做的呢? 制作一个简单的留言板. 首先需要一个textarea框,旁边放置一个按钮,然后需要一个ul标签,里面不需要放置li元素,用CSS加以简单的修饰. 紧接着获取元素,在点击按钮后,创建一个li,将文本框里面的赋值给li,将li插入到ul的第一个孩子的前面. <!DOCTYPE html> <html lang="zh-CN">
-
javascript实现留言板功能
本文实例为大家分享了javascript实现留言板功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ /*设置最外层盒子*/ width:
-
用ReactJS和Python的Flask框架编写留言板的代码示例
近期要在生产环境上使用react,所以,自己学习了一下,写了一个简单的留言板小程序.完整的代码可以到这里下载:message-board Use 前端使用React,然后还有Bootstrap和jQuery,React负责前端展现,jQuery主要是向服务器发送ajax请求. 后端使用Flask和MongoDB,为前端提供数据.这里主要关注前端,对于后端不做过多说明. 使用webpack,对js文件进行打包. About React React是facebook开发一个用于前段交互的Javasc
-
JS实现简易留言板（节点操作）
本文实例为大家分享了JS实现简易留言板的具体代码,供大家参考,具体内容如下 今天的案例主要是对节点进行操作 创建节点.添加节点.删除节点以及为节点添加内容的操作. 就是一个简单的留言板功能,可以发布留言,删除留言. 主要思路:两个鼠标点击事件--点击发布按钮事件和点击删除按钮事件 发布按钮事件:首先在文档中创建li节点.然后第二步,先把文本域中的内容获取出来赋给li,这里要注意,文本域是表单元素,获取表单元素的内容是使用表单的特有属性value,要与普通元素获取内容的innerHTML进行区分:
-
node.js+express留言板功能实现示例
目录 留言板 所需类库 开源项目 项目结构 留言板 基于nodejs+express+art-template的留言板功能.包含列表界面.添加界面和发送留言功能. 所需类库 直接copy以下package.json 然后直接 npm install 或者yarn install 即可. package.json所需内容如下. { "name": "nodejs_message_board", "version": "2021.09&qu
-
JS实现留言板功能[楼层效果展示]
功能实现: 1.发布人和发布内容非空校验 2.编辑删除功能 3.楼层效果展示 4.发布时间展示 效果图 目录 tools.js 时间工具包 function getTime(){ var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; var date = new Date(); var year = date
-
原生JS实现留言板功能
本文实例为大家分享了JS实现留言板功能的具体代码,供大家参考,具体内容如下 实现这个留言板功能比较简单,所以先上效果图: 实现用户留言内容,留言具体时间. <script> window.onload = function(){ var oMessageBox = document.getElementById("messageBox"); var oInput = document.getElementById("myInput"); var oPos
-
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
同志们,经过不懈的努力,查了各种文档,终于鼓捣出了一个稍微像样一点的node项目,当然如果直接拿去项目里用,这个demo还太简单,毕竟一个完整的登录注册还有很多实际的内容,本案例mySQL的用户列表里,为便于理解,只设置了username 和password两个字段,正常的登录注册,肯定会有更多的字段的.但是对于初学node的人来说,比如笔者,还是学习到了不少内容,甚至,紧张的我不知如下下笔,肯定这个是参考了很多网上其他少年博客,以后这个登录注册demo会依据项目的需要而有所改进, 效果如下 效
-
node.js express安装及示例网站搭建方法(分享)
1.首先肯定是要安装Node.JS windows cmd依次输入如下命令: cd C:\Program Files\nodejs\ npm install -g express npm install -g express-generator 2.创建一个示例工程 windows cmd依次输入如下命令: cd C:\Program Files\nodejs\node_global express -e microblog //即ejs,-j(即jade) cd microblog npm i
-
node.js express框架实现文件上传与下载功能实例详解
本文实例讲述了node.js express框架实现文件上传与下载功能.分享给大家供大家参考,具体如下: 背景 昨天吉视传媒的客户对IPS信息发布系统又提了一个新需求,就是发布端发送消息时需要支持附件的上传,而接收端可以对发布端上传的附件进行下载:接收端回复消息时也需要支持上传附件,发布端可以对所有接收端上传的附件进行打包下载. 功能实现 前台部分 前台使用webUploader插件即可,这是百度开发的一款文件上传组件,具体使用查看它的API即可.这个项目之前开发的时候前台使用了angular.
-
php+Memcached实现简单留言板功能示例
本文实例讲述了php+Memcached实现简单留言板功能.分享给大家供大家参考,具体如下: MyPdo.php <?php class MyPdo{ private $pdo; function __construct() { $this->pdo = $this->getPdo(); } /** * CreatePDO * * @return PDO */ public function getPdo() { $dbms='mysql'; $dbName='testdb'; $use
-
PHP实现的简单留言板功能示例【基于thinkPHP框架】
本文实例讲述了PHP实现的简单留言板功能.分享给大家供大家参考,具体如下: 入口文件 文件名 index.php <?php // 应用入口文件 // 检测PHP环境 if(version_compare(PHP_VERSION,'5.3.0','<')) die('require PHP > 5.3.0 !'); // 开启调试模式 建议开发阶段开启 部署阶段注释或者设为false define('APP_DEBUG',True);//开发调试模式 //define('APP_DEB
-
Node.js Express安装与使用教程
之前我们在安装完Node.js后直接写了个HelloWorld网站,这次呢,我们使用Node.js的Web框架Express来重写一下HelloWorld,看看有什么不同.同时我们还会重写之前的文件服务器,功能更完善而代码更简洁. 安装 express 为了重写我们的HelloWorld,我们需要安装Express模块.Express基于Node.js的一个Web框架,官方网站在这里:http://expressjs.com/.官网对Express的介绍是: Fast, unopinionate