留言板(Nodejs)

時間 2019-12-02

標籤留言板 nodejs 简体版

原文原文鏈接

1、知識點

①nodejs實際開發中，一般把全部的HTML文件放到views目錄中css

②nodejs實際開發中，一般把全部的靜態資源文件放到public目錄中，方便統一處理html

當瀏覽器收到HTML響應內容以後，會從上到下依次解析，解析過程當中當發現link、script、img、iframe、video、audio等帶有src或者href（link）屬性標籤的時候，會自動對這些資源發起新的請求，這些資源就是靜態資源
把全部的靜態資源放到統一的目錄中，能夠靈活的控制文件是否能被用戶訪問
可是須要注意的是，客戶端裏的請求路徑須要改爲 /public/xxx 的形式，其中 / 就是url的根路徑

③表單提交的數據處理須要使用nodejs的url模塊，其中url.parse（‘地址’，true）能夠將路徑解析成爲一個方便操做的對象node

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重定向web

2、功能實現

①項目目錄bootstrap

②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...')
})

④效果演示app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。