显示新闻详情|学习笔记

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

开发者学堂课程【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

相关文章
|
2月前
|
移动开发
H5页面及店铺分享带图简介
H5页面及店铺分享带图简介
|
6月前
|
前端开发
利用 HBuilderX 制作新闻列表页以及制作注册页面
利用 HBuilderX 制作新闻列表页以及制作注册页面
67 2
|
小程序 前端开发 JavaScript
小程序的列表页-商品或新闻展示--【浅入深出系列007】
小程序的列表页-商品或新闻展示--【浅入深出系列007】
|
12月前
|
小程序
如何通过二维码展示产品信息?
在草料二维码上搭建产品信息介绍系统,在二维码上展示图片、文字、音视频等宣传介绍内容,将二维码印制在产品实物或包装物料上,客户只需要用微信扫描二维码,即可随时随地查看图文并茂的介绍。
140 0
|
缓存
phpcms之 如何制作新闻列表页
phpcms之 如何制作新闻列表页
140 1
|
XML JSON 缓存
阿里巴巴国际站获得商品详情 API 调用分享(销量、详情图片、宝贝链接)
阿里巴巴国际站获得商品详情 API 调用分享(销量、详情图片、宝贝链接)
|
JSON JavaScript 数据格式
显示新闻详情|学习笔记
快速学习显示新闻详情
显示新闻详情|学习笔记