node基礎知識點

路過的朋友，可以點個贊，關注一下~~~

1.node中的部分變數

1.1 global 全域性變數

在node中有一個全域性變數，globar，裡面掛載了很多的方法，在使用的時候不需要加字首，便可直接使用

例如：

• __dirname：獲取目錄的名字
• __filename: 獲取檔案的名字

2. koa框架的使用

Koa 是一個新的 web 框架。 通過利用async函式，Koa 幫你丟棄回撥函式，並有力地增強錯誤處理。 Koa 並沒有捆綁任何中介軟體， 而是提供了一套優雅的方法，幫助您快速而愉快地編寫服務端應用程式。

koa中主要是中介軟體：洋蔥模型 原理：dispatch

，compose

koa腳手架的安裝流程

• 1 安裝koa-generator

$ npm install -g koa-generator

• 2 使用koa-generator生成koa2專案

$ koa2 -e project(專案名稱) （-e 代表使用模板引擎ejs | -a 代表art模板 ）

參考檔案

• koa官方檔案

2.1 koa開闢一個簡單的服務

安裝：

npm i koa

建立一個服務

2.2 koa-router 路由

安裝

npm i koa-router

配置

let router = require("koa-router")(); //引入router並進行例項化

//啟動路由 app.use(router.routes()); app.use(router.allowedMethods());

示例

2.3 koa-promise 合併中介軟體

安裝

npm install koa-compose

作用

多箇中介軟體合併成單一中介軟體,方便重用和匯出

示例

2.4 koa-bodyparser 接收post提交的資料

安裝

npm i koa-bodyparser

配置

//配置Post提交資料的中介軟體 app.use(bodyparser());

或者可指定配置低的型別

app.use ( bodyparser ({ enableTypes: [ 'json','form','text' ] }) );

示例

2.5 koa-static 託管靜態資源

安裝

npm i koa-static

配置

//託管靜態資源 app.use(static(__dirname+"/public"));

示例

2.6 koa-view 載html模板檔案列入art

一般情況下：koa2----art模板 | express---ejs模板

安裝

npm i koa-views

配置

app.use( views( __dirname + '/views',{ extension: 'art' //模板字尾，可以是 art、ejs、html.... }));

示例

2.7 koa-art-template 模板引擎

安裝

npm i koa-art-template

配置

//配置模板引擎 render(app,{ root: path.join(__dirname,'views'),//模板引擎的存放的位置 extname: '.art',//模板的字尾 //判斷當前環境，若為開發環境有debug,反之不再有debug模組 debug: process.env.NODE_ENV !`` 'production' });

示例

2.8 silly-datetime 格式化時間

安裝

npm i silly-datetime

配置

return sd.format(time,"YYYY-MM-DD HH:mm:ss");

模板中的簡單使用

let sd = require("silly-datetime"); <td> time | dateFormat </td> dateFormat(value)=>{return sd.format(time,"YYYY-MM-DD HH:mm:ss")}

2.9 path 處理路徑問題

path 模組是 node 提供的，用於處理檔案路徑和目錄路徑的實用工具

安裝

npm i path

常用的幾個方法：

1. path.extname(name)
   • 返回 name 的副檔名
   • 例如：.html
2. path.join()
   • 將所有給定的 path 片段連線在一起，然後規範化生成的路徑。
   • path.join('/foo','bar','baz/asdf','quux','..'); // 返回: '/foo/bar/baz/asdf'
3. path.parse(path)

   • 法返回一個物件，其屬性表示 path 的重要元素

   • 返回的物件將具有以下屬性：

     • dir <string>
     • root <string>
     • base <string>
     • name <string>
     • ext <string>

   • 示例：

path.parse('/home/user/dir/file.txt');

// 	返回:
//       {  root: '/',//          dir: '/home/user/dir',//          base: 'file.txt',//          ext: '.txt',//          name: 'file'   }
複製程式碼

2.10 koa-session 會話，儲存內容資訊

session是一種記錄客戶狀態的機制，通常是儲存在服務端，常常用來作為使用者鑑權的機制。

安裝

npm i koa-session --save

配置

使用

設定值： ctx.session.username = "張三"; 獲取值： ctx.session.username

原始碼

let app = require("koa")();//例項化一個koa
let session = require("koa-session"); //session的操作

//配置session中介軟體
app.keys = ["some secret hurr"];
let CONFIG = {
    key: 'koa:sess',//cookie key (default is koa:sess)
    maxAge: 86400000,// cookie的有效期，預設一天
    overwrite: true,//是否可以overwrite    (預設default true)
    httpOnly: true,//cookie是否只有伺服器端可以訪問，預設true
    signed: true,//簽名預設true
    rolling: false,//在每次請求時強行設定cookie，這將重置cookie過期時間（預設：false）
    renew: false,//(boolean) renew session when session is nearly expired,
};

//使用session中間外掛
app.use(session(CONFIG,app));

app.listen(3000);
複製程式碼

2.11 koa2-ueditor 百度富文字編輯器

安裝

npm i koa2-ueditor

引入使用

const ueditor = require("koa2-ueditor")

配置富文字編輯器 主要是配置圖片的儲存位置與儲存格式

 router.all('/editor/controller',ueditor(['public',{
                "imageAllowFiles": [".png",".jpg",".jpeg"],"imagePathFormat": "/upload/ueditor/image/{yyyy}{mm}{dd}/{filename}"  // 儲存為原檔名
            }]))
複製程式碼

引入ueditor靜態檔案資源

將官網中的public資源 全部複製到自己的專案中

然後在使用富文字編輯器的地方引入專案的檔案

 <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>
複製程式碼

配置富文字編輯器的ueditor.config.js檔案

1. 配置伺服器統一介面位置

路徑即為專案中配置富文字編輯器對的位置

2. 配置富文字編輯器的導航欄

富文字編輯器為我們提供了很複雜的一套導航欄，我們可以根據需要，自行配置

//自定義工具類功能按鈕與下拉按鈕,toolbars: [["fullscreen","source","undo","redo","insertunorderedlist","insertorderedlist","link","unlink","help","attachment","simpleupload","insertimage","emotion","pagebreak","date","bold","italic","fontborder","strikethrough","underline","forecolor","justifyleft","justifycenter","justifyright","justifyjustify","paragraph","rowspacingbottom","rowspacingtop","lineheight","insertcode"]]
複製程式碼

3. 配置文字編輯器是否跟隨內容增高

使用富文字編輯器

把之前的textarea使用script標籤代替 <script id="editor" type="text/plain" style="width:600px;height:300px;"></script>

<script>

    //例項化editor富文字編輯器
    var ue = UE.getEditor('editor');
	
    //設定富文字編輯器裡面的內容
	//當需要往裡面填充內容的時候使用
    ue.addListener("ready",function(){
		ue.setContent(`我是一隻小小鳥`)
	})
</script>
複製程式碼

2.12 koa-multer 上傳檔案

安裝

npm i koa-multer

配置

使用方式

• 指定form表單的提交頭

• 獲取上傳的檔案

原始碼

let multer = require("koa-multer"); //檔案上傳

//配置檔案上
let storage = multer.diskStorage({
    //檔案儲存路徑
    destination: function(req,file,cb){
        cb(null,'public/uploads');
    },//修改檔名稱
    filename:function(req,cb){
        //以點進行分割成陣列，陣列的最後一項就是字尾名
        let fileFormat = (file.originalname).split("."); 
        
        //對檔案從新進行命名 時間加檔案字尾   
        cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]);   
    }
});

//載入檔案上傳配置
let upload = multer({storage:storage});
複製程式碼

當上傳圖片的時候，實現圖片的預覽功能

原始碼

<form action="/doAdd" method="post" enctype="multipart/form-data" >

    <input type="file" onchange="uploadImg(this)"  name="img_url" />
    <img src="" id="viewImg">

</form>

<!-- 實時顯示上傳的圖片 -->
<script>
    function uploadImg(fileDom) {
        // 獲取圖片資料物件
        let file = fileDom.files[0];
        let reader = new FileReader();
        reader.readAsDataURL(file);

        //確保檔案成功獲取，base64資料量比較大
        reader.onload = function (event) {
            let e = event || window.event;

            //獲取到img標籤
            let img = document.getElementById("viewImg");

            //設定img標籤的路徑
            img.src = e.target.result;
        }
    }
</script>
複製程式碼

2.13 分頁元件的使用

參考檔案 enter description here

引入檔案

引入jqpaginator.js檔案

前端的使用

使用art模板渲染時傳值

操作monage資料庫操作

3. express 框架的使用

Express 基於 Node.js 平臺，快速、開放、極簡的 web 開發框架

全域性安裝生成器

npm install -g express-generator

建立應用

express 專案名 express myDemo

參考檔案

• express官方檔案

3.1 mongoose資料庫的使用

安裝

npm i mongoose

配置

useUnifiedTopology: true 解決如下錯誤

useNewUrlParser:true 解決如下警告

示例

3.2 body-parser 獲取表單提交的資料

安裝

npm i body-parser

使用

const bodyParser = require('body-parser');

• （1）處理json資料

  • bodyParser.json(options)

  • app.use(bodyParser.json());

• （2）處理Buffer資料流,解析二進位制格式

  • bodyParser.raw(options)

• （3）處理文字資料,解析文字格式

  • bodyParser.text(options)

• （4）處理UTF-8的編碼的資料,解析文字格

  • bodyParser.urlencoded(options)

  • app.use(bodyParser.urlencoded({extented:false}))

示例

3.3 express-session 會話的使用

安裝

npm i express-session

配置

session()的引數options配置項主要有：

• name: 設定cookie中，儲存session的欄位名稱，預設為connect.sid
• store: session的儲存方式，預設為存放在記憶體中，我們可以自定義redis等
• genid: 生成一個新的session_id時，預設為使用uid2這個npm包
• rolling: 每個請求都重新設定一個cookie，預設為false
• resave: 即使session沒有被修改，也儲存session值，預設為true
• saveUninitialized：強制未初始化的session儲存到資料庫
• secret: 通過設定的secret字串，來計算hash值並放在cookie中，使產生的signedCookie防篡改
• cookie : 設定存放sessionid的cookie的相關選項

3.4 託管靜態資源

// 提交靜態資源 app.use(express.static('public'))

3.5 伺服器端配置跨域問題

原始碼

let express = require('express');
let app = express();

// 在後端配置，讓所有的人都可以訪問我的api介面
app.use('*',function (req,res,next) {
    // 允許哪些客戶端來訪問我
    res.setHeader("Access-Control-Allow-Origin","*");
    // 允許可以新增哪些頭，然後來訪問我
    res.setHeader("Access-Control-Allow-Headers","*");
    // res.header('Access-Control-Allow-Headers','Content-Type,Authorization');
    
    // 允許哪些方法來訪問我
    res.setHeader("Access-Control-Allow-Methods","OPTIONS,PUT,DELETE");
    // res.header('Access-Control-Allow-Methods','*');
    
    // 可以每隔半小時，來傳送一個options請求--試探請求
    res.setHeader("Access-Control-Max-Age","1800");
    
    // 請求的型別編碼
    res.header('Content-Type','application/json;charset=utf-8');
    
    // 允許客戶端攜帶憑證,處理cookie資訊，如果有，並且不對每次請求都新開一個session
    res.setHeader("Access-Control-Allow-Credentials",true);
    next();
});
複製程式碼

3.6 jsonwebtoken 生成token

安裝

npm i jsonwebtoken

引入

const jwt = require('jsonwebtoken');//引入生成token的包

使用

示例

原始碼

jwt.sign(arr,keys.secretOrkey,{ expiresIn: 3600 },(err,token) => {
    if (err) throw err;
    res.json({
        code: 1,token: "Bearer " + token     //生成格式 Bearer + token
    })
});
複製程式碼

3.7 bcrypt密碼加密

安裝

npm i bcrypt

引入

const bcrypt = require('bcrypt')//引入加密的包

密碼加密

密碼解密

完整示例

原始碼

const Mpage = require("../../model/Mpage.js");
const express = require("express");
const router = express.Router();
const jwt = require('jsonwebtoken');//引入生成token的包
const bcrypt = require('bcrypt')//引入加密的包
const keys = require("../../config/keys")//引入金鑰


//註冊介面
router.post("/register",(req,res) => {
    Mpage.findOne({ email: req.body.email }).then(user => {
        if (user) {
            return res.status(400).json("郵箱已經被註冊")
        } else {
            const newUser = new Mpage({
                name: req.body.name,email: req.body.email,password: req.body.password
            });
            //生成salt的迭代次數
            const saltRounds = 10;
            
            //生成salt並獲取hash值
            bcrypt.genSalt(saltRounds,function (err,salt) {
                bcrypt.hash(newUser.password,salt,hash) {
                    if (err) console.log(err);
                    newUser.password = hash;
                    newUser.save().then(user => res.json(
                            res.json({code: 1,msg: '註冊成功'})
                    )).catch(err => res.json(err))
                })
            })
        }
    })
})

//登入介面
router.post("/login",res) => {
    const email = req.body.email;
    const password = req.body.password;
    Mpage.findOne({ email }).then(user => {
        if (!user) { return res.status(404).json("使用者名稱不存在") }
        //密碼解密比對
        bcrypt.compare(password,user.password).then(isMatch => {
            if (isMatch) {
                const userArr = {
                    id: user.id,name: user.name,email: user.email
                };
                //生成token
                jwt.sign(userArr,token) => {
                    if (err) throw err;
                    res.json({
                        code: 1,token: "Bearer " + token
                    })
                })
            } else {
                return res.status(400).json("密碼錯誤")
            }
        })
    })
})
複製程式碼

3.8 passport 驗證token

安裝

npm i passport

引用

const passport = require('passport');

配置

• app.use(passport.initialize()); // 初始化passport
• require("./config/passport")(passport); //匯入配置檔案

passport配置檔案

許可權校驗

原始碼

1. 配置

// 配置passprot
app.use(passport.initialize());  // 初始化passport 
require("./config/passport")(passport); //匯入配置檔案
複製程式碼

2. 配置檔案

// 專門用來配置Passport  驗證jwt   配置的話，搜尋passport-jwt
const JwtStrategy = require('passport-jwt').Strategy;
const ExtractJwt = require('passport-jwt').ExtractJwt;
const keys = require('../config/keys');
const mongoose = require('mongoose');
const User = mongoose.model('User');    //把User的model匯入

let opts = {};
opts.jwtFromRequest = ExtractJwt.fromAuthHeaderAsBearerToken();
opts.secretOrKey = keys.secretOrkey;    //祕鑰，必須與生成token時的祕鑰一直

//引數為在主函式中傳遞過來的
module.exports = passport => {
    //進行token許可權的校驗，將token中的資訊解析，放在jwt_payload中
    passport.use(new JwtStrategy(opts,function (jwt_payload,done) {
        //從資料庫裡找該使用者的資訊，並返回
        User.findById(jwt_payload.id).then(user => {
            if (user) {
                return done(null,user) //返回使用者資訊
            }
            return done(null,false)
        }).catch(err => console.log(err))
    }));
}
複製程式碼

3. 使用

router.get("/find/:id",passport.authenticate("jwt",{ session: false }),res) => {
    //獲取生成token的使用者資訊
    let tokenData = req.user;
    
    User.findOne({ _id: req.params.id }).then(information => {
        if (!information) {
            return res.status(404).json('沒有查到該使用者資訊')
        }
        res.json(information)
    })
})
複製程式碼

3.9 分頁，排序，模糊查詢

原始碼

// 獲取所有的新聞資料,
// 分頁，排序，模糊查詢，

router.get("/list",res)=>{
    
    //獲取要查詢的內容
    let attr = req.query.title;
    //獲取當前頁，預設第一頁
    let currentPage = parseInt(req.query.currentPage ) || 1;
    //獲取每頁的大小，預設每頁五條資料
    let pageSize = parseInt(req.query.pageSize)|| 5;
    //分頁時，每次擷取的數量，1-5  6-10
    let slipNum=(currentPage-1)*pageSize;
    //排序的欄位，按照那個欄位進行排序
    let sort_attr = req.query.sort_attr || "";
    //排序的規則，正序，倒序，預設正序
    let sort_value = req.query.sort_value || -1;
    
    //判斷查詢的資料是否存在
    let attrs = {};
    if(attr){
        //根據查詢資料，設定模糊查詢
        attrs.title = new RegExp(attr)
    }
    
    //判斷排序規則是否存在，
    let sort = {};
    if(sort_attr){
        sort = {[sort_attr]:sort_value};
    }
    
    //根據上述條件獲取到資訊列表
    news.find(attrs).skip(slipNum).limit(pageSize).sort(sort).then(newss=>{
        if(!newss){
            return res.status(404).json("沒有任何內容")
        }
        //根據條件獲取資訊列表的總條數
        news.count(attrs).then((data) => {
            res.json({  //返回資訊列表與當前的總頁數
                count:data,news:newss
            })
        })
    })
})
複製程式碼

4. mongoDB資料庫的簡單使用

5. mongoose的使用步驟

安裝

npm i mongoose

步驟：

• 1，安裝並引入 const mongoose = require("mongoose")
• 2，建立連線 mongoose.connect("mongodb://127.0.0.1/myapp") 如果在資料庫沒有myapp這個資料庫，連線時，並不會自動建立這個資料庫 ，使用 useNewUrlParser來解決mongoose中的警告問題 mongoose.connect('mongodb://127.0.0.1:27017/djdb',{ useNewUrlParser: true }).then()
• 3，定義一個Schema，它需要和你最終在資料庫中建立的欄位保持一樣 Schema建立完後，也不會在資料庫自動建立這個資料庫
• 4，根據Schema建立model
• 5，例項化model
• 6，通過save儲存資料到資料庫

6. babel E6->E5

安裝babel

npm i @babel/cli npm i @babel/core npm i @babel/preset-env

配置輸出位置 packjson檔案

配置 .babelrc檔案

注意

@babel/cli  解析core
@babel/core   核心碼
@babel/preset-env 將es6--->es5
複製程式碼