这个留言板是基于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框架的留言板实现步骤的更多相关文章

  1. 基于express框架的应用程序骨架生成器介绍

    作者:zhanhailiang 日期:2014-11-09 本文将介绍怎样使用express-generator工具高速生成基于express框架的应用程序骨架: 1. 安装express-gener ...

  2. 【Node.js】一、搭建基于Express框架运行环境+更换HTML视图引擎

      1)安装express generator生成器 这个express generator生成器类似于vue-cli脚手架工具,用来创建一个后端项目,首先我们要对生成器进行全局安装,在cmd中输入下 ...

  3. Node.js基于Express框架搭建一个简单的注册登录Web功能

    这个小应用使用到了node.js  bootstrap  express  以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...

  4. 【Node.js】二、基于Express框架 + 连接MongoDB + 写后端接口

    在上节,我们讲了如何搭建express环境,现在我们说说如何通过node.js写服务接口给前端调用 1. 首先通过MongoDB建好数据库与表格 例如,我的数据库名字为db_demo,数据库表格为go ...

  5. 基于express框架的Token实现方案

    什么是Token? 在计算机身份认证中是令牌(临时)的意思,在词法分析中是标记的意思.一般我们所说的的token大多是指用于身份验证的token Token的特点 随机性 不可预测性 时效性 无状态. ...

  6. 搭建基于Express框架运行环境

    安装express generator生成器 通过生成器自动创建项目 配置分析 一.安装 cnpm i -g express-generator express --version // 查看版本 e ...

  7. 解决前端向后端请求静态资源的问题（基于express框架）

    请求js,css,image资源: 前端 <script src='后端url/assets/js/xxx.js'>,<link href='后端url/assets/css/xxx ...

  8. NODE 基于express 框架和mongoDB的cookie和session认证 和图片的上传和删除

    源码地址 https://gitee.com/zyqwasd/mongdbSession 本项目的mongodb是本地的mongodb 开启方法可以百度一下 端口是默认的27017 页面效果 1. 注 ...

  9. Node.js下基于Express + Socket.io 搭建一个基本的在线聊天室

    一.聊天室简单介绍 采用nodeJS设计,基于express框架,使用WebSocket编程之 socket.io机制.聊天室增加了 注册登录模块 ,并将用户个人信息和聊天记录存入数据库. 数据库采用 ...

随机推荐

  1. Linux安装JDK8环境

    1.下载JDK包 点击同意下载后,会让你注册oracel账号,登录了才能下载 2.上传到linux服务器,然后解压 解压命令(注意jdk的版本名称不一定相同): tar -zxvf jdk-8u181 ...

  2. vue-cli实现异步请求返回mock模拟数据

    在前后端分离开发的过程中,前端开发过程中,页面的数据显示一般都是写死的静态数据,也就是没有经过接口,直接写死在代码中的,在后端给出接口后,再替换为接口数据,为了减少对接成本,mock就出现了.通过预先 ...

  3. org.junit.platform.commons.JUnitException: TestEngine with ID 'junit-jupiter' failed to discover tests

    https://blog.csdn.net/qq_43349162/article/details/115285780 https://blog.csdn.net/Think_and_work/art ...

  4. 6月5日 python复习 模块

    """1. os和sys都是干什么的?2. 你工作中都用过哪些内置模块?3. 有没有用过functools模块?"""1. os 系统相关 ...

  5. Mysql学习笔记-InnoDB深度解析

    前言 我们在上一篇博客聊了Mysql的整体架构分布,连接层.核心层.存储引擎层和文件系统层,其中存储引擎层作为Mysql Server中最重要的一部分,为我们sql交互提供了数据基础支持.存储引擎和文 ...

  6. Spark—GraphX编程指南

    Spark系列面试题 Spark面试题(一) Spark面试题(二) Spark面试题(三) Spark面试题(四) Spark面试题(五)--数据倾斜调优 Spark面试题(六)--Spark资源调 ...

  7. KVM虚拟机cpu资源限制和vcpu亲缘性绑定

    前言 KVM中添加的实例存在资源分布不均的情况,这样如果有消耗资源的实例会影响到其他实例的服务正常运行,所以给kvm做资源限制是很有必要的,下面记录一下在centos7中KVM环境下使用cgroup限 ...

  8. sqlserver下载地址及密匙

    SqlServer 2017 下载地址及密钥 下载地址: ed2k://|file|cn_sql_server_2017_developer_x64_dvd_11296175.iso|17697771 ...

  9. MySQL 数据库作发布系统的存储，一天五万条以上的增量， 预计运维三年,怎么优化？

    1.设计良好的数据库结构,允许部分数据冗余,尽量避免 join 查询,提高效率. 2.选择合适的表字段数据类型和存储引擎,适当的添加索引. 3.MySQL 库主从读写分离. 4.找规律分表,减少单表中 ...

  10. MyBatis 框架的缺点?

    1.SQL 语句的编写工作量较大,尤其当字段多.关联表多时,对开发人员编写 SQL 语句的功底有一定要求. 2.SQL 语句依赖于数据库,导致数据库移植性差,不能随意更换数据库.