nodejs
6 分钟 读完 (大约 878 个字) 0次访问

nodejs-留言板-demo

要点：
1、处理路由（对请求的处理）
2、对fs、http、art-template模块的运用

步骤

1、新建一个目录，用npm对项目进行初始化

在项目目录下

1
npm init

按照npm的提示引导填写项目信息
或者直接用这个进行默认初始化

1
npm init -y

这时在项目目录下会产生

  • node_modules 文件夹
    • 所有要用到的模块都放在这
      • 核心模块
      • 自己加载的第三方模块
  • package.json 文件
    • 存储项目信息和模块依赖

继续在项目目录新建如下文件结构

  • public 存放公开的静态资源

    • css
    • img
    • js
    • lib

  • views 存放页面

  • app.js 服务的启动文件

  • README.md 项目的说明文件

    安装art-template模板引擎模块

    也是在项目目录

    1
    npm install --save art-template

    此时在package.json中可以观察到依赖项”dependencies”多了个art-template

    2、打开app.js开始编写服务程序

    如下是程序代码（第一次学的时候写了很详细的注释）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    //引入核心模块
    var http = require('http')
    var fs = require('fs')
    var template = require('art-template')
    var url = require('url')

    //暂且用数组来存放留言数据
    var comments = []

    //使用http实例创建服务器
    http
        .createServer(function (req,res) {
            //url模块可以用来提取url中的信息
            var parseObj = url.parse(req.url, true)
            var pathName = parseObj.pathname
            
            //url请求根目录 /
            if (pathName === '/') {
                //fs模块实例读取文件
                fs.readFile('./views/index.html', function (err, data) {
                    if (err) {
                        return res.end('404 Not Found1.')
                    }
                    //使用模板引擎的render()将留言数据渲染到index.html页面
                    var htmlStr = template.render(data.toString(), {
                        comments : comments
                    })
                    //结束浏览器等待并返回页面
                    res.end(htmlStr)
                })//url请求写留言页面，此处判断请求是否是以/post开头
            } else if (pathName.indexOf('/post') === 0) {
              //跟上面一样也是读文件然后返回
                fs.readFile('./views/post.html', function (err, data) {
                    if (err) {
                        return res.end('404 Not Found2')
                    }
                    res.end(data)
                })//页面中有些link请求css样式
            } else if (pathName.indexOf('/public/') === 0) {
              //你请求啥，我就利用你请求的路径去去啥（pathName）
                fs.readFile('.' + pathName, function (err, data) {
                    if (err) {
                        return res.end('404 Not Found3')
                    }
                    res.end(data)
                })//url提交评论请求
            } else if (pathName === '/pinglun') {
                //提取url中？后面的信息并返回一个对象
                var comment = parseObj.query
                var dateTime = new Date()
                comment.dateTime = dateTime.getFullYear()+'-'+(dateTime.getMonth()+1)+
                                    '-'+dateTime.getDate()+ ' '+dateTime.getHours()+
                                    ':'+dateTime.getMinutes()+':'+dateTime.getSeconds()
                comments.unshift(comment)
                //301永久重定向：浏览器会记住，每次自己就跳转了
                //302临时重定向：浏览器不会记住，每次都会向服务器发请求来重定向
                res.statusCode = 302
                res.setHeader('Location', '/')
                res.end()
            } else {
                fs.readFile('./views/404.html', function(err, data) {
                    if (err) {
                        return res.end('您的页面失联了')
                    }
                    res.end(data)
                })
            }
        })

        //开启服务器监听3000端口
        .listen(3000, function () {
            console.log('running ...')
        })

3、把静态资源放到public文件夹中，把写好的页面放到views中

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
  <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>留言本</title>
  <link rel="stylesheet" href="/public/lib/bootstrap/bootstrap.css">
</head>

<body>
  <div class="header container">
    <div class="page-header">
      <h1>Example page header <small>Subtext for header</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 }} <b>说：</b>{{ $value.message }} <span class="pull-right">{{ $value.dateTime }}</span></li>
      {{/each}}
    </ul>
  </div>
  <!-- <script language="JavaScript">
    setTimeout(function(){location.reload()},2000); //指定2秒刷新一次，有明显的刷新过程，看着难受
  </script> -->
</body>
</html>

post.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="/public/lib/bootstrap/bootstrap.css">
</head>

<body>
  <div class="header container">
    <div class="page-header">
      <h1><a href="/">首页</a> <small>发表评论</small></h1>
    </div>
  </div>
  <div class="comments container">
    <form action="/pinglun" method="get">
      <div class="form-group">
        <label for="input_name">你的大名</label>
        <input type="text" class="form-control" required minlength="2" maxlength="10" id="input_name" name="name" placeholder="请写入你的姓名（2~10字）">
      </div>
      <div class="form-group">
        <label for="textarea_message">留言内容</label>
        <textarea class="form-control" name="message" id="textarea_message" cols="30" rows="10" required minlength="5" maxlength="60" placeholder="请写下您的留言（5~60字）"></textarea>
      </div>
      <button type="submit" class="btn btn-default">发表</button>
    </form>
  </div>
</body>
</html>

404.html

1
2
3
4
5
6
7
8
9
10
11
12
13
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <h2>您访问的页面失联了</h2>
</body>
</html>

4、开启服务器

  • 然后执行app.js开启一个服务器
  • 在浏览器输入127.0.0.1:3000进行访问

    这里有一点要注意：由于使用[]储存留言数据，因此数据没有持久化，每次重启服务，留言就会清空

# nodejs

喜欢这篇文章？打赏一下作者吧

nodejs-模块系统、npm、package.json、Express
nodejs-在node中使用模板引擎art-template渲染页面

评论

关注我

链接

分类

标签云

JavaScript canvas es6 gulp h5 hello world hexo html nodejs vuejs vuex webpack 人生不仅有技术 基础知识 情商 教学 数据结构 有趣的东西 栈 正则表达式 礼仪

最新文章

归档

标签

JavaScript 5
canvas 2
es6 2
gulp 1
h5 2
hello world 1
hexo 1
html 2
nodejs 8
vuejs 7
vuex 1
webpack 3
人生不仅有技术 2
基础知识 9
情商 1
教学 1
数据结构 1
有趣的东西 1
栈 1
正则表达式 1
礼仪 1

最新文章

归档

标签

JavaScript 5
canvas 2
es6 2
gulp 1
h5 2
hello world 1
hexo 1
html 2
nodejs 8
vuejs 7
vuex 1
webpack 3
人生不仅有技术 2
基础知识 9
情商 1
教学 1
数据结构 1
有趣的东西 1
栈 1
正则表达式 1
礼仪 1
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×

// tidio机器人助手