Vue Webpack Node npm cnpm的关系理解：
1.实际上Vue本身是不依赖Node的，
2.而Vue-cli的脚手架是依赖于Webpack的，所以间接的也需要Node的支持,
3.Webpack基于Node的运行环境,Webpack在执行打包压缩的时候依赖Node,
没有Node就不能使用Webpack,并且支持ES6
4.npm只是nodejs的一个模块,运行在Node上，全称（Node Package Manager）
5.cnpm是淘宝的、只为下载快点
6.node是一个运行在服务器端的js环境
Vue的特点
MVVM模式(Model-View-ViewModel）:ViewModel是Vue.js的核心，它是一个Vue实例。
DOM Listeners DOM监听
Data Bindings 数据绑定
编码简洁，体积小，运行效率高，适合移动/PC开发
本身只关注UI,可以轻松引入Vue插件和第三方库
关注数据，数据改变Dom改变r
借鉴Angular的模板和数据绑定技术
借鉴react的组件化和虚拟Dom技术
Vue扩展插件
vue-cli: 脚手架
vue-resource(axios)ajax请求
vue-router: 路由
vuex: 状态管理
vue-lazyload: 图片懒加载
vue-scroller: 页面滑动相关
mint-ui: 移动端UI库
element-ui/iviewPC端UI库
dev-tools是一款基于chrome浏览器的插件，用于vue应用的调试
大括号(插值)表达式:{{}}
Vue常用指令如下:
v-if、
v-else、
v-for、
v-show、
v-on、 可以简写为 @ 绑定事件(监听事件)
v-bind 可以简写为 : 给子组件传入绑定值(绑定参数)
v-model 双向数据绑定
修饰符如下：
.lazy, 如：v-model.lazy="wang" 监听change操作
.trim, 如：v-model.trim="wang" 去掉前后空白
.number如：v-model.number="wang"确保获得的是String类型，v-model默认数据类型String的
简单的toduList
组件：
Vue.component("TodoItem",{//全局组件
template:""
})
$代表实例
vm.$destroy() 销毁实例
vm.$data.message = "bye bye"
Vue实例的生命周期钩子
生命周期函数是 vue实例在某一个时间点会自动执行的函数
beforeCreate
created 创建时
beforeMount
mounted 渲染
beforDestroy
destroy 销毁
beforUpdate
update 修改数据时渲染
模板语法
v-text 和{{}}类似
v-html 会有如<h3></h3>渲染
{{message +'a '}}
计算属性，方法和侦听器
computed:{ 计算属性、计算属性中内置缓存
fullName:function () {
return this.Name+""+this.age
}
}
watch:{ 侦听器
Name:function(){
this.fullName = this.Name+""+this.age
}
age:function(){
this.fullName = this.Name+""+this.age
}
}
计算属性的set和get
computed:{
fullname:{
get:function () {
return this.Name +""+age
},
set:function (value) {
var arr = value.splice(" ");
this.Name = arr[0];
this.age = arr[1];
}
}
},
Vue样式绑定
让数据改变，样式改变
1.class的对象绑定
2.class的数方式
3.
Vue条件渲染
v-if
v-show
v-else
v-else-if
<input key="">//唯一元素、不会复用了
Vue列表渲染
对数组操作的方法:
push 添加
pop 删除最后一项
shift 删除第一项 vm.list.splice(1,1,{id:"333",text:"Dell1"})
unshift 添加内容第一项
splice 截取
sort 排序
reverse 取反
template模板：包裹一些元素，但并不会真正渲染到页面上
对象循环渲染倒页面
对象动态加值：通过引用方式如 ,有两种方式
vm.userInfo = {{},{},}
Vue.set(vm.userInfo,"address","beijing")//和set方法都可以！！！
Vue set方法的用法
Vue.set(vm.userInfo,"address","beijing") //对象动态加值
vm.$set(vm.userInfo,"address","beijing")
Vue.set(vm.arrayInfo,1,5)//数组的set用法,引用，调用方法、数组的三种方式
组件的细节点
<tr is="row"></tr> //row组件名
子组件中的data必须是函数、只能在Vue实例中是对象如：
data:function(){
return{
content:'this is content'
}
}
ref引用 //特殊情况需操作Dom用,获取Dom节点
this.$refs.hello。innerHTML
this.$refs.one.unmber 组件上写的话是：子组件引用
父子组件的相互传值
声明子组件时，记得注册到父组件中（相当于关联一下）
因涉及到Vue中的（单向数据流概念），子组件接收父组件的数据是不能直接修改的，而是通过间接的方式修改
父组件给子组件传值通过属性（参数），而子组件给父组件传值是通过事件监听。
如： var zujian ={
props:['content','index'],
template:"<li @click='del'>{{content}}---{{index}}</li>",
methods:{
del:function () {
this.$emit('del',this.index)/*向上触发一个名为del的事件、并所需删除id传过去*/
}
}
}
组件参数效验与非props特性
子组件对父组件传来参数的约束称为参数效验
props:{
content:{Number,String,type:string,required;false,default:'默认值',validator:function(value){return (value.length > 5)}}
}
非props特性:子组件未接收的参数，
给组件绑定原生事件
@click.native 事件修饰符原生的事件
非父子组件的传值(bus/总线)
两种方式:Vuex,发布订阅模式(总线机制)
Vue.prototype.bus = new Vue()
Vue中使用插槽、传Dom结构时用
<child><h1>Dell</h1></child>
<slot></slot>
具名插槽（插槽取名）
<chlid>
<div slot="header">header</div>
</chlid>
<slot name="header"></slot>
作用域插槽
<slot v-for="item in list" :item=item></slot>子组件插槽向父组件插槽传值
<chlid>
<template slot-scope="props">接收子组件插槽 props
<h1>{{props.item}}</h1>
</template>
</chlid>
动态组件 与 v-once指令
<component :is="type"></component>
v-once存入内存中
Vue的css动画原理：通过再某一时间段添加样式
<transition name='fade'></transition> //里面的内容有过度的动画效果
前缀默认是:.v-leave、v.fade-leave
显试状态：fade-enter/fade-enter-active、fade-enter-to、fade-enter-active/fade-enter-to
隐藏状态：fade-leave/fade-leave-active、fade-leave-to、fade-leave-active/fade-leave-to
使用acimate.css库:
@keyframes bunce{
0%{transform:scale(0);}
50%{transform:scale(0);}
100%{transform:scale(0);}
}
.fade-enter-active{
transform-origin:left center;不加的话：方大缩小可能会有问题
acimate:bunce 1s;
}
.fade-leave-active{
transform-origin:left center;不加的话：方大缩小可能会有问题
acimate:bunce 1s reverse;
}
使用自定义class名称：
.active{
transform-origin:left center;
animate:bunce 1s;
}
.leave{
transform-origin:left center;
animate:bunce 1s reverse;
}
enter-active-class="active"leave-active-class="leave"
引用animate.css:
<link rel="stylesheet" type="text/css" href="./animate.css">
enter-active-class="animated swing" leave-active-class="animated shake"
同时使用过度和动画
appear和appear-active-class="animated swing"第一次显示有动画
:duration="{enter:5000,leave:5000}"定义动画时长
type="transition" 以transition动画时长为准
Vue中JS动画与velocity.js
入场动画钩子:@before-enter"事件"1个参数el 执行前
@enter="事件" 当before执行完后，执行 2个参数el,done 执行时
@after-enter="事件"1个参数el 执行后
出场动画钩子：改为levae
setTimeout(funtion(){}，2000)
setTimeout(()=>{el.style.color = 'red'},2000)
Velocity(el,{opacity:1},{duration:1000,complete:done})
Vue中多个元素或组件的过度动画
不复用Dom: key="hello"
<transition mode="in-out、out-in"></transition>
通过动态组件<component :is="type"></component>
Vue中的列表过渡
<transition-group></transition-group>
Vue中的动画封装
通过组件、传参数、js动画钩子
动态过渡
环境准备
node.js
npm
npm install -g cnpm --registry=https://registry.npm.taobao.org 安装国内cnpm淘宝镜像
npm install --global vue-cli 安装脚手架
vue init webpack vuekai 创建项目
cd vuekai 进入到项目中：安装依赖、启动项目
cnpm install 安装项目所需所有依赖
npm run dev 运行，自动化的打包
config>index.js配置端口，如无法运行、查看端口是否被占用
目录结构
build 打包webpacke内容
...
webpack.base.conf.js基础配置
webpack.dev.conf.js开发环境配置
webpack.prod.conf.js线上环境配置
config 配置文件
index.js基础配置
dev.env.js开发环境配置
prod.env.js线上环境配置
node-modules 依赖包
src 源代码
assets 图片
components组件
router 路由
App.vue 根组件
main.js 入口文件
static 静态资源
.babelrc 语法解析器
.editorconfig 编辑器中的语法
.eslintignore 不受eslintrc.js监测的配置
.eslintrc.js 监测、代码的规范
.gitignore git不想上传的文件、在此配置
.postcssrc.js postcss配置项
index.html 首页模板
LICENSE 开源协议说明
package-lock.json 第三方文件的具体版本
package.json 第三方依赖、(配置依赖文件)
README.md 说明文件
单文件组件与Vue中的路由
App.vue 称为单文件组件
路由：根据网址的不同，返回不同的内容给用户
->App.vue-><router-view/>显示的是当前路由地址所对应的内容
index.html->main.js-
->router(index.js)->HellrWorld.vue
import Home from '@/pages/home/Home' @代表src目录
单页面（SPA） 和 多页面应用
单页优点:JS渲染
页面切换快
搜索引擎优化较差，首屏事件稍慢，SEO差
模板只能有一个跟标签：如一个<div></div>
<router-link to="/list">列表页</router-link>//页面跳转
<router-view/> //显示的是当前路由地址所对应的内容
项目代码初始 （去哪儿项目开发）
<meta minimum-scale=1.0,maximum-scale=1.0,er-scalable=no >
reset.css 重置页面样式表 入口中配置
border.css 1像素边框的“问题”
npm install fastclick --save 300毫秒点击“click”延迟
fastClick.attach()
图标icon
首页Header区域开发
npm install stylus --save
npm install stylus-loader --save
页面组件化
<style lang="stylus" scoped></style> scoped只对当前组件有效
webpack.base.conf.js 中配置简化引用如:@代表src
首页轮播图
创建分支：index-swiper
Vue-Awesome-Swiper 轮播插件
main中引入
Swiper.vue/HomeSwiper
Home引用
解决：加载完后才把轮播撑开：最外围加div
轮播分页：通过样式穿透、>>>
轮播图片：通过data中定义为数组循环显示出来
循环轮播：通过data中loop:true
提交分支
首页图标区域页面布局
创建分支：index-icons
首页推荐组件开发
创建分支：
--------------------------------------------------------------------------
Node:
初始Node：
1.诞生
2009年
API为中心
服务器和浏览器的实时通信和消息推送，
支持io异步操作
具有模块功能，以便扩展
3.主要的应用领域
Restful API
实时通信：如消息推送等。
高并发
I/O阻塞
4.社区与生态圈
以NPM为中心
5.知名度较高的Node.js开源项目
express：web服务器框架
PM2： Node.js本身是单进程，PM2可以实现管理多进程
jade： 引擎，除了支持node.js还支持其他的语言
socket.is： 实时通信框架
mocha：是node.js测试框架
Koa2!!! web框架、express原班人马打造
Eslint 代码检查工具
Webpack
6.IO.js
iO.js和node.js全面兼容
node.js是服务器端的一个平台，使用Javascript语言
Node与Javascript的关系:
1.JavaScript的诞生
1995
2.ECMAScript与DOM/BOM
JavaScript=ECMAScript语法和基本对象,+DOM文档对象模型+BOM浏览器对象模型
3.Gmail与GoogleV8
Gmail：邮箱,2004年
Google Maps：
4.新浪潮中的前端框架
JQuery/YUI/ExtJS：主要关于与用户操作，而程序开发关心数据。
结构化前端框架：AngualerJS、Backbone.js、Ember.js
Rhino引擎：JavaScript的测试库
5.Fibjs
同样和node.js一样是服务器端的一个平台，使用Javascript语言
基于GoogleV8和非阻塞，但不是像node.js用回调解决的阻塞，而是V8实现的。
6.全栈语言:Javascript
前端：AngualerJS,
后端：Node.js,
移动端：React Native
Node的特点：
1.部署简单方便
应对web的方方面面加上npm
注重约定
容易扩展，只需要在自己的说明文件中加上扩展版本
2.事件驱动
JavaScript是单线程的天生就是事件驱动
3.异步编程
回调函数,一个事件只能绑定一个回调函数
事件监听,
发布/订阅
4.高效与性能
io优化
5.单线程和多线程
Google V8是单线程，
利用CPU资源有两种方法：使用子进程：Node.js的child_process模块
多进程：同时启动多个node.js进程，
会产生资源占用和进程通讯的问题，
资源占用可以用PMR管理工具实现，消息队列和公用缓存方式解决。
6.Node的缺点
大量用匿名函数，异常不易阅读
try/catch限与同步代码，使得异常捕获较为复杂
同步代码使用try/catch,异步代码使用错误标志参数处理
单线程：可靠性
不适合CPU密集型的场景
回调的代码习惯影响阅读
Node.js的搭建环境：
JavaScript最佳全栈组合MEAN Stack:
mongoDB 几乎不需要配置，下载启动就可以，
express nodejs中的一个模块，web服务器的核心
AngualerJS 可以像后端一样编写前端代码
node.js
GoogleV8:用于编译执行JavaScript代码，由C++编写
文件系统: 同步或异步实现
网络功能：后端服务器存在的目的，通过网络提供服务
二进制数据：TCP与读取文件都是通过二进制实现
数据流: 流模块实现
加密和解密:通过 * 模块实现
Linux下安装好Node后，node test.js运行
Web应用的基本组件：
GET /yorkie HTTP/1.1
Host:github.com
Connection：keep-alive
Cache-Control: max-age=0
Accept:text/html,application/xhtml
User-Agent:My iPhone
Accept-encoding:gzip,deflate,sdch
expressjs的安装、配置、路由：
npm install express --save 安装expressjs框架
ls node_modules/ 查看是否安装成功
基础
初始化配置
路由
返回相应
CommonJs
CommonJS 规范包括了模块（modules）、包（packages）、系统（system）、二进制（binary）、控制台（console）、编码（encodings）、文件系统（filesystems）、套接字（sockets）、单元测试（unit testing）等部分。
--------------------------------------------------------
1.命令行窗口(小黑屏)、CMD窗口、终端、shell
- 开始菜单 --> 运行 --> CMD --> 回车
- 常用的指令：
dir 列出当前目录下的所有文件
cd 目录名 进入到指定的目录
md 目录名 创建一个文件夹
rd 目录名 删除一个文件夹
- 目录
. 表示当前目录
.. 表示上一级目录
- 环境变量（windows系统中变量）
path
C:workjdkjdk1.7.0_75/bin;
%CATALINA_HOME%/bin;
C:worksoft oolsAppServApache24in;
C:worksoft oolsAppServphp5;
C:UserslilichaoAppDataLocalProgramsFiddler;
C:workenvironmentEgretEgret Wing 3in;
C:UserslilichaoAppDataRoaming
pm;
C:Program FilesMongoDBServer3.2in;
C:UserslilichaoDesktophello
- 当我们在命令行窗口打开一个文件，或调用一个程序时，
系统会首先在当前目录下寻找文件程序，如果找到了则直接打开
如果没有找到则会依次到环境变量path的路径中寻找，直到找到为止
如果没找到则报错
- 所以我们可以将一些经常需要访问的程序和文件的路径添加到path中，
这样我们就可以在任意位置来访问这些文件和程序了
I/O (Input/Output)
- I/O操作指的是对磁盘的读写操作
Node
- Node是对ES标准一个实现，Node也是一个JS引擎
- 通过Node可以使js代码在服务器端执行
- Node仅仅对ES标准进行了实现，所以在Node中不包含DOM 和 BOM
- Node中可以使用所有的内建对象
String Number Boolean Math Date RegExp Function Object Array
而BOM和DOM都不能使用
但是可以使用 console 也可以使用定时器（setTimeout() setInterval()）
- Node可以在后台来编写服务器
Node编写服务器都是单线程的服务器
- 进程
- 进程就是一个一个的工作计划（工厂中的车间）
- 线程
- 线程是计算机最小的运算单位（工厂中的工人）
线程是干活的
- 传统的服务器都是多线程的
- 每进来一个请求，就创建一个线程去处理请求
- Node的服务器单线程的
- Node处理请求时是单线程，但是在后台拥有一个I/O线程池
----
node.js
- node是一款对ES标准实现的JS引擎
- 通过node可以使js在服务器中运行
- node就是一款使用js编写的web服务器
- node底层是使用c++的编写的
- node的中js引擎使用的chrome的v8引擎
- node的特点：
1.非阻塞、异步的I/O
2.事件和回调函数
3.单线程（主线程单线程，后台I/O线程池）
4.跨平台
- 模块化
- ES5中没有原生支持模块化，我们只能通过script标签引入js文件来实现模块化
- 在node中为了对模块管理，引入了CommonJS规范
- 模块的引用
- 使用 require()函数来引入一个模块
- 例子：
var 变量 = require("模块的标识");
- 模块的定义
- 在node中一个js文件就是一个模块
- 默认情况下在js文件中编写的内容，都是运行在一个独立的函数中，
外部的模块无法访问
- 导出变量和函数
- 使用 exports
- 例子：
exports.属性 = 属性值;
exports.方法 = 函数;
- 使用module.exports
- 例子：
module.exports.属性 = 属性值;
module.exports.方法 = 函数;
module.exports = {};
- 模块的标识
- 模块的标识就是模块的名字或路径
我们node通过模块的标识来寻找模块的
对于核心模块（npm中下载的模块），直接使用模块的名字对其进行引入
var fs = require("fs");
var express = require("express");
对于自定义的文件模块，需要通过文件的路径来对模块进行引入
路径可以是绝对路径，如果是相对路径必须以./或 ../开头
var router = require("./router");
- npm的命令
- npm -v 查看npm的版本
- npm version 查看所有模块的版本
- npm search 包名 搜索包
- npm install / i 包名 安装包
- npm remove / r 包名 删除包
- npm install 包名 --save 安装包并添加到依赖中 *****
- npm install 下载当前项目所依赖的包
- npm install 包名 -g 全局安装包（全局安装的包一般都是一些工具）
----
node
- 包（package）
- 将多个模块组合为一个完整的功能，就是一个包
- 包结构
bin
- 二进制的可执行文件，一般都是一些工具包中才有
lib
- js文件
doc
- 文档
test
- 测试代码
package.json
- 包的描述文件
- package.json
- 它是一个json格式的文件，在它里面保存了包各种相关的信息
name 包名
version 版本
dependencies 依赖
main 包的主要的文件
bin 可执行文件
- npm（Node Package Manager node的包管理器）
- 通过npm可以对node中的包进行上传、下载、搜索等操作
- npm会在安装完node以后，自动安装
- npm的常用指令
npm -v 查看npm的版本
npm version 查看所有模块的版本
npm init 初始化项目（创建package.json）
npm i/install 包名 安装指定的包
npm i/install 包名 --save 安装指定的包并添加依赖
npm i/install 包名 -g 全局安装（一般都是一些工具）
npm i/install 安装当前项目所依赖的包
npm s/search 包名 搜索包
npm r/remove 包名 删除一个包
文件系统（File System）
- Buffer（缓冲区）
- Buffer和数组的结构的非常类似，Buffer是用来存储二进制数据的
- Buffer的方法
- Buffer.from(字符串)
- 将一个字符串中内容保存到一个buffer中
- buf.toString()
- 将buffer转换为一个字符串
- Buffer.alloc(size)
- 创建一个指定大小的buffer对象
- Buffer.allocUnsafe(size)
- 创建一个指定大小的buffer对象，可以包含敏感数据
- fs模块
- 在Node通过fs模块来对系统中的文件进行操作，fs模块是node中已经继承好了，不需要在使用npm下载，直接引入即可
- 引入fs
var fs = require("fs");
- fs模块中的大部分操作都提供了两种方法，同步方法和异步方法
同步方法带sync
异步方法没有sync，都需要回调函数
- 写入文件
1.同步写入
2.异步写入
3.简单写入
4.流式写入
- 读取文件
1.同步读取
2.异步读取
3.简单读取
4.流式读取
- 方法
- 打开文件
fs.open(path, flags[, mode], callback)
fs.openSync(path, flags[, mode])
- 读写文件
fs.write(fd, string[, position[, encoding]], callback)
fs.writeSync(fd, string[, position[, encoding]])
fs.read(fd, buffer, offset, length, position, callback)
fs.readSync(fd, buffer, offset, length, position)
- 关闭文件
fs.close(fd,callback)
fs.closeSync(fd);
- 简单文件读取和写入
fs.writeFile(file, data[, options], callback)
fs.writeFileSync(file, data[, options])
fs.readFile(path[, options], callback)
fs.readFileSync(path[, options])
- 流式文件读取和写入
- 流式读取和写入适用于一些比较大的文件
fs.createWriteStream(path[, options])
fs.createReadStream(path[, options])
单线程
请求 //瓶颈
客户端 服务器 IO 数据库
响应
hello.js文件，第一个实例
var http = require("http");
http.createServer(function(request,response){//创建服务器
response.writeHead(200,{'Content-Type':'text/plain'});
response.end('Hello World');
}).listen(8888);//监听端口
console.log('Server running at http://127.0.0.1:8888/');
------
hello.js
console.log("hello node")
//外部暴露属性、变量或方法,exports外部才能看见
//module.exports == exports是一样的
var x = 1;
exports.x = "wo shi x"
console.log(x)
exports.add = function f(a,b) {
return a+b
}
hello1.js
/*模块化，无模块化不好复用*/
//在node中，通过require()函数引入外部的模块，路径必须以.或..开头
//模块分为：核心模块和文件模块
var md = require("./hello.js")//文件模块
var fs = require("fs");//核心模块
var math = require("math");
console.log(md)
console.log(md.add(1,3))
console.log(fs)
console.log(math.add(1,5))
hello2.js
//node中，全局对象global,他对作用网页window类似
var a =10
console.log(a)
//node在模块中执行的代码都是在函数中的(5参数)如下：
/*
console.log(arguments.callee + "")
function (exports, require, module, __filename, __dirname) { //node中，全局对象global,他对作用网页window类似
var a =10
console.log(arguments.callee + "")
}*/
console.log(module.exports == exports)
console.log(__filename)//当前模块路径
console.log(__dirname)//当前模块文件夹路径
hello3.js
/*
module.exports.name = '孙悟空'
module.exports.age = 22
module.exports.address = function () {
console.log('我是猪八戒')
}*/
module.exports = {
name:'孙悟空',
age:22,
address:function () {
console.log('八戒')
}
}
hello4.js
var hello3 = require("./hello3");
console.log(hello3.name)
console.log(hello3.age)
console.log(hello3.address())
{
"name": "node1",
"version": "0.0.1",
"dependencies": {
"math": "^0.0.3",
"vue-cli": "^2.9.6",
"express": "^4.16.3"
}
}
//包结构
// package.json 描述文件 必须的
//dependencies //依赖
//description //描述
//devDependencies //开发依赖
//homepage主页
//license协议
//main主文件
//maintainers主要构件者
//name包名
//repository仓库
//version命令版本
//就像包的简历
// bin 可执行 可有可无
// lib js文件
// doc 文档
// test 测试
//模块放入文件夹中、要有package.json
//json中不能写注释
//NPM包管理（Node Package Manager、发布、安装、自动检查所对应依赖。
//安装npm时、安装位置文件夹不能大写
//package.json包中添加依赖，是因为我们上传github时不会上传依赖、
也是方便查看我们项目中的相关依赖
//npm install -g cnpm --registry=https://registry.npm.taobao.org
//!操作npm时，进入项目目录中，在idea、Termainal命令行中操作！！！
/*
* Buffer缓存区
* 跟数组相似，数组中不能存二进制，而buffer专门存的是二进制数据
* 使用buffer不需要引入模块，内置可直接使用
* buffer中构造函数不推荐用
* buffer中的一个元素，占用内存的一个字节
* buffer的大小一旦确定，则不能修改，buffer是对底层内存的直接操作
* */
var str = "Hello World";
var buf = Buffer.from(str)
console.log(buf)
var buf2 = Buffer.alloc(10);//创建一个10个字节的buffer
buf2[0] = 88;//索引来操作元素
buf2[1] = 255;
buf2[2] = 0xaa;
buf2[3] = 556
console.log(buf2[2].toString(12))//tostring为十六进制
var buf3 = Buffer.allocUnsafe(10)//只分配空间，不清数据、与alloc不同
console.log(buf3)
for (var i=0;i<buf2.length;i++){
console.log(buf2[i])
}
/*同步文件操作
* r：只读的、w：可写的
* 打开文件、读写、关闭文件
* */
var fs = require('fs');
var fd = fs.openSync("hello.txt","w")//打开
console.log(fs)
console.log(fd)//显示是否打开了
fs.writeSync(fd,"天气好啊~~")//写入
fs.closeSync(fd)
/*异步文件操作
* r：只读的、w：可写的
* 打开文件、读写、关闭文件
* */
var fs = require('fs');
fs.open("hello2.txt","w",function (err,fd) {//两个参数err、fdr
if (!err){//是否出错
console.log(fd)
fs.write(fd,"文件异步操作!",function (err) {
if(!err){
console.log("写入成功")
}
fs.close(fd,function (err) {
if (!err){
console.log("文件已关闭")
}
})
})
} else{
console.log(err)
}
console.log(arguments)
})//打开
console.log("同步：先执行我")
/*
* 简单文件写入：也分异步和同步
* fs.writeFile(file,data[,options],callback)
* fs.writeFileSync(file,data[,options])
* file 要操作的文件路径
* data 要写入的数据
* options 对写入的进行一些设置，可选的
* callback 写入完成后的回调函数
*
* flog:r读、w写、a追加
* */
var fs = require("fs");
fs.writeFile("hello3.txt","我是写入的数据!",{flog:"a"},function (err) {
if (!err){
console.log("写入成功")
}
})
//对桌面文件：写操作，需路径
/*
fs.writeFile("C:\Users\AAA\Desktop\hello3.txt","我是写入的数据!",{flog:"a"},function (err) {
if (!err){
console.log("写入成功")
}
})*/
/*
* 流式文件写入：同步、异步、简单文件的写入都不适合大文件的写入
*
*
* */
var fs = require("fs");
//创建一个可写流
var ws=fs.createWriteStream("hello4.txt");
//可以通过监听流的open和close事件监听打开或关闭
ws.once("open",function () {
console.log("流打开了")
})
ws.once("close",function () {
console.log("流关闭了")
})
//通过ws向文件中输入内容
ws.write("通过可写流写文件");
ws.write("通过可写流写文件2");
ws.end();
/*普通文件读取*/
var fs = require("fs");
fs.readFile("hello4.txt",function (err,data) {
if (!err){
fs.writeFile("hello3.txt",data,function (err) {
if (!err){
console.log("写入成功")
}
});
}
})
/*
* 流式文件读取
* */
/*var fs = require("fs");
var rs = fs.createReadStream("hello4.txt");//创建一个可读流
var ws = fs.createWriteStream("hello3.txt");
rs.once("open",function () {//监听流
console.log("可读流打开了")
})
rs.once("close",function () {//监听流
console.log("可读流关闭了")
ws.end();
})
ws.once("open",function () {//监听流
console.log("可写流打开了")
})
ws.once("close",function () {//监听流
console.log("可写流关闭了")
})
//读取一个可读流中的数据，必须为可读流绑定一个data事件,data绑定完毕，他会自动开始读取数据
rs.on("data",function (data) {
ws.write(data);
})*/
var fs = require("fs");
var rs = fs.createReadStream("hello4.txt");//创建一个可读流
var ws = fs.createWriteStream("hello3.txt");
//pipe()可以将可读流中的内容，直接输出到可写流中
rs.pipe(ws);
fs.exists(path,callback) //验证路径是否存在
fs.stat(path,callback) //获取文件信息
fs.unlink(path,callback) //删除文件
fs.readdir(path[,options],callback)//列出文件
fs.truncate(path,len,callback)//截断文件
fs.mkdir(path[,mode],callback)//创建目录
fs.rmdir(path,callback)//删除目录
fs.rename(oldPath,newPath,callback)//重命名文件和目录
fs.watchFile(filname[,options],listener)//监视文件更改写入
dev-tools
Vue Webpack Node npm cnpm的关系理解： 1.实际上Vue本身是不依赖Node的， 2.而Vue-cli的脚手架是依赖于Webpack的，所以间接的也需要Node的支持, 3.Webpack基于Node的运行环境,Webpack在执行打包压缩的时候依赖Node, 没有Node就不能使用Webpack,并且支持ES6 4.npm只是nodejs的一个模块,运行在Node上，全称（Node Package Manager） 5.cnpm是淘宝的、只为下载快点 6.node是一个运行在服务器端的js环境 Vue的特点 MVVM模式(Model-View-ViewModel）:ViewModel是Vue.js的核心，它是一个Vue实例。 DOM Listeners DOM监听 Data Bindings 数据绑定 编码简洁，体积小，运行效率高，适合移动/PC开发 本身只关注UI,可以轻松引入Vue插件和第三方库 关注数据，数据改变Dom改变r 借鉴Angular的模板和数据绑定技术 借鉴react的组件化和虚拟Dom技术 Vue扩展插件 vue-cli: 脚手架 vue-resource(axios)ajax请求 vue-router: 路由 vuex: 状态管理 vue-lazyload: 图片懒加载 vue-scroller: 页面滑动相关 mint-ui: 移动端UI库 element-ui/iviewPC端UI库 大括号(插值)表达式:{{}} Vue常用指令如下: v-if、 v-else、 v-for、 v-show、 v-on、 可以简写为 @ 绑定事件(监听事件) v-bind 可以简写为 : 给子组件传入绑定值(绑定参数) v-model 双向数据绑定 修饰符如下： .lazy, 如：v-model.lazy="wang" 监听change操作 .trim, 如：v-model.trim="wang" 去掉前后空白 .number如：v-model.number="wang"确保获得的是String类型，v-model默认数据类型String的 简单的toduList 组件： Vue.component("TodoItem",{//全局组件 template:"" }) $代表实例 vm.$destroy() 销毁实例 vm.$data.message = "bye bye" Vue实例的生命周期钩子 生命周期函数是 vue实例在某一个时间点会自动执行的函数 beforeCreate created 创建时 beforeMount mounted 渲染 beforDestroy destroy 销毁 beforUpdate update 修改数据时渲染 模板语法 v-text 和{{}}类似 v-html 会有如<h3></h3>渲染 {{message +'a '}} 计算属性，方法和侦听器 computed:{ 计算属性、计算属性中内置缓存 fullName:function () { return this.Name+""+this.age } } watch:{ 侦听器 Name:function(){ this.fullName = this.Name+""+this.age } age:function(){ this.fullName = this.Name+""+this.age } } 计算属性的set和get computed:{ fullname:{ get:function () { return this.Name +""+age }, set:function (value) { var arr = value.splice(" "); this.Name = arr[0]; this.age = arr[1]; } } }, Vue样式绑定 让数据改变，样式改变 1.class的对象绑定 2.class的数方式 3. Vue条件渲染 v-if v-show v-else v-else-if <input key="">//唯一元素、不会复用了 Vue列表渲染 对数组操作的方法: push 添加 pop 删除最后一项 shift 删除第一项 vm.list.splice(1,1,{id:"333",text:"Dell1"}) unshift 添加内容第一项 splice 截取 sort 排序 reverse 取反 template模板：包裹一些元素，但并不会真正渲染到页面上 对象循环渲染倒页面 对象动态加值：通过引用方式如 ,有两种方式 vm.userInfo = {{},{},} Vue.set(vm.userInfo,"address","beijing")//和set方法都可以！！！ Vue set方法的用法 Vue.set(vm.userInfo,"address","beijing") //对象动态加值 vm.$set(vm.userInfo,"address","beijing") Vue.set(vm.arrayInfo,1,5)//数组的set用法,引用，调用方法、数组的三种方式 组件的细节点 <tr is="row"></tr> //row组件名 子组件中的data必须是函数、只能在Vue实例中是对象如： data:function(){ return{ content:'this is content' } } ref引用 //特殊情况需操作Dom用,获取Dom节点 this.$refs.hello。innerHTML this.$refs.one.unmber 组件上写的话是：子组件引用 父子组件的相互传值 声明子组件时，记得注册到父组件中（相当于关联一下） 因涉及到Vue中的（单向数据流概念），子组件接收父组件的数据是不能直接修改的，而是通过间接的方式修改 父组件给子组件传值通过属性（参数），而子组件给父组件传值是通过事件监听。 如： var zujian ={ props:['content','index'], template:"<li @click='del'>{{content}}---{{index}}</li>", methods:{ del:function () { this.$emit('del',this.index)/*向上触发一个名为del的事件、并所需删除id传过去*/ } } } 组件参数效验与非props特性 子组件对父组件传来参数的约束称为参数效验 props:{ content:{Number,String,type:string,required;false,default:'默认值',validator:function(value){return (value.length > 5)}} } 非props特性:子组件未接收的参数， 给组件绑定原生事件 @click.native 事件修饰符原生的事件 非父子组件的传值(bus/总线) 两种方式:Vuex,发布订阅模式(总线机制) Vue.prototype.bus = new Vue() Vue中使用插槽、传Dom结构时用 <child><h1>Dell</h1></child> <slot></slot> 具名插槽（插槽取名） <chlid> <div slot="header">header</div> </chlid> <slot name="header"></slot> 作用域插槽 <slot v-for="item in list" :item=item></slot>子组件插槽向父组件插槽传值 <chlid> <template slot-scope="props">接收子组件插槽 props <h1>{{props.item}}</h1> </template> </chlid> 动态组件 与 v-once指令 <component :is="type"></component> v-once存入内存中 Vue的css动画原理：通过再某一时间段添加样式 <transition name='fade'></transition> //里面的内容有过度的动画效果 前缀默认是:.v-leave、v.fade-leave 显试状态：fade-enter/fade-enter-active、fade-enter-to、fade-enter-active/fade-enter-to 隐藏状态：fade-leave/fade-leave-active、fade-leave-to、fade-leave-active/fade-leave-to 使用acimate.css库: @keyframes bunce{ 0%{transform:scale(0);} 50%{transform:scale(0);} 100%{transform:scale(0);} } .fade-enter-active{ transform-origin:left center;不加的话：方大缩小可能会有问题 acimate:bunce 1s; } .fade-leave-active{ transform-origin:left center;不加的话：方大缩小可能会有问题 acimate:bunce 1s reverse; } 使用自定义class名称： .active{ transform-origin:left center; animate:bunce 1s; } .leave{ transform-origin:left center; animate:bunce 1s reverse; } enter-active-class="active"leave-active-class="leave" 引用animate.css: <link rel="stylesheet" type="text/css" href="./animate.css"> enter-active-class="animated swing" leave-active-class="animated shake" 同时使用过度和动画 appear和appear-active-class="animated swing"第一次显示有动画 :duration="{enter:5000,leave:5000}"定义动画时长 type="transition" 以transition动画时长为准 Vue中JS动画与velocity.js 入场动画钩子:@before-enter"事件"1个参数el 执行前 @enter="事件" 当before执行完后，执行 2个参数el,done 执行时 @after-enter="事件"1个参数el 执行后 出场动画钩子：改为levae setTimeout(funtion(){}，2000) setTimeout(()=>{el.style.color = 'red'},2000) Velocity(el,{opacity:1},{duration:1000,complete:done}) Vue中多个元素或组件的过度动画 不复用Dom: key="hello" <transition mode="in-out、out-in"></transition> 通过动态组件<component :is="type"></component> Vue中的列表过渡 <transition-group></transition-group> Vue中的动画封装 通过组件、传参数、js动画钩子 动态过渡 环境准备 node.js npm npm install -g cnpm --registry=https://registry.npm.taobao.org 安装国内cnpm淘宝镜像 npm install --global vue-cli 安装脚手架 vue init webpack vuekai 创建项目 cd vuekai 进入到项目中：安装依赖、启动项目 cnpm install 安装项目所需所有依赖 npm run dev 运行，自动化的打包 config>index.js配置端口，如无法运行、查看端口是否被占用 目录结构 build 打包webpacke内容 ... webpack.base.conf.js基础配置 webpack.dev.conf.js开发环境配置 webpack.prod.conf.js线上环境配置 config 配置文件 index.js基础配置 dev.env.js开发环境配置 prod.env.js线上环境配置 node-modules 依赖包 src 源代码 assets 图片 components组件 router 路由 App.vue 根组件 main.js 入口文件 static 静态资源 .babelrc 语法解析器 .editorconfig 编辑器中的语法 .eslintignore 不受eslintrc.js监测的配置 .eslintrc.js 监测、代码的规范 .gitignore git不想上传的文件、在此配置 .postcssrc.js postcss配置项 index.html 首页模板 LICENSE 开源协议说明 package-lock.json 第三方文件的具体版本 package.json 第三方依赖、(配置依赖文件) README.md 说明文件 单文件组件与Vue中的路由 App.vue 称为单文件组件 路由：根据网址的不同，返回不同的内容给用户 ->App.vue-><router-view/>显示的是当前路由地址所对应的内容 index.html->main.js- ->router(index.js)->HellrWorld.vue import Home from '@/pages/home/Home' @代表src目录 单页面（SPA） 和 多页面应用 单页优点:JS渲染 页面切换快 搜索引擎优化较差，首屏事件稍慢，SEO差 模板只能有一个跟标签：如一个<div></div> <router-link to="/list">列表页</router-link>//页面跳转 <router-view/> //显示的是当前路由地址所对应的内容 项目代码初始 （去哪儿项目开发） <meta minimum-scale=1.0,maximum-scale=1.0,er-scalable=no > reset.css 重置页面样式表 入口中配置 border.css 1像素边框的“问题” npm install fastclick --save 300毫秒点击“click”延迟 fastClick.attach() 图标icon 首页Header区域开发 npm install stylus --save npm install stylus-loader --save 页面组件化 <style lang="stylus" scoped></style> scoped只对当前组件有效 webpack.base.conf.js 中配置简化引用如:@代表src 首页轮播图 创建分支：index-swiper Vue-Awesome-Swiper 轮播插件 main中引入 Swiper.vue/HomeSwiper Home引用 解决：加载完后才把轮播撑开：最外围加div 轮播分页：通过样式穿透、>>> 轮播图片：通过data中定义为数组循环显示出来 循环轮播：通过data中loop:true 提交分支 首页图标区域页面布局 创建分支：index-icons 首页推荐组件开发 创建分支： -------------------------------------------------------------------------- Node: 初始Node： 1.诞生 2009年 API为中心 服务器和浏览器的实时通信和消息推送， 支持io异步操作 具有模块功能，以便扩展 3.主要的应用领域 Restful API 实时通信：如消息推送等。 高并发 I/O阻塞 4.社区与生态圈 以NPM为中心 5.知名度较高的Node.js开源项目 express：web服务器框架 PM2： Node.js本身是单进程，PM2可以实现管理多进程 jade： 引擎，除了支持node.js还支持其他的语言 socket.is： 实时通信框架 mocha：是node.js测试框架 Koa2!!! web框架、express原班人马打造 Eslint 代码检查工具 Webpack 6.IO.js iO.js和node.js全面兼容 node.js是服务器端的一个平台，使用Javascript语言 Node与Javascript的关系: 1.JavaScript的诞生 1995 2.ECMAScript与DOM/BOM JavaScript=ECMAScript语法和基本对象,+DOM文档对象模型+BOM浏览器对象模型 3.Gmail与GoogleV8 Gmail：邮箱,2004年 Google Maps： 4.新浪潮中的前端框架 JQuery/YUI/ExtJS：主要关于与用户操作，而程序开发关心数据。 结构化前端框架：AngualerJS、Backbone.js、Ember.js Rhino引擎：JavaScript的测试库 5.Fibjs 同样和node.js一样是服务器端的一个平台，使用Javascript语言 基于GoogleV8和非阻塞，但不是像node.js用回调解决的阻塞，而是V8实现的。 6.全栈语言:Javascript 前端：AngualerJS, 后端：Node.js, 移动端：React Native Node的特点： 1.部署简单方便 应对web的方方面面加上npm 注重约定 容易扩展，只需要在自己的说明文件中加上扩展版本 2.事件驱动 JavaScript是单线程的天生就是事件驱动 3.异步编程 回调函数,一个事件只能绑定一个回调函数 事件监听, 发布/订阅 4.高效与性能 io优化 5.单线程和多线程 Google V8是单线程， 利用CPU资源有两种方法：使用子进程：Node.js的child_process模块 多进程：同时启动多个node.js进程， 会产生资源占用和进程通讯的问题， 资源占用可以用PMR管理工具实现，消息队列和公用缓存方式解决。 6.Node的缺点 大量用匿名函数，异常不易阅读 try/catch限与同步代码，使得异常捕获较为复杂 同步代码使用try/catch,异步代码使用错误标志参数处理 单线程：可靠性 不适合CPU密集型的场景 回调的代码习惯影响阅读 Node.js的搭建环境： JavaScript最佳全栈组合MEAN Stack: mongoDB 几乎不需要配置，下载启动就可以， express nodejs中的一个模块，web服务器的核心 AngualerJS 可以像后端一样编写前端代码 node.js GoogleV8:用于编译执行JavaScript代码，由C++编写 文件系统: 同步或异步实现 网络功能：后端服务器存在的目的，通过网络提供服务 二进制数据：TCP与读取文件都是通过二进制实现 数据流: 流模块实现 加密和解密:通过 * 模块实现 Linux下安装好Node后，node test.js运行 Web应用的基本组件： GET /yorkie HTTP/1.1 Host:github.com Connection：keep-alive Cache-Control: max-age=0 Accept:text/html,application/xhtml User-Agent:My iPhone Accept-encoding:gzip,deflate,sdch expressjs的安装、配置、路由： npm install express --save 安装expressjs框架 ls node_modules/ 查看是否安装成功 基础 初始化配置 路由 返回相应 CommonJs CommonJS 规范包括了模块（modules）、包（packages）、系统（system）、二进制（binary）、控制台（console）、编码（encodings）、文件系统（filesystems）、套接字（sockets）、单元测试（unit testing）等部分。 -------------------------------------------------------- 1.命令行窗口(小黑屏)、CMD窗口、终端、shell - 开始菜单 --> 运行 --> CMD --> 回车 - 常用的指令： dir 列出当前目录下的所有文件 cd 目录名 进入到指定的目录 md 目录名 创建一个文件夹 rd 目录名 删除一个文件夹 - 目录 . 表示当前目录 .. 表示上一级目录 - 环境变量（windows系统中变量） path C:workjdkjdk1.7.0_75/bin; %CATALINA_HOME%/bin; C:worksoft oolsAppServApache24in; C:worksoft oolsAppServphp5; C:UserslilichaoAppDataLocalProgramsFiddler; C:workenvironmentEgretEgret Wing 3in; C:UserslilichaoAppDataRoaming pm; C:Program FilesMongoDBServer3.2in; C:UserslilichaoDesktophello - 当我们在命令行窗口打开一个文件，或调用一个程序时， 系统会首先在当前目录下寻找文件程序，如果找到了则直接打开 如果没有找到则会依次到环境变量path的路径中寻找，直到找到为止 如果没找到则报错 - 所以我们可以将一些经常需要访问的程序和文件的路径添加到path中， 这样我们就可以在任意位置来访问这些文件和程序了 I/O (Input/Output) - I/O操作指的是对磁盘的读写操作 Node - Node是对ES标准一个实现，Node也是一个JS引擎 - 通过Node可以使js代码在服务器端执行 - Node仅仅对ES标准进行了实现，所以在Node中不包含DOM 和 BOM - Node中可以使用所有的内建对象 String Number Boolean Math Date RegExp Function Object Array 而BOM和DOM都不能使用 但是可以使用 console 也可以使用定时器（setTimeout() setInterval()） - Node可以在后台来编写服务器 Node编写服务器都是单线程的服务器 - 进程 - 进程就是一个一个的工作计划（工厂中的车间） - 线程 - 线程是计算机最小的运算单位（工厂中的工人） 线程是干活的 - 传统的服务器都是多线程的 - 每进来一个请求，就创建一个线程去处理请求 - Node的服务器单线程的 - Node处理请求时是单线程，但是在后台拥有一个I/O线程池 ---- node.js - node是一款对ES标准实现的JS引擎 - 通过node可以使js在服务器中运行 - node就是一款使用js编写的web服务器 - node底层是使用c++的编写的 - node的中js引擎使用的chrome的v8引擎 - node的特点： 1.非阻塞、异步的I/O 2.事件和回调函数 3.单线程（主线程单线程，后台I/O线程池） 4.跨平台 - 模块化 - ES5中没有原生支持模块化，我们只能通过script标签引入js文件来实现模块化 - 在node中为了对模块管理，引入了CommonJS规范 - 模块的引用 - 使用 require()函数来引入一个模块 - 例子： var 变量 = require("模块的标识"); - 模块的定义 - 在node中一个js文件就是一个模块 - 默认情况下在js文件中编写的内容，都是运行在一个独立的函数中， 外部的模块无法访问 - 导出变量和函数 - 使用 exports - 例子： exports.属性 = 属性值; exports.方法 = 函数; - 使用module.exports - 例子： module.exports.属性 = 属性值; module.exports.方法 = 函数; module.exports = {}; - 模块的标识 - 模块的标识就是模块的名字或路径 我们node通过模块的标识来寻找模块的 对于核心模块（npm中下载的模块），直接使用模块的名字对其进行引入 var fs = require("fs"); var express = require("express"); 对于自定义的文件模块，需要通过文件的路径来对模块进行引入 路径可以是绝对路径，如果是相对路径必须以./或 ../开头 var router = require("./router"); - npm的命令 - npm -v 查看npm的版本 - npm version 查看所有模块的版本 - npm search 包名 搜索包 - npm install / i 包名 安装包 - npm remove / r 包名 删除包 - npm install 包名 --save 安装包并添加到依赖中 ***** - npm install 下载当前项目所依赖的包 - npm install 包名 -g 全局安装包（全局安装的包一般都是一些工具） ---- node - 包（package） - 将多个模块组合为一个完整的功能，就是一个包 - 包结构 bin - 二进制的可执行文件，一般都是一些工具包中才有 lib - js文件 doc - 文档 test - 测试代码 package.json - 包的描述文件 - package.json - 它是一个json格式的文件，在它里面保存了包各种相关的信息 name 包名 version 版本 dependencies 依赖 main 包的主要的文件 bin 可执行文件 - npm（Node Package Manager node的包管理器） - 通过npm可以对node中的包进行上传、下载、搜索等操作 - npm会在安装完node以后，自动安装 - npm的常用指令 npm -v 查看npm的版本 npm version 查看所有模块的版本 npm init 初始化项目（创建package.json） npm i/install 包名 安装指定的包 npm i/install 包名 --save 安装指定的包并添加依赖 npm i/install 包名 -g 全局安装（一般都是一些工具） npm i/install 安装当前项目所依赖的包 npm s/search 包名 搜索包 npm r/remove 包名 删除一个包 文件系统（File System） - Buffer（缓冲区） - Buffer和数组的结构的非常类似，Buffer是用来存储二进制数据的 - Buffer的方法 - Buffer.from(字符串) - 将一个字符串中内容保存到一个buffer中 - buf.toString() - 将buffer转换为一个字符串 - Buffer.alloc(size) - 创建一个指定大小的buffer对象 - Buffer.allocUnsafe(size) - 创建一个指定大小的buffer对象，可以包含敏感数据 - fs模块 - 在Node通过fs模块来对系统中的文件进行操作，fs模块是node中已经继承好了，不需要在使用npm下载，直接引入即可 - 引入fs var fs = require("fs"); - fs模块中的大部分操作都提供了两种方法，同步方法和异步方法 同步方法带sync 异步方法没有sync，都需要回调函数 - 写入文件 1.同步写入 2.异步写入 3.简单写入 4.流式写入 - 读取文件 1.同步读取 2.异步读取 3.简单读取 4.流式读取 - 方法 - 打开文件 fs.open(path, flags[, mode], callback) fs.openSync(path, flags[, mode]) - 读写文件 fs.write(fd, string[, position[, encoding]], callback) fs.writeSync(fd, string[, position[, encoding]]) fs.read(fd, buffer, offset, length, position, callback) fs.readSync(fd, buffer, offset, length, position) - 关闭文件 fs.close(fd,callback) fs.closeSync(fd); - 简单文件读取和写入 fs.writeFile(file, data[, options], callback) fs.writeFileSync(file, data[, options]) fs.readFile(path[, options], callback) fs.readFileSync(path[, options]) - 流式文件读取和写入 - 流式读取和写入适用于一些比较大的文件 fs.createWriteStream(path[, options]) fs.createReadStream(path[, options]) 单线程 请求 //瓶颈 客户端 服务器 IO 数据库 响应 hello.js文件，第一个实例 var http = require("http"); http.createServer(function(request,response){//创建服务器 response.writeHead(200,{'Content-Type':'text/plain'}); response.end('Hello World'); }).listen(8888);//监听端口 console.log('Server running at http://127.0.0.1:8888/'); ------ hello.js console.log("hello node") //外部暴露属性、变量或方法,exports外部才能看见 //module.exports == exports是一样的 var x = 1; exports.x = "wo shi x" console.log(x) exports.add = function f(a,b) { return a+b } hello1.js /*模块化，无模块化不好复用*/ //在node中，通过require()函数引入外部的模块，路径必须以.或..开头 //模块分为：核心模块和文件模块 var md = require("./hello.js")//文件模块 var fs = require("fs");//核心模块 var math = require("math"); console.log(md) console.log(md.add(1,3)) console.log(fs) console.log(math.add(1,5)) hello2.js //node中，全局对象global,他对作用网页window类似 var a =10 console.log(a) //node在模块中执行的代码都是在函数中的(5参数)如下： /* console.log(arguments.callee + "") function (exports, require, module, __filename, __dirname) { //node中，全局对象global,他对作用网页window类似 var a =10 console.log(arguments.callee + "") }*/ console.log(module.exports == exports) console.log(__filename)//当前模块路径 console.log(__dirname)//当前模块文件夹路径 hello3.js /* module.exports.name = '孙悟空' module.exports.age = 22 module.exports.address = function () { console.log('我是猪八戒') }*/ module.exports = { name:'孙悟空', age:22, address:function () { console.log('八戒') } } hello4.js var hello3 = require("./hello3"); console.log(hello3.name) console.log(hello3.age) console.log(hello3.address()) { "name": "node1", "version": "0.0.1", "dependencies": { "math": "^0.0.3", "vue-cli": "^2.9.6", "express": "^4.16.3" } } //包结构 // package.json 描述文件 必须的 //dependencies //依赖 //description //描述 //devDependencies //开发依赖 //homepage主页 //license协议 //main主文件 //maintainers主要构件者 //name包名 //repository仓库 //version命令版本 //就像包的简历 // bin 可执行 可有可无 // lib js文件 // doc 文档 // test 测试 //模块放入文件夹中、要有package.json //json中不能写注释 //NPM包管理（Node Package Manager、发布、安装、自动检查所对应依赖。 //安装npm时、安装位置文件夹不能大写 //package.json包中添加依赖，是因为我们上传github时不会上传依赖、 也是方便查看我们项目中的相关依赖 //npm install -g cnpm --registry=https://registry.npm.taobao.org //!操作npm时，进入项目目录中，在idea、Termainal命令行中操作！！！ /* * Buffer缓存区 * 跟数组相似，数组中不能存二进制，而buffer专门存的是二进制数据 * 使用buffer不需要引入模块，内置可直接使用 * buffer中构造函数不推荐用 * buffer中的一个元素，占用内存的一个字节 * buffer的大小一旦确定，则不能修改，buffer是对底层内存的直接操作 * */ var str = "Hello World"; var buf = Buffer.from(str) console.log(buf) var buf2 = Buffer.alloc(10);//创建一个10个字节的buffer buf2[0] = 88;//索引来操作元素 buf2[1] = 255; buf2[2] = 0xaa; buf2[3] = 556 console.log(buf2[2].toString(12))//tostring为十六进制 var buf3 = Buffer.allocUnsafe(10)//只分配空间，不清数据、与alloc不同 console.log(buf3) for (var i=0;i<buf2.length;i++){ console.log(buf2[i]) } /*同步文件操作 * r：只读的、w：可写的 * 打开文件、读写、关闭文件 * */ var fs = require('fs'); var fd = fs.openSync("hello.txt","w")//打开 console.log(fs) console.log(fd)//显示是否打开了 fs.writeSync(fd,"天气好啊~~")//写入 fs.closeSync(fd) /*异步文件操作 * r：只读的、w：可写的 * 打开文件、读写、关闭文件 * */ var fs = require('fs'); fs.open("hello2.txt","w",function (err,fd) {//两个参数err、fdr if (!err){//是否出错 console.log(fd) fs.write(fd,"文件异步操作!",function (err) { if(!err){ console.log("写入成功") } fs.close(fd,function (err) { if (!err){ console.log("文件已关闭") } }) }) } else{ console.log(err) } console.log(arguments) })//打开 console.log("同步：先执行我") /* * 简单文件写入：也分异步和同步 * fs.writeFile(file,data[,options],callback) * fs.writeFileSync(file,data[,options]) * file 要操作的文件路径 * data 要写入的数据 * options 对写入的进行一些设置，可选的 * callback 写入完成后的回调函数 * * flog:r读、w写、a追加 * */ var fs = require("fs"); fs.writeFile("hello3.txt","我是写入的数据!",{flog:"a"},function (err) { if (!err){ console.log("写入成功") } }) //对桌面文件：写操作，需路径 /* fs.writeFile("C:\Users\AAA\Desktop\hello3.txt","我是写入的数据!",{flog:"a"},function (err) { if (!err){ console.log("写入成功") } })*/ /* * 流式文件写入：同步、异步、简单文件的写入都不适合大文件的写入 * * * */ var fs = require("fs"); //创建一个可写流 var ws=fs.createWriteStream("hello4.txt"); //可以通过监听流的open和close事件监听打开或关闭 ws.once("open",function () { console.log("流打开了") }) ws.once("close",function () { console.log("流关闭了") }) //通过ws向文件中输入内容 ws.write("通过可写流写文件"); ws.write("通过可写流写文件2"); ws.end(); /*普通文件读取*/ var fs = require("fs"); fs.readFile("hello4.txt",function (err,data) { if (!err){ fs.writeFile("hello3.txt",data,function (err) { if (!err){ console.log("写入成功") } }); } }) /* * 流式文件读取 * */ /*var fs = require("fs"); var rs = fs.createReadStream("hello4.txt");//创建一个可读流 var ws = fs.createWriteStream("hello3.txt"); rs.once("open",function () {//监听流 console.log("可读流打开了") }) rs.once("close",function () {//监听流 console.log("可读流关闭了") ws.end(); }) ws.once("open",function () {//监听流 console.log("可写流打开了") }) ws.once("close",function () {//监听流 console.log("可写流关闭了") }) //读取一个可读流中的数据，必须为可读流绑定一个data事件,data绑定完毕，他会自动开始读取数据 rs.on("data",function (data) { ws.write(data); })*/ var fs = require("fs"); var rs = fs.createReadStream("hello4.txt");//创建一个可读流 var ws = fs.createWriteStream("hello3.txt"); //pipe()可以将可读流中的内容，直接输出到可写流中 rs.pipe(ws); fs.exists(path,callback) //验证路径是否存在 fs.stat(path,callback) //获取文件信息 fs.unlink(path,callback) //删除文件 fs.readdir(path[,options],callback)//列出文件 fs.truncate(path,len,callback)//截断文件 fs.mkdir(path[,mode],callback)//创建目录 fs.rmdir(path,callback)//删除目录 fs.rename(oldPath,newPath,callback)//重命名文件和目录 fs.watchFile(filname[,options],listener)//监视文件更改写入