一、知识点

①nodejs实际开发中，通常把所有的HTML文件放到views目录中

②nodejs实际开发中，通常把所有的静态资源文件放到public目录中，方便统一处理

  • 当浏览器收到HTML响应内容之后，会从上到下依次解析，解析过程中当发现link、script、img、iframe、video、audio等带有src或者href（link）属性标签的时候，会自动对这些资源发起新的请求，这些资源就是静态资源
  • 把所有的静态资源放到统一的目录中，可以灵活的控制文件是否能被用户访问
  • 但是需要注意的是，客户端里的请求路径需要改成   /public/xxx   的形式，其中 /  就是url的根路径

③表单提交的数据处理需要使用nodejs的url模块，其中url.parse（‘地址’，true）可以将路径解析成为一个方便操作的对象

var url=require('url');

var path='/say?name=乔峰&message=降龙十八掌';

var obj=url.parse(path,true);

console.log(obj);

console.log(obj.pathname);

console.log(obj.query);

④通过服务器让客户端重定位，需要两个步骤，第一个是状态码（statusCode）设置为302（302是临时重定向，浏览器没有记忆功能），第二个是在响应头（setHeader）中通过Location重定向

二、功能实现

①项目目录

②HTML文件

  • index.html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>留言板</title>

    <link rel="stylesheet" href="/public/lib/bootstrap/dist/css/bootstrap.css">

</head>

<body>

    <div class="header container">

        <div class="page-header">

            <h1>留言板 <small>留言列表</small></h1>

            <a class="btn btn-success" href="/post">发表留言</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/lib/bootstrap/dist/css/bootstrap.css">

</head>

<body>

    <div class="header container">

        <div class="page-header">

            <h1><a href="/" >留言板 <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>
  • 404.html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>404</title>

</head>

<body>

    <h1>抱歉,您访问的页面失联了....</h1>

</body>

</html>

③app.js文件

//加载模块

var http=require('http');

var fs=require('fs');

var url=require('url');

var temlate=require('art-template');

// 模拟首页留言列表数据

var comments=[

    {name:"赵一",message:"你用什么编辑器？",datetime:"2018-1-1"},

    {name:"孙二",message:"今天天气真好",datetime:"2018-1-1"},

    {name:"张三",message:"飞流直下三千只",datetime:"2018-1-1"},

    {name:"李四",message:"哈哈哈哈哈",datetime:"2018-1-1"},

    {name:"王五",message:"楼上是傻逼",datetime:"2018-1-1"}

]

//创建web服务

var server=http.createServer();

server.on('request',function(request,response){

    /* var url=request.url; 把路径解析成一个对象*/

    var parseObj=url.parse(request.url,true);

    var pathname=parseObj.pathname;

    //请求路径不同,返回不同的数据

    if(pathname==='/'){

        // 请求路径是根目录,即请求留言列表页

        fs.readFile('./views/index.html',function(err,data){

            if(err){

                return response.end('404 Not Found');

            }

            var htmlStr=temlate.render(data.toString(),{

                comments:comments

            });

            response.end(htmlStr);

        });

    }else if(pathname==='/post'){

        //请求路径是 /post 即跳转至添加留言页面

        fs.readFile('./views/post.html',function(err,data){

            if(err){

                return response.end('404 Not Found')

            }

            response.end(data);

        });

    }else if(pathname.indexOf('/public/')===0){

        //请求路径是以 /public/ 开头,即请求静态资源的文件

        fs.readFile('.'+pathname,function(err,data){

            if(err){

                return response.end('404 Not Found');

            }

            response.end(data);

        });

    }else if(pathname==='/say'){

        //请求路径是 /say 即表单提交

        var comment=parseObj.query;

        comment.datetime='2018-2-10';

        comments.unshift(comment);

        //重定向,跳转回首页

        response.statusCode=302;

        response.setHeader('Location','/');

        response.end();

    } else{

        //请求路径为其他都设置404

        fs.readFile('./views/404.html',function(err,data){

            if(err){

                return response.end('404 Not Found');

            }

            response.end(data);

        });

    }

});

//创建监听对象

server.listen(3000,function(){

    console.log('Server is running...')

})

④效果演示

留言板(Nodejs)的更多相关文章

  1. nodejs中利用expresss脚手架和bootstrap,数据库mongodb搭建的留言板案例

    ## 1. 先打开编辑器,创建一个项目 ## 2. 再打开cmd命令提示符下载express脚手架 express   项目名   --view=ejs 或express   -e    项目名 ## ...

  2. AngularJs学习笔记（制作留言板）

    原文地址:http://www.jmingzi.cn/?post=13 初学Anjularjs两天了,一边学一边写的留言板,只有一级回复嵌套.演示地址 这里总结一下学习的过程和笔记.另外,看看这篇文章 ...

  3. dd——留言板再加验证码功能

    1.找到后台-核心-频道模型-自定义表单 2.然后点击增加新的自定义表单 diyid 这个,不管他,默认就好 自定义表单名称 这个的话,比如你要加个留言板还是投诉建议?写上去呗 数据表  这个不要碰, ...

  4. asp.net留言板项目源代码下载

    HoverTree是一个asp.net开源项目,实现了留言板功能. 前台体验网址:http://hovertree.com/guestbook/ 后台请下载源代码安装. 默认用户名:keleyi 默认 ...

  5. html的留言板制作（js）

    这次留言板运用到了最基础的localstorage的本地存储,展现的效果主要有: 1.编写留言2.留言前可以编辑自己的留言昵称.不足之处: 1.未能做出我喜欢的类似于网易的叠楼功能. 2.未能显示评论 ...

  6. 11月8日PHP练习《留言板》

    一.要求 二.示例页面 三.网页代码及网页显示 1.denglu.php  登录页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  7. [课程设计]Scrum 3.7 多鱼点餐系统开发进度（留言板选择方案）

    Scrum 3.7 多鱼点餐系统开发进度(留言板选择方案) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店点餐系统W ...

  8. [课程设计]Scrum 3.6 多鱼点餐系统开发进度（用户测试反馈页面构思&留言板设计）

    Scrum 3.6 多鱼点餐系统开发进度(用户测试反馈页面构思&留言板设计) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团 ...

  9. 用 Express4 写一个简单的留言板

    Knowledge Dependence:阅读文本前,你需要熟悉 Node.js 编程.Express 以及相关工具和常用中间件的使用. Node.js 以其单线程异步非阻塞的特点,越来越被广大的 W ...

随机推荐

  1. （十）pdf的构成之交叉引用表

    交叉引用表(xref) 其中包含对文档中所有对象的引用.交叉引用表的目的是允许随机访问文件中的对象,因此我们不需要读取整个PDF文档来定位特定对象.每个对象由交叉​​引用表中的一个条目表示.(该表保存 ...

  2. Navicat 导出 表结构

    Navicat 导出 表结构 转自:https://www.cnblogs.com/xianxiaobo/p/10254737.html 1. 首先点击新建查询,然后输入下面的语句 SELECT CO ...

  3. ROS的安装与使用

    一.apt方式安装 安装 说起ROS,可能大家现在或多或少都有所了解.现如今世界机器人发展之迅猛犹如几十年前计算机行业一样,机器人也逐渐进入到千家万户,大到工业机器人,小到家用的服务型机器人,各式各样 ...

  4. chrome浏览页面常用快捷键

    1.chrome浏览页面常用快捷键 Ctrl+N 打开新窗口. Ctrl+T 打开新标签页. Ctrl+W关闭当前标签 Ctrl + F4 关闭chrome浏览器 Ctrl+Tab 或 Ctrl+Pg ...

  5. CSS-宽度自适应和浏览器兼容笔记

    自适应 宽度自适应:网页元素根据窗口或子元素自动调整宽度 适用百分比进行设置,例如:100% 铺满:50% 占据一般宽度 块元素如果不设置宽度,默认为100% 自适应中可以设置最大或者最小宽度和高度 ...

  6. Jenkins+Docker+Git+Harbor流水线打包

    Jenkins+Docker+Git+Harbor流水线打包 环境: CentOS Linux release 7.6.1810 (Core) 192.168.247.214 Jenkins+dock ...

  7. Ubuntu安装Gitlab Runner

    第一步: 添加GitLab的官方存储库:    curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-runne ...

  8. 《深入理解 Java 虚拟机》读书笔记：Java 内存区域与内存溢出异常

    前言 最近开始看这本书,记得前段时间拿起这本书的时候,心情是相当沉重的!当时的剧本是这样的-- 内景.家里 - 下午 我(画外):唉,有点无聊啊!(偶然撇过书架)这么多书得看到什么时候啊,要不要拿一本 ...

  9. ES6开发环境准备及基础语法

    ES6开发环境准备及基础语法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一. 二. 三.

  10. 2018-2019 ACM-ICPC, Asia Xuzhou Regional Contest- H. Rikka with A Long Colour Palette -思维+贪心

    2018-2019 ACM-ICPC, Asia Xuzhou Regional Contest- H. Rikka with A Long Colour Palette -思维+贪心 [Proble ...