~~~ //当前项目（包）的入口文件 //实现get方式添加新闻 //实现显示新闻详情页 //1.加载http模块 var http = require('http'); var fs = require('fs'); var path = require('path'); var mime = require('mime'); //加载url模块 var url = require('url'); //加载underscore var _ = require('underscore'); //加载querystring模块 var querystring = require('querystring'); //2.创建http服务 http.createServer(function(req, res) { //为res对象添加一个render（）函数，方便后续使用 //第二个参数tplData的作用是用来传递html页面中要使用的模板数据 res.render = function(filename, tplData) { fs.readFile(filename, function(err, data) { if (err) { res.writeHead(404, 'Not Found', { 'Content-Type': 'text/html;charset=utf-8' }); res.end("404,page not found."); return; } if (tplData) { //如果用户传递了模版数据，表示要进行模板替换 var fn = _.template(data.toString('utf8')); data = fn(tplData); } res.setHeader("Content-Type", mime.getType(filename)); res.end(data); }) } //设计路由 //当用户请求 / 或者 /index的时候，显示新闻列表---get请求 //当用户请求 /item的时候，显示新闻详情---get请求 //当用户请求 /submit的时候，显示添加新闻页面---get请求 //当用户请求 /add时，将用户提交的新闻保存到data.json文件中---get请求 //当用户请求 /add时，将用户提交的新闻保存到data.json文件中---post请求 //将用户请求的url和method转换为小写字母 req.url = req.url.toLowerCase(); req.method = req.method.toLowerCase(); //通过url模块，调用url.parse()方法解析用户请求的url(req.url) var urlObj = url.parse(req.url, true); //根据用户请求的路径，将对应的html页面显示出来 if (req.url === '/' || req.url === '/index' && req.method === 'get') { //1.读取data.json文件中的数据，并将读取到的数据转换为arr 数组 fs.readFile(path.join(__dirname, "data", 'data.json'), 'utf8', function(err, data) { if (err && err.code !== 'ENOENT') { throw err; } var arr_news = JSON.parse(data || '[]'); //字符串解析为数组 //读取index.html 并返回 //2.在服务器端使用模板引擎，将arr中的数据和index.html文件中的内容结合，渲染给客户端 res.render(path.join(__dirname, 'views', 'index.html'), { arr: arr_news }); }); } else if (urlObj.pathname === '/item' && req.method === 'get') { //读取detail.html并返回 //1.获取当前用户请求的新闻的id //urlObj.query.id //2.读取 data.json文件中的数据，根据 id 找到对应新闻 fs.readFile(path.join(__dirname, "data", 'data.json'), 'utf8', function(err, data) { if (err && err.code !== 'ENOENT') { throw err; } var list_news = JSON.parse(data || '[]'); var model = null; //循环 list_news中的数据，找到和id值相等的数据 for (var i = 0; i < list_news.length; i++) { //判断集合中是否有与用户提交的id相等的新闻 if (list_news[i].id.toString() === urlObj.query.id) { //如果找到了对等的新闻 则将其记录下来 model = list_news[i]; break; } } if (model) { res.render(path.join(__dirname, 'views', 'detail.html'), { item: model }); } else { res.end("NO such item"); } }) } else if (req.url === '/submit' && req.method === 'get') { //读取submit.html并返回 res.render(path.join(__dirname, 'views', 'submit.html')); } else if (req.url.startsWith('/add') && req.method === 'get') { //表示get方法提交一条新闻 //要获取用户提交过来的数据，需要用到url模块（这个模块是node.js内置模块，不是第三方模块） //1.获取用户get提交过来的新闻数据 //urlObj.query.title //urlObj.query.url //urlObj.query.text //2.1读取 data.json文件中的数据，并将读取到的数据转化为一个数组 //此处读取文件的时候可以直接写一个utf8编码，这样的话，回调函数中的data就是一个字符串了 fs.readFile(path.join(__dirname, "data", 'data.json'), 'utf8', function(err, data) { //因为第一次访问网站 ，data.json文件本身就不存在，所以肯定是有错误的，但是这种错误，我们并不认为是网站出错了，所以不需要抛出异常 //ENOENT没有这样的文件或者目录 if (err && err.code !== 'ENOENT') { throw err; } //如果读取到了数据，就把读取到的数据data转换成arr数组，相反如果没有读取到数据就把[]转换为数组 var arr = JSON.parse(data || '[]'); //字符串解析为数组 //在把新闻添加到list之前，为新闻添加一个id属性 urlObj.query.id = arr.length; arr.push(urlObj.query); //2.把用户提交的数据保存到data.json文件中 //把arr数组中的数据写入到data.json文件中 fs.writeFile(path.join(__dirname, 'data', 'data.json'), JSON.stringify(arr), function(err) { if (err) { throw err; } console.log('ok'); //3.跳转到新闻列表页 //通过设置http响应报文头实现浏览器重定向操作 //以3开头的都表示要做跳转 res.writeHead(302, 'Found', { 'Location': '/' }) res.end(); }); }); } else if (req.url === '/add' && req.method === 'post') { //表示post方法提交一条新闻 //1.读取data.json文件中的数据 fs.readFile(path.join(__dirname, 'data', 'data.json'), 'utf8', function(err, data) { if (err && err.code !== "ENOENT") { throw err; } var arr = JSON.parse(data || '[]'); //2.获取用户 post 提交的数据 //post提交数据的时候数据量比较大，所以会分多次提交，每次提交一部分数据，此时要想在服务器中获取用户提交的所有数据，必须监听request事件的data事件 //当request对象的end事件被触发的时候表示浏览器把所有的数据都提交到服务器了 //监听request的对象的data事件和end事件代码如下： //声明一个数组，用来保存用户每次提交过来的数据 var list = []; req.on('data', function(chunk) { //此处的 春款参数，就是浏览器本次提交过来的一部分数据 //chunk的数据类型是buffer list.push(chunk); }); req.on('end', function() { //在这个事件中只要把array中的所有数据汇总起来就好了 //把list的每个buffer对象，集合起来转换为一个buffer对象 //title=vvvvv&url=http%3A%2F%2Flocalhost%3A8888%2Fsubmit&text=vvvvvvvvvvvv var postBody = Buffer.concat(list); postBody = postBody.toString('utf8'); //buffer对象转化为字符串 //把post请求的查询字符串，转换为一个json对象 postBody = querystring.parse(postBody); //console.log(postBody); //在把新闻添加到list之前，为新闻添加一个id属性 postBody.id = arr.length; //将用户提交的新闻push到arr数组中 arr.push(postBody); //将新的arr数组，在写入到data.json文件中 fs.writeFile(path.join(__dirname, 'data', 'data.json'), JSON.stringify(arr), function(err) { if (err) { throw err; } console.log('ok'); //3.跳转到新闻列表页 res.writeHead(302, 'Found', { 'Location': '/' }) res.end(); }); }); }); //2.将读取到的数据转化为arr数组 //3.向arr数组中push一条新闻数据 //4.把arr数组转换为字符串重新写入data.json文件中 //5.重定向 } else if (req.url.startsWith('/resources') && req.method === 'get') { //如果用户请求是以/resources开头，并且是get请求，就认为用户是要请求静态资源 res.render(path.join(__dirname, req.url)); } else { res.writeHead(404, 'Not Found', { 'Content-Type': 'text/html;charset=utf-8' }); res.end("404,page not found."); } }).listen(8888, function() { console.log("http://localhost:8888"); }) ~~~ 首页的id  详情页里的模板  具体设计代码：