node——由新闻列表跳转到新闻详情页
当我们在浏览新闻列表页面的时候,想要看感兴趣的新闻内容,需要到详情页面去查看内容。
在之前写好了新闻列表页面,现在需要做列表页面到详情页面的跳转,需要考虑一下问题
1.点击新闻列表某一项跳转到详情页面
2.跳转的页面时候我们想要的页面,每一条新闻需要有一个标记来识别
3.详情页面的页面内容显示
为了解决上面的问题,我们需要给跳转路径加一个id
在新闻列表页面的代码
<p class="index"> <% for(var i=0;i<list.length;i++){%> <h1><a href="item?id=<%= list[i].id%>">标题:<%= list[i].name%></a></h1> <p>链接:<%= list[i].url%></p> <p>内容:<%= list[i].text%></p> <br/> <% }%> </p>
代码中橙色字体就是一个简单的跳转实现,通过接受传过来的id来标记每一条新闻,这个id在每次更新list_news数组时加上,代码如下:
else if(req.url.startsWith('/add')&&req.method==='post'){ fs.readFile(path.join(__dirname,'data','data1.json'),'utf8',function(err,data){ //因为第一次访问网站,data1.json文件本身就不存在,所以会有异常 //这种错误,我们不认为是网站出错了,所以不需要抛出异常 if(err&&err.code!=='ENOENT'){ throw err; } //如果data没有读取到,则data为空,转换为数组 var list_news=JSON.parse(data||'[]'); var array=[]; req.on('data',function(chunk){ //此处的chunk参数,就是浏览器本次提交过来的一部分数据 //chunk的数据类型是buffer array.push(chunk); }); //监听request对象的end事件 //当end事件被触发时,数据提交完成 req.on('end',function(){ var postBody=Buffer.concat(array); postBody=postBody.toString('utf8'); postBody=querystring.parse(postBody); //把新闻添加到list之前,为新闻增加一个id postBody.id=list_news.length; //将用户的push提交到新闻push到List_news中 list_news.push(postBody); fs.writeFile(path.join(__dirname,'data','data1.json'),JSON.stringify(list_news),function(err){ if(err){ throw err; } console.log('ok'); }); res.statusCode=302;//跳转 res.statusMessage='Found'; res.setHeader('Location','/'); res.end('over'); }); }); }
这样就可以在每次录入新的新闻的时候,得到一个id,但是如果有删除等操作,这里会出现问题,在这里我们先不管这个
我们解决了跳转和新闻标记问题,就要解决详情页面显示内容的问题,代码如下
1.获取当前新闻的id
2.循环list_new中的数据,找到和id相同的数据
3.调用res.render()函数进行模板引擎渲染
}else if(urlObj.pathname==='/item'&&req.method==='get'){ //1.获取当前新闻的id //urlObj.querty.id //2.读取data1.json文件的数据 fs.readFile(path.join(__dirname,'data','data1.json'),'utf8',function(err,data){ //因为第一次访问网站,data1.json文件本身就不存在,所以会有异常 //这种错误,我们不认为是网站出错了,所以不需要抛出异常 if(err&&err.code!=='ENOENT'){ throw err; } var model=null; //如果data没有读取到,则data为空,转换为数组 var list_news=JSON.parse(data||'[]'); //循环list_new中的数据,找到和id相同的数据 for(var i=0;i<list_news.length;i++) { //因为list_news[i].id在数组中是数值,urlObj.query.id是字符,所以可以将list_news[i].id转化为字符,虽然可以使用"==",但尽量少用 if(list_news[i].id.toString()===urlObj.query.id) { //如果找到了就记录下来 model=list_news[i]; break; } } if(model) { //3.调用res.render()函数进行模板引擎渲染 res.render(path.join(__dirname,'views','details.html'),{item:model});//这里要传一个叫list的对象 } else { res.end('no found') } }); }