node.js 服务器运行的时候没有加载出css文件

  • 请求头一直是text/html
    -无法识别text/css
  • 最终发现是html中的路径问题 其中排查了筛选器问题
    -排查出=和==的混用导致识别筛选问题
    -查出indexOf判断是用法写错
// 入口文件,创建http服务器
// 引入http模块
var http = require('http');
var fs = require('fs');

var msgs = [
    { name: '张三', content: '你好我是张三', create_at: '2017-11-14 10:30' },
    { name: '李四', content: '你好我是李四', create_at: '2017-11-14 10:30' },
    { name: '王五', content: '你好我是王五', create_at: '2017-11-15 10:30' }
]




// 创建web服务器
var server = http.createServer();
// 接受请求
server.on('request', function (req, res) {
    var currentUrl = req.url;
    // 响应直接输网址的那种
    // 静态资源也需要响应
    if (currentUrl == '/') {
        // 请求"/"加载留言板列表
        fs.readFile('./view/index.html', 'utf8', function (err, data) {
            if (err) res.end('404 Not Found');
            // 遍历数据拼接数据JQ $.each 然后动态化
            var html = '';
            msgs.forEach(function (item) {
                // 传统通过+拼接
                // ES6:反引号,遍历${变量名}输出(JS最新语法)
                html += `
                <li class="list-group-item">${item.name}说:${item.content} <span class="pull-right">${item.create_at}</span></li>
                `
            })
            // 把视图里的笑脸替换成最终数据
            var data = data.replace('^_^', html);
            // 响应给用户的编码
            res.setHeader('Content-Type', 'text/html;charset=utf-8')
            res.write(data);
            res.end();
        })
    }

    // 判断其中是否包含public,即过滤出包含静态资源的部分
    else if (currentUrl.indexOf('/public') >= 0) {
        // debug1 写死css 尝试:currentUrl = '/public/css/bootstrap.css'
        // 检测静态资源并响应
        fs.readFile('./' + currentUrl, 'utf8', function (err, data) {
            if (err) res.end('404 Not Found');
            // 响应给用户的编码
            var i = currentUrl.lastIndexOf('.');
            var suffix = currentUrl.substr(i + 1, currentUrl.length);
            res.setHeader('Content-Type', 'text/' + suffix);
            // res.writeHead(200, {
            //     'Content-Type': 'text/css'
            // });
            res.write(data);
            res.end();
        })
    }
    else if (currentUrl == '/add') {
        // 请求"/add"加载留言板添加
        fs.readFile('./view/add.html', 'utf8', function (err, data) {
            if (err) res.end('404 Not Found');
            // 响应给用户的编码
            res.setHeader('Content-Type', 'text/html;charset=utf-8')
            res.write(data);
            res.end();
        })
    }
    else {
        // 否则404
        fs.readFile('./view/404.html', 'utf8', function (err, data) {
            if (err) res.end('404 Not Found');
            // 响应给用户的编码
            res.setHeader('Content-Type', 'text/html;charset=utf-8')
            res.write(data);
            res.end;
        })
    }
})

// 启动服务
server.listen(8080, function () {
    console.log('启动成功,访问:http://localhost:8080');
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值