文件目录结构如下
resource文件里面放了css文件和图片等，view文件里面是html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="../resource/css1.css"> <title>首页</title> </head> <body> <p class="index">this is index</p> </body> </html>
html都是如此简单的文件
工具不同请求响应文件的代码如果每个请求都要写一个单独的响应过于繁琐，很不方便，我们可以通过封装函数的方法来进行优化，我们还可以将函数挂载到respones上，形成一个闭包
代码：
res.render=function(filename){ fs.readFile(filename,function(err,data){ if(err) { res.writeHead(404,'Not Found',{'Content-Type':'text/html;charset=utf-8'}); res.end('404,not found'); } res.setHeader('Content-Type',mime.getType(filename)); console.log(req.url); console.log(mime.getType(filename)); res.end(data); }) }
总代码
//设计路由：当用户用什么样的方式，访问什么样的路径，我们应作出什么样的响应 //这是当前项目的入口文件 //创建package.json:npm init -y // //将render函数挂载到res对象上，可以通过res.render()来实现 //1.加载http文件 var http=require('http'); var fs=require('fs'); var path=require('path'); var mime=require('mime'); //2.创建服务 http.createServer(function(req,res){ //为res添加一个render函数，方便后续使用 res.render=function(filename){ fs.readFile(filename,function(err,data){ if(err) { res.writeHead(404,'Not Found',{'Content-Type':'text/html;charset=utf-8'}); res.end('404,not found'); } res.setHeader('Content-Type',mime.getType(filename)); console.log(req.url); console.log(mime.getType(filename)); res.end(data); }) } //这里会有大量的代码 //设计路由 //当用户请求/或/index的时候，显示新闻列表-get请求 //当用户请求/item时显示新闻详情-get请求 //当用户请求/submit时，显示添加新闻页-get请求 //当用户请求/add时，将用户提交的新闻保存到data.json文件中-get请求 //当用户请求/add时，将用户提交的新闻保存到data.json文件中-post请求 req.url=req.url.toLowerCase();//将请求内容转为小写 req.method=req.method.toLowerCase(); //先根据用户请求的路由，将对应的html显示出来 if(req.url==='/'||req.url==='/index'&&req.method==='get') { res.render(path.join(__dirname,'views','home.html')); }else if(req.url==='/submit'&&req.method==='get'){ res.render(path.join(__dirname,'views','submit.html')); }else if(req.url==='/item'&&req.method==='get'){ }else if(req.url==='/add'&&req.method==='get'){ res.render(path.join(__dirname,'views','add.html')); }else if(req.url==='/add'&&req.method==='post'){ res.render(path.join(__dirname,'views','add.html')); }else if(req.url.startsWith('/resource')&&req.method==='get'){ //如果用户请求以/resources开头，并且是get请求，就认为用户是要请求静态资源 res.render(path.join(__dirname,req.url)); } else{ res.writeHead(404,'NOT FOUND',{ 'Content-Type':'text/plain;charset=utf-8' }); res.end('404,page not found'); } }).listen(9090,function(){ console.log('http://localhost:9090'); })
这样在访问不同路径时，会得到不同的html
