nodejs入门之使用nodejs展示一个网页
来源:互联网 发布:淘宝海外开店 编辑:程序博客网 时间:2024/05/18 01:05
一个网页的内容其实就是一段字符串,response.write()可以接受一个字符串作为参数,所以很明显只需要把一个网页的内容作为参数传递给response.write()即可。例如:
var http = require('http'); http.createServer(function(req, res){ var html = '<html>' +'<head>' +'<title>nodejs</title>' +'</head>' +'<body>' + 'hello world! 1234' +'</body>' +'</html>'; res.writeHead(200,{'Content-Type' : 'text/html'}); res.write(html); res.end(); }).listen(8080);
在浏览器地址栏输入127.0.0.1:8888查看结果(注:在地址栏中输入地址之前,要保证nodejs命令窗口是打开的,并且运行了node D:\test.js语句,node D:\test.js是文件的路径),打开控制台,可以发现网页的类容已经全部包含在浏览器中。
一个网页一般会包含css样式文件和javascript脚本文件,再上一个示例中没有这两个文件。现在可以添加简单的css和javascript文件查看效果:
var http = require('http'); http.createServer(function(req, res){ var html = '<html>' +'<head>' +'<title>nodejs</title>' +'<link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css" />' +'<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>' +'</head>' +'<body>' + 'Welcome from china!' +'</body>' +'</html>'; res.writeHead(200,{'Content-Type' : 'text/html'}); res.write(html); res.end(); }).listen(8080);
会发现css文件和javascript文件都没有被正确下载。这是因为这段代码中规定的'Content-Type'都是'text/html'类型,而且所有的response内容都相同,当然就看不到想要的效果。
我们知道css样式和javascript脚本有多种不同的引入方法,css样式可以使用外联样式、内部样式和内联样式,javascript可以使用外联和内部两种,既然外联不能正确显示,那么可以尝试其他方法。通过测试可以发现css内部样式和内联样式都可以在网页上看到效果,javascript同样。
var http = require('http'); http.createServer(function(req, res){ var html = '<html>' +'<head>' +'<title>nodejs</title>' +'<style type="text/css">' +'body{color:red;}' +'</style>' +'</head>' +'<body>' + '<span style="font-family: Arial;">Welcome from china‘</span><span style="font-family: Arial;"> </span> +'</body>' +'</html>'; res.writeHead(200,{'Content-Type' : 'text/html'}); res.write(html); res.end(); }).listen(8080);
可以看到浏览器中的文字显示为红色。
但是这两种方式都不是现代web开发所提倡的。现代web开发提倡css样式和javascript使用外联的方式,以方便管理和重用。css文件和javascript文件都是静态文件,我们可以尝试建立一个简单的静态文件服务,这样就可以正确的在网页中使用外联文件了。
0 0
- nodejs入门之使用nodejs展示一个网页
- nodejs入门之使用nodejs展示一个网页
- nodejs入门之使用nodejs展示一个网页
- nodejs入门之安装
- nodejs入门之Express
- nodeJs之koa入门
- 【nodejs】快速入门使用
- NodeJs之Koa2使用
- [前端] nodejs之cookie入门
- NodeJS入门之Hello world
- NodeJs安装与使用入门
- NodeJs安装与使用入门
- nodejs入门
- Nodejs入门
- NodeJS入门
- nodejs入门
- nodejs入门
- Nodejs入门
- Hive学习之Hive CLI
- net MVC 3.0 1
- WiFi共享精灵手机购物,包邮谁说了算
- 如何向App Store提交应用
- 不同岗位平均工资发布:IT行业进三甲
- nodejs入门之使用nodejs展示一个网页
- UVaOJ 10361 - Automatic Poetry
- 捷联惯导算法心得
- 黑马程序员—继承
- 在岁月的堤岸慢慢走
- centos 安装apache2.2+mysql+php
- TCP 的那些事儿(上)
- 溢出
- OpenCV基础数据结构--基础入门