Node-Vue

 

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:\work\jdk\jdk1.7.0_75/bin;
%CATALINA_HOME%/bin;
C:\work\soft\tools\AppServ\Apache24\bin;
C:\work\soft\tools\AppServ\php5;
C:\Users\lilichao\AppData\Local\Programs\Fiddler;
C:\work\environment\Egret\Egret Wing 3\bin;
C:\Users\lilichao\AppData\Roaming\npm;
C:\Program Files\MongoDB\Server\3.2\bin;
C:\Users\lilichao\Desktop\hello

- 當咱們在命令行窗口打開一個文件，或調用一個程序時，
系統會首先在當前目錄下尋找文件程序，若是找到了則直接打開
若是沒有找到則會依次到環境變量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)//監視文件更改寫入