Node.js에서 실행할 수 있는 HTML 파일 만들기

12641 단어 HTMLNode.js
단락입니다.
Node.js로 실행 가능한 HTML 파일을 쓸 수 있습니다.
Node.js에서 읽은 상태에서 HTML 부분에 대한 설명
브라우저에서 열면 반대로 하면 돼.
간단하네.
<!--
console.log("valid javascript!");
/*
-->

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script src="hello.html"></script>
</head>
<body>
    <h1>Valid HTML</h1>
</body>
</html>
<!--
*/
-->

내일 여기로 오세요.진짜 1File CMS를 보여드릴게요.


이걸 이용해서 1 File CMS를 만들어 보세요.
1 서류에는 다음과 같은 내용이 있다.
  • 편집기
  • 데이터 스토리지
  • 보기
  • 데이터 저장소는 실행 파일 자체에 삽입됩니다.data.db 같은 거 안 해.
    리얼 1 File CMS죠.

    서버측


    서버를 설정하려면 다음 명령을 실행하십시오.
    $ node index.html
    
    다음 URL을 열면 편집기가 표시됩니다.
    http://localhost:1337/

    클라이언트


    index.브라우저에서 직접 열면 창이 숨겨집니다.
    단순한 정적 파일이기 때문에 드롭박스에 올려놓고 공개해도 시작된다.

    소스 코드는 다음과 같습니다.
    <!--
    http = require('http'),
        fs = require('fs'),
        qs = require('querystring');
    
    http.createServer(function (req, res) {
        var someFile = "index.html";
    
        if (req.method === 'POST') {
            var body = '';
            req.on('data', function (data) {
                body += data;
            });
            req.on('end', function () {
                var poststr = JSON.stringify(qs.parse(body));
                fs.readFile(someFile, 'utf8', function (err, data) {
                    if (err) return console.log(err);
                    var processed = data.replace(/var data = {[^}]*};/g, 'var data = ' + poststr + ';');
                    fs.writeFile(someFile, processed, 'utf8', function (err) {
                        if (err) return console.log(err);
                        res.write("{status: 'ok'}");
                        res.end();
                    });
                });
            });
        } else {
            fs.readFile(someFile, 'utf8', function (err, data) {
                res.write(data);
                res.end();
            });
        }
    }).listen(1337, "127.0.0.1");
    console.log("http://localhost:1337/");
    /*
    -->
    
    <html>
    <head>
        <meta charset="UTF-8">
        <title>1File CMS</title>
        <script>var data = {"posts[]":[]};</script>
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script>
        function reload(){
            $("#posts").html("");
            data["posts[]"].forEach(function(item){
                $("#posts").prepend("<pre>" + item + "</pre>");
            });
        }
        $(function(){
            $("#send").click(function(){
                var text = $("#contents").val();
                data["posts[]"].push(text);
                $.post("http://localhost:1337/", data, function(){
                    reload();
                });
            });
            reload();
            if (document.location.hostname == "localhost"){
                $("#editor").show();
            }
        });
        </script>
        <style>
            body{
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHUlEQVQIW2NkwAIY8Qq+fnz5v6isLlgRfpXIxgAA0iQEBsbFbSsAAAAASUVORK5CYII=);
            }
            .container{
                width: 900px;
            }
            textarea{
                margin: 20px;
                width: 96%;
            }
            button{
                font-size: 2rem;
                margin-left:20px;
            }
            #posts > pre{
                background: white;
                margin: 20px;
                padding: 20px;
                border-radius:3px;
                -webkit-border-radius:3px;
                -moz-border-radius:3px;
                box-shadow:rgba(153, 153, 153, 0.65098) 0px 1px 3px 1px;
                -webkit-box-shadow:rgba(153, 153, 153, 0.65098) 0px 1px 3px 1px;
                -moz-box-shadow:rgba(153, 153, 153, 0.65098) 0px 1px 3px 1px;
            }
            #editor{
                display: none;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <h1>1File CMS</h1>
        <div id="editor">
            <textarea id="contents" rows="20"></textarea><br>
            <button id="send">Send</button>
        </div>
        <div id="posts">
        </div>
    </div>
    </body>
    </html>
    <!--
    */
    -->
    
    

    좋은 웹페이지 즐겨찾기