node.js(基础篇)

最新推荐文章于 2022-06-06 11:37:53 发布

上后左爱

最新推荐文章于 2022-06-06 11:37:53 发布

阅读量229

点赞数

分类专栏： JAVAScript 文章标签： node.js

本文链接：https://blog.csdn.net/qq_27217017/article/details/99690209

版权

JAVAScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.Node.js 用于后台开发的模块：

基于CommonJS规范分为三种不同部分： 1).内置的node.js模块，2)。第三方Node.js模块, 3)自定义node.js模块

如何使用第三方使用模块：创建一个package 进行第三方文件管理

npm init---创建一个package 进行管理第三方文件：

npm install -g request: 安装在全局目录下面，

npm install --save request: 将其安装在配置信息的依赖中：如下图使用--save 之后再dependencies属性下面会出现我刚才安装过的包的版本信息

{
  "name": "nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2.requests VS request 的区别：

是为浏览器处理stream XHR的一个小工具，request 是一个请求数据包，requests 进行流分块处理,是对request的简化处理，让我们更加容易发送数据和对响应数据处理

借助URL 模块对url进行解析：得到相对应的信息

如果url.parse(url,tue, true) 返回一个query属性是一个对应的JSON对象：

url.resolve(form, to): 将from + to 拼接成一个完成URl信息：

node.js内置核心模块 querystring: 对URL到对象解析或者对URL进行编码

async : 进行异步流程控制：

1）明白在JS中隐式callback函数到底是什么？？

jS 中回调指的是：函数可以作为一个参数在另外一个函数中被调用，JS异步编程语言，Callback关键字是为了简化代码，将具有相同逻辑结构，使用对应关键字替代：

第一个Callback入参中，表示这个非普通变量，是一个函数，

在JS中关键字callback与以往语言调用方式不同，它表示函数体在完成某种操作之后会由内到外调用

// 串行无关联方式

var async = require('async');
console.time('test')
async.series([
    function(callback) {
        setTimeout(function () {
            callback(null, 'one');
        }, 1000)
    },
    // the second function 
    function(callback) {
        setTimeout(function () {
            callback(null, 'two');
        }, 2000)
    }
], function (err, results) {
    console.log(results);
    console.timeEnd('test');
})

//并行无关联，最大的长时间：var async = require('async');
console.time('test')
async.parallel([
    function(callback) {
        setTimeout(function () {
            callback(null, 'one');
        }, 1000)
    },
    // the second function 
    function(callback) {
        setTimeout(function () {
            callback(null, 'two');
        }, 2000)
    }
], function (err, results) {
    console.log(results);
    console.timeEnd('test');
})
// 串行有关联函数
//串行关联函数
async.waterfall(
    [
        function (callback) {
            callback(null, 'one', 'two');
        },
        function (arg1, arg2, callback){
            callback(null, arg1, arg2, 'three');
        }, 
        function (arg1, arg2, arg3, callback){
            callback(null, [arg1, arg2, arg3,'three']);
        }
    ], function (err, results) {
        console.log(results);
    })

npm Scripts:

npm Scripts,通过运行其他*.js 文件命令

将项目关联脚本集中在同一个地方，进行集中管理，npm Script 有多个对应的命令

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

vue基础篇：

https://cn.vuejs.org/v2/guide/index.html

vue 是一种构建用户界面渐进式框架，vue 是一个自底向上逐层应用，VUE的核心库只关注视图层，vue为复杂的单也应用提供驱动

vue基础方式：第一种CDN,第二种: vue.js 下载本地，第三种：vue-cli

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		  <!-- 写一个标签 -->
		  <div id= "app">
    			  <!-- 响应数据显示 {{}} ,支持语法-->
				<h1>{{ message }}</h1>
				<!-- 动态链接 
				条件渲染
				    v-if
					v-bind: data
					v-else
					v-show : 只是切换了display,v-if 是false不会创建标签，
					v-show:  适合标签频繁切换更好，不会让页面显示
				-->
				<div>
					 <a v-bind:href = "href">百度</a>
					 <ul>
						<!-- 循环是li 不能写在ul上 借助关键字in
						  遍历数组
						  遍历对象时 map的Value值 
						  (item, name) 替换 item 第一个参数value, 第二个参数 key-->
						<li v-for= "item in persons">
							I am {{item.name}}
						</li>
					 <ul>
				</div>
		  </div>
	</body>
	<!--通过CDN的方式，将vue进行引入-->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script>
		 var app = new Vue({
			 el: "#app",
			 // 响应数据
			 data : {
				 href : "https://www.baidu.com",
				 message: "hello wolrd",
				 num: 1,
				 persons: [{name: "1111"}, {name: "2222"}]
			 }
		 })
	</script>
</html>

VUE 中计算属性 computed:

1.什么叫计算属性：在模板表达式内，设计初衷是简单运算，但是一旦逻辑复杂，难以维护，并且在VUE中V-for|V-if我们不推荐在模板表达式中使用，不断调用函数，使用计算属性，只有在值进行修改时候才会进行计算

在实际过程中复杂逻辑使用VUE自带的Computed属性：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<div>
				<h1>{{message.split(" ").reverse().join()}}</h1>
			</div>
		</div>
	</body>
	<!--通过CDN的方式，将vue进行引入-->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script>
		var app = new Vue({
			el: "#app", // elemetUI 对象
			data: {
				message: "hello world"
			}
		})
		
	</script>
</html>

在如果在模板中调用回调函数等复杂计算，借助使用VUE中Computed属性：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<div>
				<h1>{{message}}</h1>
				<h1>{{reverseMessage}}</h1>
			</div>
		</div>
	</body>
	<!--通过CDN的方式，将vue进行引入-->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script>
		var app = new Vue({
			el: "#app", // elemetUI 对象
			data: {
				message: "hello world"
			},
			computed:{
				reverseMessage: function(){
					`this 指向是VM 实例 app`
					return this.message.split(' ').reverse().join(' ');
				}
			}
		})
		
	</script>
</html>

3. Computed 并不会时时触发，只会只修改时候才会触发，这点很好，不需要频繁调用函数，消耗内存：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>
				<h1>{{message}}</h1>
				<h1>{{reverseMessage}}</h1>
			</div>
			<div>
				<button @click="add()">补充货物1</button>
				<div>总价为 {{price}}</div>
			</div>
		</div>
	</body>
	<!--通过CDN的方式，将vue进行引入-->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script>
		var app = new Vue({
			el: "#app", // elemetUI 对象
			data: {
				message: "hello world",
				package1: {
					count: 5,
					price: 5
				},
				package2: {
					count: 10,
					price: 10
				}
			},
			methods:{
				add: function(){
					return this.package1.count++;
				}
			},
			computed: {
				reverseMessage: function() {
					//`this 指向是VM 实例 app`
					return this.message.split(' ').reverse().join(' ');
				},
				price: function() {
					return this.package1.count*this.package1.price + this.package2.count*this.package2.price 
				}
			}
		})
	</script>
</html>

计算属性还要其他特性：计算属性可以依赖其他其他属性，或者是其他实例的数据：

总结：虽然我们也可以在VUE.methods 写一个实现对于逻辑的方法函数，最后两种方式的结果一样的，但是计算属性特性就是基于依赖进行缓存，计算属性只有在它的相关依赖发生改变时才会重新求值。这也就意味中只要依赖属性没有发生修改，多次访问计算属性是之前的值，但是如果是方法的函数，多次方法必须得重复计算，特别是对于那些耗时特别严重的逻辑，但是值并不是经常使用，但是频繁调用

Var _this = this 理解：

this 在不同的作用域范围之内表示不同函数，在全局中代表是Window,在内部函数代表这个对象，_this 只是为了记住最初使用对象，入在引入监听操作时候，显示答案就利用这个_this

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>
				<h1>{{message}}</h1>
				<h1>{{reverseMessage}}</h1>
			</div>
			<div>
				<button @click="add()">补充货物1</button>
				<div>总价为 {{price}}</div>
			</div>
			<div>
				// 监听属性 监听事务发展
			question: <input type= "text" placeholder="enter" v-model="question">
			answer: {{answer}}
			</div>
		</div>
	</body>
	<!--通过CDN的方式，将vue进行引入-->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script>
		var app = new Vue({
			el: "#app", // elemetUI 对象
			data: {
				question: '',
				answer: 'no answer',
				message: "hello world",
				package1: {
					count: 5,
					price: 5
				},
				package2: {
					count: 10,
					price: 10
				}
			},
			methods:{
				add: function(){
					return this.package1.count++;
				}
			},
			computed: {
				reverseMessage: function() {
					//`this 指向是VM 实例 app`
					return this.message.split(' ').reverse().join(' ');
				},
				price: function() {
					return this.package1.count*this.package1.price + this.package2.count*this.package2.price 
				}
			},
			// 监听对象是否修改
			watch:{
				question: function(){
					this.answer = 'waiting';
					var _this = this;
					// 模拟web c操作
					setTimeout(function(){
						_this.answer = '404'
					}, 100)
				}
			}
			
		})
	</script>
</html>

v-bind:绑定对象，同时也可以进行简写用：替代

为什么所有监听数据都需要在VUE中进行初始化：

因为VUE的核心原理是Object.defineProperty() 是核心原理，双向绑定原理，该方法在一个对象定一个新的属性

在双向绑定中，及利用Object.definePerporty 属性对setter,getter 执行赋值

当把一个普通JS对象传入VUE中data选项中时，VUE遍历对象所有属性，并使用Object.defineProprrty()把这些全部属性转换成为getter/setter ，但是IE8 或低版本的浏览器不支持

浏览器对于DOM的复用特性，如果有一个对应ID，不会进行DOM复用

如果没有添加ID，去进行删除操作，DOM删除是最后一个节点，如果加入:key 删除时候不会进行DOM复用：

：key 属性：禁止DOM复用：这是虚拟DOM算法决定的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>
				<h1>{{message}}</h1>
				<h1>{{reverseMessage}}</h1>
			</div>
			<div>
				<button @click="add()">补充货物1</button>
				<div>总价为 {{price}}</div>
			</div>
			<div>
				// 监听属性 监听事务发展
			question: <input type= "text" placeholder="enter" v-model="question">
			answer: {{answer}}
			</div>
			<div>
				<a :href="href" :data-id="message" :class="['aaa',message]">百度</a>
			</div>
			<div>
				<button @click="persons.splice(0,1)">CUT</button>
				<ul>
					<!-- item遍历数组value, index 对应索引 -->
					<li v-for= "(item, index) in persons" :key="item.name">
						I am {{item.name}}, my age is : {{item.age}} <input type="text"/>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<!--通过CDN的方式，将vue进行引入-->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script>
		var app = new Vue({
			el: "#app", // elemetUI 对象
			data: {
				question: '',
				answer: 'no answer',
				message: "hello world",
				href : "https://www.baidu.com",
				persons: [{name: "111", age: 40},{name: "2222", age: 44},{name: "3333", age: 45}],
				package1: {
					count: 5,
					price: 5
				},
				package2: {
					count: 10,
					price: 10
				}
			},
			methods:{
				add: function(){
					return this.package1.count++;
				}
			},
			computed: {
				reverseMessage: function() {
					//`this 指向是VM 实例 app`
					return this.message.split(' ').reverse().join(' ');
				},
				price: function() {
					return this.package1.count*this.package1.price + this.package2.count*this.package2.price 
				}
			},
			// 监听对象是否修改
			watch:{
				question: function(){
					this.answer = 'waiting';
					var _this = this;
					// 模拟web c操作
					setTimeout(function(){
						_this.answer = '404'
					}, 100)
				}
			}
			
		})
	</script>
</html>

VUE的工程搭建和基础配置

vue-cli 脚手架快速搭建项目：node 版本最好是最新版本为8.11

npm insatll -g @vue/cli ---- vue从2到3 版本更新差异挺大的,所以如果您已经安装的是2.0，先卸载，在安装最新版本功能，新版本在不断更新，有人维护，能够更好的扩展

对于其中层级目录：

/public dir 目录的公共资源在package 是不会被打包的；

/compoents dir 目录下面放的自定义的功能组件

/ assets dir : 静态资源组件；

/ vues: vue 公共的组件

app.vue: 全局的CSS样式，等组件功能

main.js : 入口文件，引入/App.vue, ./route , ./store 等组件，全局使用的东西都可以定义在此，在后续安装elemntUI 同样也在此定义

route.js 是我们的路由文件，所有的路由配置都在此；

2）elemtUI 安装：

npm install element-ui axios --save // 只安装本项目，这个插件只是安装在dev环境中，只是在dev时候使用，上线不会将此插件打包上

3）路由配置和生命周期

3-1： @ 代表src

3-2: 对于一个普通组件有三个部分： template, script, style: css,并且在style 中我们可以add scope 来限制css 的作用域范围；

3-3：路由：指的是在访问时候根据url的正则匹配方式访问到不同的页面上，之前在写服务d端时候，可以利用模式方式，借助代理模型，根据对应的输入，访问输入借助proxy代理模式，访问到不同的设计方式中

app.vue 属于我们根组件，对应我们的一级路由；

3-4：钩子结构：

钩子类似于JAVA中切片，对于DOM中的事件的捕获和冒泡过程来看：

beforecreate,create,beforeUpdate,beforeDestory 是在捕获过程中执行，

mounted,updated,destoryed 是在冒泡过程中调用

上后左爱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node.js(基础篇)

1.Node.js 用于后台开发的模块：基于CommonJS规范分为三种不同部分： 1).内置的node.js模块，2)。第三方Node.js模块, 3)自定义node.js模块如何使用第三方使用模块：创建一个package 进行第三方文件管理 npm init---创建一个package 进行管...
复制链接

扫一扫