显示新闻详情|学习笔记

简介: 快速学习显示新闻详情

开发者学堂课程【Node.js 入门与实战显示新闻详情】学习笔记,与课程紧密联系,让用户快速学习知识

课程地址https://developer.aliyun.com/learning/course/588/detail/8289


显示新闻详情

 

显示新闻详情的步骤

创建index7.js

//监听request对象的 end 事件

//当end事件被触发的时候,表示上所有数据都已经提交完毕了req.on( 'end' , function() {

//在这个事件中只要把array中的所有数据汇总起来就好了

//把array中的每个 buffer对象,集合起来转换为一个 buffer对象

// title=fffffff&url=ffffff&text=ffffff

// {title: 'fffff' , url: 'fffff' , text: 'ffffff'}//SON.parse();

var postBody = Buffer.concat(array);

// console.log(postBody);

//把获取到的buffer对象转换为一个字符串 postBody = postBody.toString( "utf8 ' );

//把post请求的查询字符串,转换为一个json 对象 postBody =querystring.parse(postBody);

/ / console.log(postBody );

//在把新闻添加到 list之前,为新闻增加一个 id属性 postBody.id = list.length ;

//将用户提交的新闻push到 list中list.push(postBody);

//将新的 list数组,在写入到data.json文件中 fs.writeFile(path.join(__dirname,'data','data.json'),, JSON.stringify(list),function(err){if (err) {

If(err){

throw err;

}

console.log( 'ok'):

获取当前用户请求的新闻的id,在新闻列表渲染时写id超链接就没有问题。

代码运行结果:

image.png

第一个链接地址:id为0

第二个链接地址:id为1

Get请求-item时

if (req.url === '/' || req.url === ' /index’ && req.method === 'get ') {

}else if (req.url === ' /submit' && req.method === 'get ') {

//读取 submit.html 并返回

res.render(path.join(__dirname, 'views ' , 'submit.html '));

}else if (req.url =ue ' /item' 8& req.method as= 'get ') {

//显示新闻

//第一步:第一步读取所有新闻,找到id对象的信息

//通过url模块对id进行解析

urlObj.query,id

//第二步:读取data.json文件中的数据,根据id找到对应的新闻

//读取 data.json文件中的数据,并将读取到的数据转换为list 数组

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与用户提交的id相等

//ge请求永远拿到的是字符串类型

If(list_news[i].id===urlObj.query.id){

//判断是否相等,如果相等,记录该条记录

Model=list_news[i];

Break;

}

}

//找到新闻调用方法进行渲染

if (model) {

//调用 res.render() 函数进行模板引擎的渲染

//传一个数据对象,找打模板文件找到对应的对象

res.render(path.join(__dirname, 'views ', 'details.html '),{item.model});

}else {

//如果找不到新闻,提示用户

Res.end( No Such Item');

});

代码运行结果:

image.png

点击第一条新闻会404报错

原因在于用户请求路径解析url属性

image.png

使用 url 的 pathname 属性,不使用 startwith

终端运行:node index7.js

终端返回:http://localhost:9090

打开外网,点击第一条新闻

运行结果:

image.png

点击第十条新闻

image.png

相关文章
|
9月前
|
JSON 前端开发 JavaScript
从API到界面:如何将淘宝/天猫商品详情返回值转化为用户友好的展示
在当今数字化时代,API(应用程序编程接口)已经成为连接不同服务和数据的桥梁。对于电商平台来说,API更是不可或缺的一部分。本文将以淘宝/天猫为例,探讨如何将API返回的商品详情数据转化为用户友好的展示形式。我们将通过代码示例来揭示这一过程。
|
9月前
|
JSON API 数据格式
实时获取小红书笔记详情的API使用与解析
小红书是一个以分享消费经验、生活方式为主的社交平台,拥有大量的用户和内容。为了更好地了解用户在小红书上的行为和内容,许多开发者选择使用小红书开放平台提供的API接口。本文将介绍如何通过小红书笔记详情API实现实时数据获取,并给出相应的代码示例。
|
2月前
|
测试技术 API 数据库
淘宝商品详情高级版 (item_get_pro)API如何测试
要测试淘宝商品详情高级版API(item_get_pro),需先阅读API文档,注册开放平台账号,创建应用获取密钥,搭建测试环境,选择测试工具。测试时设计用例,配置工具,发送请求,验证响应,记录日志。注意安全和数据格式。
|
3月前
|
负载均衡 安全 API
小红书商品详情API接口获取步骤
获取小红书商品详情API接口需先注册账号并实名认证,阅读API文档后,通过编程语言调用API,构建请求参数,处理返回数据。确保应用支持高并发,遵守安全规范,申请API权限,查阅接口文档,进行开发调试。
|
9月前
|
存储 数据可视化 API
1688商品详情数据接口:如何通过1688 API实现批量商品数据抓取和分析
使用1688 API进行批量商品数据抓取和分析,首先需注册账号创建应用获取App Key和Secret Key。研究API文档,构建请求URL,如商品详情、搜索、销售量等接口。利用编程语言发送HTTP请求,实时抓取并处理数据,存储到数据库。实施优化策略,处理错误,记录日志。数据可视化展示并确保API安全性。编写文档并持续更新以适应API变化。参考[c0b.cc/R4rbK2]获取API测试和SDK。
|
6月前
|
XML 存储 API
电商商品详情页面的获取,详情图属性sku价格的采集,API接口系列
在电商平台上,商品详情页面的获取,包括详情图、属性、SKU(Stock Keeping Unit,库存量单位)、价格等信息的采集,通常可以通过多种方式实现,其中之一是利用电商平台提供的API接口。以下是一个基于通用流程的概述,用于说明如何通过API接口系列来采集这些信息。
|
8月前
|
JSON 数据挖掘 API
京东商品详情API:解锁电商数据的金钥匙
**《京东商品详情API:解锁电商数据》** 本文介绍如何通过京东API获取商品详情,包括注册成为开发者、获取App Key和App Secret、申请API权限、理解`jd.item.get`接口、构建HTTP请求、解析JSON响应。应用场景广泛,如电商平台、比价、数据分析和移动应用。注意调用限制、数据安全和合规性。示例代码展示了Python调用流程。利用此API可增强电商竞争力。请按最新文档和政策执行。
|
9月前
|
Unix API 开发者
微信公众号:如何根据关键词取文章列表 API 返回值说明?
微信公众号根据关键词获取文章列表的API通常指的是微信公众平台的“素材管理”接口中的“获取素材列表”功能。通过这个接口,开发者可以获取公众号已上传的文章素材列表,包括图文消息、视频、音频等。以下是API返回值的一般说明
|
搜索推荐 数据挖掘 API
商品详情api接口的应用方向有哪些?
商品详情API接口的应用方向非常广泛,可以应用于以下领域: 1. 电子商务平台:商品详情API接口可以提供商品的基本信息,如名称、描述、价格、图片等,帮助电子商务平台展示和推荐商品。此外,还可以提供商品的库存信息、销售数据、评论信息等,帮助平台进行数据分析和管理。
|
9月前
|
JSON 前端开发 API
API到界面:如何将淘宝天猫商品详情返回值转化为用户友好的展示
将淘宝/天猫商品详情的API返回值转化为用户友好的展示涉及前端开发和用户体验设计。以下是一些关键步骤和考虑因素: