渲染 index 页面新闻列表数据01|学习笔记

简介: 快速学习渲染 index 页面新闻列表数据01

开发者课程【Node.js 入门与实战:渲染 index 页面新闻列表数据01】学习笔记,与课程紧密联系,让用户快速学习知识

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


渲染 index 页面新闻列表数据01

 

内容介绍:

一、 实现 post 方式提交新闻

二、首页显示新闻列表

 

一、 实现 post 方式提交新闻

// 1.加载 http模块

var http = require( " http);

var fs = require( 'fs');

var path = require( " path');

var mime = require( " mime ' );

var url = require( 'url');

var querystring = require( " querystring');

// 2.创建服务

http.createServer(function(req, res) {

//要在这里写大量的代码

//为res对象添加一个 render()函数,方便后续使用

res.render = function(fiLename) {

fs.readFile(filename,function(err,data){

if (err) {

res.writeHead(404,‘Not Found' , { 'Content-Type' : 'text/html;charset=utf-8'});

res.end( ' 404,not found. ");

return;

}

res.setHeader( 'Content-Type' , mime.getType(filename));

res.end(data);

});

};

//将用户请求的Iurl 和 method 转换为小写字母req.url = req.url.toLowerCase();

req.method = req.method.toLowerCase();

//通过url模块,调用url.parse()方法解析用户请求的 url (req.url)

var ur10bj = url.parse(req.url,true);

//先根据用户请求的路径(路由),将对应的HTMIL页面显示出来

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

//读取 index.html

res.render(path.join( dirname. 'views '. 'index.html' ));

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

//读取submit.html并返回

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

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

//读取 details.html 并返回

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

}else if (req.url.startswith( " /add ' ) && req.method === 'get') {

//此处,读取文件的时候可以直接写一个utf8编码,这样的话,回调函数中的 data就是一个字符串了

fs.readFile(path.join(__dirname, 'data', 'data.json'), 'utf8' , function(err, data){

// "[{"title" : "xxx" , "url" :"ffff", "text" : "dddd"}]"

consoLe.log( '--------------' + data);

//因为第一次访问网站, data.json文件本身就不存在,所以肯定是有错误的

//但是这种错误,我们并不认为是网站出错了,所以不需要抛出异常

if (err && err.code !== "ENOENT'){

throw err;

}

//如果读取到数据了,那么就把读取到的数据 data,转换为list数组//如果没有读取到数据,那么就把'[]’转换为数组

var list = JSON.parse(data || '[]");

// 向数组对象list中push一条新闻

list. push(urfIObj .query);

// 2.把用户提交的新闻数据保存到data.json 文件中

//把list数组中的数据写入到data.json 文件中

fs .writeFile(path. join(__ dirname, ' data', ' data. json' ),JSON. stringify(list), function(err) {

if (err) {

throw err;

}

console. log('ok');

//设置响应报文头,通过响应报文头告诉浏览器,执行一次页面跳转操作

// 3.跳转到新闻列表页

//重定向

res . statusCode = 302;

res. statusMessage = ' Found';

 

二、显示新闻列表

//通过url模块,调用url.parse()方法解析用户请求的url (req.url)

var url0bj = url.parse(req.url,true);

//先根据用户请求的路径(路由),将对应的HTMIL页面显示出来

if (req.url == 'l' ll rey.url as= ' /index' 8& req.method =a= 'get '){

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

fs.readFile(path.join(__dirname,'data', 'data.json'),'utf8', function(err,data){

if (err 8& err.code T=="ENOENT') {

throw err;

}

var list = JSON.parse(data ll '[]");

2. 在服务器端使用模板引擎,将 list中的数据和

index.html 文件中的内容结合渲染给客户端

//读取-index.html

……res.render(path.join( ._dirname , . "'views ' , . 'index.html'));

}); 

相关文章
|
索引
antd a-table表格添加序号和分页总数——基础积累
antd a-table表格添加序号和分页总数——基础积累
673 0
|
缓存 前端开发 JavaScript
React Table 表格组件使用教程 排序、分页、搜索过滤筛选功能实战开发
在日常开发中,特别是内部使用的后台系统时,我们常常会需要用表格来展示数据,同时提供一些操作用于操作表格内的数据。简单的表格直接用原生 HTML table 就好,但如果要在 React 中实现一个功能丰富的表格,其实是非常不容易的。在本站之前的文章《最好的 6 个 React Table 组件详细亲测推荐》 中有提到过 react-table 这个库,如果对这个库不太了解的同学可以先了解一下,这里不再赘述。简而言之,react-table 是一个非常强大的库,它与常见的表格组件不同,它不负责渲染 HTML 和 CSS,而是提供了一系列的 hooks 让我们可以灵活地构建功能强大的表格组件。
1353 0
|
JavaScript
VUE之vxe-table高级表格(表格内增删改、导入、导出、自定义打印、列设置隐藏显示等)用法
VUE之vxe-table高级表格(表格内增删改、导入、导出、自定义打印、列设置隐藏显示等)用法
8136 0
VUE之vxe-table高级表格(表格内增删改、导入、导出、自定义打印、列设置隐藏显示等)用法
|
8月前
|
JSON 开发框架 前端开发
利用bootstraptable展示数据,对数据进行排序分页等操作
利用bootstraptable展示数据,对数据进行排序分页等操作
|
8月前
|
缓存 JavaScript 前端开发
vue + element Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
vue + element Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
150 0
|
JavaScript 前端开发 测试技术
Datatables展示数据(表格合并、日期计算、异步加载数据、分页显示、筛选过滤)
Datatables展示数据(表格合并、日期计算、异步加载数据、分页显示、筛选过滤)
181 0
Datatables展示数据(表格合并、日期计算、异步加载数据、分页显示、筛选过滤)
|
存储 API
【ElementUI】Table表格动态合并
【ElementUI】Table表格动态合并
267 0
|
前端开发
前端列表页+element-puls实现列表数据弹窗功能
前端列表页+element-puls实现列表数据弹窗功能
441 0
|
JavaScript API
快速搞定,查询 + 表格,这种页面
快速搞定,查询 + 表格,这种页面
246 0
table标签经典案例,综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】
table标签经典案例,综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】
305 0
table标签经典案例,综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】