node基础知识点

1,407

node基础知识点

路过的朋友,可以点个赞,关注一下~~~

1.node中的部分变量

1.1 global 全局变量

在node中有一个全局变量,globar,里面挂载了很多的方法,在使用的时候不需要加前缀,便可直接使用

例如:

  • __dirname:获取目录的名字
  • __filename: 获取文件的名字

2. koa框架的使用

Koa 是一个新的 web 框架。 通过利用async函数,Koa 帮你丢弃回调函数,并有力地增强错误处理。 Koa 并没有捆绑任何中间件, 而是提供了一套优雅的方法,帮助您快速而愉快地编写服务端应用程序。

koa中主要是中间件:洋葱模型 原理:dispatchcompose

koa脚手架的安装流程

  • 1 安装koa-generator

$ npm install -g koa-generator

  • 2 使用koa-generator生成koa2项目

$ koa2 -e project(项目名称) (-e 代表使用模板引擎ejs | -a 代表art模板 )

参考文档

2.1 koa开辟一个简单的服务

安装

npm i koa

创建一个服务 enter description here

2.2 koa-router 路由

安装

npm i koa-router

配置

let router = require("koa-router")(); //引入router并进行实例化

//启动路由 app.use(router.routes()); app.use(router.allowedMethods());

示例

enter description here

2.3 koa-promise 合并中间件

安装

npm install koa-compose

作用

多个中间件合并成单一中间件,方便重用和导出

示例 enter description here

2.4 koa-bodyparser 接收post提交的数据

安装

npm i koa-bodyparser

配置

//配置Post提交数据的中间件 app.use(bodyparser());

或者可指定配置低的类型

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

示例 enter description here

2.5 koa-static 托管静态资源

安装

npm i koa-static

配置

//托管静态资源 app.use(static(__dirname+"/public"));

示例 enter description here

2.6 koa-view 载html模板文件列入art

一般情况下:koa2----art模板 | express---ejs模板

安装

npm i koa-views

配置

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

示例

enter description here

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' });

示例 enter description here

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

配置 enter description here

使用

设置值: 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资源 全部复制到自己的项目中 enter description here 然后在使用富文本编辑器的地方引入项目的文件

 <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. 配置服务器统一接口位置

路径即为项目中配置富文本编辑器对的位置 enter description here enter description here

  1. 配置富文本编辑器的导航栏

富文本编辑器为我们提供了很复杂的一套导航栏,我们可以根据需要,自行配置

//自定义工具类功能按钮与下拉按钮
        ,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"]]
  1. 配置文本编辑器是否跟随内容增高

enter description here

使用富文本编辑器

把之前的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

配置 enter description here

使用方式

  • 指定form表单的提交头 enter description here
  • 获取上传的文件 enter description here

源码

let multer = require("koa-multer"); //文件上传

//配置文件上
let storage = multer.diskStorage({
    //文件保存路径
    destination: function(req,file,cb){
        cb(null,'public/uploads');
    },

    //修改文件名称
    filename:function(req,file,cb){
        //以点进行分割成数组,数组的最后一项就是后缀名
        let fileFormat = (file.originalname).split("."); 
        
        //对文件从新进行命名 时间加文件后缀   
        cb(null, Date.now() + "." + fileFormat[fileFormat.length - 1]);   
    }
});

//加载文件上传配置
let upload = multer({storage:storage});

当上传图片的时候,实现图片的预览功能

enter description here

源码

<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文件

前端的使用 enter description here

使用art模板渲染时传值

enter description here

操作monage数据库操作 enter description here

3. express 框架的使用

Express 基于 Node.js 平台,快速、开放、极简的 web 开发框架

全局安装生成器

npm install -g express-generator

创建应用

express 项目名 express myDemo

参考文档

3.1 mongoose数据库的使用

安装

npm i mongoose

配置

useUnifiedTopology: true 解决如下错误 enter description here

useNewUrlParser:true 解决如下警告 enter description here

示例 enter description here

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}))

示例 enter description here

3.3 express-session 会话的使用

安装

npm i express-session

配置 enter description here

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 服务器端配置跨域问题

enter description here

源码

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的包

使用 enter description here

示例 enter description here

源码

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')//引入加密的包

密码加密 enter description here

密码解密 enter description here

完整示例 enter description here

源码

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, function (err, 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", (req, 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, keys.secretOrkey, { expiresIn: 3600 }, (err, 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配置文件 enter description here

权限校验 enter description here

源码

  1. 配置
// 配置passprot
app.use(passport.initialize());  // 初始化passport 
require("./config/passport")(passport); //导入配置文件
  1. 配置文件
// 专门用来配置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))
    }));
}
  1. 使用
router.get("/find/:id", passport.authenticate("jwt", { session: false }), (req, 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 分页,排序,模糊查询

enter description here

源码

// 获取所有的新闻数据,
// 分页,排序,模糊查询,

router.get("/list",passport.authenticate("jwt", { session: false }),(req,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保存数据到数据库

enter description here

6. babel E6->E5

安装babel

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

配置输出位置 packjson文件

enter description here

配置 .babelrc文件 enter description here

注意

@babel/cli  解析core
@babel/core   核心码
@babel/preset-env 将es6--->es5