node.js-实现信息发布

最新推荐文章于 2024-04-23 23:50:12 发布

隔壁憨憨

最新推荐文章于 2024-04-23 23:50:12 发布

阅读量318

点赞数

文章标签： node.js 信息发布

本文链接：https://blog.csdn.net/weixin_42301205/article/details/100751114

版权

一、index.html

<!DOCTYPE html>
<html>
<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">
    <link rel="stylesheet" href="/public/css/main.css">
    <title></title>
</head>
<body>
    <div class="contain">
        <div class=main>
            <div class="navigation">
                <ul class="list">
                    <li><a href="#">说说：</a></li>
                </ul>
            </div>
            <ul class="text">
                    {{each comments}}
                <li>
                    <div class="name">{{$value.name}}</div>
                    <div class="xinxi">{{$value.content}}</div>
                    <div class="date">{{$value.dateTime}}</div>
                </li>
                {{/each}}
            </ul>
            <a href="post">
                <input type="button" value="编辑" class="edit">
            </a>
        </div>
    </div>
</body>
</html>

{{each comments}} {{/each}} ：循环comments数组

{{$value.name}} ：获取循环数据中的name属性内容

{{$value.content}} ：获取循环数据中的content属性内容

{{$value.dateTime}} ：获取循环数据中的fateTime属性内容

href=“post” ：点击编辑按钮，访问post路径

二、post.html

<!DOCTYPE html>
<html>
<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">
    <link rel="stylesheet" href="../public/css/main.css">
    <title></title>
</head>
<body>
    <div class="contain">
        <div>
            <form action="/tijiao" method="get">
                <div class="editContent">编辑你要发布的内容：</div>
                <div class="postName" for="postname">名字：</div>
                <input class="editName" id="postname" type="text" placeholder="姓名" name="name" required minlength="2" maxlength="10">
                <div class="postName" for="postContent">内容：</div>
                <textarea class="editXinxi" name="content" id="postContent" cols="30" rows="10" required minlength="8" maxlength="20"></textarea>
                <div>
                    <input class="edit" type="submit" value="发布">
                </div>
            </form>
        </div>
    </div>
</body>
</html>

action="/tijiao" ：提交表单数据时数据上传的位置

method=“get” ：提交表单数据时使用的方法，get是将数据放在URL中

required ：必填选项

minlength=“8” ：数据最小长度为8

maxlength=“20” ：数据最大长度为20

name=“content” ：name是上传数据时，数据上传到哪个属性，如图
在这里插入图片描述

type=“submit” ：如果是submit是提交按钮，如果是text则是文本输入框

for=“postname” ：与id值相等的表单元素绑定，切记for和id值相同才能绑定

三、main.css

.contain{
    width:100%;
    display: flex;
    justify-content: center;
}
.main{
    width:50%;
    margin:20px;
}
.list{
    list-style-type: none;
    font-size:38px;
}
.list a{
    text-decoration: none;
    color:black;
}
.text li{
    margin-top:15px;
    margin-right:45px;
    font-size:18px;
    list-style:none;
    display:flex;
    flex-direction: row;
    height:35px;
    line-height: 35px;
}
.name{
    width:10%;
    border:1px solid rgb(131,139,139);
    display:flex;
    justify-content: center;
}
.xinxi{
    width:75%;
    border:1px solid rgb(131,139,139);
    padding-left:8px;
}
.date{
    width:15%;
    border:1px solid rgb(131,139,139);
    display:flex;
    justify-content: center;
}
.edit{
    background-color:rgba(0, 183, 255,0.7);
    border:2px solid rgba(0, 204, 255,0.7);
    width:80px;
    height:35px;
    margin-top:20px;
    margin-left:60px;
    font-size:18px;
}
.editContent{
    margin:40px 0;
    font-size:38px;
}
.postName{
    font-size:28px;
}
.editName{
    width:45%;
    height:20px;
    font-size:18px;
    padding-left:5px;
    margin:20px 0px;
}
.editXinxi{
    width:85%;
    font-size:18px;
    height:150px;
    margin:20px 0px;
}

四、app.js

在进行这步之前在根目录下安装art-template：
①在根目录下打开powershell
②输入npm install art-template
③等待安装完成即可

var http=require('http')
var fs=require('fs')
var url=require('url')
var template=require('art-template')

var comments = [
    {
        name:'王子',
        content:'天行健，君子以自強不息，地勢坤，君子以厚德载物。',
        dateTime:'2012-06-12'
    },
    {
        name:'小明',
        content:'如果放弃太早，你永远都不知道自己会错过什么。',
        dateTime:'2013-08-23'
    },
    {
        name:'小红',
        content:'你的选择是做或不做，但不做就永远不会有机会。',
        dateTime:'2016-11-03'
    }
]

http
    .createServer(function(req,res){
	})
    .listen(3000,function(err,data){
        console.log('server is running')
    })

①获取请求URL并解析成对象

var parseObj=url.parse(req.url,true)

②提取访问路径

var parse=parseObj.pathname

③如果请求路径为127.0.0.1:3000则返回首页并将comments数据渲染到首页

        if(parse === '/'){
            fs.readFile('./views/index.html',function(err,data){
                if(err){
                    res.end('404')
                }
                var htmlStr = template.render(data.toString(),{
                    comments:comments
                })
                res.end(htmlStr)
            })
        }

④如果访问/post则返回post.html页面

else if(parse === '/post'){
            fs.readFile('./views/post.html',function(err,data){
                if(err){
                    res.end('404')
                }
                res.end(data)
            })
        }

⑤将public文件夹公开

        else if(parse.indexOf('/public/') === 0){
            fs.readFile('.'+parse,function(err,data){
                if(err){
                    res.end('.'+parse)
                }
                res.end(data)
            })
        }

⑥自动获取当前日期（年月日）

var day=myDate.toLocaleDateString()

⑦自动获取当前时间（小时，分钟，秒）

var mytime=myDate.toLocaleTimeString()

⑧提交表单数据

else if(parse === '/tijiao'){
            var commentdata=parseObj.query
            commentdata.dateTime=day
            comments.push(commentdata)
            res.statusCode = 302
            res.setHeader('Location','/')
            res.end()
        }

var commentdata=parseObj.query ：获取输入的属性值

commentdata.dateTime=day ：将日期放入数组的时间属性中

comments.push(commentdata) ：将时间属性上传到数组中

res.statusCode = 302 ：临时重定向，301为永久重定向

res.setHeader(‘Location’,’/’) ：在响应头中通过Location告诉客户端往哪重定向

⑨完整代码（app.js）

var http=require('http')
var fs=require('fs')
var url=require('url')
var template=require('art-template')

var comments = [
    {
        name:'王子',
        content:'天行健，君子以自強不息，地勢坤，君子以厚德载物。',
        dateTime:'2012-06-12'
    },
    {
        name:'小明',
        content:'如果放弃太早，你永远都不知道自己会错过什么。',
        dateTime:'2013-08-23'
    },
    {
        name:'小红',
        content:'你的选择是做或不做，但不做就永远不会有机会。',
        dateTime:'2016-11-03'
    }
]

http
    .createServer(function(req,res){
        var parseObj=url.parse(req.url,true)
        var parse=parseObj.pathname
        var myDate=new Date()
        var day=myDate.toLocaleDateString();
        var mytime=myDate.toLocaleTimeString();
        // myDate.toLocaleString( ); //获取日期与时间
        // console.log(myDate);
        console.log(parse)
        if(parse === '/'){
            fs.readFile('./views/index.html',function(err,data){
                if(err){
                    res.end('404')
                }
                var htmlStr = template.render(data.toString(),{
                    comments:comments
                })
                res.end(htmlStr)
            })
        }else if(parse === '/post'){
            fs.readFile('./views/post.html',function(err,data){
                if(err){
                    res.end('404')
                }
                res.end(data)
            })
        }
        else if(parse.indexOf('/public/') === 0){
            fs.readFile('.'+parse,function(err,data){
                if(err){
                    res.end('.'+parse)
                }
                res.end(data)
            })
        }
        else if(parse === '/tijiao'){
            var commentdata=parseObj.query
            commentdata.dateTime=day
            comments.push(commentdata)
            res.statusCode = 302
            res.setHeader('Location','/')
            res.end()
        }
    })
    .listen(3000,function(err,data){
        console.log('server is running')
    })