当我们在浏览新闻列表页面的时候,想要看感兴趣的新闻内容,需要到详情页面去查看内容。

在之前写好了新闻列表页面,现在需要做列表页面到详情页面的跳转,需要考虑一下问题

1.点击新闻列表某一项跳转到详情页面

2.跳转的页面时候我们想要的页面,每一条新闻需要有一个标记来识别

3.详情页面的页面内容显示

为了解决上面的问题,我们需要给跳转路径加一个id

在新闻列表页面的代码

  1. <p class="index">
  2. <% for(var i=0;i<list.length;i++){%>
  3.  
  4. <h1><a href="item?id=<%= list[i].id%>">标题:<%= list[i].name%></a></h1>
  5. <p>链接:<%= list[i].url%></p>
  6. <p>内容:<%= list[i].text%></p>
  7. <br/>
  8. <% }%>
  9. </p>

代码中橙色字体就是一个简单的跳转实现,通过接受传过来的id来标记每一条新闻,这个id在每次更新list_news数组时加上,代码如下:

  1. else if(req.url.startsWith('/add')&&req.method==='post'){
  2. fs.readFile(path.join(__dirname,'data','data1.json'),'utf8',function(err,data){
  3. //因为第一次访问网站,data1.json文件本身就不存在,所以会有异常
  4. //这种错误,我们不认为是网站出错了,所以不需要抛出异常
  5. if(err&&err.code!=='ENOENT'){
  6. throw err;
  7. }
  8. //如果data没有读取到,则data为空,转换为数组
  9. var list_news=JSON.parse(data||'[]');
  10.  
  11. var array=[];
  12. req.on('data',function(chunk){
  13. //此处的chunk参数,就是浏览器本次提交过来的一部分数据
  14. //chunk的数据类型是buffer
  15. array.push(chunk);
  16.  
  17. });
  18.  
  19. //监听request对象的end事件
  20. //当end事件被触发时,数据提交完成
  21. req.on('end',function(){
  22. var postBody=Buffer.concat(array);
  23. postBody=postBody.toString('utf8');
  24.  
  25. postBody=querystring.parse(postBody);
  26.  
  27. //把新闻添加到list之前,为新闻增加一个id
  28. postBody.id=list_news.length;
  29.  
  30. //将用户的push提交到新闻push到List_news中
  31. list_news.push(postBody);
  32. fs.writeFile(path.join(__dirname,'data','data1.json'),JSON.stringify(list_news),function(err){
  33. if(err){
  34. throw err;
  35. }
  36. console.log('ok');
  37. });
  38.  
  39. res.statusCode=302;//跳转
  40. res.statusMessage='Found';
  41. res.setHeader('Location','/');
  42. res.end('over');
  43. });
  44.  
  45. });
  46. }

这样就可以在每次录入新的新闻的时候,得到一个id,但是如果有删除等操作,这里会出现问题,在这里我们先不管这个

我们解决了跳转和新闻标记问题,就要解决详情页面显示内容的问题,代码如下

  1. 1.获取当前新闻的id
    2.循环list_new中的数据,找到和id相同的数据
    3.调用res.render()函数进行模板引擎渲染
  1. }else if(urlObj.pathname==='/item'&&req.method==='get'){
  2.  
  3. //1.获取当前新闻的id
  4. //urlObj.querty.id
  5. //2.读取data1.json文件的数据
  6. fs.readFile(path.join(__dirname,'data','data1.json'),'utf8',function(err,data){
  7. //因为第一次访问网站,data1.json文件本身就不存在,所以会有异常
  8. //这种错误,我们不认为是网站出错了,所以不需要抛出异常
  9. if(err&&err.code!=='ENOENT'){
  10.  
  11. throw err;
  12. }
  13. var model=null;
  14. //如果data没有读取到,则data为空,转换为数组
  15. var list_news=JSON.parse(data||'[]');
  16. //循环list_new中的数据,找到和id相同的数据
  17. for(var i=0;i<list_news.length;i++)
  18. {
  19. //因为list_news[i].id在数组中是数值,urlObj.query.id是字符,所以可以将list_news[i].id转化为字符,虽然可以使用"==",但尽量少用
  20. if(list_news[i].id.toString()===urlObj.query.id)
  21. {
  22. //如果找到了就记录下来
  23. model=list_news[i];
  24. break;
  25.  
  26. }
  27. }
  28. if(model)
  29. {
  30. //3.调用res.render()函数进行模板引擎渲染
  31. res.render(path.join(__dirname,'views','details.html'),{item:model});//这里要传一个叫list的对象
  32. }
  33. else
  34. {
  35. res.end('no found')
  36. }
  37.  
  38. });
  39.  
  40. }

node——由新闻列表跳转到新闻详情页的更多相关文章

  1. 用js原生加jquery实现下拉跳转至商品详情页,上拉回到商品简介

    在做一个商城的项目时,做到商品详情页的时候需要实现这种下拉跳转到商品详情页加载许多图片,上拉回到商品简介的效果,并且需要用户在滑动时有一种费力的感觉.最初是通过iscroll插件实现的,但这个插件在使 ...

  2. Vue通过id跳转到商品详情页

    首页列表: 在这里我用a标签进行跳转,在vue里面使用<router-link></router-link> <router-link :to="{path:' ...

  3. 桂电在线_微信公众平台开发之-运用angularjs显示学校公告新闻列表和详情页面

    折腾angularjs的感悟 几天折腾,总的来说看了很多博客,要么不是最新的技术文档,要么写得不够完整,因为别人是基于他们的理解写的技术博客代码不一定会贴完整,所以一旦你用的是最新的想要看完整的实例就 ...

  4. 编写利用Fragment创建新闻列表

    编写利用Fragment创建新闻列表 1.创建新闻实体类News,代码如下:   public class News { private String title; private String co ...

  5. node.js评论列表和添加购物车数据库表创建

    2.1:评论列表--发表评论 用户点击新闻列表某一条新闻,看到新闻详细发表评论 -用户输入评论内容 -发表评论 [将用户评论内容保存数据库 xz_comment] 2.2:评论列表--发表评论-开发评 ...

  6. [ssh新闻公布系统三]存储新闻

    一.存储新闻dao方法 在NewsDao.java中新增存储新闻的saveOrupdate方法 public void saveOrupdate(News news){ getSession().sa ...

  7. Django----使用模板系统渲染博客页面、实现列表和详情页的跳转、前后跳转功能

    .模板写法同Flask,可以参考之前的FLask-模板 .将之前的BootStrap静态页面中的数据使用模板写 <!DOCTYPE html> <html lang="en ...

  8. 微信小程序页面列表与详情页跳转的正确姿势

    初学小程序,碰到列表与详情页跳转遇到的问题,记录一下. 一.问题 1个列表页: 1个详情页: 列表页代码: onLoad:异步查询数据并setData 详情页代码: 保存成功后,调用navigateB ...

  9. 微信小程序云开发-云存储-带图片的商品列表携带id跳转至商品详情

    一.商品列表页 1.wxml文件 在view中添加点击事件goToGoodDetail,绑定数据data-id <!-- 添加点击事件goToGoodDetail --> <view ...

随机推荐

  1. Python笔记16-------类

    1.类的定义 (1)#括号中要加入父类,如果没有则默认为object,万类之源 class 类名(父类): '类的文档字符串' 类体代码 若类什么都不做,则类只作为命名空间,仅作为一个容器. (2)类 ...

  2. nyoj27-水池数目【DFS】

    题目描述: 南阳理工学院校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地图上仅标识了此处是否是水池,现在,你的任务来了,请用计算机算出该地图中共有几个水 ...

  3. Dubbo&Zookeeper运行原理

    Dubbo是一个分布式服务框架,Dubbo的架构如图所示: 节点角色说明: Provider: 暴露服务的服务提供方. Consumer: 调用远程服务的服务消费方. Registry: 服务注册与发 ...

  4. redis helloworld

    一.启动 redis 服务 [root@MyLinux bin]# ./redis-server redis.conf 二.使用客户端连接服务 [root@MyLinux bin]# ./redis- ...

  5. CodeForcesGym 100641B A Cure for the Common Code

    A Cure for the Common Code Time Limit: 3000ms Memory Limit: 262144KB This problem will be judged on  ...

  6. CRM实施中应避免的5大问题

    越来越多的人认识到,杂乱的客户信息应该统一管理.曾经人们用excel表格甚至是纸笔来记录客户信息,可是假设想知道这个客户我们销售接触过几次?邮件里都谈了什么?在线客服都和客户聊了什么?报价单发的啥价格 ...

  7. 英语发音规则---F字母

    英语发音规则---F字母 一.总结 一句话总结: 1.F/FF发[f]音? fly [flaɪ] vi. 飞 fine [faɪn] adj. 好的 float [fləʊt] vt. 使漂浮 fra ...

  8. oracle init.ora常用配置详解

    参考网上整理了重要的配置文件 db_name = "51cto"   一个数据库标识符,应与CREATE DATABASE 语句中指定的名称相对应. instance_name = ...

  9. Oracle Hint的用法

    1. /*+ALL_ROWS*/ 表明对语句块选择基于开销的优化方法,并获得最佳吞吐量,使资源消耗最小化. 例如: SELECT /*+ALL+_ROWS*/ EMP_NO,EMP_NAM,DAT_I ...

  10. WebRTC学习与DEMO资源一览

    一. WebRTC学习 1.1   WebRTC现状 本人最早接触WebRTC是在2011年底,那时Google已经在Android源码中加入了webrtc源码,放在/external/webrtc/ ...