Nodejs_02

最新推荐文章于 2021-05-11 17:30:25 发布
最新推荐文章于 2021-05-11 17:30:25 发布
阅读量150 收藏
点赞数
分类专栏： nodejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vanlish/article/details/104093756
版权

Nodejs_02

2.1 javascript编写风格

  • 全等于===，摒弃==
  • 一定要处理err参数
  • 有些时候不加分号会出错
function say(){
console.log('hello world')
}
//TypeError: say(...)is not a function 
say();
（function(){
console.log('hello')
})()；
['苹果','香蕉'].forEach(function(item){
console.log(item)
})
//`是EcmaScript 6中新增的一种字符串包裹方式，叫做：模板字符串，它支持换行和非常方便的拼接
var foo = `
大家好
hello
哈哈哈`//普通字符串不支持类似换行
console.log(foo);
`hello`.toString()
//当你采用了五分好的代码风格的时候，只需要注意以下三种情况就不糊有问题
//当一行代码是以
// ([`开头的时候，则在前面不上一个分号用以避免一些语法解析错误

2.2 初步实现Apache功能

var http = require('http')
var fs = require('fs')
//1.创建Server
var server = http.createServer()
//Apache软件默认有www目录，所有存放在www目录中的资源都可以通过网址来浏览
//127.0.0.1:80/a.txt
//127.0.0.1:80/index.html
//127.0.0.1:80/apple/login.html

var wwwDir = '/Users/chenyaqian/Desktop/nodejs/02/www'
server.on('request',function(req,res){
var url = req.url
if (url === '/'){
fs.readFile(wwwDir + '/index.html',function(err,data){ if (err){
//return 有两个作用：
//1.方法返回值
//2.组织代码往后继续执行，相当于 res.end('404') return
return res.end('404 not Found.')
}else{
res.end(data)
}
})
}else if (url === '/a.txt'){
fs.readFile(wwwDir + '/a.txt',function(err,data){ if (err){
return res.end('404 not Found.')
}else{
res.setHeader('Content-Type','text/plain;charset=utf-8')
res.end(data)
}
})
}else if (url === '/index.html'){
fs.readFile(wwwDir + '/index.html',function(err,data){ if (err){
return res.end('404 not Found.')
}else{
res.end(data)
}
})
}else if (url === '/apple/login.html'){
fs.readFile(wwwDir + '/apple/login.html',function(err,data){ if (err){
return res.end('404 not Found.')
}else{
res.end(data)
}
})
}
})

server.listen(3000,function(){
console.log('running use http://127.0.0.1:3000')
})
//除了content-type可以用来执行编码，也可以在HTML页面中通过meta元数据来声明当前文本的编码格式,meta指元数据
//<meta charset="UTF-8">

当我们想要在www文件夹里面加其他的文件的时候会希望能让程序自动处理，而不是每次都加上一段代码

var http = require('http')
var fs = require('fs')
//1.创建Server
var server = http.createServer()
//Apache软件默认有www目录，所有存放在www目录中的资源都可以通过网址来浏览
//127.0.0.1:80/a.txt
//127.0.0.1:80/index.html
//127.0.0.1:80/apple/login.html

var wwwDir = '/Users/chenyaqian/Desktop/nodejs/02/www'
server.on('request',function(req,res){
var url = req.url
var filePath = '/index.html'
if (url !== '/'){
filePath = url
}
fs.readFile(wwwDir+filePath,function(err,data){
if (err){
return res.end('404 Not Found')
}
res.end(data)
})
})

server.listen(3000,function(){
console.log('running use http://127.0.0.1:3000')
})
//除了content-type可以用来执行编码，也可以在HTML页面中通过meta元数据来声明当前文本的编码格式,meta指元数据
//<meta charset="UTF-8">

//当我们想要在www文件夹里面加其他的文件的时候会希望能让程序自动处理，而不是每次都加上一段代码

2.3实现apache的目录列表功能

var http = require('http')
var fs = require('fs')
var server = http.createServer()
var wwwDir = '/Users/chenyaqian/Desktop/nodejs/02/www'
server.on('request',function(req,res){
var url = req.url
fs.readFile('./template.html',function(err,data){
if (err){
return res.end('404 Not Found')
}
//1.如何得到wwwDir目录列表中的文件名和目录名
//	fs.readdir
//2.如何将得到的文件名和目录名替换到template.html中
//	模板引擎
fs.readdir(wwwDir,function(err,files){
if (err){
return res.end('Can not find www dir')
}
var content = ''
files.forEach(function(item){
//在EcamScript 6 的``字符串中可以使用${}来引用变量
content +=`
	<tr>
	<td data-value = "apple/"><a class="icon dir" href="/D:/Movie/www/apple/">${item}
	<td class="detailsColumn" data-value="0"></td>
	<td class="detailsColum" data-value="1509589967">2017/11/2 上午10:32:47<td>
	</tr>
`
})
})
//在template里面留一个标记，然后用readdir生成tr标记里面的内容
data = data.toString()
data = data.replace('^_^',content) 

res.end(data)
})
})

server.listen(3000,function(){
console.log('running use http://127.0.0.1:3000')
})

2.3.1 readdir

var fs = require('fs')
fs.readdir('/Users/chenyaqian/Desktop/nodejs/02/www',function(err,files){
if (err){
return console.log('目录不存在')
}
console.log(files)
})

2.4 服务端渲染，服务端使用模板引擎

安装：npm install art-template(目前安装到了nodejs/02文件夹内)

2.4.1 在浏览器中使用art-template

tempalte-web.js路径：/Users/chenyaqian/Desktop/nodejs/02/node_modules/art-template/lib/template-web.js

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<!--模板引擎不关心字符串内容，只关心模板标记语法，例如{{}}mustache语法，八字胡语法
-->
	<script src="node_modules/art-template/lib/template-web.js"></script>
	<script type="text/template" id="tpl">
	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UtF-8">
		<title>document</title>
	</head>
	<body>
	<p>大家好，我叫：{{ name }}</p>
	<p>我今年{{ age }}岁了</p>
	<h1>我来自 {{ province }}</h1>
	<p>我喜欢 {{ each hobbies}}{{$value}}{{/each}}</p>
	</body>
	</html>
	</script>
	<script>
		var ret = template('tpl',{
	name : 'Jack',
	age:18,
	province:'北京市',
	hobbies:[
	'写代码',
	'唱歌',
	'打游戏'
	]
})
	console.log(ret)
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script src="node_modules/art-template/lib/template-web.js"></script>
	<script type="text/template" id="tpl">
	hello{{name}}
	</script>
	<script>
		var ret = template('tpl',{
	name : 'Jack'
})
	console.log(ret)
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<!--模板引擎不关心字符串内容，只关心模板标记语法，例如{{}}mustache语法，八字胡语法
-->
	<script src="node_modules/art-template/lib/template-web.js"></script>
	<script type="text/template" id="tpl">
	大家好，我叫：{{ name }}
	我今年{{ age }}岁了
	我来自 {{ province }}
	我喜欢 {{each hobbies}}{{$value}}{{/each}}
	</script>
	<script>
		var ret = template('tpl',{
	name : 'Jack',
	age:18,
	province:'北京市',
	hobbies:[
	'写代码',
	'唱歌',
	'打游戏'
	]
})
	console.log(ret)
	</script>
</body>
</html>

在node中使用art-template模板引擎
使用步骤

  1. 安装npm install art-template
  2. 在需要使用require的方法加载art-template, 参数中的art-template就是你下载的包的名字
  3. 查文档，使用模板引擎的API
    文档介绍 doc
    core method
// compile source of template as function
template.compile(source, options);

// compile source of template as function and immediately invoke it
template.render(source, data, options);

var template = require('art-template')
var fs = require('fs')
var tplStr = `
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<!--模板引擎不关心字符串内容，只关心模板标记语法，例如{{}}mustache语法，八字胡语法
-->
	<script src="node_modules/art-template/lib/template-web.js"></script>
	<script type="text/template" id="tpl">
	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UtF-8">
		<title>document</title>
	</head>
	<body>
	<p>大家好，我叫：{{ name }}</p>
	<p>我今年{{ age }}岁了</p>
	<h1>我来自 {{ province }}</h1>
	<p>我喜欢 {{ each hobbies}}{{$value}}{{/each}}</p>
	</body>
	</html>
`
fs.readFile('./tpl.html',function (err,data){
if (err){
return console.log('读取文件失败')
}
//默认data是二进制数据，而模板迎请方法需要接收的是字符串
	var ret = template.render(data.toString(),{
	name : 'Jack',
	age:18,
	province:'北京市',
	hobbies:[
	'写代码',
	'唱歌',
	'打游戏'
	]
})
console.log(ret)
})

2.5 客户端和服务端渲染

服务端和客户端渲染的区别

客户端渲染客户端渲染
客户端渲染是，客户端要向服务端申请两次，一次申请页面（也就是页面字符串），第二次申请数据

服务端渲染在这里插入图片描述服务端渲染是，模板渲染，在发送给客户端之前就已经把index.html渲染处理过了。讲页面和数据一起发送给服务器,只用请求一次。（服务端渲染比客户端渲染更快,但客户端渲染可以让你先看到页面 ）

  • 客户端渲染不利于SEO搜索引擎优化（有可能会搜索不到）
  • 服务端渲染是可以被爬虫抓取到的，客户端异步渲染是很难被爬虫抓取到的
  • 真正的网站既不是纯异步也不是纯服务端渲染，往往是两者相结合
//为了让目录结构清晰，把所有HTML文件放在view（视图）里面
//为了统一处理静态资源就把静态资源全部放进public中
var http = require('http')
var fs = require('fs')
http
	.createServer(function(req,res){
		var url = req.url
		if (url === '/'){
	fs.readFile('./views/index.html',function(err,data){
		if(err){
		return res.end('404 not found')
		}
		res.end(data)
		})
		}else if (url.indexof('/public')===0){
		// /public/css/main.css
		// /public/js/main/js
		// /public/lib/jquery.js
		//统一处理:
		// 如果申请路径是以/public/开头的，则我认为你要获取public中的某个资源，所以我们直接可以把请求路径当做文件路径俩进行读取
		fs.readFile('.'+url,function(err,data){if (err){
		return res.end('404 not found')
		}
		res.end(data)
		})
		}
	})
	.listen(3000,function(){
	console.log('running on http://127.0.0.1:3000')
	})

当浏览器收到HTML响应内容之后，就要开始从上到下依次解析，当在解析的过程中，如果发现：
link,script,img,iframe,video,audio等具有src或者link的href属性标签(具有外链的资源)的时候，浏览器会自动对这些资源发送请求（a标签中的href只有在用户触发的时候会发送请求）
当上面的代码没有对应url的处理的时候，执行node的时候就会挂起

在服务端中，文件就不哟啊写相对路径了，因为这个时候所有的资源都是通过url标识来获取的，所以这里的请求路径都写成:/public/xxx（本质是url）浏览器在真正发送请求的时候会把http://127.0.0.1:3000拼上

2.6 404处理

写一个404友好UI

// app application 应用程序
// 把当前模块所有的依赖项都声明再文件模块最上面
// 为了让目录结构保持统一清晰，所以我们约定，把所有的 HTML 文件都放到 views（视图） 目录中
// 我们为了方便的统一处理这些静态资源，所以我们约定把所有的静态资源都存放在 public 目录中
// 哪些资源能被用户访问，哪些资源不能被用户访问，我现在可以通过代码来进行非常灵活的控制
// / index.html
// /public 整个 public 目录中的资源都允许被访问
// 前后端融会贯通了，为所欲为

var http = require('http')
var fs = require('fs')
var url = require('url')
var template = require('art-template')

var comments = [
  {
    name: '张三',
    message: '今天天气不错！',
    dateTime: '2015-10-16'
  },
  {
    name: '张三2',
    message: '今天天气不错！',
    dateTime: '2015-10-16'
  },
  {
    name: '张三3',
    message: '今天天气不错！',
    dateTime: '2015-10-16'
  },
  {
    name: '张三4',
    message: '今天天气不错！',
    dateTime: '2015-10-16'
  },
  {
    name: '张三5',
    message: '今天天气不错！',
    dateTime: '2015-10-16'
  }
]

// /pinglun?name=的撒的撒&message=的撒的撒的撒
// 对于这种表单提交的请求路径，由于其中具有用户动态填写的内容
// 所以你不可能通过去判断完整的 url 路径来处理这个请求
// 
// 结论：对于我们来讲，其实只需要判定，如果你的请求路径是 /pinglun 的时候，那我就认为你提交表单的请求过来了

http
  .createServer(function (req, res) { // 简写方式，该函数会直接被注册为 server 的 request 请求事件处理函数
    // 使用 url.parse 方法将路径解析为一个方便操作的对象，第二个参数为 true 表示直接将查询字符串转为一个对象（通过 query 属性来访问）
    var parseObj = url.parse(req.url, true)

    // 单独获取不包含查询字符串的路径部分（该路径不包含 ? 之后的内容）
    var pathname = parseObj.pathname

    if (pathname === '/') {
      fs.readFile('./views/index.html', function (err, data) {
        if (err) {
          return res.end('404 Not Found.')
        }
        var htmlStr = template.render(data.toString(), {
          comments: comments
        })
        res.end(htmlStr)
      })
    } else if (pathname === '/post') {
      // 其它的都处理成 404 找不到
      fs.readFile('./views/post.html', function (err, data) {
        if (err) {
          return res.end('404 Not Found.')
        }
        res.end(data)
      })
    } else if (pathname.indexOf('/public/') === 0) {
      // /public/css/main.css
      // /public/js/main.js
      // /public/lib/jquery.js
      // 统一处理：
      //    如果请求路径是以 /public/ 开头的，则我认为你要获取 public 中的某个资源
      //    所以我们就直接可以把请求路径当作文件路径来直接进行读取
      fs.readFile('.' + pathname, function (err, data) {
        if (err) {
          return res.end('404 Not Found.')
        }
        res.end(data)
      })
    } else if (pathname === '/pinglun') {
      // 注意：这个时候无论 /pinglun?xxx 之后是什么，我都不用担心了，因为我的 pathname 是不包含 ? 之后的那个路径
      // 一次请求对应一次响应，响应结束这次请求也就结束了
      // res.end(JSON.stringify(parseObj.query))

      // 我们已经使用 url 模块的 parse 方法把请求路径中的查询字符串给解析成一个对象了
      // 所以接下来要做的就是：
      //    1. 获取表单提交的数据 parseObj.query
      //    2. 将当前时间日期添加到数据对象中，然后存储到数组中
      //    3. 让用户重定向跳转到首页 /
      //       当用户重新请求 / 的时候，我数组中的数据已经发生变化了，所以用户看到的页面也就变了
      var comment = parseObj.query
      comment.dateTime = '2017-11-2 17:11:22'
      comments.unshift(comment)
      // 服务端这个时候已经把数据存储好了，接下来就是让用户重新请求 / 首页，就可以看到最新的留言内容了

      // 如何通过服务器让客户端重定向？
      //    1. 状态码设置为 302 临时重定向
      //        statusCode
      //    2. 在响应头中通过 Location 告诉客户端往哪儿重定向
      //        setHeader
      // 如果客户端发现收到服务器的响应的状态码是 302 就会自动去响应头中找 Location ，然后对该地址发起新的请求
      // 所以你就能看到客户端自动跳转了
      res.statusCode = 302
      res.setHeader('Location', '/')
      res.end()
    } else {
      // 其它的都处理成 404 找不到
      fs.readFile('./views/404.html', function (err, data) {
        if (err) {
          return res.end('404 Not Found.')
        }
        res.end(data)
      })
    }
  })
  .listen(3000, function () {
    console.log('running...')
  })

// Node 不适合从来没有接触过服务端的人学习
// 如果想要真正的学号服务端，还是老牌的 Java、PHP 这些平台
// Node 不是特别适合入门服务端，但不代表 Node 不强大
// Node 很厉害，具有经验的人可以玩儿的非常的牛
// 不适合新手的原因就在于比较偏底层、而且太灵活
// Java、PHP 好入门的原因就在于：这些平台屏蔽了一些底层
// res.redirect('重定向')


// 晚上写案例照着下面的步骤写：
// 1. / index.html
// 2. 开放 public 目录中的静态资源
//    当请求 /public/xxx 的时候，读取响应 public 目录中的具体资源
// 3. /post post.html
// 4. /pinglun
//    4.1 接收表单提交数据
//    4.2 存储表单提交的数据
//    4.3 让表单重定向到 /
//        statusCode
//        setHeader

// 明天：
// 模块系统
// Express（第三方 Web 开发框架）
//    这两做的事儿，在框架里面就是一个 API 的事儿
//    使用框架的目的就是让我们更加专注于业务，而不是底层细节

url.parse的是用个，可以把一个完整url分成几块
在这里插入图片描述
在这里插入图片描述

var url = require('url')
var obj = url.parse('pinglun?name=的撒的撒&message=的撒的撒的撒',true)
console.log(obj)
console.log(obj.query)
vanlish
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nodejs简单留言板
12-14
环境要求：expressjs 4.* 功能：包含简单的增、查、删功能
nodejs 留言本案例
qq_42039912的博客
05-30 468
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>留言本</title> <link rel="stylesheet" href="/public/lib/bootstrap/css/bootstrap.css"> </head> <body> <div clas
Nodejs 实战开发留言板案例
apple_50542486的博客
05-11 252
Nodejs 实战开发留言板案例 准备第三方包 express art-template body-parse 以上第三方包需要安装到你的项目中 npm install express -s npm install art-template -s npm install body-parse -s index.html 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&
node.js留言板案例
流楚丶格念的博客
02-18 3861
文章目录示例链接注意代码app.jsindex.htmlpost.html 示例 链接 https://download.csdn.net/download/weixin_45525272/15356934 注意 判断访问路径 不包含 ? 之后的内容 省略server简写方式，http .createServer(function (req, res) { }该函数会直接被注册为 server 的 request 请求事件处理函数 使用 url.parse() 方法将路径解析为一个方便操作的对象，第
NodeJS_Practice:Node.js的实践（JavaScript框架）
05-14
NodeJS_Practice Node.js的实践（JavaScript框架） 目录 序号 话题 项目名 01。 节点基本介绍项目 NodeCourse 02。 bodyParser，变量路由，URL中的正则表达式，导入自定义模块， NodeProject2 猫鼬，猫鼬，...
React_Native_With_Axios_Nodejs_Mongodb_News_App:使用React Native和Axios，您可以使用由Node js和Mongodb构建的后端将新闻添加到数据库中
05-30
React_Native_With_Axios_Nodejs_Mongodb_News_App 使用 React Native 和 Axios，您可以使用 Node js 和 Mongodb 构建的后端向数据库添加新闻。 巴兰·贝亚兹特 02/01/2021
nodejs_wx_aipay_api:微信支付宝个人免签收款Api系统，有了它对接再也不用担心我的业务不能支付了
03-11
个人支付免签系统Api版技术栈EggJs + MySql + Vue项目说明：支持个人网站，安卓应用，微信公众号，Pc软件收款的接收，所有的资金都会实时到账您的支付宝/微信余额中，支付宝无需上传收款...支持信息2021年02月07日
nodejs02
03-15
nodejs02
nodejs02.zip
12-21
欢迎来到我们的WEB前端学习视频！在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师...
使用Nodejs+BootStrap搭建一个简单的留言板
11-06
通过使用Nodejs搭建一个简单的留言板系统，进行留言。是一个初学者练习的好例子
Node实现留言板功能
03-22
1. 执行`npm init` 初始化包 2. 安装所需依赖`>npm i body-parser ejs express moment morgan --save` 3. 格式化时间`moment(new Date()).format('YYYY-MM-DD HH:mm:ss')` 4. ejs 模板引擎的运用 ```javascript // 注册模板引擎 app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); ``` 5. 设置用户表单提交数据的接收中间件 ```javascript // 设置用户表单提交数据的接收中间件,所有提交的信息都会保存在req.body app.use(bodyParser.urlencoded({extended:false})); ``` 6. 界面重定向 ```javascript // 回到主界面 重定向 res.redirect('/'); ```
node.js留言板.zip
02-18
node.js留言板.zip
用Node.实现留言板功能
10-10
用nodejs、html 、css实现留言板功能。输入姓名和留言内容，能够实时显示在留言板上面显示留言人，和留言的内容、留言的日期。 //1、/ index.html //2、开发public 目录中的静态资源 // 当请求/public/xxx的时候，读取响应public目录中的具体资源 //3、/post post.html //4、/pinglun // 4.1接受表单提交数据 // 4.2存储表单提交数据 // 4.3让表单重定向到/ // statusCode // setHeader
留言版例子模块
12-22
此工具是java留言板的例子代码，直接copy到项目中修改使用，方便快速， 主要实现客户留言，适合学习以及快速开发。
infrared-remote-candroid studiodemo
最新发布
05-05
android studio下载
【新质生产力】新质生产力赋能智能制造数字化解决方案.pptx
05-05
【新质生产力】新质生产力赋能智能制造数字化解决方案.pptx
基于matlab实现的用于应用布格重力异常数据反演地下异常密度体.rar
05-05
基于matlab实现的用于应用布格重力异常数据反演地下异常密度体.rar
npm ERR! D:\nvm\nvm\nodejs\node_cache\_logs\2023-08-11T03_02_36_194Z-debug.log
08-12
根据引用的错误信息，这是一个关于使用npm安装依赖包时发生的错误。错误信息显示了一个权限问题和无法读取远程仓库的错误。可以尝试检查访问权限和仓库是否存在。 引用提供了一个手动安装node-sass模块的方法，其中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值