-
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 是在冒泡过程中调用