基于express框架的留言板实现步骤
这个留言板是基于express框架，和ejs模板引擎，首先需要在根目录安装express框架，然后安装ejs模块和body-parser(获取用户表单提交的数据)；建立项目目录 message，然后依次建立views文件夹 （存放ejs模板文件）、public（存放静态资源css js images，使用express内置中间件static托管静态）、routers（路由文件，创建路由级中间件）；
然后建立一个入口文件app.js .
// 项目入口文件
'use strict';
const express = require('express');
const path = require('path');
const app = express();
const bodyParser = require('body-parser');
//引入获取表单的第三方中间件
//托管静态资源
app.use(express.static(path.join(__dirname, 'public'))); //将public的资源全部托管 // 使用bodyparser中间件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
//实现跟路由;可以通过message二级路由来实现
const message = require('./routers/message');
app.use('/', message);
//之后的显示全部在二级路由message中处理
app.listen(3000, () => {
console.log('3000 is on!');
});
再在routers文件夹中建立一个message路由如下
const express = require('express');
const router = express.Router();
const path = require('path');
const fs = require('fs');
const app = express();
// 实现载入页面的路由；需要载入的页面中含有静态资源和用户的留言
router.get('/', (req, res) => {
// 显示用户的留言
//读取数据
let arr = [];
// 渲染ejs页面
if (fs.existsSync('msg.json')) { //判断是否存在这个文件 ，如果存在就直接读取，如果不存在就写入
let str = fs.readFileSync('msg.json', 'utf8');
arr = JSON.parse(str);
}
res.render('index.ejs', { data: arr }, (err, html) => {
if (err) throw err;
console.log(html);
res.send(html);
});
});
// 处理用户的提交留言
router.post('/publish', (req, res) => {
let msg = req.body; //提取用户提交的数据
msg.time = new Date().toLocaleString();
let arr = [];
// 保存用户的留言
if (fs.existsSync('msg.json')) {
// 如果msg.json存在文件就先读取文件再写入
let str = fs.readFileSync('msg.json', 'utf8');
arr = JSON.parse(str);
}
arr.push(msg);
// 将数据写入msg.json中
fs.writeFile('msg.json', JSON.stringify(arr), (err) => {
if (err) throw err;
res.send('<p>发布成功<a href="/">返回</a></p>');
});
});
module.exports = router;
在views文件夹中放ejs模板文件index.ejs，代码如下；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" href="style/base.css" type="text/css" />
<link rel="stylesheet" href="style/global.css" type="text/css" />
<title>LD Studio 留言板---很靠谱的留言板</title>
</head> <body>
<div class="wrapper">
<!-- 公共头部 -->
<div class="header">
<h1><a href="">LD Stuido留言板</a></h1>
<h2>很靠谱的留言板</h2>
<img src="data:images/hanoi.jpg" alt="" />
<ul>
<li><a href="/">首页</a></li>
<li><a href="/">关于</a></li>
</ul>
</div> <div class="main">
<div class="content">
<% for (var i = 0; i < data.length; i++) { %>
<div class="msg">
<h2>
<%= data[i].title %>
</h2>
<p>发表于
<a href="">
<%= data[i].time %>
</a> 由
<a href="">
<%= data[i].author %>
</a>
</p>
<p>
<%= data[i].content %>
</p>
</div>
<% } %> <div class="msg_form">
<h2>发表留言</h2>
<form action="/publish" method="post">
<ul>
<li>
<label for="">标题：</label>
</li>
<li>
<input type="text" name="title" class="txt" />
</li>
<li>
<label for="">作者：</label>
</li>
<li>
<input type="text" name="author" class="txt" />
</li>
<li>
<label for="">内容：</label>
</li>
<li>
<textarea name="content" id="" cols="70" rows="5"></textarea>
</li>
<li>
<input type="submit" value="提 交" class="btn" />
</li>
</ul>
</form>
</div>
</div> <div class="sidebar">
<h2>最新留言</h2>
<ul>
<li><a href="">LAMP架构</a></li>
<li><a href="">JavaScript程序设计</a></li>
<li><a href="">CSS样式</a></li>
<li><a href="">XTHML结构</a></li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
<!-- 公共底部 -->
<div class="footer">
<p><a href="">LD Studio</a> 2009-2012 版权所有</p>
</div>
</div>
</body> </html>
最后启动app.js
留言板实现完成！
基于express框架的留言板实现步骤的更多相关文章
- 基于express框架的应用程序骨架生成器介绍
作者:zhanhailiang 日期:2014-11-09 本文将介绍怎样使用express-generator工具高速生成基于express框架的应用程序骨架: 1. 安装express-gener ...
- 【Node.js】一、搭建基于Express框架运行环境+更换HTML视图引擎
1)安装express generator生成器 这个express generator生成器类似于vue-cli脚手架工具,用来创建一个后端项目,首先我们要对生成器进行全局安装,在cmd中输入下 ...
- Node.js基于Express框架搭建一个简单的注册登录Web功能
这个小应用使用到了node.js bootstrap express 以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...
- 【Node.js】二、基于Express框架 + 连接MongoDB + 写后端接口
在上节,我们讲了如何搭建express环境,现在我们说说如何通过node.js写服务接口给前端调用 1. 首先通过MongoDB建好数据库与表格 例如,我的数据库名字为db_demo,数据库表格为go ...
- 基于express框架的Token实现方案
什么是Token? 在计算机身份认证中是令牌(临时)的意思,在词法分析中是标记的意思.一般我们所说的的token大多是指用于身份验证的token Token的特点 随机性 不可预测性 时效性 无状态. ...
- 搭建基于Express框架运行环境
安装express generator生成器 通过生成器自动创建项目 配置分析 一.安装 cnpm i -g express-generator express --version // 查看版本 e ...
- 解决前端向后端请求静态资源的问题（基于express框架）
请求js,css,image资源: 前端 <script src='后端url/assets/js/xxx.js'>,<link href='后端url/assets/css/xxx ...
- NODE 基于express 框架和mongoDB的cookie和session认证 和图片的上传和删除
源码地址 https://gitee.com/zyqwasd/mongdbSession 本项目的mongodb是本地的mongodb 开启方法可以百度一下 端口是默认的27017 页面效果 1. 注 ...
- Node.js下基于Express + Socket.io 搭建一个基本的在线聊天室
一.聊天室简单介绍 采用nodeJS设计,基于express框架,使用WebSocket编程之 socket.io机制.聊天室增加了 注册登录模块 ,并将用户个人信息和聊天记录存入数据库. 数据库采用 ...
随机推荐
- matlab图形中添加文本框
图形中添加文本框,自己目前了解到了两种方法:1.用legend函数就可以对图形标注,形成一个文本框: 2.就是用annotation('textbox',[0.2,0.2.0.1,0.3],'Line ...
- 微信小程序清除缓冲
1:wxml定义一个清除缓冲的按钮,并绑定触摸事件 <button bindtap="clear">清空缓冲</button> 2:wxjs定义方法: // ...
- laravel 根据字段不同值做不同查询
在开发过程中我们经常遇到这种情况: 例如,一个信息表message,字段type 1.操作提醒 2.平台通知,表message_read记录当信息是平台通知时用户浏览状况 那么 当信息是平台通知时是针 ...
- Owin + WebApi + OAuth2 搭建授权模式（授权码模式 Part I）
绪 最近想要整理自己代码封装成库,也十分想把自己的设计思路贴出来让大家指正,奈何时间真的不随人意. 想要使用 OWIN 做中间件服务,该服务中包含 管线.授权 两部分.于是决定使用 webapi .O ...
- LGP5992题解
贪心和DP一样,上来先找规律 考虑一种特殊情况:菊花图. 很容易发现这是小学数学题,排序后取中点. 来考虑另一种情况:深度为 3 的完全二叉树. 假设这颗完全二叉树的节点编号是按照线段树编号的,给定权 ...
- CTS,CLS,CLR
1)CTS通用类型系统(Common Type System) CTS不但实现了COM的变量兼容类型,而且还定义了通过用户自定义类型的方式来进行类型扩展.任何以.NET平台作为目标的语言必须建立它的数 ...
- 使用Geth 构建以太坊区块链并模拟挖矿过程
使用Geth 构建以太坊区块链并模拟挖矿过程 Go-ethereum 是以太坊官方的一个Golang 实现,我们可以使用Geth 工具来创建创世区块并启动区块链,使用Clef 实现以太坊钱包的功能,以 ...
- Redis 使用规范
Redis 使用规范围绕如下几个纬度展开: 键值对使用规范: 命令使用规范: 数据保存规范: 运维规范. 键值对使用规范 有两点需要注意: 好的 key 命名,才能提供可读性强.可维护性高的 key, ...
- wordcloud库 词云
•wordcloud使用方法 常规使用方法 import wordcloud #创建一个词云对象 w = wordcloud.WordCloud(background_color="whit ...
- python3输出由1、2、3、4这四个数字组成的每位数都不相同的所有三位数
for i in range(1,5): for j in range(1,5): for k in range(1,5): if(i!=j and i!=k and j!=k): print(i*1 ...