HackerNews01-搭建代码结构|学习笔记

简介: 快速学习 HackerNews01-搭建代码结构

开发者学堂课程【Node.js 入门与实战 HackerNews01-搭建代码结构】学习笔记,与课程紧密联系,让用户快速学习知识

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


HackerNews01-搭建代码结构


内容简介:

一、设计路由

二、搭建代码框架

 

一、设计路由

当用户使用不同方法请求不同路径的时候时要怎么处理。新闻列表功能,新闻详情功能添加新闻功能及点击添加。 

服务器当用户请求哪个路径的时候会显示新闻列表,当用户请求另外一个路径的时候是不是要显示添加新闻界面,这个要在服务器先设计好。

服务器先设计好之后,在服务器端当用户请求过来之后就可以判断如果要请求的是/submit 显示就显示添加新闻页面,以此类推。

那么在服务器端得提前想好当用户请求什么路径的时候就要做出什么样的响应,要提前把这个想好,这个过程就叫做设计路由。 

路由由两部分组成,

第一部分是请求的方法

第二部分是请求的路径

假如说通过 Get 方式请求,域名后面就/submit,这就是请求路径。通过 Get 的方式请求路径,那么这就是一个路由,表示这是以 Get 方式请求这个路径。

但是请求方法变成 POST,这就叫第二个路由,它们是不同的两个路由。

设计路由就是设计当用户使用什么样的方法请求什么样的路径的时候而要做出什么样的响应。

 

二、搭建代码框架

首先新建一个入口文件

index.js

// 当前项目(包)的入口文件

必须得有一段 package.js 文件来描述来告诉别人它入口文件,所以要在 cmd 下要新建一个 package.js文件。

C: \Users\Humble\Desktop\12期\02-Hackerews\02-源代码\课堂代码\test-demo-1(tes入 cd ..

C: \Users \Humble\Desktop\12期\02-HackerNews \02-源代码\课堂代码入 ls

01-demo03-Apache

04-request和responseAAA

test-demo-1

02-http03-url就是一个标识05-hackernews

test-demo中文父节点萨克雷

C : lUsers \Humble lDesktopl12期\02-HackerNews\02-源代码\读堂代码

入 cd 05-hackernews l

C: \Users\Humble\Desktop\12期\02-Hackerlews \02-源代码\课堂代码\05-hackernews入 cls

cmd.exe

C: \Users\HumblelDesktop\12期\02-HackerNews\02-源代码\课堂代码\05-hackernews

入 npm init -y

wrote to c:\users\Humble\Desktop\12期\02-HackerNews\e2-源代码\课堂代码\05-hackernews lpackage.json;{

name" : "e5-hackernews"","version": "1.e.e-,

"description" : ""”,"main": "index.js","scripts": {

"test": "echo !"Error: no test specified\" && exit 1”},

keywords":[],"author" : "license-: "isc- 

新建好package.js文件了

"main":"index.js", 

表示了入口文件就是"index.js"

创建好这个入口文件以后,接下来首先就是得开启一个HDD服务来把这个服务先开启。

开启服务第一步 // 1.加载 http 模块

var http = require('http');

加载完这个模块后,就要创建一个服务。

// 2. 创建服务

http.createServer(function (req,res) {

创建好这个服务和并且间进这个 req,res 事件

最后,启动一下 

//-2、-创建服务

http.createServer(function - (req , -res)·{

·······// body …

}).listen(9090 , -function-()· {

··consoLe.1og( 'http:// localhost: 9090');

});

服务创建好了

大量代码在这里写

根据用户的不同请求路径,要做出不同处理

// 要在这里写大量的码

// 设计路由

// 当用户请求 / 或 /index 时, 显示新闻列表    get 请求

// 当用户请求 /item 时, 显示新闻详情    get 请求

// 当用户请求 /submit 时, 显示添加新闻页面  get 请求

// 当用户请求 /add 时,将用户提交到的新闻保存到 data.json 文件中  get 请求

// 当用户请求 /add 时,将用户提交到的新闻保存到 data.json 文件中  post 请求

同样一模一样的功能,只不过是把它变成post形式

大概就是要实现这几个功能

来看看如何实现这些功能

这个网页我们没有必要自己去写

先实现第一个功能:当请求网页的时候,是得先把这个网页显示出来

请求(index)什么,什么网页就显示出来

第一步

// 先根据原画请求的路径(路由) , 将对应的HTML页面显示出来(具体里面数据对不对,稍后再去调)

用户请求什么,就把对应文件显示出来

所以这里就直接判断路由就好了

// 先根据原画请求的路径(路由) ,将对应的HTML页面显示出来

(具体里面数据对不对,我们稍后再去调)

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

} 

为了避免大小写问题,要把它转成大写或小写都能判断,可以提前给他转一下

req.url = req.url.toLowerCase( ); 这个是转成小写

req.method = req.method.toLowerCase( ); 这样就把这俩个都转成小写了

// 将用户请求的 url 和 method 转换为小写字母 

要学会查这个MDN 

// 先根据原画请求的路径(路由) , 将对应的HTML页面显示出来

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

// 1. 读取 index. html并返回

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

// 1. 读取 submit.html 并返回

} else  if  (req.url ===  /item  && req.method ===

get ) {

// 读取 details.html 并返回

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

// 表示 get 方法提交一条新闻

} else  if (req.url ===  /add )&& req.method === post) {  

// 表示 post 方法提交一条新闻

} else {

res.writeHead(404, Not Found , {

Content-Type:  text/html;  charset=utf-8’

});

Res.end(404,Page Not Found.)

}

如果以上几个路由都没有就会给你返回404

// 设计路由

// 当用户请求 / 或 /index 时, 显示新闻列表    get 请求

// 当用户请求 /item 时, 显示新闻详情    get 请求

// 当用户请求 /submit 时, 显示添加新闻页面  get 请求

// 当用户请求 /add 时,将用户提交到的新闻保存到 data.json 文件中  get 请求

// 当用户请求 /add 时,将用户提交到的新闻保存到 data.json 文件中  post 请求

req.url -= -req.ur1.toLowerCase( );

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

// 先根据原画请求的路径(路由) , 将对应的HTML页面显示出来

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

// 1. 读取 index. html并返回

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

// 1. 读取 submit.html 并返回

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

// 读取 details.html 并返回

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

// 表示 get 方法提交一条新闻

} else  if (req.url ===  /add )&& req.method ===   post) {  

// 表示 post 方法提交一条新闻

} else {

res.writeHead(404, Not Found , {

Content-Type:  text/html;  charset=utf-8

});

Res.end(404,Page Not Found.)

}

如果以上几个路由都没有就会给你返回404

总结:

这就是最基本的结构,就是先加载http模块,然后创建服务,监听用户请求事件,用户请求过来以后先设计好路由,根据这个路由判断,如果请求不同路由,接下来也会做出不同处理。

这就是第一步:首先把代码框架先搭建好。

相关文章
|
8月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的景海中学教学管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的景海中学教学管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
8月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的开放式教学评价管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的开放式教学评价管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的《数据库原理及应用》课程平台的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的《数据库原理及应用》课程平台的详细设计和实现(源码+lw+部署文档+讲解等)
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的编程语言在线学习平台的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的编程语言在线学习平台的详细设计和实现(源码+lw+部署文档+讲解等)
60 1
|
7月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的考研资料分享系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的考研资料分享系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
8月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的经典诗文学习爱好者学习交流平台的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的经典诗文学习爱好者学习交流平台的详细设计和实现(源码+lw+部署文档+讲解等)
|
8月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的《数据库系统原理》课程平台的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的《数据库系统原理》课程平台的详细设计和实现(源码+lw+部署文档+讲解等)
|
8月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的中学课内小说阅读与学习系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的中学课内小说阅读与学习系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
8月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的小学生课外知识学习网站的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的小学生课外知识学习网站的详细设计和实现(源码+lw+部署文档+讲解等)
|
前端开发
前端学习笔记202305学习笔记第二十三天-项目重构构建
前端学习笔记202305学习笔记第二十三天-项目重构构建
66 0