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

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

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')
} }); }

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. TensorFlow+实战Google深度学习框架学习笔记(12)------Mnist识别和卷积神经网络LeNet

    一.卷积神经网络的简述 卷积神经网络将一个图像变窄变长.原本[长和宽较大,高较小]变成[长和宽较小,高增加] 卷积过程需要用到卷积核[二维的滑动窗口][过滤器],每个卷积核由n*m(长*宽)个小格组成 ...

  2. laravel 运行migrate报错 1071 Specified key was too long

     转自:https://segmentfault.com/a/1190000008416200 laravel运行命令migrate时报错: 1071 Specified key was too lo ...

  3. 朴素贝叶斯(Naive Bayesian)

    简介 Naive Bayesian算法 也叫朴素贝叶斯算法(或者称为傻瓜式贝叶斯分类) 朴素(傻瓜):特征条件独立假设 贝叶斯:基于贝叶斯定理 这个算法确实十分朴素(傻瓜),属于监督学习,它是一个常用 ...

  4. 00073_Math类

    1.Math类概述 (1)Math 类是包含用于执行基本数学运算的方法的数学工具类,如初等指数.对数.平方根和三角函数: (2)类似这样的工具类 ,其所有方法均为静态方法,并且一般不会创建对象.如Sy ...

  5. 【ACM-ICPC 2018 沈阳赛区网络预赛 I】Lattice's basics in digital electronics

    [链接] 我是链接,点我呀:) [题意] [题解] 每个单词的前缀都不同. 不能更明示了... 裸的字典树. 模拟一下.输出一下就ojbk了. [代码] #include <bits/stdc+ ...

  6. 【hihocoder 1312】搜索三·启发式搜索(普通广搜做法)

    [题目链接]:http://hihocoder.com/problemset/problem/1312?sid=1092352 [题意] [题解] 从末状态的123456780开始逆向搜; 看它能到达 ...

  7. @Bean 指定初始化和销毁方法

    bean 的生命周期 bean 的创建 --> 初始化 --> 销毁 ioc 容器管理 bean 的声明周期 可以自定义初始化和销毁方法 构造器( 对象创建 )被调用时机 单实例:在容器启 ...

  8. ES scroll(ES游标) 解决深分页

    ES scroll(ES游标) 解决深分页. Why 当Elasticsearch响应请求时,它必须确定docs的顺序,排列响应结果.如果请求的页数较少(假设每页20个docs), Elasticse ...

  9. POJ 2407

    裸 的求欧拉函数 #include <iostream> #include <cstdio> #include <cstring> #include <alg ...

  10. Ruby中使用patch HTTP方法

    Ruby中使用patch HTTP方法 如果使用patch,在后台可以看到只更新了改动的部分: Started PATCH "/ads/5/update" for ::1 at 2 ...