基于Node的一个小案例（留言板）

1.首先我们搭建html页面，留言部分我们写一个moustache语法就好，后面通过Node来动态添加进行替换，然后将css，js，image,放进对应的文件夹中。

2.构建node.js的代码

        我们使用各种模块时先将各种模块require进来。

const http = require('http')
const queryString = require('querystring')//处理请求参数模块
const path = require('path')//处理路径模块
const url = require('url')//处理url模块
const fs = require('fs')//文件系统
const ROOT = __dirname;//获取当前绝对地址
const VIEWS = path.join(ROOT, 'views')//设置试图文件夹绝对地址
const PUBLIC = path.join(ROOT, 'public')//设置共有文件夹绝对地址

先判断请求路径是否有后缀，然后对请求地址进行判断分别为什么类型的文件 ，分别进行响应，

1. views  视图文件读取

            数据渲染

                1. 读取data文件中的数据=>json

                    fs.readFileSync()

                2. 把数据和模板混合

                    forEach() 迭代方法 arr.forEach((item, index, arr)=>{})

                3. 替换index.html文件中需要添加数据的位置

        2. public 静态资源读取

当没有扩展名时我们返回一个接口

判断接口名和请求方式

        1. req.on data end 获取 前台发送来的数据

            前台的表单元素必须有name属性

        2. 读取原有data.json中的数据

        3. 把新数据和原有的data.json中的数据整合在一起

        4. 把整合完的数据存回data.json

        5. 进行页面跳转

            向浏览器响应一个<script></script>标签, 在标签内容写页面跳转的方法

            浏览会自动解析标签, 并执行js代码

最后监听一个端口号

const app = http.createServer((req, res) => {
    const urlObj = url.parse(req.url);//url 信息对象 请求参数
    const method = req.method;//请求方法，通过get 还是post
    const pathName = urlObj.pathname;//获取请求路径
    const extName = path.extname(pathName);//获取文件扩展名
    if (extName) {//判断是否有扩展名
        if (extName == '.html') {//扩展名是html时
            const dataStr = fs.readFileSync('./data/data.json', 'utf-8');//获取数据（字符串）
            const data = JSON.parse(dataStr);//转化为对象
            let html = '';//定义一个html
            data.forEach((item, index) => {//遍历所有数据将数据渲染到页面中
                html += `
                    <div class="item">
                        <div class="avatar">
                            <img src="./${item.avatar}" alt="">
                        </div>
                        <div class="message">
                            <div class="name">
                                <h3>${item.name}</h3>
                            </div>
                            <div class="msg">
                                ${item.msg}
                                <span class="date">${item.date}</span>
                            </div>
                        </div>
                    </div>
                `;
            })
            fs.readFile(path.join(VIEWS, pathName), 'utf-8', (error, data) => {//读取文件将文件中的相应部分替换掉
                res.setHeader('Content-Type', 'text/html;charset=utf8');
                data = data.replace('{{message}}', html);
                res.end(data);
            })
        } else if (extName == '.jpg' || extName == '.css' || extName == '.js') {//处理图片 css js文件
            fs.readFile(path.join(PUBLIC, pathName), (error, data) => {
                res.end(data);
            });
        }
    } else {//当表单提交时
        if (pathName == '/addmsg' && method.toUpperCase() == 'POST') {
            let postStr = '';
            req.on('data', chunk => {
                console.log(chunk);//是一个Buffer
                postStr += chunk;//添加进定义的postStr中
            });

            req.on('end', () => {//响应
                let data = queryString.parse(postStr);//将数据转化成对象存进data中
                const dataAll = JSON.parse(fs.readFileSync('./data/data.json', 'utf-8'));//读取所有数据
                dataAll.push({//将前台数据以下属性存进数据中
                    name: data.username,
                    msg: data.msg,
                    date: Date.now(),
                    avatar: data.avatar
                });
                fs.writeFileSync('./data/data.json', JSON.stringify(dataAll));
                // 页面重新跳回index.html
                // 向页面发送一段js代码, 浏览器会自动执行代码
                res.end('<script>window.location.href="index.html"</script>');
            })
        }
    }
})
app.listen(3000, () => {
    console.log('running...');
})